El HTML semántico es más importante ahora que nunca, especialmente porque Google cambia los algoritmos de clasificación de páginas constantemente. Los primeros lugares en cada consulta son cada vez más competitivos. Necesitas un arma secreta, y el HTML semántico es bueno para tener en tu arsenal. Puede usar 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 qué ofrece a los visitantes potenciales.
En pocas palabras, HTML semántico es HTML que los humanos pueden leer y comprender. Cualquier humano, no solo programadores 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 responde a varias consultas de búsqueda.
Básicamente, le estás diciendo a los rastreadores de los motores de búsqueda «esta es una publicación de blog» o «este es un menú de navegación» o
Pero, ¿cómo hace eso? Bueno, utiliza una gran cantidad de etiquetas HTML5 especiales que son muy específicas. Profundicemos en algunos ejemplos, y usted puede ver por sí mismo.
Formato de texto
El formato de texto es el HTML semántico más común que existe, y lo ves todos los días. Anteriormente, se usaban letras individuales para indicar el formato, que representaban negrita , cursiva , subrayado , etc.
|
01
02
|
<p>This is <b>bold text</b></p><p>While <i>this is italics</i>, and this is <u>underlined</u>.</p> |
Con el HTML semántico, utiliza 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 diseñarlo a través de CSS con decoración de texto: subrayado; para diferenciarlo.
|
01
02
|
<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 mostrartachadotexto eliminado.
|
01
|
<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 encierre.
|
01
02
03
|
<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 strong . Usas strong para indicar algo importante en el texto, y usas mark para resaltar algo que es relevante para la comprensión del mismo.
Tal vez la mejor forma de empezar sea usando encabezados y pies de página. Ya sabes, las partes favoritas de todos de los sitios web para construir y manejar. Con HTML tradicional, es posible que tenga un encabezado codificado así:
|
01
02
03
04
05
06
07
08
09
10
11
|
<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 sabes lo que estás viendo. Tiene un par de divs anidados (contenedores) 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 tiene nada de correcto . 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.
|
01
02
03
04
05
06
07
08
09
10
11
|
<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 claras y fáciles de leer, no tiene que depender de divs, y las clases e identificaciones que elija pueden ser únicamente para diseñar.
|
01
02
03
04
05
06
07
08
09
|
<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 decir 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 podría usar el siguiente código, si desea asegurarse de que sus estilos se apliquen correctamente, además de 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 como funciona la etiqueta div en los ejemplos anteriores. Excepto, por supuesto, que es legible y tiene sentido para los ojos humanos.
|
01
02
03
04
05
06
07
08
09
10
11
|
<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.
comida para llevar
- Use la sección en lugares en los que podría tener la tentación de usar un div externo.
- El uso puede usar encabezado 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 está separado del sitio web en sí.
- Use nav cuando establezca un menú de navegación principal para el sitio. Nav no es una forma para que los motores de búsqueda encuentren enlaces, sino para encontrar la forma principal en que los usuarios pueden navegar por su sitio. Cualquier colección de enlaces (como migas de pan , etc.) también se puede incluir en la navegación.
No es necesario decir mucho sobre el pie de página, pero tenemos que mencionarlo. En muchos sentidos, es un análogo directo del encabezado. Un pie de página tradicional y básico podría verse así:
|
01
02
03
04
05
|
<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í:
|
01
02
03
04
05
|
<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 de página, publicación o sitio.
Principal, artículos y apartes
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 el tema en el que se centra.
Normalmente, una publicación o página de blog es un documento HTML simple, pero el encabezado, el pie de página, el contenido, las barras laterales, las inserciones, etc. pueden agruparse.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
|
<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, eso no es un código bonito, pero funciona. Sin embargo, no es bonito, y requiere una cantidad bastante decente de CSS para que se vea casi legible cuando se renderiza. Al usar main , article y side , puede estructurar fácilmente la página para que sea más legible.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
|
<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).
comida para llevar
- Use una sola etiqueta principal por página
- Se pueden usar varias etiquetas de artículos por página para identificar contenido independiente e independiente (incluidos varios H1 por página)
- Aparte se puede usar como una barra lateral o insertar dentro de una publicación o página
Otros elementos menos utilizados
Es cierto que los elementos y las etiquetas que discutimos anteriormente son las partes más utilizadas del HTML semántico. Después de todo, casi todos los sitios web en Internet contienen alguna combinación de ellos, mientras que las etiquetas semánticas compatibles 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).
|
01
02
03
04
05
|
<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> |
Los elementos secundarios del resumen estarán ocultos y ampliables, y puede agregar texto adicional cerrando el elemento de detalles .
Figura y pie de foto
Estos son bastante autoexplicativos. La figura es una ayuda visual de algún tipo en su publicación. Foto, gráfico, un video de YouTube incrustado, tal vez. El figcaption , entonces, es el título que agrega para explicar el uso de la figura anterior. 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 ayuda en la publicación o página principal.
|
01
02
03
04
|
<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 indica específicamente la solución o explicación de un problema. Recomendamos usarlos 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 se usa con menos frecuencia, pero cuando tenga un evento o una ocasión especial en la que necesite específicamente que el motor de búsqueda sepa que hay una hora o fecha involucrada, utilícela en lugar de simplemente poner negrita o enfatizar el texto.
|
01
02
03
04
|
<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 fecha y hora con el elemento de tiempo le da a su desarrollo un mejor vínculo con 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, verá que su clasificación en los motores de búsqueda mejora. 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 lo siguen en el proyecto . .
¿Qué prácticas recomendadas para HTML semántico sigue?
Imagen destacada del artículo por whiteMocca / shutterstock.com