Etiquetas HTML
Aprende qué es una etiqueta HTML: etiquetas de apertura y cierre, diferencia entre etiquetas, elementos y atributos, elementos vacíos y reglas de anidamiento.
Una etiqueta HTML es una palabra clave (un nombre de etiqueta) envuelta en corchetes angulares, como <p> o <img>. Las etiquetas son los componentes básicos de HTML: le indican al navegador dónde comienza y termina un fragmento de contenido y de qué tipo es. El navegador lee las etiquetas y construye la página a partir de ellas, pero nunca las muestra en pantalla.
Esta página explica qué es una etiqueta, cómo difiere una etiqueta de apertura de una etiqueta de cierre, cómo las etiquetas se combinan en elementos con atributos, cuáles etiquetas son independientes (elementos vacíos) y las reglas para anidar etiquetas correctamente.
Etiquetas de apertura y cierre
La mayoría de las etiquetas vienen en pares: una etiqueta de apertura y una etiqueta de cierre. La etiqueta de cierre es idéntica a la de apertura, pero comienza con una barra diagonal (/).
<p> <!-- opening tag -->
</p> <!-- closing tag -->- La etiqueta de apertura marca dónde comienza el contenido.
- La etiqueta de cierre marca dónde termina el contenido.
Todo lo que se encuentra entre las dos etiquetas es el contenido al que se aplican.
Etiqueta vs. elemento vs. atributo
Estos tres términos suelen confundirse, por lo que conviene definirlos con precisión.
- Una etiqueta es la palabra clave entre corchetes por sí sola —
<p>o</p>. - Un elemento es la unidad completa: la etiqueta de apertura, el contenido y la etiqueta de cierre juntos.
- Un atributo es información adicional colocada dentro de la etiqueta de apertura que configura el elemento.
A continuación se muestra un elemento de párrafo desglosado en sus partes:
<p class="intro">Hello world</p>| Parte | Qué es |
|---|---|
<p ...> | la etiqueta de apertura |
class="intro" | un atributo (nombre class, valor "intro") |
Hello world | el contenido |
</p> | la etiqueta de cierre |
| la línea completa | el elemento |
Entonces <p> es una etiqueta, mientras que <p>Hello world</p> es un elemento. Para saber más, consulta Elementos HTML y Atributos HTML.
Ejemplo de un elemento completo
<!DOCTYPE html>
<html>
<head>
<title>Tags, elements, and attributes</title>
</head>
<body>
<h1>HTML tags</h1>
<p class="intro">This whole line is a paragraph element.</p>
</body>
</html>Elementos vacíos (void)
Algunos elementos no tienen contenido y, por tanto, no tienen etiqueta de cierre. Se denominan elementos vacíos (o elementos void). Constan de una sola etiqueta.
Los elementos vacíos más comunes son:
<br>— un salto de línea<hr>— una separación temática (regla horizontal)<img>— una imagen<input>— un campo de formulario
<p>First line<br>Second line</p>
<hr>
<img src="logo.png" alt="Company logo">
<input type="text" name="username">En HTML, un elemento vacío se escribe como una sola etiqueta sin barra diagonal, por ejemplo <br>. La forma auto-cerrada <br /> también se acepta y es obligatoria en XHTML, pero es opcional en HTML.
Las etiquetas no distinguen mayúsculas de minúsculas
Los nombres de etiquetas HTML no distinguen entre mayúsculas y minúsculas: <P>, <p> y <P> significan lo mismo. Sin embargo, por convención, las etiquetas se escriben en minúsculas, y ese es el estilo recomendado.
<!-- All three are valid and identical to the browser -->
<DIV></DIV>
<Div></Div>
<div></div>Anidamiento correcto de etiquetas
Las etiquetas pueden contener otras etiquetas. Cuando lo hacen, deben estar correctamente anidadas: un elemento interno debe abrirse y cerrarse completamente dentro de su elemento padre. Las etiquetas no pueden solaparse.
<!-- Correct: <em> opens and closes inside <p> -->
<p>This is <em>important</em> text.</p><!-- Wrong: the tags overlap -->
<p>This is <em>important</p></em>En el ejemplo incorrecto, <em> se abre dentro de <p> pero se cierra fuera de él. Los navegadores intentan recuperarse de errores como este, pero el resultado es impredecible, así que siempre cierra primero la etiqueta más interna.
Para notas que el navegador ignora en lugar de renderizar, consulta Comentarios HTML.
Nota histórica: en los años 90, los autores a veces envolvían el contenido de los scripts en marcadores de comentarios HTML para ocultarlos de navegadores muy antiguos que no entendían
<script>. Esta técnica está obsoleta y no debe usarse hoy en día.