Buenas prácticas en HTML semántico¶
El uso correcto de HTML semántico no solo hace que el código sea más accesible y mantenible, sino que también ayuda a los motores de búsqueda a entender mejor el contenido de un sitio web. Aquí te muestro algunas buenas prácticas al usar etiquetas semánticas, acompañadas de malas prácticas para comparar la diferencia en la calidad del código.
Uso adecuado de las etiquetas semánticas en lugar de div genéricos¶
Utiliza las etiquetas semánticas correctas en lugar de depender únicamente de <div> para estructurar tu página.
<header>
<h1>Mi Blog</h1>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="about.html">Sobre mí</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Título del artículo</h2>
<p>Este es el contenido de un artículo interesante...</p>
</article>
</main>
<footer>
<p>© 2024 Mi Blog</p>
</footer>
Aquí se utilizan etiquetas como <header>, <nav>, <main>, <article> y <footer>, que tienen un propósito específico y hacen que el código sea mucho más claro y semánticamente correcto.
<div>
<h1>Mi Blog</h1>
<div>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="about.html">Sobre mí</a></li>
</ul>
</div>
</div>
<div>
<div>
<h2>Título del artículo</h2>
<p>Este es el contenido de un artículo interesante...</p>
</div>
</div>
<div>
<p>© 2024 Mi Blog</p>
</div>
En este caso, se usa <div> para todo, lo que dificulta la comprensión del código. Los navegadores y lectores de pantalla no pueden entender fácilmente la estructura de la página, lo que afecta negativamente la accesibilidad y el SEO.
Jerarquía y estructura clara con etiquetas de encabezado¶
Usa las etiquetas de encabezado <h1>, <h2>, <h3>, etc., de forma correcta para crear una jerarquía clara del contenido.
<article>
<h1>Título del artículo</h1>
<section>
<h2>Subtítulo de la sección 1</h2>
<p>Contenido de la sección 1...</p>
</section>
<section>
<h2>Subtítulo de la sección 2</h2>
<p>Contenido de la sección 2...</p>
</section>
</article>
Aquí, el uso correcto de <h1> para el título principal y <h2> para las subsecciones crea una jerarquía clara tanto para los usuarios como para los motores de búsqueda.
<article>
<h1>Título del artículo</h1>
<div>
<h3>Subtítulo de la sección 1</h3>
<p>Contenido de la sección 1...</p>
</div>
<div>
<h3>Subtítulo de la sección 2</h3>
<p>Contenido de la sección 2...</p>
</div>
</article>
Aquí, se usa <h3> en lugar de <h2> para las subsecciones, rompiendo la jerarquía lógica. Esto confunde a los motores de búsqueda y afecta la accesibilidad, ya que los lectores de pantalla no pueden interpretar correctamente la estructura del contenido.
Evitar anidación excesiva de elementos innecesarios¶
Mantén el código limpio evitando una anidación innecesaria de elementos HTML, especialmente con etiquetas semánticas.
<article>
<h1>Título del artículo</h1>
<p>Este es el contenido de un artículo interesante...</p>
</article>
Este ejemplo es claro y conciso, con solo las etiquetas necesarias para estructurar el contenido.
<article>
<div>
<h1>Título del artículo</h1>
</div>
<div>
<p>Este es el contenido de un artículo interesante...</p>
</div>
</article>
Aquí, los <div> son innecesarios y no aportan ningún valor semántico. Solo agregan complejidad al código sin ningún beneficio real.
Uso correcto de <aside> para contenido relacionado¶
Utiliza <aside> para contenido relacionado o complementario que no es parte del contenido principal pero puede interesar al lector.
<article>
<h1>Título del artículo</h1>
<p>Contenido del artículo principal...</p>
</article>
<aside>
<h2>Artículos relacionados</h2>
<ul>
<li><a href="#">Artículo 1</a></li>
<li><a href="#">Artículo 2</a></li>
</ul>
</aside>
Aquí, el <aside> está bien utilizado para mostrar artículos relacionados, y está claramente separado del contenido principal.
<article>
<h1>Título del artículo</h1>
<p>Contenido del artículo principal...</p>
<div>
<h2>Artículos relacionados</h2>
<ul>
<li><a href="#">Artículo 1</a></li>
<li><a href="#">Artículo 2</a></li>
</ul>
</div>
</article>
En este ejemplo, se coloca el contenido relacionado dentro del mismo <article>, lo que no es correcto, ya que los artículos relacionados no forman parte del contenido principal del artículo. Además, el uso de <div> en lugar de <aside> elimina el contexto semántico adecuado.
Uso adecuado de los pies de página¶
Usa <footer> para agrupar información como derechos de autor, políticas de privacidad o enlaces adicionales que aparecen al final de una página o sección.
<article>
<h1>Título del artículo</h1>
<p>Contenido del artículo...</p>
<footer>
<p>Publicado el 12 de septiembre de 2024</p>
</footer>
</article>
Aquí, el <footer> dentro del <article> proporciona contexto adicional relevante para el contenido, como la fecha de publicación del artículo.
<article>
<h1>Título del artículo</h1>
<p>Contenido del artículo...</p>
<div>
<p>Publicado el 12 de septiembre de 2024</p>
</div>
</article>
En este caso, se utiliza un <div> para la información del pie de página, lo cual es innecesario y no semántico. El uso de <footer> sería más apropiado, ya que indica claramente que es información de cierre.
Conclusión¶
Las buenas prácticas en HTML semántico no solo mejoran la accesibilidad, sino que también hacen que el código sea más fácil de mantener, comprender y optimizar para los motores de búsqueda. Al seguir estas pautas, podemos crear sitios web más eficientes y accesibles para todos los usuarios, mientras evitamos el uso excesivo de etiquetas genéricas como <div>.