El HTML semántico es más importante que nunca ahora, especialmente porque Google cambia constantemente sus algoritmos de PageRank. Las posiciones de liderazgo en cada consulta son cada vez más competitivas. Necesitas un arma secreta, y es bueno tener HTML semántico en tu arsenal. Puedes usar alguno código semántico en sus sitios web, pero cuanto más pueda insertar para contenido importante, mejores motores de búsqueda podrán indexar su sitio y saber qué ofrece a los visitantes potenciales.
¿Qué es HTML semántico?
En resumen, HTML semántico es HTML que la gente puede leer y comprender. Todos, no solo programadores y programadoras, y si los humanos pueden leerlo más fácilmente, los robots también. Si los rastreadores pueden leer la estructura de su sitio más fácilmente, pueden tomar una decisión más informada sobre qué tan bien su sitio está manejando varias consultas.
Básicamente, le estás diciendo a los robots de los motores de búsqueda «Esta es una publicación de blog» o «Este es el menú de navegación» o
Pero, ¿cómo se hace? Bueno, usa muchas etiquetas HTML5 especiales que son muy específicas. Veamos algunos ejemplos y lo verás por ti mismo.
Formato de texto
El formato de texto es el código HTML semántico más popular y lo ves todos los días. Anteriormente, se usaban letras sueltas para indicar el formato, lo que significa que audaz, cursiva, subrayary así.
<p>This is <b>bold text</b></p> <p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>
En el caso de HTML semántico, está utilizando fuerte negrita el texto y mostrar su alta importancia o ellos texto en cursiva (o subrayado). Curiosamente, A todavía se usa para subrayar texto; Sin embargo MDN sugiere diseñarlo con CSS con decoración de texto: subrayado; para decir la diferencia.
<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>
Pensamos que terminaríamos nuestro análisis del formato semántico del texto HTML con una distinción. Literalmente. Si utiliza señal alrededor del texto, luego marcarás lo que incluyas.
<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>
los MDN dice que no deberías usarlo de la misma manera que lo usas fuerte. Tu usas fuerte indicar algo importante en el texto, y estás usando señal enfatizar algo que es esencial para entenderlo.
Secciones, encabezados y menús
Quizás la mejor manera de comenzar es usar encabezados y pies de página. Conoce las partes favoritas de los sitios web para construir y manejar. En el caso de HTML tradicional, puede codificar el encabezado de esta manera:
<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>
Al mirar este código, puede ver qué es todo. Sin embargo, esto solo sucede cuando sabes lo que estás mirando. Tiene varios divs anidados (contenedores) que separan el título, el eslogan y el menú (increíblemente básico). No hay nada demonio con esta configuración, pero definitivamente no hay nada realmente allí ley sobre eso también. Si va un paso más allá, puede usar ID de CSS y etiquetas de clase para hacer que las cosas sean 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 claras y fáciles de leer, no tiene que depender de elementos div, y las clases y los identificadores que elija pueden ser solamente para peinar
<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 leer y decir lo que está pasando? Tú tienes Bóveda una etiqueta que te dice que es un encabezado de página y navegación marcador que indica el menú de navegación. (Incluso es lo suficientemente inteligente como para no requerir un estilo adicional para mostrar las entradas horizontalmente).
Técnicamente, también puede usar el código a continuación si desea asegurarse de que sus estilos se apliquen correctamente y que tengan una forma de vincular a una sección específica del sitio web. En este caso Sección la etiqueta funciona de manera similar a cómo división la etiqueta funciona 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, preste atención al uso id = «sección de héroe»que es un paso opcional al paso opcional, pero puede cambiar el estilo Sección como un selector de CSS independiente.
Quitar
- Usar Sección en algunos lugares, puede tener la tentación de usar un div externo.
- Uso que puedes usar Bóveda para indicar qué parte de la página es su título. 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 en sí.
- Usar navegación al configurar el menú principal de navegación del sitio. Navegación no es la forma en que los motores de búsqueda buscan enlaces, sino la forma principal en que los visitantes pueden navegar por su sitio. También se puede unir cualquier colección de enlaces (como migas de pan, etc.) navegación
Pie de página
No se necesita mucho para mencionar el pie de página, pero es necesario mencionarlo. En muchos sentidos, es un análogo directo del titular. Un pie de página tradicional y básico 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>
Por otro lado, el 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>
Si bien no hay mucha diferencia con la configuración básica aquí, los rastreadores que ven su sitio apreciarán la explicación. También recuerda que puedes usar pie de página para páginas, publicaciones o pies de página de sitios web.
Inicio, Artículos y Devociones
Otro componente importante de la semántica HTML es artículo etiqueta. Excepto eso aparte, también. Ambos elementos le permiten organizar el contenido real del sitio, para que los motores de búsqueda sepan cuál es el cuerpo del texto, lo que a su vez les permite concentrarse en el problema que se está resolviendo y el tema en el que se está enfocando.
Por lo general, una publicación o página de blog es un documento HTML simple, pero el encabezado, el pie de página, el cuerpo, las barras laterales, las inserciones, etc. se pueden combinar en uno.
<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>
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. Usando Principal, artículoy apartepuede organizar 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, tenga en cuenta que el contenido principal de la página solo se puede seleccionar una vez. Esto significa que solo puedes usar uno Principal en la pagina. Puedes anidar mucho artículos bajo uno Principal para apuntar a una tabla de contenido o un catálogo de contenido independiente (incluso puede usar múltiples H1 etiquetas de esta manera para mostrar a los motores de búsqueda que estas publicaciones son independientes.
Quitar
- usa uno Principal etiqueta por página
- Muchos artículo Las etiquetas se pueden usar en una página para identificar contenido separado e independiente (incluidos varios H1s por página)
- Aparte se puede usar como barra lateral o insertar en 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 de Internet tienen alguna combinación de ellos, mientras que el resto de las etiquetas semánticas admitidas son más específicas y limitadas. Sin embargo, no son menos útiles cuando cumplen su propósito y ayudan enormemente a interactuar e indexar su búsqueda.
Detalles y resumen
los Detalles y resumen Los elementos crean una capa de contenido en expansión que se puede ocultar a los usuarios, a menos que lo activen específicamente (por ejemplo, el módulo de acordeón en divide 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>
Cualquier niño resumen se ocultará y expandirá, y se puede agregar texto adicional cerrando Detalleselemento.
Dibujo y título debajo del dibujo.
Estos son bastante obvios. Personaje es una especie de ayuda visual en tu publicación. Foto, gráfico, tal vez video de YouTube incrustado. los dibujo-este 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 para 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 su fragmento destacado en Google, por ejemplo, porque indica claramente la solución o explicación del problema. Le recomendamos que los use, ya que no solo limitan el código que usa para agregar su firma y su estilo, sino que también mantienen el dibujo y el título como un elemento de una sola página en lugar de separarlos.
Tiempo
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 que el motor de búsqueda sepa que es una hora o una fecha, utilícela en lugar de solo poner negrita o subrayar 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>
Por fecha y hora Con tiempo El elemento permite que su programa alcance mejor el tiempo, lo que permitirá la integración con calendarios y varias otras API. Podrás enviar recordatorios desde tu sitio web y la gente volverá con más frecuencia.
Solicitud
Si bien está bien usar código HTML no semántico, si te acostumbras a tu trabajo, notarás que tu clasificación en los motores de búsqueda mejorará. Esto es importante, pero lo que puede ser aún más importante es que ahorrará tiempo en la organización y el estilo de su sitio web, y también evitará muchos dolores de cabeza y deudas técnicas para aquellos que vendrán después de usted en su proyecto.
¿Cuáles son sus mejores prácticas para HTML semántico?
Artículo destacado con una imagen de whiteMocca / shutterstock.com
