Secciones y artículos
Parte de la sección Fundamentals del Journey de HTML de Coddy — lección 28 de 60.
En HTML, las etiquetas <section> y <article> se utilizan para organizar el contenido en partes lógicas.
La etiqueta <section> define una sección en un documento, como capítulos, encabezados, pies de página o cualquier otra sección del documento. Es una forma de agrupar contenido relacionado. Por ejemplo, podrías usar <section> para dividir una página en una introducción, contenido e información de contacto.
Aquí tienes cómo puedes usar la etiqueta <section>:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>La etiqueta <article> especifica contenido independiente y autónomo. Debe tener sentido por sí misma y debería ser posible leerla independientemente del resto del sitio web. Ejemplos de dónde se puede usar un elemento <article>: una publicación de foro, una entrada de blog, una noticia o un comentario.
Aquí tienes cómo puedes usar la etiqueta <article>:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
Desafío
FácilCrea un documento HTML que utilice las etiquetas <section> y <article> para estructurar una página web. Incluye las siguientes secciones:
- Una sección
<main>para contener el contenido principal de la página. - Dentro de
<main>, crea una<section>con un encabezado (<h2>) que diga "Upcoming Events". - Dentro de la
<section>, crea dos elementos<article>. - Cada
<article>debe tener un encabezado (<h3>) y un párrafo (<p>) con algo de texto de relleno. Utiliza "Event 1" y "Event 2" para los encabezados y "Event 1 details..." y "Event 2 details..." para los párrafos.
Hoja de referencia
La etiqueta <section> define una sección en un documento para agrupar contenido relacionado:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>La etiqueta <article> especifica contenido independiente y autónomo que debería tener sentido por sí mismo:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>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