¿Qué es el HTML semántico y por qué debería usarlo?

Un principio importante del movimiento de estándares web que es responsable de la industria que tenemos hoy en día es la idea de utilizar elementos HTML para lo que son en lugar de cómo pueden aparecer en el navegador de forma predeterminada. Esto se conoce como el uso de HTML semántico.

¿Qué es el HTML semántico?

El HTML semántico o el marcado semántico es HTML que introduce un significado a la página web en lugar de solo a la presentación. Por ejemplo, un

etiqueta indica que el texto adjunto es un párrafo.

Esto es tanto semántico como de presentación, porque las personas saben qué son los párrafos y los navegadores saben cómo mostrarlos.

En la otra cara de esta ecuación, etiquetas como y no son semánticos, porque definen solo la apariencia del texto (negrita o cursiva) y no proporcionan ningún significado adicional al marcado.

Ejemplos de etiquetas HTML semánticas incluyen las etiquetas de encabezado

mediante
,
, y . Hay muchas más etiquetas HTML semánticas que se pueden usar a medida que construye un sitio web compatible con los estándares. Por qué debería preocuparse por la semántica El beneficio de escribir HTML semántico se deriva de lo que debería ser el objetivo principal de cualquier página web: el deseo de comunicarse. Al agregar etiquetas semánticas a su documento, proporciona información adicional sobre ese documento, lo que ayuda en la comunicación. Específicamente, las etiquetas semánticas dejan claro para el navegador el significado de una página y su contenido. Esa claridad también se comunica con los motores de búsqueda, asegurando que las páginas correctas se entreguen para las consultas correctas. Las etiquetas HTML semánticas proporcionan información sobre el contenido de esas etiquetas que va más allá de cómo se ven en una página. Texto que está encerrado en el La etiqueta es reconocida inmediatamente por el navegador como algún tipo de lenguaje de codificación. En lugar de intentar representar ese código, el navegador entiende que está utilizando ese texto como un ejemplo del código para los fines de un artículo o tutorial en línea de algún tipo. El uso de etiquetas semánticas le brinda muchos más ganchos para estilizar su contenido. Tal vez hoy prefiera que sus muestras de código se muestren en el estilo de navegador predeterminado, pero mañana, desea resaltarlas con un color de fondo gris, y luego desea definir la familia de fuentes mono-espaciada precisa o la pila de fuentes a utilizar para sus muestras Puede hacer todas estas cosas fácilmente mediante el uso de marcado semántico y CSS inteligentemente aplicado. Utilizar etiquetas semánticas correctamente Cuando desee utilizar etiquetas semánticas para transmitir un significado en lugar de propósitos de presentación, debe tener cuidado de no usarlas de manera incorrecta simplemente por sus propiedades de visualización comunes. Algunas de las etiquetas semánticas más mal utilizadas incluyen: blockquote - Algunas personas usan el etiqueta para sangrar texto que no es una cita. Esto se debe a que las blockquotes están sangradas por defecto. Si simplemente desea obtener los beneficios de la sangría, pero el texto no es una cita en bloque, use márgenes CSS en su lugar. p - Algunos editores web utilizan (un espacio que no se rompe contenido en un paragraoph) para agregar espacio extra entre los elementos de la página, en lugar de definir párrafos reales para el texto de esa página. Al igual que con el ejemplo de sangría mencionado anteriormente, debe usar el margen o la propiedad de estilo de relleno para agregar espacio. ul - Como blockquote, adjuntando texto dentro de unetiqueta sangría ese texto en la mayoría de los navegadores. Esto es tanto HTML semánticamente incorrecto como inválido, ya que sololas etiquetas son válidas dentro de unetiqueta. Nuevamente, use el margen o el estilo de relleno para sangrar el texto. h1 – h6: las etiquetas de encabezado se pueden usar para hacer que las fuentes sean más grandes y en negrita, pero si el texto no es un encabezado, no debe estar dentro de una etiqueta de encabezado. Utilice las propiedades CSS de peso de fuente y tamaño de fuente si desea cambiar el tamaño o peso de texto específico en su página … Al usar etiquetas HTML que tienen significado, creas páginas que imparten más información que simplemente rodeando todo con etiquetas ¿Qué etiquetas HTML son semánticas? Si bien casi todas las etiquetas HTML4 y todas las etiquetas HTML5 tienen un significado semántico, algunas etiquetas son principalmente de naturaleza semántica. Por ejemplo, HTML5 ha redefinido el significado de la y Las etiquetas deben ser semánticas. los la etiqueta no transmite una importancia adicional, sino el texto que normalmente se muestra en negrita. los la etiqueta tampoco transmite importancia o énfasis extra, sino que define el texto que normalmente se representa en cursiva. Etiquetas HTML semánticas Abreviatura Acrónimo Cita larga Definición Dirección del autor (es) del documento. Citación Referencia de código Texto teletipo División lógica Contenedor genérico de estilo en línea Texto borrado Texto insertado Énfasis Fuerte énfasis Titular de primer nivel Titular de segundo nivel Titular de tercer nivel Título de cuarto nivel Titular de quinto nivel Titular de sexto nivel Ruptura temática Texto a ingresar por el usuario Texto pre-formateado Cita corta en linea Salida de muestra Subíndice Sobrescrito Texto variable o definido por el usuario.