HTML Semántico: Mejora la Accesibilidad y SEO de tu Web
Clase 5 de 24 • Curso de Frontend Developer
Contenido del curso
Maquetación con HTML
Maquetación con CSS
- 7
Anatomía de una Declaración CSS: Selectores y Sintaxis Básica
01:39 min - 8
Selectores CSS: básicos y combinadores
12:57 min - 9
Selectores CSS: Pseudo Clases y Pseudo Elementos
06:50 min - 10
Cascada y Especificidad en CSS: Domina el Orden y Prioridad de Estilos
10:10 min - 11
Tipos de Display en CSS: Inline, Bloque e Inline-Block
06:53 min - 12
Flexbox y CSS Grid: Fundamentos y Aplicaciones Prácticas
14:36 min - 13
Modelo de Caja en CSS: Propiedades y Uso Práctico
08:12 min - 14
Colapso de márgenes en CSS: Bloques, Flexbox y Grid
03:38 min - 15
Tipos de posicionamiento en CSS: Relative, Absolute, Fixed y Sticky
10:12 min - 16
Z-Index y Contexto de Apilamiento en HTML/CSS
09:56 min - 17
Propiedades CSS más utilizadas en diseño web
08:13 min
Diseño responsivo
Arquitecturas en CSS
Próximos pasos
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).
