Etiquetas de contenedor HTML

Descubre cómo utilizar etiquetas contenedoras en HTML y descubre cuál elegir

Etiquetas de contenedor

HTML proporciona un conjunto de etiquetas contenedoras. Esas etiquetas pueden contener un conjunto no especificado de otras etiquetas.

Tenemos:

• article
• section
• div

y puede ser confuso entender la diferencia entre ellos.

Veamos cuándo utilizar cada uno de ellos.

artículo

La etiqueta del artículo identifica algo que puede ser independiente de otras cosas en una página.

Por ejemplo, una lista de publicaciones de blog en la página de inicio.

O una lista de enlaces.

divarticleh2A blog post/h2a ...Read more/a/articlearticleh2Another blog post/h2a ...Read more/a/article/div

No estamos limitados a listas: un artículo puede ser el elemento principal de una página.

articleh2A blog post/h2pHere is the content.../p/article

Dentro de una articleetiqueta debemos tener un título ( h1– h6) y

sección

Representa una sección de un documento. Cada sección tiene una etiqueta de encabezado ( h1– h6) y luego el cuerpo de la sección .

Ejemplo:

sectionh2A section of the page/h2p.../pimg ... //section

Es útil dividir un artículo largo en diferentes secciones .

No debe utilizarse como un elemento contenedor genérico. divEstá hecho para esto.

división

dives el elemento contenedor genérico:

div.../div

A menudo se agrega un atributo classo ida este elemento para permitir que se le pueda dar estilo mediante CSS.

Lo usamos diven cualquier lugar donde necesitamos un contenedor pero las etiquetas existentes no son adecuadas.

Etiquetas relacionadas con la página

Navegación

Esta etiqueta se utiliza para crear el marcado que define la navegación de la página. Normalmente, añadimos una lista ulo :ol

navollia href="/"Home/a/lilia href="/blog"Blog/a/li/ol/nav

aparte

La asideetiqueta se utiliza para agregar un fragmento de contenido relacionado con el contenido principal.

Un recuadro donde añadir una cita, por ejemplo. O una barra lateral.

Ejemplo:

div psome text../p aside pA quote../p /aside pother text.../p/div

El uso asidees una señal de que las cosas que contiene no son parte del flujo regular de la sección en la que se encuentra.

encabezamiento

La headeretiqueta representa una parte de la página que sirve de introducción. Puede contener, por ejemplo, una o más etiquetas de encabezado ( h1– h6), el eslogan del artículo o una imagen.

article header h1Article title/h1 /header .../article

principal

La mainetiqueta representa la parte principal de una página:

body .... main p..../p /main/body

pie de página

La footeretiqueta se utiliza para determinar el pie de página de un artículo o el pie de página de la página:

article ....footer pFooter notes../p /footer/article

Tips de HTML

Tal vez te puede interesar:

1. Formularios HTML
2. Cómo cargar una imagen en un lienzo HTML
3. Cómo utilizar insertAdjacentHTML
4. Cómo cambiar la URL de una imagen HTML en modo oscuro

Etiquetas de contenedor HTML

artículoseccióndivisiónNavegaciónaparteencabezamientoprincipalpie de páginaTal vez te puede interesar:

programar

es

2025-01-22

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente