Vamos a repasar juntos una lista de 20 etiquetas HTML5, algunas muy conocidas y otras bastante menos, además de su compatibilidad con los navegadores: Chrome, Firefox, Safari e Internet Explorer.
8 etiquetas de disposición
Estas etiquetas están sobre todo para que los motores de búsqueda entiendan mejor tu sitio.
<article>– Define el sitio de un artículo, de un comentario de blog o de foro, suele estar formado por un título y un párrafo.<section>– Define una sección que representa una temática. Un<article>puede estar compuesto por varias temáticas (<section>), y también al revés. También lleva un título y una introducción. Se le puede asignar una etiqueta accesible con el atributoaria-label.<aside>– Define una sección que va al lado del contenido principal, ideal para las sidebars o los espacios publicitarios.<figure>– Figure es un contenedor que funciona junto a la etiqueta<figcaption>: figure sirve para mostrar una imagen o un vídeo seguidos de un pie (<figcaption>).<footer>– Define el pie de tu página.<header>– Define la cabecera de tu página.<hgroup>– Una etiqueta que permite agrupar varios títulos (<h1> a <h6>).<nav>– Representa una sección que contiene enlaces. Se usa a menudo dentro del<header>para el menú principal, o en el<footer>para el aviso legal y compañía.
4 etiquetas de medios
<video>– Muestra un reproductor de vídeo en HTML5, hay que indicar el origen del vídeo con el atributosrc.<audio>– Lo mismo que la etiqueta anterior, pero solo para un archivo de audio.<picture>– La menos conocida, porque en algunos navegadores sigue en fase experimental. La etiqueta<picture>permite declarar varias<source>destinadas a un elemento<img>: el navegador elegirá después la imagen más adecuada según la resolución.<source>– Permite definir distintos orígenes de archivos multimedia. Se usa con<video>,<audio>y<picture>.
8 etiquetas funcionales
<details>– Va de la mano de<summary>, esta etiqueta define un contenido desplegable.
Ver detalles
Más información sobre los detalles.
<dialog>– Dialog es una ventana modal nativa de HTML5.Example from Mozilla –
<embed>– La etiqueta embed ofrece un contenedor para mostrar recursos externos. Se usó sobre todo para incrustar Flash, y también SVG, aunque hoy hay métodos mejores.<mark>– Permite resaltar tu texto.<meter>– Representa un indicador comprendido entre dos valores fijos.Example from Mozilla –
de Damien Flandrin (@dam62500) en CodePen. <progress>– Parecida a<meter>, pero representa un porcentaje de progreso.Example from Mozilla – de Damien Flandrin (@dam62500) en CodePen.
<time>– Representa una fecha de forma semántica y acepta el atributodatetime.html<p>Le concert a eu lieu le<time datetime="2001-05-15T19:00">15 Mai</time>.</p><wbr>– Una de las etiquetas menos conocidas de HTML5 y aun así útil:<wbr>le indica al navegador que puede cortar la línea en ese punto si hace falta.
···
Estas etiquetas dan por sabidas las bases del lenguaje. Si estás empezando, pasa antes por las 7 cosas que hay que saber antes de aprender HTML: vocabulario, esqueleto de un documento y estructura semántica.
