Cómo escribir HTML semántico

Como estudiante de Microverse en el último tiempo, he estado luchando con algunos proyectos HTML y CSS . Me desafiaron a aprender nuevas características de estas tecnologías todo el tiempo. Mis proyectos se fueron realizando poco a poco tratando de seguir buenas prácticas pero ninguno me resultó tan llamativo como el uso del HTML semántico.

A primera vista, esto no parece ser algo de qué preocuparse, pero si observa la imagen completa, se dará cuenta de que es una característica muy importante de HTML. Por eso quiero mostrarte lo importante que es tener esto en cuenta a la hora de escribir un buen HTML.

Un <div> para etiquetarlos a todos...

Antes que nada, dejemos algo claro, la semántica en HTML no es nada nuevo. HTML fue concebido como una forma semántica de compartir contenido. Dicho esto, hablemos un poco sobre el pasado de la web. Hace algún tiempo, Internet y la web no eran más que cosas de nerds, un medio extraño para compartir contenido científico y extraño. Pero eso cambió con el tiempo, muchos otros segmentos de la sociedad se dieron cuenta del enorme potencial de esta tecnología y comenzaron a utilizarla.

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> .

Estas dos etiquetas fueron concebidas para etiquetar cualquier contenido que no pudiera ser etiquetado por ninguna otra etiqueta semántica. Eran solo para uso en casos especiales. "Desafortunadamente", los webmasters y diseñadores gráficos (los primeros desarrolladores web) no pensaron de la misma manera, para ellos esta función combinada con CSS también lanzada recientemente fue una oportunidad de oro para crear contenido web sorprendente y comercial.

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?

Tal vez no sea tan evidente a primera vista, no es un problema. Pero cuando creamos documentos para la web es muy importante separar el contenido de la presentación. Por eso también es muy importante que el contenido esté correctamente estructurado. Entonces, ¿qué significa correctamente estructurado? Bueno, significa que cada elemento del contenido debe poder identificarse dentro del documento, sin importar el medio a través del cual se vaya a presentar.

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?

Entonces, la mala noticia es que los motores de búsqueda casi siempre ignoran el contenido no semántico. Y finalmente, como desarrollador, ¿no es bueno para nosotros encontrar un código legible y comprensible? Imagina obtener un gran código HTML no semántico y tener que adivinar el significado de cada uno de sus elementos. Bueno, estos son los problemas con HTML no semántico, pero ¡oye! ¡Me estoy olvidando de un pequeño problema, quizás el más importante!

¡Vivimos en la Web 3.0 hoy en día! Y, ¿sabes cómo se llama? ¡Sí! Se llama La Web Semántica. Entonces, ¿sigues pensando que el código HTML semántico no es importante?

...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.

Mientras tanto, describiré algunos de los elementos semánticos que aprendí en mi curso de HTML con Microverse .

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?

Sí, el contenido principal. ¿Qué es lo más importante cuando se trata de documentos? ¿La barra de navegación? ¿Un deslizador? ¿Iconos sociales? ¿Formas? ¡No! Lo más importante para un documento es la información en sí misma, tratando de ser preservada y transmitida. Cuando nos referimos a "contenido principal" estamos hablando de información, todo lo demás es completamente superfluo. Eso puede ser removido o editado a voluntad, sin afectar la integridad de la información. Por eso, identificar el "contenido principal" es encontrar los criterios para construir un documento HTML más semántico.

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.

Cuando se trata de crear estructuras semánticas puedes usarlas una dentro de otra sin ningún problema.

 < 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> .

Este elemento puede estar dentro de cualquier otro elemento de bloque en el documento HTML, pero utilícelo sabiamente.

 < 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> .

Úselo cuando necesite etiquetar contenido adicional, por ejemplo, fuentes de noticias, ofertas comerciales, un formulario de boletín, 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 > </ 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.

Como conclusión, diré que es importante ser consciente de la importancia de la semántica para el desarrollo web. El éxito de la web del mañana depende en cierta medida de cuán accesible, legible y analizable sea la información. Tenemos que dejar de pensar en HTML como un lenguaje para hacer páginas web. En su lugar, utilicemos HTML como una poderosa herramienta para distribuir contenido semántico.