Este artículo forma parte del Curso HTML5 desde cero.
Haz click aquí para ver el índice.

Tipos de elementos

Como a estas alturas ya sabes, el lenguaje HTML5 se basa en definir elementos encerrándolos en etiquetas, ya sea un párrafo, un título, un enlace, etc. Sin embargo, hay un pequeño detalle del que aún no te he hablado y que espero haga un pequeño ¡BOOM! en tu cabeza: Todos los elementos visibles de HTML5 pueden ser o elementos de bloque o elementos de línea.

• Elementos en bloque:
  Significa que el elemento ocupa todo el ancho del documento disponible, produciendo un intro o retorno de línea al final del mismo. Un elemento en bloque que ya has visto es, por ejemplo, el párrafo; recuerda que la etiqueta <p> … </p> define el contenido que encierres en ella como párrafo y le otorga ciertas propiedades, y el navegador lo visualiza como un bloque que ocupa todo el espacio disponible de lado a lado.
• Elementos en línea:
  Éstos, por el contrario, son los que sólo utilizan el espacio que ocupan, y si pones varias etiquetas juntas verás que se visualizan unas delante de otras.

Veamos varios ejemplos de ambos elementos; en primer lugar cómo está escrito el código HTML y después una imagen de cómo se ve en el navegador:

En el navegador:

Como puedes ver, las etiquetas <a> y <strong> muestran elementos en línea, pero las etiquetas <h1>, <p> y <div> muestran elementos en bloque.

Etiqueta <table> … <table>

Se utiliza para definir tablas (cuadricula de casillas dividida entre filas y columnas). Para componer una tabla se utilizan las siguientes etiquetas:

Esto parece más complicado de lo que realmente es. Veamos en primer lugar un ejemplo de una tabla sencilla 2×2:

Ahora veamos el código de una tabla 3×2, con dos celdas de la misma fila combinadas:

Veamos ahora un ejemplo más complejo, con celdas cominadas en la misma fila y en la misma columna, en una tabla más grande:

En la imagen he centrado el texto para que se vea mejor, pero como puedes ver en todos los ejemplos se trata de definir mediante código la tabla fila a fila, y en cada fila celda a celda, de arriba a abajo y de izquierda a derecha. Al final del módulo encontrarás practicas sobre este tema.

Etiquetas <div> … </div> y <span> … </span>

Estas dos etiquetas no tienen ningún significado como tal; su objetivo es la de ser usadas como contenedores, con la diferencia clave de que la etiqueta <div> se muestra como un elemento en bloque y la etiqueta <span> como un elemento en línea.

Nota histórica:

Cuando el lenguaje HTML comenzó a ser popular los programadores se utilizaban tablas (celdas colocadas en filas y columnas) para organizar y repartir el contenido de una página web. Sin embargo, hace años que se abandonó el uso de tablas para eso y se comenzó a utilizar la etiqueta DIV, por mil motivos, pero principalmente porque la etiqueta div tiene una libertad y movilidad que no te da una tabla. Esto ha sido así hasta la llegada de HTML5 y sus nuevas etiquetas que se utilizan de la misma forma pero añaden un significado semántico, por lo que el consorcio W3C recomienda no utilizar etiquetas <div> y <span> a menos que no haya otra etiqueta más correcta para ello.

Esas nuevas etiquetas que la versión 5 de HTML añade las veremos a partir de este módulo.

Etiquetas <dl> … </dl>, <dt> … </dt> y <dd> … </dd>

Utilizadas para crear listas de definición, compuestas por un término y una definición.

La etiqueta <dl> es la que encierra la lista completa, y utilizamos las otras dos para indicar, en primer lugar, el término y, en segundo lugar, la definición. Veamos un ejemplo:

Como puedes ver, es un listado que también puedes obtener usando las etiquetas <ul> y <li>, pero recuerda que en HTML5 siempre debes usar las etiquetas más «optimas» y con el significado semántico más exacto para el contenido que vas a publicar. En este caso, si vas a publicar un listado de términos con definiciones, nunca uses las etiquetas «genéricas» de listado, utiliza éstas ya que son específicas para este tipo de contenido.

Nota: No voy a decirlo en cada etiqueta, así que  fíjate en cada ejemplo: en este caso, las etiquetas que hemos descrito se muestran como elementos en bloque, y no elementos en línea.

Etiqueta <nav> … </nav>

Usada para especificar un conjunto de enlaces de navegación, habitualmente para añadir el código del menú principal (o de los menús principales) de nuestra página web.

No es necesario que cada uno de los enlaces de navegación tengan que están dentro de esta etiqueta, pero sí es una buena y recomendada forma de agrupar menús u opciones de navegaciones.

Su sintaxis es sencilla:

Dentro de ella, como es lógico, podemos añadir enlaces, listados, y las etiquetas que nos sean necesarias.

Etiqueta <section> … </section>

Se utiliza para definir secciones en el documento: capítulos, encabezados, etc. Se muestra como un elemento en bloque y no aplica ningún formato concreto, pero es muy útil al trabajar junto con CSS para dar formato o con Javascript para interactuar con estas secciones.

Etiqueta <article> … </article>

Utilizada para indicar un contenido independiente o autónomo en nuestro documento HTML5. El objetivo es que sea usada para mensajes en foros, para noticias, artículos de blog, etc. Por ejemplo, todo este módulo 6 del curso podría estar encerrado en una etiqueta <article> …. </article>.

Etiqueta <aside> … </aside>

Usada para definir un contenido al margen del contenido principal, aunque relacionado con el mismo. El ejemplo más practico es utilizar esta etiqueta para encerrar el contenido lateral, como el que tiene esta misma página a su derecha, donde puedes ver artículos relacionados o un bloque para suscribirte a la newsletter de Let’s Webbing (que por cierto, ya que estamos, ¿estás suscrito? ¡ES GRATIS!).

No obstante, este contenido puede estar colocado en un lateral o por encima o debajo del contenido.

Etiqueta <figure> … </figure>

De nuevo otra etiqueta de contenido semántico, como las anteriores. Permite especificar contenido autónomo, como la anterior etiqueta, pero ésta está pensada para encerrar ilustraciones, diagramas, fotos, listas de código, etc.

Aunque el contenido debe guardar relación con el contenido principal, si ocultasemos o no publicasemos esta etiqueta el contenido principal no debería quedar afectado.

Junto con esta etiqueta se utiliza esta otra: <figcaption> … </figcaption>. Ésta permite especificar una denominación o nombre para la figura insertada, y ha de estar situada como primer elemento del contenido o como último elemento.

Su sintaxis sería la siguiente:

Etiqueta <footer> … </footer>

Permite definir un pié de página, y se recomienda que el contenido guarde releación con el elemento que la contiene. Es decir, si se usa a pié de página, deberá contener información sobre el autor del documento, copyright, ciertos enlaces, términos de uso, información de contacto o demás tipo de información que suele y debe ir en un pié de página.

Un documento puede contener varias etiquetas <footer> situadas en diferentes sitios (secciones, artículos, etc.).

Etiqueta <time> … </time>

Con ella definimos una hora en formato 24horas, o en formato gregoriano, opcionalmente con un tiempo y desplazamiento de zona horaria.

Su sintaxis es esta:

Se puede utilizar tanto con el atributo datetime o sin él, y aunque el navegador no muestra el texto de forma diferente, se recomienta el uso de esta etiqueta para añadir un significado semántico en el documento HTML5. Te muestro varias formas de usar esta etiqueta, con y sin atributo:

Etiqueta <details> … </details>

Con ella definimos contenido que el usuario puede ver u ocultar según le interese. Permite añadir dentro cualquier tipo de contenido; para visualizar el mismo el usuario ha de hacer click sobre el símbolo correspondiente en el navegador, y así la etiqueta mostrará su contenido; por defecto, si no se especifica lo contrario, la etiqueta establece su contenido como oculto.

Su sintaxis:

Veamos un ejemplo práctico en código HTML5 y luego cómo lo visualiza el navegador:

Te dejo un ejemplo interactivo de este mismo código. Para ver el contenido oculto puedes hacer clic tanto en el icono como en el título:

¡A practicar!

En este módulo sin duda hemos visto no solo un gran número de etiquetas, si no más complejas de lo que hemos ido viendo hasta ahora, como las tablas, el uso de <div> y <span>, etc. Por ello te voy a recomendar varias practicas que sin duda te ayudarán a asentar conocimientos.

• Pratica 1: Tablas.
  En este módulo tienes 3 ejemplos de 3 tablas diferentes, desde una tabla simple a una tabla compleja con celdas combinadas. Con esos conocimientos y esos ejemplos, escribe el código HTML5 para que tu navegador muestre las siguientes tablas:

• Practica 2: Etiquetas semánticas.
  Escribe el código HTML5 para que al abrir el documento en tu navegador se muestre un contenido exactamente como este:

Importante: en esta segunda práctica fuérzate a utilizar las nuevas etiquetas que has visto, como <div>, <article>, <time>, etc.

• Practica 3: Práctica extendida
  Sobre el código HTML5 que has creado en la práctica dos, añade información extra a la noticia (puedes buscar sobre el tema o simplemente añadir texto genérico para practicar). Utiliza la etiqueta <aside> y <footer> y, al menos dentro de la primera, utiliza la etiqueta <details>.

Summary

Article Name

Curso HTML5 - 5/9 - Etiquetas avanzadas

Description

Etiquetas HTML5 - Curso HTML5 desde cero -Todos los elementos visibles de HTML5 pueden ser o elementos de bloque o elementos de línea.

Author

Nicolau Roca

Publisher Name

Let's Webbing

Publisher Logo