Para aquellos que estáis empezando vuestro aprendizaje de desarrollo web, os puede venir bien una lista con las etiquetas HTML más usadas.
En este artículo hablo exclusivamente de la última versión del estándar, el HTML 5. Algunas etiquetas han sufrido cambios en su función y sintaxis respecto a versiones anteriores, pero no estás aquí para una clase de historia, ¿verdad?
Nomenclatura
Antes de nada, es importante dejar claros algunos conceptos que conviene distinguir muy bien desde el principio:
- Elemento: Los elementos HTML son los componentes básicos de un documento HTML. En esta página que estás leyendo, por ejemplo, el título, un párrafo y una imagen son elementos H1, P e IMG, respectivamente. No todos los tipos de elemento son visibles: algunos tienen como única función agrupar a otros elementos, por ejemplo.
- Etiqueta: Las etiquetas HTML son los códigos que se usan en el código fuente para declarar y delimitar cada uno de los elementos. Por ejemplo, el elemento P (párrafo) comienza siempre con la etiqueta de apertura
<p>y suele terminar con la etiqueta de cierre</p>. Algo así:<p>Hola, mundo.</p>. - Atributo: Los atributos se incluyen en las etiquetas de apertura para añadir información necesaria para el elemento. Por ejemplo, si quiero incluir aquí un enlace a Facebook, debo añadir al correspondiente elemento A (enlace) un atributo
hrefdonde especificaré la dirección de Facebook, así:<a href="https://www.facebook.com">Ir a Facebook</a>. - Atributos globales: Son atributos genéricos que puede contener cualquier tipo de elemento. Entre los más usados están el
id(identificador único) y elclass(usado normalmente para aplicar estilos vía CSS).
El esqueleto del HTML
Todo documento HTML consta de un elemento raíz HTML del que cuelgan un HEAD y un BODY (en ese orden).
| HTML | El elemento HTML es la raíz del documento. Todos los demás elementos están contenidos en él. Aunque no es obligatorio, es conveniente añadirle el atributo lang, donde especificaremos la abreviatura del idioma principal de la página («es» para español, «en» para inglés, etc.):<html lang="es"> … </html>. |
| HEAD | Es la cabecera del documento HTML. No es visible en la página, se usa para añadir metadatos acerca de la página, como el título (TITLE) o recursos externos como el favicono o las hojas de estilo que se aplicarán (LINK). |
| BODY | El elemento BODY representa el contenido visible del documento. Aquí es donde irían el resto de las etiquetas HTML que mencionaremos. |
Etiquetas HTML genéricas
Los etiquetas DIV y SPAN representan elementos sin una semántica definida, es decir, son contenedores genéricos.
| DIV | División vertical de bloque. Su contenido se presenta en un bloque que abarca, por defecto, todo el ancho de su elemento padre. Los elementos hermanos que van antes y después en el código fuente, quedarían situados arriba y abajo del DIV, respectivamente. |
| SPAN | División horizontal de texto. Se puede usar para aplicar estilos a fragmentos de texto dentro de un párrafo, por ejemplo. |
Elementos semánticos de bloque
Las etiquetas genéricas DIV y SPAN solo deberían usarse cuando no exista otra más específica que nos sirva. En este apartado vemos lo que podríamos llamar «DIVs especializados»:
| MAIN | El elemento MAIN es representa el contenido central de la página, es decir, excluyendo cosas como la cabecera, pie de página, barras laterales, etc. |
| ARTICLE | Representa un artículo independiente en el contexto de una web o de una página individual. Puede ser un artículo en una revista, una entrada en un foro o en un blog, etc. |
| SECTION | Como el propio nombre indica, representa una sección individual. Una página o un artículo, por ejemplo, podrían estar divididos en varias secciones, cada una de ellas con su propio encabezado. |
| HEADER | Un HEADER (no confundir con HEAD) es una cabecera. Un ejemplo es la típica barra superior que contiene el logo y un menú. También, un SECTION o un ARTICLE podrían contener su propio HEADER |
| FOOTER | Se suele usar para el pie de página, pero puede servir como pie de un artículo, entrada o cualquier otra sección de una página. |
| ASIDE | Se trata de contenido que está solo indirectamente relacionado con el contenido principal. Se debería poder quitar sin que eso afecte al resto de la página. |
| NAV | Los menús de navegación suelen estar codificados como elementos NAV que contienen lista de enlaces a otras páginas. |
| BLOCKQUOTE | Es un bloque donde se cita un texto de otra fuente. Suele aparecer resaltado con una indentación y un tipo de letra diferente al resto. |
| ADDRESS | Su función es contener información de contacto de una persona u organización. |
| P | Representa un párrafo, aunque también puede contener otros bloques, como imágenes o campos de formularios. Los navegadores suelen añadirle un margen vertical para separarlo de otros párrafos. |
| H1-H6 | Son encabezados y subencabezados, es decir, títulos de páginas, artículos, secciones, etc. Vienen en seis niveles, siendo H1 el primer nivel (con mayor y más destacado tipo de letra) y H6 el último. |
Etiquetas para destacar textos
| EM | Se usa para dar énfasis a parte de un texto, de modo que el significado cambie más o menos sutilmente: <p>—¡Recógelo <em>ahora mismo</em>!</p>. Un sintetizador de voz podría variar el tono al leer este elemento. Los navegadores suelen presentarlo en cursiva. |
| I | Se usa para aplicar un resalte tipográfico (normalmente cursivas) a una parte de un texto, normalmente por razones lingüísticas: <p>El anglicismo <i>bullying</i> es innecesario</p>. El resultado visual suele ser letra cursiva. |
| STRONG | Indica que su contenido tiene mayor importancia que el resto, así que lo destacamos para que quede clara la idea: <p>Manipular armas cargadas es <strong>extremadamente peligroso</strong>.</p>. Se suele presentar en negrita. |
| B | Se usa para destacar un elemento, no por dar especial énfasis o importancia, sino como mero recurso visual, para guiar la vista del lector, o llamar su atención. Por motivos históricos, los navegadores lo presentan en negrita. |
| MARK | Menos usado, este elemento sirve para resaltar textos que no estaban pensados originalmente para estar destacados, pero que tienen alguna relevancia en el contexto actual. Por ejemplo, para destacar una frase que nos parece interesante dentro de una cita de otra obra (como si subrayásemos con resaltador) o para marcar las coincidencias de la búsqueda que el usuario ha hecho usando el buscador interno de nuestra web: <p>Como dijo Isabel Allende: <q>El que busca la verdad <mark>corre el riesgo de encontrarla</mark></q></p>. |
Aunque el resultado visual de algunas de estas etiquetas es negritas o cursivas, no se deben usar solamente para aplicar dichos estilos. Si la única intención es aplicar estilos, se debe usar CSS (espaciado, tamaño, estilo de la letra…). Las etiquetas HTML (en el estándar HTML 5) son para indicar la semántica (fragmento importante, enfatizado, relevante…).
Otros elementos de texto
| A | Los enlaces, o hipervínculos, que hacen posible la web. El atributo href especifica la URL a la que lleva el enlace: <a href="https://google.com">Ir a Google</a>. |
| BR | Introduce un salto de línea: <p>La primavera ha venido.<br>Nadie sabe como ha sido.</p>. |
| TIME | Representa una fecha y/u hora (o bien una duración). Puede contener un atributo datetime, que representaría el mismo dato, pero en formato consumible por ordenadores: <p>Escrito por Fulanito <time datetime="2011-11-18T14:54:39.929">hace ocho años</time></p>. |
| ABBR | Sirve para indicar abreviaturas o acrónimos. Si se usa el atributo global title (no obligatorio), es para la expasión o descripción: <abbr title="síndrome de inmunodeficiencia adquirida">sida</abbr>. |
| Q | Viene a ser el equivalente de BLOCKQUOTE, pero la cita no va en un párrafo aparte, sino en la misma línea: <p>Según la presidenta de la asociación, su presupuesto <q>se duplicará para ajustarse a las nuevas necesidades</q>.</p>. |
| DEL | Representa un texto que ha sido eliminado en la actualización de un documento (un artículo de un blog, por ejemplo). |
| INS | Es justo lo contrario de DEL, es decir, texto añadido a un documento: <p>La reunión se celebrará el próximo <del>jueves</del><ins>viernes</ins>.</p>. |
Tablas y listas
HTML también dispone de etiquetas para estructurar información, más allá de simples bloques de texto.
| TABLE | Es la etiqueta que se usa para estructurar la información en filas y columnas (ahora mismo, sin ir más lejos, estás leyendo una celda de una tabla). En esencia, un TABLE contiene una o más filas (TR) que, a su vez, contienen una o más celdas (TD). Una celda puede contener no solo texto, sino prácticamente cualquier tipo de elemento: artículos, imágenes, formularios o incluso otras tablas. |
| OL | Se usa para listas ordenadas donde cada ítem (LI) va etiquetado con un número, letra, etc. |
| UL | Son las clásicas listas con viñetas (normalmente círculos sólidos). Al igual que en los OL, cada elemento de la lista se marca con la etiqueta <li>. |
| DL | Representa una lista de descripciones (por ejemplo, un glosario). Cada elemento de la lista se compone de un término a describir (DT) seguido de la descripción en cuestión (DD). |
Al igual que las celdas de las tablas, los elementos de listas (LI y DD) no están limitados solo a texto, sino que pueden contener casi cualquier tipo de elemento HTML.
Imágenes y multimedia
| IMG | Es la etiqueta más usada (aunque no la única) para insertar una imagen. El atributo src contiene la URL de la imagen: <img src="/fotos/gatito.jpg">. |
| VIDEO | Sirve para incrustar un video. En su uso más simple, el atributo src indica la URL. Si está presente el atributo lógico controls, el navegador incluirá controles para la reproducción, pausa, etc. |
| AUDIO | Igual que el elemento VIDEO, pero específicamente para audio. |
Formularios
| FORM | Se usa para insertar un formulario con el que el usuario podrá enviar datos al servidor. Llevará anidadas otras etiquetas HTML con las que se añadirán los diferentes campos. A continuación, vemos las etiquetas de este tipo más comunes. |
| INPUT | Con esta etiqueta se crean la mayoría de los controles interactivos que pueden formar parte de un formulario. Su atributo type es el que indica el tipo de control: text (campo de texto), button (botón), checkbox (casilla de verificación), etc. Su atributo name se usa para identificar el dato cuando se envíe al servidor. |
| TEXTAREA | Es un campo de texto que permite insertar retornos de carro, es decir, textos multilínea. |
| BUTTON | Se suele usar para crear botones CSS elegantes. Se diferencia del botón INPUT en que no necesita estar obligatoriamente dentro de un FORM y en que es mucho más flexible en cuanto a su apariencia. Entre la etiqueta de apertura y la de cierre puede haber no solo texto sino también elementos HTML, incluso imágenes. |
| SELECT | Es la típica lista desplegable, de la cual puedes seleccionar una opción. Con el atributo lógico multiple puedes indicar que se pueda elegir más de un elemento de la lista, en cuyo caso se suele mostrar un recuadro con todas las opciones (o las que quepan sin desplazarse verticalmente). Las opciones se representan con etiquetas <option>: <select name="direccion"><option>Norte<option>Sur<option>Este<option>Oeste</select>. |
| PROGRESS | El elemento HTML5 progress se usa para mostrar una barra de progreso nativa del navegador (en lugar de simularla con otros elementos HTML, que es como solía hacerse antaño). Sus atributos value y max se usan para indicar el progreso actual y el máximo, respectivamente: <progress value="80" max="100">80 de 100</progress>. |
| LABEL | Se usa para poner títulos a los campos de un formulario. Se asocia al campo correspondiente asignando su id al atributo for del LABEL: <label for="apellido">Apellidos:</label><input type="text" id="apellido" name="apellido">.Otra posibilidad sería anidar el campo dentro del LABEL: <label>Apellidos: <input type="text name="apellido"></label>. |
Y mucho más
Hay muchas más etiquetas, pero creo que con estas puedes conseguir casi casi cualquier cosa que te propongas. En cualquier caso, la lista definitiva, con todos sus atributos y demás, la tienes en la referencia HTML del MDN Web Docs.