El lenguaje HTML (HyperText Markup Language) un gran universo para el desarrollo web. A continuación comparto el listado de etiquetas HTML, encontrará 100 etiquetas HTML, la descripción de la etiqueta y un ejemplo de uso para la etiqueta HTML.
También encontrará la opción de saber más de queda etiqueta HTML dirigiéndote a cada enlace donde comparto información importante de la sintaxis de la etiqueta e incluyo ejemplos prácticos.
| Etiqueta | Descripción | Ejemplo de Uso |
|---|---|---|
<!DOCTYPE html> | Define la versión de HTML utilizada. | <!DOCTYPE html> |
| <HTML> | Elemento raíz que engloba todo el contenido HTML. | <html lang="es">...</html> |
| <head> | Contiene información sobre el documento. | <head>...</head> |
| <title> | Define el título de la página. | <title>Página de Ejemplo</title> |
| <meta> | Proporciona metadatos sobre la página. | <meta charset="UTF-8"> |
| <link> | Enlaza hojas de estilo externas. | <link rel="stylesheet" href="estilos.css"> |
| <style> | Incluye estilos CSS en línea. | <style>body { background-color: #f0f0f0; }</style> |
| <script> | Permite la inclusión de scripts JavaScript. | <script src="script.js"></script> |
| <noscript> | Proporciona contenido alternativo sin JavaScript. | <noscript>El JavaScript está deshabilitado.</noscript> |
<base> | Define la URL base para URL relativas. | <base href="https://www.ejemplo.com/"> |
| <body> | Contiene el contenido visible de la página. | <body>Contenido de la página</body> |
<header> | Representa una sección introductoria o un encabezado. | <header>Encabezado de la página</header> |
<nav> | Define una sección de navegación. | <nav>Enlaces de navegación</nav> |
<main> | Representa el contenido principal de la página. | <main>Contenido principal</main> |
| <article> | Define un contenido autónomo. | <article>Artículo independiente</article> |
<section> | Divide el contenido en secciones temáticas. | <section>Sección de noticias</section> |
| <aside> | Define contenido tangencial al contenido principal. | <aside>Anuncios relacionados</aside> |
<footer> | Representa el pie de página de la página. | <footer>Pie de página</footer> |
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> | Encabezados de diferentes niveles. | <h1>Título principal</h1> |
<p> | Define un párrafo de texto. | <p>Este es un párrafo de ejemplo.</p> |
| <a> | Define un enlace. | <a href="https://www.ejemplo.com/">Enlace de ejemplo</a> |
<ul> | Crea una lista no ordenada. | <ul><li>Elemento 1</li><li>Elemento 2</li></ul> |
<ol> | Crea una lista ordenada. | <ol><li>Primero</li><li>Segundo</li></ol> |
| <li> | Define un elemento de lista. | <ul><li>Elemento 1</li><li>Elemento 2</li></ul> |
<dl> | Crea una lista de definición. | <dl><dt>Término</dt><dd>Definición</dd></dl> |
<dt> | Define un término en una lista de definición. | <dl><dt>HTML</dt><dd>Lenguaje de marcado</dd></dl> |
<dd> | Define la descripción de un término en una lista de definición. | <dl><dt>HTML</dt><dd>Lenguaje de marcado utilizado para crear páginas web.</dd></dl> |
<figure> | Agrupa contenido multimedia con una descripción. | <figure><img src="imagen.jpg" alt="Descripción de la imagen"><figcaption>Descripción de la imagen</figcaption></figure> |
<figcaption> | Proporciona una descripción para el contenido dentro de <figure>. | <figure><img src="imagen.jpg" alt="Descripción de la imagen"><figcaption>Descripción de la imagen</figcaption></figure> |
| <img> | Inserta una imagen. | <img src="imagen.jpg" alt="Texto alternativo"> |
<video> | Permite la reproducción de videos. | <video src="video.mp4" controls></video> |
| <audio> | Permite la reproducción de audio. | <audio src="audio.mp3" controls></audio> |
<source> | Define fuentes de medios para <video> y <audio>. | <video controls><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"></video> |
<canvas> | Crea un lienzo para gráficos generados por JavaScript. | <canvas id="lienzo"></canvas> |
<svg> | Permite la inclusión de gráficos vectoriales escalables. | <svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg> |
| <iframe> | Inserta una ventana embebida para contenido externo. | <iframe src="https://www.ejemplo.com/" width="800" height="600"></iframe> |
<table> | Crea una tabla. | <table><tr><td>Celda 1</td><td>Celda 2</td></tr></table> |
<tr> | Define una fila en una tabla. | <tr><td>Celda 1</td><td>Celda 2</td></tr> |
<td> | Define una celda de datos en una tabla. | <tr><td>Celda 1</td><td>Celda 2</td></tr> |
<th> | Define una celda de encabezado en una tabla. | <tr><th>Encabezado 1</th><th>Encabezado 2</th></tr> |
<caption> | Proporciona una descripción para una tabla. | <table><caption>Tabla de Ejemplo</caption>...</table> |
<thead> | Agrupa las filas de encabezado en una tabla. | <thead><tr><th>Encabezado 1</th><th>Encabezado 2</th></tr></thead> |
<tbody> | Agrupa las filas de datos en una tabla. | <tbody><tr><td>Dato 1</td><td>Dato 2</td></tr></tbody> |
<tfoot> | Agrupa las filas de pie de página en una tabla. | <tfoot><tr><td>Pie 1</td><td>Pie 2</td></tr></tfoot> |
<form> | Crea un formulario interactivo. | <form action="procesar.php" method="post">...</form> |
| <input> | Define un campo de entrada en un formulario. | <input type="text" name="nombre" id="nombre"> |
<textarea> | Crea un área de texto multilínea en un formulario. | <textarea name="comentario" id="comentario"></textarea> |
<button> | Crea un botón en un formulario. | <button type="submit">Enviar</button> |
<select> | Crea una lista desplegable en un formulario. | <select name="opciones" id="opciones"><option value="1">Opción 1</option><option value="2">Opción 2</option></select> |
<option> | Define una opción en una lista desplegable. | <select name="opciones" id="opciones"><option value="1">Opción 1</option><option value="2">Opción 2</option></select> |
| <label> | Etiqueta un elemento de formulario para una mejor accesibilidad. | <label for="nombre">Nombre:</label> |
<fieldset> | Agrupa elementos de formulario relacionados. | <fieldset><legend>Datos Personales</legend>...</fieldset> |
| <legend> | Proporciona una leyenda para un <fieldset>. | <fieldset><legend>Datos Personales</legend>...</fieldset> |
<details> | Crea un elemento desplegable que muestra u oculta contenido. | <details><summary>Detalles</summary>...</details> |
<summary> | Define el encabezado de un elemento <details>. | <details><summary>Detalles</summary>...</details> |
<abbr> | Define una abreviatura o acrónimo. | <abbr title="World Wide Web">WWW</abbr> |
<cite> | Marca el título de una obra citada. | <cite>El Gran Gatsby</cite> |
<code> | Muestra texto como código de programación. | <code>var x = 5;</code> |
<mark> | Resalta parte del texto. | <p>Este es un <mark>texto resaltado</mark>.</p> |
<small> | Define texto como de menor importancia. | <small>Texto de menor importancia</small> |
<strong> | Hace que el texto sea más fuerte o enfatizado. | <strong>Texto enfatizado</strong> |
<em> | Enfatiza el texto. | <em>Texto enfatizado</em> |
| <blockquote> | Cita un bloque de texto de otra fuente. | <blockquote>Cita de un autor famoso.</blockquote> |
<q> | Cita una parte corta de texto dentro de un párrafo. | <p>Según dijo Shakespeare: <q>Ser o no ser, esa es la cuestión.</q></p> |
<pre> | Muestra texto preformateado. | <pre>Texto preformateado</pre> |
<time> | Define una fecha o hora. | <p>La reunión está programada para las <time datetime="2023-09-06T14:00">2:00 PM</time>.</p> |
<ruby> | Define texto con anotaciones fonéticas. | <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby> |
<rt> | Define la pronunciación de caracteres en un <ruby>. | <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby> |
<bdi> | Aísla una parte de texto que debe formatearse en su contexto bidireccional. | <p>La dirección es <bdi dir="rtl">1234 Main St.</bdi></p> |
<wbr> | Indica un posible punto de quiebre en una palabra. | La palabra larga es anticonstitucional<wbr>idad. |
<data> | Proporciona un valor de datos para su uso en scripts. | <p>Precio: <data value="20">$20</data></p> |
<dialog> | Crea un cuadro de diálogo modal. | <dialog open>Cuadro de diálogo modal</dialog> |
¿Qué son las etiquetas HTML y para qué sirven?
Las etiquetas HTML son los elementos básicos que conforman la estructura de una página web. Cada etiqueta tiene un nombre y unos atributos que definen su función y su apariencia. Las etiquetas se escriben entre corchetes angulares (< y >) y se agrupan en pares, formando lo que se conoce como elementos HTML. Por ejemplo, la etiqueta <p> indica el inicio de un párrafo y la etiqueta </p> indica el final del mismo.
Las etiquetas HTML sirven para darle sentido y formato al contenido de una página web, indicando qué tipo de información se está mostrando y cómo se debe presentar. Por ejemplo, la etiqueta <h1> se usa para los títulos principales, la etiqueta <img> se usa para insertar imágenes, la etiqueta <a> se usa para crear enlaces, etc.