HTML: Etiquetas contenedoras

Etiqueta div

La etiqueta div es una etiqueta contenedora, esto significa que no tiene ninguna representación visual por sí misma, pero se utiliza para agrupar elementos ¿Por qué querríamos agrupar elementos? Porque, más tarde, cuando aprendamos a aplicar estilos, podremos aplicar estilos a dichos grupos haciendo más sencillo su maquetado.

<div>
  <p>Este es un párrafo dentro de un div</p>
  <p>Este es otro párrafo dentro de un div</p>
</div>

Esto se verá así:

miarchivo.html

Este es un párrafo dentro de un div

Este es otro párrafo dentro de un div

Como ves, el div no ha cambiado nada visualmente, pero ahora nuestro dos párrafos están agrupados dentro de un contenedor. Si le aplico un borde al div, podrás verlo más claramente:

miarchivo.html

Este es un párrafo dentro de un div

Este es otro párrafo dentro de un div

Aquí puedes ver, que el div es elemento que tiene un borde rojo, y que los dos párrafos están dentro de él.

Etiquetas semánticas

El div es una etiqueta sin significado semántico, es decir, el navegador no sabe si es un menú, un pie de página, etc.

Esto está bien para algunos casos, pero cuando utilizamos elementos que sí tienen significado semántico ya existen etiquetas para especificarlo. Esto no va a cambiar nada a nivel visual o funcional pero sí va a mejorar la accesibilidad de nuestra página y por lo tanto su posicionamiento en buscadores.

Etiqueta header

La etiqueta header se utiliza para agrupar elementos dentro de un encabezado

<header>
  <p>Este es un párrafo dentro del encabezado</p>
</header>

Etiqueta footer

La etiqueta footer se utiliza para agrupar elementos dentro de un pie de página

<footer>
  <p>Este es un párrafo dentro del pie de página</p>
</footer>

Etiqueta nav

La etiqueta nav se utiliza para agrupar elementos de navegación

<nav>
  <a href="#">Inicio</a>
  <a href="#">Acerca de</a>
  <a href="#">Contacto</a>
</nav>

Etiqueta main

La etiqueta main se utiliza para agrupar el contenido principal de la página

<main>
  <h1>Este es el contenido principal</h1>
  <p>Este es un párrafo dentro del contenido principal</p>
</main>

Etiqueta section

La etiqueta section se utiliza para agrupar elementos dentro de una sección

<section>
  <h2>Sección 1</h2>
  <p>Este es un párrafo dentro de la sección 1</p>
</section>

Etiqueta article

La etiqueta article se utiliza para agrupar elementos dentro de un artículo (ej: un post de un blog)

<article>
  <h2>Artículo 1</h2>
  <p>Este es un párrafo dentro del artículo 1</p>
</article>

Etiqueta aside

La etiqueta aside se utiliza para agrupar elementos secundarios a un contenido principal (ej: publicidad, enlaces relacionados, etc)

<aside>
  <h3>Publicidad</h3>
  <p>Este es un párrafo dentro del aside</p>
</aside>

Extra: Comentarios

En HTML también podemos agregar comentarios, los comentarios son fragmentos de texto que no se muestran en la página, pero que nos sirven para documentar nuestro código.

Para agregar un comentario en HTML, utilizamos la siguiente sintaxis:

<!-- Este es un comentario -->

Por ejemplo, si queremos agregar un comentario a un div, podemos hacerlo de la siguiente manera:

<div>
  <p>Este es un párrafo dentro de un div</p>
  <!-- Este es un comentario -->
  <p>Este es otro párrafo dentro de un div</p>
</div>

Como mencioné, los comentarios no se muestran en la página, solo sirven a modo de documentación para nosotros o para otros desarrolladores que lean nuestro código.

En los siguientes capítulos

En los siguientes capítulos entraremos a la última sección de este curso, donde hablaremos sobre el SEO y las etiquetas meta.

AnteriorSiguiente