HTML semántico: mejores prácticas para 2019


El HTML semántico es más importante ahora que nunca, especialmente porque Google cambia los algoritmos de clasificación de páginas de forma constante. Los primeros puestos 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. Puedes utilizar algunos 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é ofrecerá a los posibles visitantes.

¿Qué es el HTML semántico?

En pocas palabras, el HTML semántico es HTML que los humanos pueden leer y comprender. Cualquier 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 de motores de búsqueda "Esta es una publicación de blog" o "Este es un menú de navegación" o "Oye, esto es solo el pie de página, así que no me hagas daño por contenido duplicado, Por favor."

¿Pero cómo hace eso? Bueno, utiliza una gran cantidad de etiquetas HTML5 especiales que son muy específicas. Analicemos algunos ejemplos, y puede 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 individuales para indicar el formato, representando negrita, cursiva, subrayar, y así.

This is bold text

While this is italics, and this is underlined.

Con HTML semántico, usted usa fuerte para texto en negrita y mostrar su gran importancia o em poner en cursiva (o enfatizar) el texto. Interesantemente U todavía se usa para subrayar texto; sin embargo, el MDN sugiere diseñarlo a través de CSS con decoración de texto: subrayado; para diferenciarlo

This is bold text, while this is italics.

This would be underlined.

También nos gusta del mostrar tachado texto eliminado

We are also fond of del to show strikethrough deleted text.

Y pensamos que terminaríamos con un aspecto destacado del formato de texto HTML semántico. Literalmente. Si utiliza marca alrededor del texto, luego resaltará lo que sea que adjunte.

Make sure that you remember this term for your test.

But you should remember this information about how to use it in context.

If you do that, you will be fine.

los MDN dice que esto no se debe usar de la misma manera que usted usa fuerte. Tu usas fuerte para indicar algo importante en el texto, y usas marca para resaltar algo que sea relevante para entenderlo.

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í:

Page Title Goes here

Tagline!

Mirando ese código, puedes ver qué es todo. Sin embargo, eso es solo si sabes lo que estás viendo. Tienes un par de divs (contenedores) anidados que separan el título, el eslogan y el menú (increíblemente básico). No hay nada incorrecto con esta configuración, pero ciertamente no hay nada realmente derecho al respecto, tampoco. Si va un paso más allá, puede usar la identificación CSS y el marcado de clase para mantener las cosas un poco más legibles.

 

Page Title Goes here

Tagline!

Con HTML semántico, las cosas se ven mucho más limpias y fáciles de leer, no tiene que depender de divs, y las clases e identificadores que elija pueden ser solamente para estilizar

Page Title Goes Here

Tagline!

¿No es mucho más fácil leer y contar lo que está pasando? Usted tiene un encabezamiento etiqueta que le permite saber que este es el encabezado de la página y una nav etiqueta 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, el sección etiqueta funciona de manera similar a cómo el div La etiqueta funciona en los ejemplos anteriores. Excepto, por supuesto, que es legible y tiene sentido para los ojos humanos.

Page Title Goes Here

Tagline!

Además, tenga en cuenta el uso de id = "sección de héroe", que es un paso opcional al paso opcional, pero puede diseñar sección como un selector CSS por sí solo.

Comida para llevar

  • Utilizar sección en lugares donde podrías estar tentado a usar un div externo.
  • El uso puede usar encabezamiento 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.
  • Utilizar nav cuando configura un menú de navegación principal para el sitio. Nav no es una forma en que los motores de búsqueda encuentren enlaces, sino encontrar la forma principal en que los usuarios pueden navegar su sitio. Cualquier colección de enlaces (como migas de pan, 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í:

Elegant Themes

Contact Us!

Mientras que un pie de página semántico puede verse así:


Es cierto que aquí no hay mucha diferencia en la configuración básica, pero los robots que ven su sitio apreciarán la aclaración. También tenga en cuenta que puede usar pie de página para páginas, publicaciones o pies de página del sitio.

Principal, artículos y a un lado

Otro componente principal del HTML semántico es el artículo etiqueta. 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 enfocarse en el problema que está resolviendo y el tema en el que se enfoca.

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. se pueden agrupar.


  

Paragraph 1

Paragraph 2

Paragraph 3

Text block

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 legible cuando se procesa. Mediante el uso principal, artículoy aparte, puede estructurar fácilmente la página para que sea más legible.

Article title

Paragraph 1

Paragraph 2

Paragraph 3

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 puedes usar uno principal por página. Puedes anidar múltiples artículos bajo un solo principal para indicar una tabla de contenido o directorio de contenido independiente (incluso puede usar múltiples H1 etiqueta de esta manera para mostrar a los motores de búsqueda que las publicaciones son independientes.

Comida para llevar

  • Usa un solo principal etiqueta por página
  • Múltiple artículo Las etiquetas se pueden usar por página para identificar contenido independiente y separado (incluyendo múltiples H1s 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 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 resumen los elementos crean una capa expansiva de contenido que puede ocultarse a los usuarios a menos que lo activen específicamente (como un módulo de acordeón en Divi u otros constructores de páginas).

Headline that will be shown and clicked on

Content that will be hidden

Link that will be hidden

Cualquier hijo de la resumen estará oculto y expandible, y puede agregar texto adicional cerrando el detalleselemento.

Figura y Figcaption

Estos se explican por sí mismos. Figura es una ayuda visual de algún tipo en tu publicación. Foto, gráfico, un video incrustado de YouTube, tal vez. los 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.

Explanation of this chart in short text

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 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 elemento único de la página, no por separado.

Hora

Hora es una de las etiquetas más raramente utilizadas, pero cuando tiene un evento u ocasión especial en la que necesita específicamente que el motor de búsqueda sepa que hay una hora o fecha involucrada, use esto en lugar de simplemente poner en negrita o enfatizar el texto.

Title

The event will begin on and last for .

Utilizando fecha y hora con el hora element le da a su desarrollo un enganche mucho mejor en el tiempo, que luego le permitirá integrarse con calendarios y varias otras API. Podrá enviar recordatorios desde su sitio y la gente volverá más a menudo.

Conclusión

Si bien no está mal usar HTML no semántico, si adquieres el hábito mientras trabajas, verás que el ranking de tu motor 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é mejores prácticas para HTML semántico sigue?

Imagen destacada del artículo por whiteMocca / shutterstock.com