HTML (HyperText Markup Language) es el lenguaje esencial para estructurar el contenido de cualquier página web. Comprender las etiquetas es clave para los desarrolladores y técnicos, ya que influyen en la accesibilidad, el rendimiento y el SEO de un sitio web. En este blog, expondremos las etiquetas HTML más importantes, su uso práctico y las mejores prácticas recomendadas por la industria.
HTML se compone de etiquetas (tags) que organizan el contenido de una página web. Estas etiquetas permiten definir títulos, párrafos, imágenes, enlaces, tablas, formularios y mucho más. Su correcta implementación impacta directamente en la experiencia del usuario y en la forma en que los motores de búsqueda interpretan el contenido.
Cada etiqueta HTML sigue una estructura específica:
Etiqueta de apertura: <p>
Contenido: "Este es un párrafo"
Etiqueta de cierre: </p>
Algunas etiquetas, como <img>, son auto-cerradas, es decir, no requieren una etiqueta de cierre.
Etiqueta: Define el tipo de contenido (<h1>, <p>, <div>).
Elemento: Es la etiqueta y su contenido (<h1>Encabezado</h1>).
Atributo: Proporciona información adicional sobre la etiqueta (<img src="imagen.jpg" alt="Descripción">).
A continuación, encontrarás una lista organizada de etiquetas HTML según su función en el desarrollo web.
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<html> |
Contenedor raíz de un documento HTML. | <html lang="es">...</html> |
<head> |
Contiene metadatos y enlaces a recursos externos. | <head><title>Mi sitio</title></head> |
<meta> |
Define metadatos del documento. | <meta charset="UTF-8"> |
<base> |
Define la URL base para enlaces relativos en el documento. | <base href="https://ejemplo.com/"> |
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<body> |
Contenedor del contenido visible. | <body>...</body> |
<header> |
Define un encabezado de sección o página. | <header><h1>Bienvenido</h1></header> |
<footer> |
Define un pie de página. | <footer>© 2025 Mi Sitio</footer> |
<main> |
Contiene el contenido principal del documento. | <main><p>Contenido importante</p></main> |
<section> |
Agrupa contenido relacionado. | <section><h2>Noticias</h2></section> |
<article> |
Representa un contenido independiente. | <article><h2>Artículo</h2></article> |
<aside> |
Contenido relacionado (como barras laterales). | <aside>Publicidad</aside> |
<nav> |
Contenedor de enlaces de navegación. | <nav><a href="#">Inicio</a></nav> |
<div> |
Contenedor genérico sin semántica específica. | <div class="contenedor">...</div> |
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<h1> - <h6> |
Encabezados de distintos niveles. | <h1>Título</h1> |
<p> |
Párrafo de texto. | <p>Este es un párrafo.</p> |
<br> |
Salto de línea. | Texto<br>Otro texto |
<hr> |
Línea horizontal. | <hr> |
<strong> |
Texto en negrita (importante). | <strong>Importante</strong> |
<b> |
Texto en negrita (sin semántica). | <b>Texto en negrita</b> |
<em> |
Texto en cursiva (énfasis). | <em>Resaltado</em> |
<i> |
Texto en cursiva (sin semántica). | <i>Texto en cursiva</i> |
<mark> |
Texto resaltado. | <mark>Importante</mark> |
<small> |
Texto en tamaño reducido. | <small>Nota</small> |
<del> |
Texto tachado. | <del>Borrado</del> |
<ins> |
Texto subrayado. | <ins>Insertado</ins> |
<sub> |
Texto en subíndice. | <sub>2</sub>O |
<sup> |
Texto en superíndice. | <sup>2</sup> |
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<ul> |
Lista desordenada. | <ul><li>Item 1</li><li>Item 2</li></ul> |
<ol> |
Lista ordenada. | <ol><li>Uno</li><li>Dos</li></ol> |
<li> |
Elemento de una lista. | <li>Elemento</li> |
<dl> |
Lista de definición. | <dl><dt>Término</dt><dd>Definición</dd></dl> |
<dt> |
Término de la lista de definiciones. | <dt>HTML</dt> |
<dd> |
Descripción de la lista de definiciones. | <dd>Lenguaje de marcado</dd> |
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<table> |
Define una tabla. | <table><tr><td>Dato</td></tr></table> |
<tr> |
Define una fila en la tabla. | <tr><td>Fila 1</td></tr> |
<td> |
Define una celda de datos. | <td>Celda</td> |
<th> |
Define una celda de encabezado. | <th>Encabezado</th> |
<caption> |
Agrega un título a la tabla. | <caption>Título de tabla</caption> |
<colgroup> |
Agrupa columnas de una tabla. | <colgroup><col style="background-color:yellow"></colgroup> |
<col> |
Define atributos para una columna dentro de <colgroup>. |
<col span="2" style="background-color:blue"> |
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<form> |
Contenedor de formulario. | <form action="/submit" method="post"></form> |
<input> |
Campo de entrada. | <input type="text" placeholder="Nombre"> |
<textarea> |
Campo de texto multilínea. | <textarea>Escribe aquí</textarea> |
<select> |
Menú desplegable. | <select><option>Opción 1</option></select> |
<option> |
Opción dentro de <select>. |
<option value="1">Opción 1</option> |
<optgroup> |
Grupo de opciones dentro de <select>. |
<optgroup label="Grupo"><option>Item</option></optgroup> |
<button> |
Botón. | <button>Enviar</button> |
<label> |
Etiqueta para un campo de entrada. | <label for="nombre">Nombre:</label> |
<fieldset> |
Agrupa elementos de un formulario. | <fieldset><legend>Información</legend></fieldset> |
<legend> |
Título de un <fieldset>. |
<legend>Detalles personales</legend> |
<datalist> |
Lista de opciones para <input>. |
<datalist id="opciones"><option value="Uno"></option></datalist> |
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<iframe> |
Incrusta contenido externo. | <iframe src="https://ejemplo.com"></iframe> |
<embed> |
Incrusta contenido multimedia o de aplicaciones. | <embed src="archivo.swf"> |
<object> |
Incrusta contenido externo como Flash o PDF. | <object data="archivo.pdf"></object> |
| Etiqueta | Descripción | Estado |
|---|---|---|
<marquee> |
Texto desplazable. | Obsoleto |
<blink> |
Texto parpadeante. | Obsoleto |
<center> |
Centrar contenido. | Obsoleto |
<big> |
Texto grande. | Obsoleto |
##Lista de Tags Introducidos en HTML5
HTML5 introdujo nuevos Tags o etiquetas para mejorar la semántica, multimedia, interactividad y accesibilidad en las páginas web. Estos son los tags con su descripción y ejemplos:
Estas etiquetas fueron introducidas en HTML5 para mejorar la semántica del contenido web.
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<article> |
Contenido independiente, como blogs o noticias. | <article><h2>Artículo</h2></article> |
<aside> |
Contenido secundario, como barras laterales o publicidad. | <aside>Publicidad aquí</aside> |
<figcaption> |
Pie de imagen dentro de <figure>. |
<figcaption>Descripción de la imagen</figcaption> |
<figure> |
Contenedor para imágenes, gráficos o ilustraciones con una descripción. | <figure><img src="foto.jpg"><figcaption>Imagen explicativa</figcaption></figure> |
<main> |
Define el contenido principal del documento (debe haber solo uno por página). | <main><p>Este es el contenido principal</p></main> |
<mark> |
Resalta texto importante. | <p>Este es un <mark>texto resaltado</mark></p> |
<nav> |
Agrupa enlaces de navegación. | <nav><a href="home.html">Inicio</a></nav> |
<section> |
Define una sección de contenido estructurada. | <section><h2>Noticias</h2></section> |
<summary> |
Define un resumen interactivo dentro de <details>. |
<details><summary>Ver más</summary><p>Contenido oculto</p></details> |
<time> |
Representa una fecha u hora específica. | <time datetime="2025-03-18">18 de marzo de 2025</time> |
Estas etiquetas permiten la reproducción de audio y video sin necesidad de plugins externos.
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<audio> |
Reproduce archivos de audio. | <audio controls><source src="audio.mp3"></audio> |
<video> |
Inserta un video con controles de reproducción. | <video controls><source src="video.mp4"></video> |
<source> |
Define múltiples fuentes para <video> o <audio>. |
<source src="video.mp4" type="video/mp4"> |
<track> |
Agrega subtítulos o descripciones a videos. | <track kind="subtitles" src="subtitulos.vtt"> |
<canvas> |
Área para gráficos dinámicos con JavaScript. | <canvas id="miCanvas" width="300" height="150"></canvas> |
<svg> |
Inserta gráficos vectoriales escalables. | <svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" fill="red"/></svg> |
HTML5 introdujo nuevas etiquetas para mejorar la experiencia en formularios.
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<datalist> |
Lista de sugerencias para <input>. |
<input list="opciones"><datalist id="opciones"><option value="HTML"></option></datalist> |
<output> |
Representa el resultado de un cálculo. | <output name="resultado">0</output> |
<progress> |
Barra de progreso. | <progress value="70" max="100"></progress> |
<meter> |
Representa una medida dentro de un rango conocido. | <meter value="4" min="0" max="10"></meter> |
Estas etiquetas permiten agregar contenido dinámico sin necesidad de JavaScript o plugins.
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<details> |
Define un área de contenido colapsable. | <details><summary>Más info</summary><p>Texto oculto</p></details> |
<summary> |
Define un resumen para <details>. |
<details><summary>Ver más</summary><p>Contenido oculto</p></details> |
##Lista de Tags raros o muy poco utilizados Aqui teneis una lista adicional de todos los Tags o etiquetas raros y que prácticamente nunca se usan, pero que existen.
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<bdi> |
Asegura que el texto dentro se renderice correctamente en idiomas con direcciones diferentes (LTR/RTL). | <bdi>مرحبا</bdi> |
<bdo> |
Cambia la dirección del texto (de izquierda a derecha o viceversa). | <bdo dir="rtl">Texto al revés</bdo> |
<wbr> |
Sugerencia de salto de línea en palabras largas. | Supercalifragilistico<wbr>espialidoso |
<ruby> |
Se usa para anotaciones de caracteres en idiomas asiáticos. | <ruby>漢<rt>Kanji</rt></ruby> |
<rt> |
Define la anotación dentro de <ruby>. |
<ruby>字<rt>Letra</rt></ruby> |
<rp> |
Define texto entre paréntesis cuando <ruby> no es compatible. |
<ruby>字<rp>(</rp><rt>Letra</rt><rp>)</rp></ruby> |
Estas etiquetas no son muy comunes, pero permiten especificar contenido que puede ser generado dinámicamente o usado en ciertos casos específicos.
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<template> |
Define contenido HTML que no se renderiza hasta ser clonado con JavaScript. | <template id="miTemplate"><p>Contenido dinámico</p></template> |
<slot> |
Se usa dentro de Web Components para definir áreas de contenido personalizables. | <slot name="titulo"></slot> |
<shadow> |
(Obsoleto) Se usaba en Web Components para encapsular estilos. | No se recomienda su uso |
Algunas etiquetas han sido removidas o reemplazadas en HTML5 porque ya no cumplen una función relevante o porque su propósito se logra con CSS y JavaScript.
| Etiqueta | Razón de su eliminación |
|---|---|
<acronym> |
Reemplazado por <abbr> |
<applet> |
Obsoleto, usaba Java en páginas web |
<basefont> |
Controlaba la fuente predeterminada, reemplazado por CSS |
<big> |
Texto grande, reemplazado por CSS |
<blink> |
Texto parpadeante, solo funcionaba en Netscape |
<center> |
Centrado de texto, reemplazado por CSS |
<font> |
Definía fuentes, reemplazado por CSS |
<frame> y <frameset> |
Usado para dividir la pantalla en marcos, reemplazado por <iframe> |
<isindex> |
Campo de búsqueda, reemplazado por <input type="search"> |
<marquee> |
Texto en movimiento, reemplazado por CSS (animation) |
<noframes> |
Mostraba contenido alternativo cuando los frames no eran soportados |
Los desarrolladores web utilizan etiquetas HTML de forma precisa para construir páginas web funcionales. Por ejemplo, un formulario básico puede estar compuesto de <form>, <input>, y <label>, lo que permite interactuar con los usuarios y recopilar datos. Al trabajar con estas herramientas, los programadores deben asegurarse de usar etiquetas adecuadas y sus atributos correctamente para mejorar la accesibilidad y la usabilidad del sitio web.
<article>, <footer>, y <header>, que no solo organizan mejor el contenido, sino que también mejoran el SEO y la accesibilidad.<font>, deben evitarse en favor de CSS para lograr un código más limpio y conforme a los estándares actuales.Las actualizaciones constantes de HTML, especialmente con el HTML5, han integrado nuevas características que siguen evolucionando, como el soporte para multimedia con etiquetas <video> y <audio>, muy utilizadas en aplicaciones modernas. Ambas fuentes muestran cómo el futuro de HTML va hacia la integración con tecnologías como las Progressive Web Apps (PWA), lo que traerá nuevas etiquetas y usos.
El dominio de las etiquetas HTML es fundamental para desarrolladores y técnicos que buscan optimizar la creación de sitios web. Aplicar correctamente estas etiquetas no solo mejora la estructura del contenido, sino que también optimiza el rendimiento del sitio.
