Etiquetas semánticas
Parte de la sección Fundamentals del Journey de HTML de Coddy — lección 27 de 60.
Las etiquetas semánticas en HTML ayudan a definir el significado del contenido, haciendo que el código sea más claro tanto para los desarrolladores como para los navegadores. A diferencia de <div> y <span>, proporcionan contexto al contenido incluido.
Etiquetas semánticas comunes:
<header>– Contenido introductorio, generalmente en la parte superior.<nav>– Contiene enlaces de navegación.
<main>– Contenido principal de la página.<article>– Una pieza de contenido independiente, como una entrada de blog.
<section>– Agrupa contenido relacionado, a menudo con un encabezado.<footer>– Sección inferior con información como derechos de autor o detalles de contacto.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>Esta estructura proporciona un diseño claro y significativo para el contenido.
Desafío
FácilConstruye una página de reseñas de películas usando HTML semántico. Debe incluir:
1. <header> con:
<h1>"Movie Reviews"<nav>con enlaces: "Home", "Reviews", “Top Picks”
2. <main> con:
<article>para una reseña que contenga:<h2>con el nombre de la película<p>con una breve reseña
3. <footer> con:
<p>"Copyright 2023 Movie Reviews"
Hoja de referencia
Las etiquetas semánticas en HTML ayudan a definir el significado del contenido, haciendo que el código sea más claro tanto para los desarrolladores como para los navegadores. A diferencia de <div> y <span>, estas proporcionan contexto al contenido que encierran.
Etiquetas semánticas comunes:
<header>– Contenido introductorio, generalmente en la parte superior.<nav>– Contiene enlaces de navegación.<main>– Contenido principal de la página.<article>– Una pieza de contenido independiente, como una publicación de blog.<section>– Agrupa contenido relacionado, a menudo con un encabezado.<footer>– Sección inferior con información como derechos de autor o detalles de contacto.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>Pruébalo tú mismo
<!DOCTYPE html>
<html>
<body>
<!-- Escribe código aquí -->
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentals
1Fundamentos de HTML
¿Qué es HTML?Estructura básica de HTMLEtiquetas y elementosAnidamiento y cierre de etiquetasComentarios en HTML4Tarjeta de receta
Descripción general del proyectoTítulo y descripción de la receta
IngredientesPasos2Texto y formato
EncabezadosPárrafosSaltos de líneaTexto en negrita y cursivaNegrita y cursiva de nuevoResumen - Formato9Formularios e Inputs Parte 2
Radio buttonsCheckboxesDropdownsBotonesBotones en formulariosRepaso - Formularios #1Repaso - Formularios #2