Docs ejecutables de HTML: Etiquetas HTML

Q: ¿Qué diferencia hay entre una etiqueta HTML y un elemento HTML?

Una etiqueta es el marcado que escribes, como o . Un elemento es todo lo que el navegador construye a partir de ella: la etiqueta de apertura, sus atributos, el contenido y la etiqueta de cierre. Hola son dos etiquetas que forman un elemento p.

Q: ¿Las etiquetas HTML distinguen mayúsculas y minúsculas?

No. y producen el mismo elemento, igual que cualquier mezcla de mayúsculas y minúsculas. Las minúsculas son el estilo estándar y lo que generan la mayoría de los formateadores.

Qué es una etiqueta HTML

Una etiqueta HTML es un nombre entre corchetes angulares que marca un fragmento de contenido. La mayoría de las etiquetas van en pareja: una etiqueta de apertura como <p> y una etiqueta de cierre con barra como </p>. Todo lo que queda entre ellas es el contenido, y el conjunto completo es un elemento.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

Cambia <h1> por <h2> (en la etiqueta de apertura y en la de cierre) y el título se hace más pequeño. El nombre de la etiqueta es lo que le dice al navegador qué es el contenido.

Anatomía: etiquetas, atributos y elementos

<a href="/docs/html/links" class="nav">Links</a>

Parte	En el ejemplo
Etiqueta de apertura	`<a href="/docs/html/links" class="nav">`
Nombre de la etiqueta	`a`
Atributos	`href="/docs/html/links"` y `class="nav"`
Contenido	`Links`
Etiqueta de cierre	`</a>`
Elemento	todo lo anterior junto

Los atributos siempre van en la etiqueta de apertura, nunca en la de cierre. Se explican en la página de atributos.

Los nombres de etiqueta no distinguen mayúsculas de minúsculas: <P> y <p> son lo mismo. Escríbelos en minúsculas.

Etiquetas vacías: sin etiqueta de cierre

Algunos elementos no pueden contener nada, así que solo tienen etiqueta de apertura. Se llaman elementos vacíos (void elements; también se habla de etiquetas de autocierre):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

La lista completa: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

Puedes escribirlas como <br /> con barra. La barra no hace nada en HTML; está permitida para que el código de estilo XHTML siga funcionando. Una barra en una etiqueta normal, como <div />, también se ignora, lo que significa que el div sigue abierto.

Anidar etiquetas

Los elementos van dentro de otros elementos. La regla es: cierra las etiquetas en el orden inverso al que las abriste. La última que abriste es la primera que cierras.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

Los navegadores no rechazan un anidamiento roto. Lo reparan, y la reparación no siempre es lo que querías. Este ejemplo le pasa dos fragmentos mal anidados al analizador del navegador e imprime la estructura que realmente construyó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

Ocurren dos reparaciones. Las etiquetas <b> e <i> que se solapan se dividen en elementos extra. Y un <p> no puede contener un <div>, así que el navegador cierra el párrafo antes del div y convierte el </p> suelto en un párrafo nuevo y vacío. Cuando el CSS o el JavaScript se comportan de forma rara, el anidamiento roto es una de las primeras cosas que conviene revisar.

Elementos en bloque y en línea

La mayoría de las etiquetas caen en dos grupos de visualización. Los elementos en bloque (div, p, de h1 a h6, ul, section) empiezan en una línea nueva y ocupan todo el ancho. Los elementos en línea (span, a, strong, em, code) se colocan dentro de una línea de texto y solo son tan anchos como su contenido.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

Las cajas azules se estiran a lo ancho de la página; las ámbar solo envuelven su texto. El CSS puede cambiar esto con la propiedad display, pero cada etiqueta empieza con su valor por defecto. Consulta div y span para ver los dos contenedores genéricos.

Las etiquetas HTML más usadas

Etiqueta	Para qué sirve
`<html>`, `<head>`, `<body>`	El esqueleto del documento
`<title>`, `<meta>`, `<link>`	Información de la página en el head
De `<h1>` a `<h6>`	Títulos
`<p>`	Párrafo
`<a>`	Enlace
`<img>`	Imagen
`<ul>`, `<ol>`, `<li>`	Listas
`<strong>`, `<em>`	Texto importante y enfatizado
`<br>`, `<hr>`	Salto de línea, separación temática
`<div>`, `<span>`	Contenedores genéricos en bloque y en línea
`<table>`, `<tr>`, `<th>`, `<td>`	Tablas
`<form>`, `<input>`, `<label>`, `<button>`	Formularios
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	Estructura de la página con significado

Si quieres una lista de una sola página para imprimir, consulta la hoja de referencia de HTML.

Etiquetas que no existen

Si escribes una etiqueta que el navegador no conoce, no falla. Crea un elemento desconocido, muestra su contenido y lo trata como elemento en línea:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

Una etiqueta desconocida no tiene significado para los buscadores ni para los lectores de pantalla, así que es mejor usar una etiqueta real. Si estás creando tu propio componente con JavaScript, dale un nombre con guion (user-badge): los nombres con guion están reservados para los elementos personalizados y nunca chocan con futuras etiquetas HTML.

Errores comunes

Olvidar una etiqueta de cierre. Si falta un </a> o un </strong>, el resto de la página se convierte en enlace o en negrita. Los navegadores cierran algunas etiquetas por ti (</p>, </li>), pero estas no.
Cerrar una etiqueta vacía. </br> y </img> no son válidas. Los navegadores incluso leen </br> como un <br> de apertura, así que <br></br> da dos saltos de línea.
Solapar etiquetas. Cierra en orden inverso: <b><i>x</i></b>, nunca <b><i>x</b></i>.
Meter un bloque dentro de un párrafo. Un <div>, una lista o un título dentro de <p> termina el párrafo antes de tiempo. Usa un <div> como contenedor exterior.
Elegir etiquetas por su aspecto. Usa <h2> porque es un título, no porque sea grande. El tamaño y el grosor van en el CSS.

Preguntas frecuentes

¿Qué diferencia hay entre una etiqueta HTML y un elemento HTML?

Una etiqueta es el marcado que escribes, como <p> o </p>. Un elemento es todo lo que el navegador construye a partir de ella: la etiqueta de apertura, sus atributos, el contenido y la etiqueta de cierre. <p>Hola</p> son dos etiquetas que forman un elemento p.

¿Qué etiquetas HTML no necesitan etiqueta de cierre?

Los elementos vacíos no pueden tener contenido, así que no tienen etiqueta de cierre: <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col> y <embed>.

¿Debo escribir <br> o <br />?

Los dos son HTML válido. La barra final está permitida en los elementos vacíos y el navegador la ignora. En una etiqueta no vacía como <div /> la barra también se ignora, así que el div sigue abierto hasta un </div>.

¿Las etiquetas HTML distinguen mayúsculas y minúsculas?

No. <P> y <p> producen el mismo elemento, igual que cualquier mezcla de mayúsculas y minúsculas. Las minúsculas son el estilo estándar y lo que generan la mayoría de los formateadores.

¿Cuántas etiquetas HTML hay?

El estándar HTML actual define más de 100 elementos, pero las páginas del día a día usan entre 20 y 30: títulos, párrafos, enlaces, imágenes, listas, div, span, formularios y las etiquetas semánticas de estructura.

¿Qué pasa si uso una etiqueta que no existe?

El navegador igualmente crea un elemento para ella, muestra su contenido y lo trata como un elemento en línea sin significado especial. Los elementos personalizados están permitidos si el nombre lleva un guion, como <user-card>.

Conceptos relacionados