HTML Semántico: Mejora la Accesibilidad y SEO de tu Web
Clase 5 de 24 • Curso de Frontend Developer
Resumen
El HTML semántico consiste en que cada elemento tenga su propia etiqueta que lo defina correctamente. Sin utilizar etiquetas muy generales, como <div> o <span>.
El problema con la etiqueta div
La etiqueta div define un bloque genérico de contenido, que no tiene ningún valor semántico. Se utiliza para elementos de diseño como contenedores.
¿Cuáles son las etiquetas semánticas?
Las etiquetas semánticas para definir una interfaz de una página web son:
<header>: define el encabezado de la página (no confundir con<head>).<nav>: define una barra de navegación que incluye enlaces.<section>: define una sección de la página.<footer>: define un pie de página o de sección.<article>: define un artículo, el cual puede tener su propio encabezado, navegación, sección o pie de página.
Ahora que ya conoces las etiquetas semánticas, evita el uso excesivo de <div>.
Ventajas de utilizar HTML semántico
Las ventajas de utilizar un HTML semántico son:
- Ayuda a tu sitio a ser accesible
- Mejora tu posicionamiento (SEO)
- Código más claro, legible y mantenible
- Ayuda a buscadores (como Google) a encontrar tu página
Desafío
Construye la estructura semántica de un documento HTML.
Contribución creada por Andrés Guano (Platzi Contributor), con aportes de Rodrigo SenseiVJ Reyes (Platzi Contributor).