Un principio importante en el diseño web es la idea de utilizar elementos HTML para indicar qué son realmente, en lugar de cómo pueden aparecer en el navegador de forma predeterminada. Esto se conoce como uso de HTML semántico.

¿Qué es HTML semántico?

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

 La etiqueta indica que el texto adjunto es un párrafo. Esto es tanto semántico como de presentación porque la gente sabe qué son los párrafos y los navegadores saben cómo mostrarlos.

En el otro lado de esta ecuación, etiquetas como  y  no son semánticas. Solo definen cómo debe verse el texto (negrita o cursiva) y no proporcionan ningún significado adicional al marcado.

Algunos ejemplos de etiquetas HTML semánticas incluyen:

• Etiquetas de encabezado

   mediante

Hay muchas más etiquetas HTML semánticas para usar al crear un sitio web compatible con los estándares.

Por qué debería preocuparse por la semántica

El beneficio de escribir HTML semántico proviene 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 al navegador cuál es el significado de una página y su contenido. Esa claridad también se comunica con los motores de búsqueda, lo que garantiza que se entreguen las páginas correctas para las consultas correctas.

Las etiquetas HTML semánticas proporcionan información sobre el contenido de esas etiquetas que va más allá de su apariencia en una página. Texto incluido en el  El navegador reconoce inmediatamente la etiqueta 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 ejemplo del código para los propósitos de un artículo o tutorial en línea.

El uso de etiquetas semánticas también le brinda muchos más ganchos para diseñar su contenido. Quizás hoy prefiera que sus ejemplos de código se muestren en el estilo de navegador predeterminado, pero mañana, es posible que desee llamarlos con un color de fondo gris; más adelante, es posible que desee definir la familia de fuentes monoespaciada precisa o pila de fuentes para utilizar en sus muestras. Puede hacer todas estas cosas fácilmente mediante el uso de marcado semántico y CSS aplicado de forma inteligente.

Usar etiquetas semánticas correctamente

Cuando use etiquetas semánticas para transmitir significado en lugar de con fines de presentación, tenga cuidado de no usarlas incorrectamente simplemente por sus propiedades de visualización comunes. Algunas de las etiquetas semánticas más comúnmente mal utilizadas incluyen:

• blockquote - Algunas personas usan el etiqueta para sangrar el texto que no es una cita. Esto se debe a que las citas en bloque están sangradas de forma predeterminada. Si simplemente desea aplicar una sangría a un texto que no es una cita en bloque, use márgenes CSS en su lugar.
• pag - Algunos editores web utilizan (un espacio sin divisiones contenido en un párrafo) para agregar espacio adicional entre los elementos de la página, en lugar de definir párrafos reales para el texto de esa página. Como en el ejemplo anterior, debe usar la propiedad de estilo margin o padding en su lugar para agregar espacio.
• ul - Al igual que con

  , delimitando texto dentro de un

   la etiqueta sangra ese texto en la mayoría de los navegadores. Esto es HTML semánticamente incorrecto y no válido, porque solo
  •  las etiquetas son válidas dentro de un
    etiqueta. Nuevamente, use el estilo de margen o relleno para sangrar el texto.
  • h1, h2, h3, h4, h5 y h6 - Puede usar etiquetas de encabezado para hacer las fuentes más grandes y en negrita, pero si el texto no es un encabezado, use las propiedades CSS de tamaño de fuente y peso de fuente en su lugar.

  Al usar etiquetas HTML que tienen significado, crea páginas que imparten más información que aquellas que simplemente rodean todo con

   etiquetas.

  ¿Qué etiquetas HTML son semánticas?

  Aunque casi todas las etiquetas HTML4 y todos los HTML5 las etiquetas tienen significados semánticos, algunas etiquetas son ante todo semántico.

  Por ejemplo, HTML5 ha redefinido el significado de la  y  etiquetas semánticas. La  la etiqueta no transmite una importancia adicional; más bien, el texto etiquetado normalmente se muestra en negrita. Asimismo, el  la etiqueta no transmite mayor importancia o énfasis; más bien, define texto que normalmente se presenta en cursiva.

  Etiquetas HTML semánticas

  Abreviatura
  Acrónimo
  Cotización larga
  Definición
  Dirección del autor (es) del documento
  Citación
  Referencia de código
  Teletipo de texto
  División lógica
  Contenedor genérico de estilo en línea
  Texto eliminado
  Texto insertado
  Énfasis
  Fuerte énfasis
  Título de primer nivel
  Título de segundo nivel
  Título de tercer nivel
  Título de cuarto nivel
  Título de quinto nivel
  Título de sexto nivel
  	Pausa temática
  Texto a ingresar por el usuario
  Texto preformateado
  Presupuesto breve en línea
  Salida de muestra
  Subíndice
  Sobrescrito
  Texto variable o definido por el usuario