Cómo escribir HTML semántico

Un <div> para etiquetarlos a todos...

Este evento cambió la tecnología web para siempre. La web ya no era una cuestión de contenido, también requería una capa de presentación. En ese momento, se lanzó HTML 4.0 y trajo muchas etiquetas nuevas, muchas etiquetas para muchos usos semánticos. Pero como siempre, había entre esas dos manzanas de la discordia, <span> y <div> .

Abusaron de las etiquetas <div> y <span> . Casi todos los cuerpos de los documentos en la web eran un montón de etiquetas <div> . La web se convirtió rápidamente en un lugar, lleno de hermosos sitios web pero con pocos documentos HTML semánticos.

 < html > < head > < title > Non-semantic HTML </ title > </ head > < body > < div id = "container" > < div id = "header" > < div id = "header-content" > </ div > </ div > < div id = "section" > Section content </ div > < div id = "footer" > </ div > </ div > </ body > </ html >

Bueno, ¿qué hay de malo en eso?

Por ejemplo, un encabezado debe estar etiquetado con una etiqueta que indique que es un encabezado, sin importar si se va a leer, mostrar o analizar. Piense si esto es posible con un documento lleno de etiquetas genéricas como <div> o <span> . Imaginemos una máquina de lectura para personas con discapacidad visual. ¿Qué pasa si en lugar de usar una etiqueta semánticamente correcta para un párrafo como <p> usamos un <div> en su lugar? La máquina lectora nunca comprenderá que debe hacer una pausa antes y después de la lectura del párrafo. Por lo tanto, la experiencia de usuario para esa persona con discapacidad visual será deficiente. Por otro lado, ¿qué pasa si queremos que nuestra página se posicione bien en los motores de búsqueda?

...pero entonces, ¿cómo escribir HTML semántico?

La respuesta es bastante simple, siga los estándares. HTML 4.0 es un gran lenguaje de marcado, tanto que lo fue durante 17 años antes de que apareciera HTML5. Pero si hay algo que HTML5 hace mejor que HTML 4.0 es ser más semántico. Esto no significa que la versión 4.0 no fuera semántica, sino que HTML5 llenó la mayoría de los vacíos semánticos que tenía. HTML5 trajo consigo un nuevo conjunto de etiquetas semánticas, algunas de ellas especialmente pensadas para evitar el uso innecesario de <div> y <span> .

El Consorcio World Wide Web recomienda etiquetar cada elemento según su contenido. Por ejemplo, si va a usar <div class=header> para agrupar la sección superior del documento, ¿por qué no usar la etiqueta semántica <header> en su lugar? Es mucho más legible, accesible y comprensible. Entonces, si desea escribir HTML5 más semántico, busque la documentación oficial y consulte los más de 100 elementos semánticos disponibles.

No dividas, mejor crea secciones.

En HTML 4.0 era muy común crear muchos divs de acuerdo a nuestro diseño gráfico, no a nuestro contenido. El resultado fue un montón confuso de etiquetas <div> sin relevancia semántica. Desde HTML5 tenemos la etiqueta <section> , que es muy útil para dividir nuestro contenido principal en grupos de contenido más pequeños.

Los elementos <section> se pueden anidar y es importante señalar que siempre debe tener un elemento de encabezado para estar bien formado.

 < html > < head > < title > Document </ title > </ head > < body > < section id = "container" > < section id = "header" > < section id = "header-content" > </ section > </ section > < section id = "section" > Section content </ section > < section id = "footer" > </ section > </ section > </ body > </ html >

¿Contenido principal?

Autónomo

Si encuentra en su documento alguna sección que funciona perfectamente como una pieza completa de información y puede ser reemplazada sin afectar la integridad de su documento, tiene un <article> . Las publicaciones y las noticias son excelentes ejemplos de <artículo> . Puede generarlos e intercambiarlos a voluntad, pero no afectará la estructura del documento.

 < html > < head > < title > Document </ title > </ head > < body > < section > < section id = "header" > < section id = "header-content" > </ section > </ section > < article > < h1 > Article heading </ h1 > < p > article content </ p > </ article > < section id = "footer" > </ section > </ section > </ body > </ html >

<sección> y <artículo> son compañeros de trabajo, no parientes.

Es común al principio cuando intenta usar HTML semántico para luchar con la decisión sobre cómo anidar <section> y <article> . ¿Quien es el padre? ¿Quién es el niño? Respuesta corta, ninguno de ellos. Estos elementos no fueron concebidos para ser parte de una jerarquía, de hecho, están hechos para trabajar juntos.

 < html > < head > < title > Document </ title > </ head > < body > < section > < section id = "header" > < section id = "header-content" > </ section > </ section > < article > < h1 > Article heading </ h1 > < section > < h2 > Content heading </ h2 > < p > article content </ p > </ section > </ article > < section id = "footer" > </ section > </ section > </ body > </ html >

Introducción formal de contenido

Es normal tener secciones que introduzcan el siguiente contenido, quizás a través de un conjunto de encabezados o una imagen. Para estos casos, podemos usar <header> para agrupar todos los elementos que persiguen ese propósito. Puede tener varios encabezados en su documento, pero solo hay una condición, nunca los use dentro de otro elemento <header> , <footer> o <address> .

 < html > < head > < title > Document </ title > </ head > < body > < header > < section id = "header-content" > </ section > </ header > < section > < article > < h1 > Article heading </ h1 > < section > < h2 > Content heading </ h2 > < p > article content </ p > </ section > </ article > < section id = "footer" > </ section > </ section > </ body > </ html >

Contenido de cierre formal

¡Si hay una forma de abrir, debería ser una forma de cerrar! ¡Sí! ¡Tienes razón! Si desea etiquetar elementos relevantes al final de una sección, puede usar <footer> . Créditos, derechos de autor, mapas del sitio, barras de navegación secundarias, etc. Todos estos tipos de elementos se pueden agrupar dentro de una etiqueta <footer> .

 < html > < head > < title > Document </ title > </ head > < body > < header > < section id = "header-content" > </ section > </ header > < section > < article > < h1 > Article heading </ h1 > < section > < h2 > Content heading </ h2 > < p > article content </ p > </ section > </ article > </ section > < footer > </ footer > </ body > </ html >

¿Qué pasa con los controles?

Es bien sabido que una de las ventajas que tiene HTML es permitir la navegación entre documentos. Es por eso que siempre estamos agrupando enlaces en barras de navegación junto con otros elementos como íconos e imágenes. También hay una etiqueta semántica para este propósito, el elemento <nav> . Independientemente de la técnica que utilice para sus barras de navegación, colóquelo todo en el elemento <nav> .

 < html > < head > < title > Document </ title > </ head > < body > < header > < nav > < ul > < li > < a href = "#" > Link 1 </ a > </ li > < li > < a href = "#" > Link 2 </ a > </ li > < li > < a href = "#" > Link 3 </ a > </ li > </ ul > </ nav > </ header > < section > < article > < h1 > Article heading </ h1 > < section > < h2 > Content heading </ h2 > < p > article content </ p > </ section > </ article > </ section > < footer > </ footer > </ body > </ html >

Sólo puede haber uno.

A pesar de haber identificado el contenido principal, es posible que todavía necesitemos etiquetar una sección del documento como la sección principal. Esto se resuelve fácilmente usando el elemento <main> . El elemento <main> es útil para etiquetar contenido único en el documento. Pero como puede leer en el título, solo puede haber uno, un documento, un elemento <principal> . Este elemento semántico es especialmente útil para la optimización de motores de búsqueda.

Cuando los web bots lleguen a tu página, el elemento <main> gritará ¡LÉEME! Así que no lo pases por alto.

 < html > < head > < title > Document </ title > </ head > < body > < header > < nav > < ul > < li > < a href = "#" > Link 1 </ a > </ li > < li > < a href = "#" > Link 2 </ a > </ li > < li > < a href = "#" > Link 3 </ a > </ li > </ ul > </ nav > </ header > < main > < article > < h1 > Article heading </ h1 > < section > < h2 > Content heading </ h2 > < p > article content </ p > </ section > </ article > </ main > < section > < h1 > Section heading </ h1 > < p > Section content </ p > </ section > < footer > </ footer > </ body > </ html >

Si no es principal, ¡déjalo a un lado!

Hablamos de elementos semánticos que son muy útiles. Elementos como <section> , <article> , <main> , <header> , <footer> y <nav> son excelentes herramientas para escribir código HTML semántico. Pero, ¿qué pasa con ese contenido relacionado pero que no forma parte del contenido principal? Bueno, tenemos una etiqueta especial para esos casos: <aside> .

 < html > < head > < title > Document </ title > </ head > < body > < header > < nav > < ul > < li > < a href = "#" > Link 1 </ a > </ li > < li > < a href = "#" > Link 2 </ a > </ li > < li > < a href = "#" > Link 3 </ a > </ li > </ ul > </ nav > </ header > < main > < article > < h1 > Article heading </ h1 > < section > < h2 > Content heading </ h2 > < p > article content </ p > </ section > </ article > </ main > < section > < h1 > Section heading </ h1 > < p > Section content </ p > </ section > < aside > Auxiliary content </ aside > < footer > </ footer > </ body > </ html >

¡Solo imagínate!

Y por último, pero no menos importante, tenemos un elemento útil para etiquetar todo ese contenido que está en el flujo principal pero que se puede descartar cuando sea necesario. Esto es de alguna manera similar a <article> porque es un elemento autónomo que se puede colocar o quitar a voluntad. Estamos hablando de <figura> . Esta etiqueta es especialmente útil cuando se trata de agrupar contenido auxiliar.

Junto con su compañero <figcaption> , <figure> es excelente para marcar contenido como ilustraciones, gráficos, diagramas, fotos, etc.

 < html > < head > < title > Document </ title > </ head > < body > < header > < nav > < ul > < li > < a href = "#" > Link 1 </ a > </ li > < li > < a href = "#" > Link 2 </ a > </ li > < li > < a href = "#" > Link 3 </ a > </ li > </ ul > </ nav > </ header > < main > < article > < h1 > Article heading </ h1 > < section > < h2 > Content heading </ h2 > < p > article content </ p > </ section > </ article > </ main > < section > < h1 > Section heading </ h1 > < p > Section content </ p > </ section > < aside > Auxiliary content </ aside > < footer > < figure > < img src = "logo.png" alt = "" > < figcaption > Slogan </ figcaption > </ figure > </ footer > </ body > </ html >

Finalmente...

Un último consejo, recuerda que el mismo problema con <div> puede ocurrir con cualquier otro elemento, ¡no abuses de las etiquetas! No importa si solo usa elementos HTML semánticos, si abusa, su documento no será un documento bien formado y semántico.