HTML Semántico: Guía de supervivencia
Tags: a11y, html, accesibility, frontend
Published: 2024-04-09 07:17:11

[English version](https://dev.to/miasalazar/semantic-html-survival-guide-6ca)

#¿Qué es el HTML Semántico?
El HTML semántico hace referencia a etiquetas de este lenguaje de marcado que transmiten significado por sí mismas, dando mayor información a los navegadores sobre lo que contienen y sobre su funcionalidad. Estas etiquetas permiten estructurar el contenido de forma más organizada agrupando los elementos de forma semántica.

#Ventajas del HTML Semántico

- Mejora el posicionamiento SEO: los motores de búsqueda entienden mejor el contenido y eso mejora el posicionamiento.
- Código más mantenible y reusable: Al estar más organizado y ser más fácil de leer, es más sencillo volver al código, comprenderlo y poder reutilizarlo.
- Permite una mayor legibilidad: Cada etiqueta tiene un significado por sí mismo, por lo que facilita el trabajo de entender la función de cada sección.
- Mejora la accesibilidad: Usar este tipo de etiquetas permite a los lectores de pantalla comprender el contenido.
- Información más ordenada: El HTML semántico posibilita organizar mejor la información ya que tiene diversas etiquetas que aportan jerarquía.

#Tipos de etiquetas semánticas
Podemos dividirlas en tres tipos: para estructura, para texto y para contenidos específicos. 

##Para estructura
Estas etiquetas se introdujeron en HTML4 y comunican la disposición de los elementos en la página, creando una jerarquía y un espacio organizado en secciones semánticas. Las más usadas y principales son las siguientes:

![Etiquetas de HTML5 estructurando un documento](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1hu73xessjm2tzioxfc.PNG)

####article
Define información independiente y que tiene sentido por sí misma sin necesidad de los demás datos de la página.

####aside
Delimita contenido con menor importancia. Suele colocarse como barra lateral y está relacionada de forma indirecta con la información restante.

####footer
Se encuentra en la parte inferior de una página o de una sección. Puede haber varios en un solo documento y suelen contener información sobre: autoría, copyright, información de contacto, links relacionados...

####header
Se utiliza para definir contenido introductorio. Suelen tener etiquetas h1, logos, o información de autoría. Puede haber varios headers en un solo documento, pero no pueden estar dentro de `footer`, `address` o dentro de otro `header`.

####main
Especifica el contenido principal de una página. No puede haber más de uno en un documento, y no puede ser hijo de las siguientes etiquetas: `article`, `aside`, `footer`, `header` y `nav`.

####nav
Sirven para indicar un conjunto de links. No obstante, no todos los enlaces deben ir dentro de un `nav`, este se reserva para bloques principales de navegación, como los menús.

####section
Se emplean para agrupar contenidos de temas semejantes. Al contrario que las `article`, forman parte del contexto en el que se hallan.

##Para texto
Estas etiquetas, aparte de tener ciertos estilos por defecto en los navegadores, transmiten semántica y jerarquía entre los textos.

####a
Son enlaces a otras páginas o a otra posición de la misma página. Por defecto, si el link no ha sido visitado es de color azul, si está activo rojo, y si ya se ha accedido a él, morado.

####blockquote y q
Suponen citas de varias líneas, `blockquote`, o de una solo, `q`. Por defecto, están indentadas.

####code
Definen un trozo de código. A nivel de estilos, el navegador mostrará este bloque en una fuente monoespacio.

####h1-h6
Las etiquetas de la `h1` a la `h6` son titulares, siendo la 1 de mayor de importancia y la 6 la de menor. La primera, `h1`, marca el encabezado de un documento y solo puede haber una por página. Asimismo, no podemos emplazar una `h3` si no hay un `h1` y un `h2` en el documento.

####mark
Es texto subrayado.

####ol y ul
Suponen listas ordenadas y desordenadas respectivamente. Cada elemento de la lista debe ser una etiqueta `li`. Las ordenadas, aparecen con un número a su izquierda en orden ascendente, aunque con CSS se le puede indicar que se organicen usando letras (a,b,c,...), números romanos... 

Por su parte, las desordenadas saldrán con un círculo negro por dececto en el margen izquierdo, pudiendo modificarse ese círculo por cuadrados, flechas...

####p
Se usan para párrafos. Los navegadores añaden un salto de línea antes y después de ellos.

![Ejemplos de etiquetas y sus estilos por defecto en un navegador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfo3z9krtj85w931gje9.PNG)

##Para contenidos específicos
Estas etiquetas sirven para indicar que contienen un contenido en específico en su interior.

####abbr
Empleados para palabras abreviadas. En su `title` muestran lo que significa la abreviatura o las siglas.

![<abbr title="Taylor Swift">TS</abbr>](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrfy2fjpbnjo4awp2pfq.PNG)

####address
Se utilizan para marcar información de contacto como emails, teléfonos, dirección física... Usualmente este elemento aparece en cursiva.

####audio y video
Sirven para añadir una pista de audio o un vídeo.

####figure, figcaption, img
Las `figure` contienen imágenes, ilustraciones... en su interior en una etiqueta `img`. `figcaption` supone el pie de la imagen en cuestión.

![Un figure con una img dentro y un figcaption](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6spggs55kw7uo1tlfdh.PNG)

####table
Definen tablas, van acompañadas de otras etiquetas como `tr`, `th` y `td`, entre otras, para indicar las filas, la cabecera de la columna y las celdas.

####time
Estas etiquetas constituyen una fecha.

##¿Qué etiqueta uso?
Ante la duda, esta diagrama de decisiones de [HTML5 Doctor](https://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf) es una herramienta muy útil. También existe esta [versión en código que es más accesible](https://codepen.io/geoffyuen/pen/DeEaPj).

![HTML5 Flowchart de HTML5 Doctor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e855zchx8dvgd61zsz70.PNG)

#Recomendaciones
- No emplees las etiquetas por los estilos que traen por defecto. Si deseas tener un texto grande, usa CSS, no un `h1` a menos que ese texto grande sea el título.
- Crear una estructura con sentido y jerarquía.
- No saltes de etiqueta `h`, una `h2` solamente debe existir si ya hay una `h1` en el documento.
- Si solamente necesitas agrupar elementos y cambiar sus estilos, por ejemplo, añadir un `flex`, y no tiene significado alguno esa asociación, usa un `div`.
- Las etiquetas de texto, o las de contenido específico, no deben ser usadas como contenedores.