Cuáles son las 142 etiquetas de HTML

Vamos a sumergirnos en el colorido y diverso mundo de las etiquetas HTML. Desde las clásicas hasta las menos conocidas, las etiquetas HTML son las herramientas que utilizamos para dar forma y estructura a nuestras páginas web. Prepárate para un viaje a través de las 142 etiquetas HTML y descubre cómo puedes utilizarlas para crear sitios web increíbles.

Introducción a las etiquetas HTML

Cuando navegamos por internet, interactuamos con una variedad de páginas web que contienen texto, imágenes, formularios y otros elementos. Estos elementos están organizados y formateados utilizando etiquetas HTML (HyperText Markup Language), que actúan como bloques de construcción fundamentales para la creación de páginas web.

Podría interesarte: ¿Qué es React JS y para qué se usa?

Existe una web donde puedes profundizar en todas la etiquetas que vamos a comentar aquí, estamos hablando de la mejor fuente de documentación cuando hablamos HTML. Estamos hablando de «https://developer.mozilla.org/«. Si te interesa el mundo de la programación web, échale un ojo.

Ir a developer.mozilla.org

Las Etiquetas HTML Básicas

Comencemos con las etiquetas HTML más básicas y fundamentales, aquellas que probablemente hayas usado desde tus primeros días como desarrollador web:

<html>: Esta etiqueta envuelve todo el contenido de una página web y la define como un documento HTML.
<head>: Contiene información meta sobre el documento, como el título de la página y enlaces a hojas de estilo y scripts.
<title>: Define el título de la página que se muestra en la pestaña del navegador.
<body>: Contiene todo el contenido visible de la página, como texto, imágenes y enlaces.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Se utilizan para definir encabezados de diferentes niveles de importancia.
<p>: Define un párrafo de texto.

Etiquetas HTML para Dar Formato al Texto

Ahora, echemos un vistazo a algunas etiquetas HTML que se utilizan para dar formato al texto en una página web:

<b>: Hace que el texto sea negrita.
<i>: Hace que el texto sea cursiva.
<u>: Subraya el texto.
<strong>: Indica que el texto es importante.
<em>: Emfatiza el texto.

Etiquetas HTML para Enlazar y Navegar

Las etiquetas HTML también nos permiten crear enlaces entre diferentes páginas web y navegar por ellas:

<a>: Define un enlace o hipervínculo.
href: Especifica la URL a la que enlaza el hipervínculo. (debe ir dentro de un <a>)
target: Especifica dónde se abrirá el enlace (por ejemplo, en una nueva ventana o pestaña y debe ir dentro de un <a>).

Podría interesarte: Atributo HREF en HTML: Aprende como usarlo

Etiquetas HTML para Imágenes y Multimedia

Las imágenes y otros medios son componentes importantes de muchas páginas web. Las siguientes etiquetas HTML nos permiten incorporarlos en nuestras páginas:

<img>: Inserta una imagen en la página.
src: Especifica la URL de la imagen. (va dentro de una <img> o <video> o <audio>).
alt: Proporciona un texto alternativo que se muestra si la imagen no se carga correctamente.
<audio>: Define un archivo de audio que se puede reproducir en la página.
<video>: Define un archivo de video que se puede reproducir en la página.

Etiquetas HTML para Listas y Tablas

Las listas y tablas son herramientas útiles para organizar y presentar datos en una página web:

<ul>: Define una lista no ordenada.
<ol>: Define una lista ordenada.
<li>: Define un elemento de lista.
<table>: Define una tabla.
<tr>: Define una fila en una tabla.
<td>: Define una celda de datos en una tabla.

Etiquetas HTML para Formularios

Los formularios son elementos interactivos que permiten a los usuarios enviar información a un servidor web. Las etiquetas HTML nos permiten crear y controlar formularios:

<form>: Define un formulario en la página.
<input>: Define un campo de entrada, como un cuadro de texto o un botón de radio.
<textarea>: Define un área de texto multilínea.
<select>: Define un menú desplegable.
<option>: Define una opción en un menú desplegable.

Etiquetas HTML para Estructura y Semántica

HTML5 introdujo una serie de nuevas etiquetas que ayudan a estructurar el contenido de una página web de manera semántica:

<header>: Define el encabezado de una sección o página.
<footer>: Define el pie de página de una sección o página.
<nav>: Define una sección de navegación.
<section>: Define una sección de contenido.
<article>: Define un artículo independiente.
<aside>: Define un contenido relacionado pero no central.
<main>: Define el contenido principal de una página.
<figure>: Define contenido multimedia, como imágenes, gráficos o videos, con una leyenda opcional.
<figcaption>: Define la leyenda de una figura.

Estás etiquetas semánticas son muy importante, especialmente si cuando hablamos de temas de accesibilidad de los sitios web, sin mencionar que los robot de google los toman en cuenta a la hora de analizar los sitios web. Si no están correctamente implementadas, el sitio web se verá bien, pero no estará saludable en lo absoluto.

Etiquetas para Comentarios y División

Las etiquetas HTML también nos permiten agregar comentarios y dividir el contenido de una página web en secciones:

: Define un comentario en el código HTML. Los comentarios no se muestran en la página web y se utilizan para añadir notas para los desarrolladores.
<div>: Define una división o sección genérica en un documento HTML. Se utiliza principalmente como contenedor para elementos en línea y bloques de texto.

Etiquetas para Metadatos y Vínculos Externos

Además de las etiquetas básicas que definen la estructura y el contenido de una página web, también hay etiquetas que se utilizan para agregar metadatos y vínculos externos:

<meta>: Define metadatos que proporcionan información sobre la página, como el autor, la descripción y las palabras clave.
<link>: Define un vínculo a un recurso externo, como una hoja de estilo CSS o un icono de favicon.

Etiquetas para Estilo y Presentación

Las hojas de estilo en cascada (CSS) son responsables de la apariencia visual de una página web, pero las etiquetas HTML también nos permiten aplicar estilos directamente a los elementos:

<style>: Define estilos CSS dentro del documento HTML.
<span>: Define una sección de texto en línea. Se utiliza principalmente para aplicar estilos o manipular el contenido con JavaScript.

Etiquetas para Efectos Especiales y Control de Contenido

Algunas etiquetas HTML se utilizan para agregar efectos especiales o controlar el contenido de una página web:

<canvas>: Define un lienzo en el que se pueden dibujar gráficos, animaciones o cualquier otra representación visual dinámica.
<svg>: Define gráficos vectoriales escalables, que se utilizan para crear imágenes y gráficos vectoriales.

Etiquetas para Vínculos de Referencia

Las siguientes etiquetas HTML se utilizan para definir vínculos de referencia y marcadores en una página web:

<base>: Define la URL base para todas las URL relativas en un documento.
<area>: Define una región dentro de una imagen en la que se pueden hacer clic para activar un hipervínculo.

Etiquetas para Datos y Contenido Preformateado

Las siguientes etiquetas HTML se utilizan para mostrar datos y contenido preformateado en una página web:

<code>: Define código de computadora.
<pre>: Define texto preformateado.

Etiquetas para Definiciones y Acrónimos

Las siguientes etiquetas HTML se utilizan para definir términos y acrónimos en una página web:

<abbr>: Define una abreviatura o un acrónimo.
<dfn>: Define el término de una definición.

Etiquetas para Detalles y Resúmenes

Las siguientes etiquetas HTML se utilizan para crear detalles y resúmenes en una página web:

<details>: Define detalles adicionales que el usuario puede ver u ocultar.
<summary>: Define el título o la leyenda para los detalles adicionales.

Etiquetas para Contenido Incrustado

Las siguientes etiquetas HTML se utilizan para incrustar contenido de otros recursos en una página web:

<embed>: Define un contenedor para contenido incrustado, como medios o aplicaciones.
<iframe>: Define un marco en línea en el que se puede cargar otro documento HTML.
<object>: Define un objeto incrustado, como una imagen, un vídeo o una aplicación Java.

Etiquetas para Grupos de Opciones

Las siguientes etiquetas HTML se utilizan para agrupar opciones relacionadas en formularios:

<optgroup>: Define un grupo de opciones en un menú desplegable.

Etiquetas para Encabezados y Pie de Página

Las siguientes etiquetas HTML se utilizan para definir encabezados y pie de página en una página web:

<header>: Define el encabezado de una sección o página.
<footer>: Define el pie de página de una sección o página.

Etiquetas para Menús y Listas de Enlaces

Las siguientes etiquetas HTML se utilizan para definir menús y listas de enlaces en una página web:

<menu>: Define un menú de comandos.
<menuitem>: Define un elemento de menú.

Etiquetas para Tablas y Grupos de Columnas

Las siguientes etiquetas HTML se utilizan para definir tablas y grupos de columnas en una página web:

<table>: Define una tabla.
<caption>: Define el título de una tabla.
<col>: Define una o más columnas en una tabla.
<colgroup>: Define un grupo de columnas en una tabla.

Etiquetas para Filas y Celdas de Datos

Las siguientes etiquetas HTML se utilizan para definir filas y celdas de datos en una tabla:

<tbody>: Define el cuerpo de una tabla.
<thead>: Define el encabezado de una tabla.
<tfoot>: Define el pie de una tabla.
<tr>: Define una fila en una tabla.
<td>: Define una celda de datos en una tabla.

Etiquetas para Formularios y Campos de Entrada

Las siguientes etiquetas HTML se utilizan para definir formularios y campos de entrada en una página web:

<form>: Define un formulario HTML.
<input>: Define un campo de entrada en un formulario.
<textarea>: Define un área de texto en un formulario.
<button>: Define un botón en un formulario.

Etiquetas para Grupos de Opciones y Menús Desplegables

Las siguientes etiquetas HTML se utilizan para definir grupos de opciones y menús desplegables en un formulario:

<select>: Define un menú desplegable en un formulario.
<option>: Define una opción en un menú desplegable.
<optgroup>: Define un grupo de opciones en un menú desplegable.

Etiquetas para Medios y Archivos

Las siguientes etiquetas HTML se utilizan para definir medios y archivos en una página web:

<audio>: Define un reproductor de audio en una página web.
<video>: Define un reproductor de vídeo en una página web.
<source>: Define la fuente de medios para elementos de audio y vídeo.

Etiquetas para Formatear y Mostrar Texto

Las siguientes etiquetas HTML se utilizan para formatear y mostrar texto en una página web:

<b>: Define texto en negrita.
<strong>: Define texto importante en negrita.
<i>: Define texto en cursiva.
<em>: Define texto enfatizado en cursiva.
<small>: Define texto más pequeño.
<mark>: Define texto resaltado.
<sub>: Define texto subíndice.
<sup>: Define texto superíndice.

Etiquetas para Listas y Elementos de Lista

Las siguientes etiquetas HTML se utilizan para definir listas y elementos de lista en una página web:

<ul>: Define una lista desordenada.
<ol>: Define una lista ordenada.
<li>: Define un elemento de lista.
<dl>: Define una lista de definición.
<dt>: Define un término en una lista de definición.
<dd>: Define una descripción en una lista de definición.

Etiquetas para Enlaces y Vínculos

Las siguientes etiquetas HTML se utilizan para definir enlaces y vínculos en una página web:

<a>: Define un enlace o hipervínculo en una página web.
<link>: Define un vínculo a una hoja de estilo externa.
<area>: Define un área clickeable en una imagen para el uso con los mapas de imagen.

Etiquetas para Encabezados y Títulos

Las siguientes etiquetas HTML se utilizan para definir encabezados y títulos en una página web:

`<h1>`: Define el encabezado de nivel 1.

<h2>: Define el encabezado de nivel 2.
<h3>: Define el encabezado de nivel 3.
<h4>: Define el encabezado de nivel 4.
<h5>: Define el encabezado de nivel 5.
<h6>: Define el encabezado de nivel 6.

Etiquetas para Contenido y Secciones

Las siguientes etiquetas HTML se utilizan para definir contenido y secciones en una página web:

<section>: Define una sección en una página web.
<article>: Define un artículo o contenido independiente.
<nav>: Define un área de navegación en una página web.
<aside>: Define un contenido relacionado pero no esencial en una página web.

Etiquetas para Controles y Formularios

Las siguientes etiquetas HTML se utilizan para definir controles y formularios en una página web:

<form>: Define un formulario HTML en una página web.
<label>: Define una etiqueta para un control de formulario.
<input>: Define un control de entrada en un formulario.
<button>: Define un botón en un formulario HTML.

Etiquetas para Tablas y Filas

Las siguientes etiquetas HTML se utilizan para definir tablas y filas en una página web:

<table>: Define una tabla en una página web.
<caption>: Define el título de una tabla.
<thead>: Define la parte superior de una tabla.
<tbody>: Define el cuerpo de una tabla.
<tfoot>: Define el pie de una tabla.
<tr>: Define una fila en una tabla.

Etiquetas para Columnas y Celdas

Las siguientes etiquetas HTML se utilizan para definir columnas y celdas en una página web:

<col>: Define una columna en una tabla.
<colgroup>: Define un grupo de columnas en una tabla.
<td>: Define una celda de datos en una tabla.
<th>: Define una celda de encabezado en una tabla.

Etiquetas para Imágenes y Multimedia

Las siguientes etiquetas HTML se utilizan para definir imágenes y multimedia en una página web:

<img>: Define una imagen en una página web.
<map>: Define un mapa de imagen en una página web.
<area>: Define un área de un mapa de imagen.
<track>: Define pistas de texto para elementos de audio y vídeo.

Etiquetas para Vídeo y Audio

Las siguientes etiquetas HTML se utilizan para definir elementos de audio y vídeo en una página web:

<video>: Define un elemento de vídeo en una página web.
<audio>: Define un elemento de audio en una página web.

Etiquetas para Incrustar y Objetos

Las siguientes etiquetas HTML se utilizan para incrustar objetos y contenido en una página web:

<embed>: Define un contenido incrustado en una página web.
<object>: Define un objeto incrustado en una página web.

Etiquetas para Scripts y Estilos

Las siguientes etiquetas HTML se utilizan para definir scripts y estilos en una página web:

<script>: Define un script JavaScript en una página web.
<style>: Define estilos CSS en una página web.

Etiquetas para Encabezados y Texto

Las siguientes etiquetas HTML se utilizan para definir encabezados y texto en una página web:

<header>: Define el encabezado de una página web.
<footer>: Define el pie de una página web.
<address>: Define información de contacto en una página web.
<blockquote>: Define una cita en una página web.
<cite>: Define la referencia de una cita en una página web.
<q>: Define una cita corta en una página web.

Etiquetas para Marcas y Referencias

Las siguientes etiquetas HTML se utilizan para definir marcas y referencias en una página web:

<mark>: Define texto resaltado en una página web.
<cite>: Define una referencia en una página web.

Conclusión

Y ahí lo tienes, ¡142 etiquetas HTML para dar vida a tus páginas web! Desde las básicas hasta las más avanzadas, estas etiquetas te permiten definir la estructura, el estilo y el contenido de tus proyectos web. Ya sea que estés creando una simple página de inicio o una compleja aplicación web, estas etiquetas te ayudarán a construir experiencias interactivas y atractivas para tus usuarios.

Así que adelante, ¡explora y experimenta con las infinitas posibilidades que ofrecen las etiquetas HTML!