Etiquetas HTML para principiantes

Foto de etiquetas HTML en una pantalla de ordenador

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 href donde 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 el class (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).

HTMLEl 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>.
HEADEs 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).
BODYEl 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.

DIVDivisió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.
SPANDivisió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»:

MAINEl 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.
ARTICLERepresenta 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.
SECTIONComo 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.
HEADERUn 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
FOOTERSe 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.
ASIDESe 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.
NAVLos menús de navegación suelen estar codificados como elementos NAV que contienen lista de enlaces a otras páginas.
BLOCKQUOTEEs 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.
ADDRESSSu función es contener información de contacto de una persona u organización.
PRepresenta 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-H6Son 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

EMSe 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.
STRONGIndica 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.
BSe 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.
MARKMenos 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

ALos 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>.
BRIntroduce un salto de línea: <p>La primavera ha venido.<br>Nadie sabe como ha sido.</p>.
TIMERepresenta 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>.
ABBRSirve 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>.
QViene 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>.
DELRepresenta un texto que ha sido eliminado en la actualización de un documento (un artículo de un blog, por ejemplo).
INSEs 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.

TABLEEs 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.
ULSon 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>.
DLRepresenta 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

IMGEs 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">.
VIDEOSirve 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.
AUDIOIgual que el elemento VIDEO, pero específicamente para audio.

Formularios

FORMSe 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.
INPUTCon 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.
TEXTAREAEs un campo de texto que permite insertar retornos de carro, es decir, textos multilínea.
BUTTONSe 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.
SELECTEs 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>.
PROGRESSEl 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>.
LABELSe 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.