HTML semántico: mejores prácticas para 2019
Publicado: 2019-08-31El HTML semántico es más importante ahora que nunca, especialmente porque Google cambia los algoritmos de rango de página de forma constante. Los primeros lugares en cada consulta son cada vez más competitivos. Necesitas un arma secreta, y el HTML semántico es bueno para tenerlo en tu arsenal. Puede utilizar algún código semántico en sus sitios web, pero cuanto más pueda insertar para el contenido importante, mejores motores de búsqueda podrán rastrear su sitio y saber lo que ofrece a los posibles visitantes.
¿Qué es HTML semántico?
En pocas palabras, HTML semántico es HTML que los humanos pueden leer y comprender. Cualquier ser humano, no solo codificadores y desarrolladores, y si los humanos pueden leerlo más fácilmente, los robots también pueden hacerlo. Si los robots pueden leer la estructura de su sitio más fácilmente, entonces pueden tomar una decisión más informada sobre qué tan bien su sitio resiste varias consultas de búsqueda.
Básicamente, le estás diciendo a los rastreadores del motor de búsqueda "esta es una publicación de blog" o "este es un menú de navegación" o
Pero, ¿cómo lo hace? Bueno, utiliza una gran cantidad de etiquetas HTML5 especiales que son muy específicas. Analicemos algunos ejemplos y podrá verlo usted mismo.
Formato de texto
El formato de texto es el HTML semántico más común que existe y lo ve todos los días. Anteriormente, se usaban letras simples para indicar el formato, ya sea en negrita , cursiva , subrayado , etc.
<p>This is <b>bold text</b></p> <p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>
Con HTML semántico, usa texto fuerte a negrita y muestra su gran importancia o em para poner en cursiva (o enfatizar) el texto. Curiosamente, U todavía se usa para subrayar texto; sin embargo, MDN sugiere darle estilo a través de CSS con text-decoration: underline; para diferenciarlo.
<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p> <p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>
También nos gusta del mostrar tachado texto eliminado.
<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>
Y pensamos que terminaríamos nuestro análisis del formato de texto HTML semántico con un resaltado. Literalmente. Si usa una marca alrededor del texto, resaltará lo que adjunte.
<p>Make sure that you remember <strong>this term for your test</strong>. <p>But you should remember <mark>this information about how to use it in context</mark>.</p> <p>If you do that, you will be fine.</p>
El MDN dice que esto no debe usarse de la misma manera que usa fuerte . Usa fuerte para indicar algo importante en el texto y usa marca para resaltar algo que es relevante para la comprensión del mismo.
Secciones, encabezados y menús
Quizás la mejor manera de comenzar es usando encabezados y pies de página. Ya sabes, las partes favoritas de todos los sitios web para construir y tratar. Con HTML tradicional, es posible que tenga un encabezado codificado así:
<div>
<h1>Page Title Goes here</h1>
<p>Tagline!</p>
<div>
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
Mirando ese código, puedes ver qué es todo. Sin embargo, eso es solo si sabe lo que está mirando. Tiene un par de divs (contenedores) anidados que separan el título, el eslogan y el menú (increíblemente básico). No hay nada de malo en esta configuración, pero ciertamente tampoco hay nada realmente correcto en ella. Si va un paso más allá, puede usar la identificación de CSS y el marcado de clase para mantener las cosas un poco más legibles.
<div class="header" id="hero-section">
<h1 class="page-title">Page Title Goes here</h1>
<p>Tagline!</p>
<div class="header-menu">
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
Con HTML semántico, las cosas se ven mucho más limpias y fáciles de leer, no tienes que depender de divs, y las clases y los identificadores que elijas pueden ser únicamente para el estilo.
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
¿No es mucho más fácil de leer y contar lo que está pasando? Tiene una etiqueta de encabezado que le permite saber que este es el encabezado de la página y una etiqueta de navegación que indica un menú de navegación. (Incluso es lo suficientemente inteligente como para no necesitar un estilo adicional para enumerar las entradas horizontalmente).
Técnicamente, también puede usar el siguiente código, si desea asegurarse de que sus estilos se apliquen correctamente, así como tener una forma de vincular a una sección particular del sitio web. En este caso, la etiqueta de sección funciona de manera similar a cómo funciona la etiqueta div en los ejemplos anteriores. Excepto, por supuesto, que es legible y tiene sentido para los ojos humanos.
<section id="hero-section">
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
</section>
Además, tenga en cuenta el uso de id = ”hero-section” , que es un paso opcional para el paso opcional, pero puede diseñar la sección como un selector de CSS por sí solo.
Para llevar
- Use la sección en lugares en los que podría tener la tentación de usar un div externo.
- Use can use header para indicar qué parte de la página es su encabezado. También puede usar esto en un artículo o publicación para indicar el encabezado de esa publicación, que es independiente del sitio web en sí.
- Utilice la navegación cuando configure un menú de navegación principal para el sitio. La navegación no es una forma para que los motores de búsqueda encuentren enlaces, sino la forma principal en que los usuarios pueden navegar por su sitio. Cualquier colección de enlaces (como rutas de navegación , etc.) también se puede incluir en nav
Pie de página
No hay mucho que decir sobre el pie de página, pero tenemos que mencionarlo. En muchos sentidos, es un análogo directo al encabezado. Un pie de página básico tradicional podría verse así:
<div class="site-footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</div>
Mientras que un pie de página semántico puede verse así:
<footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</footer>
Es cierto que no hay mucha diferencia aquí en la configuración básica, pero los robots que vean su sitio apreciarán la aclaración. También tenga en cuenta que puede usar el pie de página para los pies de página, publicación o sitio.
Principal, artículos y apartados
Otro componente principal del HTML semántico es la etiqueta del artículo . Junto a eso, el aparte también. Ambos le permiten estructurar el contenido real de su sitio para que los motores de búsqueda sepan cuál es el texto principal, lo que a su vez les permite centrarse en el problema que está resolviendo y en el tema en el que se centra.
Normalmente, una publicación de blog o una página es un documento HTML simple, pero el encabezado, el pie de página, el contenido, las barras laterales, las inserciones, etc. se pueden agrupar.
<body>
<div class="post-header>
<h1>Article title</h1>
</div>
<div class="post-content>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div class="article-aside">
<p>Text block</p>
</div>
</div>
<div class="post-footer">
<img src="/subscribe.png">
</div>
</body>
Ahora, ese no es un código bonito, pero funciona. Sin embargo, no es bonito y requiere una cantidad bastante decente de CSS para que parezca casi legible cuando se renderiza. Al usar main , article y aparte , puede estructurar fácilmente la página para que sea más legible.
<main>
<article>
<header>
<h1>Article title</h1>
</header>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<aside>
<p>Text block</p>
</aside>
<footer>
<img src="/subscribe.png">
</footer>
</article>
</main>
Sin embargo, debe tener en cuenta que solo puede indicar el contenido principal de la página una sola vez. Lo que significa que solo puede usar una página principal por página. Puede anidar varios artículos en una sola página principal para indicar una tabla de contenido o un directorio de contenido independiente (incluso puede usar varias etiquetas H1 de esta manera para mostrar a los motores de búsqueda que esas publicaciones son independientes.
Para llevar
- Utilice una sola etiqueta principal por página
- Se pueden usar varias etiquetas de artículo por página para identificar contenido independiente e independiente (incluidos varios H1 por página)
- Aparte se puede usar como barra lateral o insertar dentro de una publicación o página
Otros elementos menos utilizados
Es cierto que los elementos y etiquetas que analizamos anteriormente son las partes más utilizadas del HTML semántico. Después de todo, casi todos los sitios web de Internet contienen alguna combinación de ellos, mientras que las etiquetas semánticas admitidas restantes son más específicas y limitadas. Sin embargo, no son menos útiles cuando cumplen su propósito y ayudan enormemente con la interacción y la indexación de búsqueda.
Detalles y resumen
Los detalles y los elementos de resumen crean una capa de contenido en expansión que se puede ocultar a los usuarios a menos que lo activen específicamente (como un módulo de acordeón en Divi u otros creadores de páginas).
<details>
<summary>Headline that will be shown and clicked on</summary>
<p>Content that will be hidden</p>
<a href="example.com">Link that will be hidden</a>
</details>
Todos los elementos secundarios del resumen se ocultarán y se expandirán, y puede agregar texto adicional cerrando el elemento de detalles .
Figura y título de figura
Estos se explican por sí mismos. La figura es una ayuda visual de algún tipo en tu publicación. Foto, gráfico, un video de YouTube incrustado, tal vez. El título de la figura , entonces, es el título que agrega para explicar el uso de la figura de arriba. Si bien son de naturaleza técnica para el uso de la semántica, puede usar esto para cualquier contenido que desee indexar específicamente como una ayuda en la publicación o página principal.
<figure>
<img src="/chart.jpg">
<figcaption>Explanation of this chart in short text</figcaption>
</figure>
Estas etiquetas son una excelente manera de obtener un fragmento destacado en Google, por ejemplo, ya que está indicando específicamente la solución o explicación de un problema. Recomendamos usar estos porque no solo reduce el código que usa para agregar un título y darle estilo, sino que también mantiene la figura y el título como un solo elemento de la página, no como elementos separados.
Tiempo
El tiempo es una de las etiquetas que menos se usa, pero cuando tienes un evento o una ocasión especial en la que necesitas específicamente que el motor de búsqueda sepa que hay una hora o una fecha involucrada, úsala en lugar de simplemente poner negrita o enfatizar el texto.
<article> <h1>Title</h1> <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p> </article>
El uso de datetime con el elemento time le da a su desarrollo un gancho mucho mejor en el tiempo, lo que luego le permitirá integrarse con calendarios y varias otras API. Podrá enviar recordatorios desde su sitio y la gente volverá con más frecuencia.
Conclusión
Si bien no está mal usar HTML no semántico, si adquiere el hábito mientras trabaja, encontrará que su clasificación en los motores de búsqueda mejorará. Eso es importante, pero lo que podría ser aún más importante, sin embargo, es que se ahorrará tiempo en la forma en que estructura y diseña su sitio, además de evitar muchos dolores de cabeza y deudas técnicas para las personas que vienen después de usted en el proyecto. .
¿Qué mejores prácticas sigue para HTML semántico?
Imagen destacada del artículo por whiteMocca / shutterstock.com