Etiquetas de contenedor HTML

Descubra cómo utilizar etiquetas de contenedor en HTML y descubra cuál elegir

Etiquetas de contenedor

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

Tenemos:

  • article
  • section
  • div

y puede resultar confuso comprender la diferencia entre ellos.

Veamos cuándo usar cada uno de ellos.

article

La etiqueta del artículo identifica uncosaque puede ser independiente de otroscosasen una página.

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

O una lista de enlaces.

<div>
	<article>
		<h2>A blog post</h2>
		<a ...>Read more</a>
	</article>
	<article>
		<h2>Another blog post</h2>
		<a ...>Read more</a>
	</article>
</div>

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

<article>
	<h2>A blog post</h2>
	<p>Here is the content...</p>
</article>

Dentro de unarticleetiqueta deberíamos tener un título (h1-h6) y

section

Representa una sección de un documento. Cada sección tiene una etiqueta de título (h1-h6), luego la seccióncuerpo.

Ejemplo:

<section>
	<h2>A section of the page</h2>
	<p>...</p>
	<img ... />
</section>

Es útil dividir un artículo largo en diferentessecciones.

No debe usarse como un elemento contenedor genérico.divestá hecho para esto.

div

dives el elemento contenedor genérico:

<div>
	...
</div>

A menudo agrega unclassoidatributo a este elemento, para permitirle aplicar estilo usando CSS.

Usamosdiven cualquier lugar donde necesitemos un contenedor pero las etiquetas existentes no sean adecuadas.

Esta etiqueta se utiliza para crear el marcado que define la navegación de la página. A esto normalmente agregamos unuloollista:

<nav>
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/blog">Blog</a></li>
	</ol>
</nav>

aside

losasideLa etiqueta se utiliza para agregar un fragmento de contenido relacionado con el contenido principal.

Un cuadro donde agregar una cotización, por ejemplo. O una barra lateral.

Ejemplo:

<div>
  <p>some text..</p>
  <aside>
    <p>A quote..</p>
  </aside>
  <p>other text...</p>
</div>

Usandoasidees una señal de que las cosas que contiene no forman parte del flujo regular de la sección en la que vive.

losheaderLa etiqueta representa una parte de la página que es la introducción. Por ejemplo, puede contener una o más etiquetas de encabezado (h1-h6), el lema del artículo, una imagen.

<article>
  <header>
	  <h1>Article title</h1>
  </header>
  ...
</article>

main

losmainLa etiqueta representa la parte principal de una página:

<body>
  ....
  <main>
    <p>....</p>
  </main>
</body>

losfooterLa etiqueta 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>
    <p>Footer notes..</p>
  </footer>
</article>

Descarga mi gratisManual HTML


Más tutoriales de HTML: