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.
Así es como 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í mismo, y debe ser posible leerlo independientemente del resto del sitio web. Ejemplos de dónde se puede usar un elemento <article>: una publicación de un foro, una entrada de blog, una noticia o un comentario.
Así es como 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 texto de prueba. Usa "Event 1" y "Event 2" para los encabezados y "Event 1 details..." y "Event 2 details..." para los párrafos.
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 #2Practica por tu cuenta: Playground de Web