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.

`nav`

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.

`header`

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>

`footer`

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

Etiquetas de contenedor HTML

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