Elementos, etiquetas y atributos

Un documento HTML está formado por elementos. Unos van a continuación de otros, y muchos van dentro de otros. Entender bien cómo se escribe un elemento te ahorrará la mayoría de errores.

Anatomía de un elemento

<a href="https://developer.mozilla.org/es/">Documentación de MDN</a>

• Etiqueta de apertura: <a href="...">. Signo <, nombre de la etiqueta, atributos (opcionales) y signo >.
• Contenido: Documentación de MDN.
• Etiqueta de cierre: </a>. Signo <, barra, el mismo nombre y signo >.

No dejes espacios después del <: < p> es un error. Un espacio antes del > está permitido, pero no se suele poner.

Es habitual decir “la etiqueta h1” cuando en rigor queremos decir “el elemento h1”. Todo el mundo lo entiende, pero conviene saber la diferencia: la etiqueta es solo la marca; el elemento es la marca más su contenido.

Elementos vacíos (void)

Algunos elementos no tienen contenido, y por tanto no tienen etiqueta de cierre. Se llaman elementos vacíos o void:

<br>                                   <!-- salto de línea -->
<hr>                                   <!-- línea de separación -->
<img src="foto.jpg" alt="Descripción"> <!-- imagen -->
<input type="text" name="nombre">      <!-- campo de formulario -->
<meta charset="utf-8">                 <!-- metadato -->
<link rel="stylesheet" href="estilos.css">

Los más habituales son br, hr, img, input, meta, link y source. Escribir <br></br> es un error.

Quizá veas código con una barra al final, como <br /> o <img ... />. Es una costumbre heredada de XHTML. En HTML5 esa barra está permitida en los elementos vacíos pero no significa nada, y en el resto de elementos es incorrecta. Lo más limpio es no ponerla.

Anidar elementos

Un elemento puede contener otros. La regla es sencilla: el último que abres es el primero que cierras.

<!-- Bien -->
<p>Esto es <strong>muy <em>importante</em></strong>.</p>

<!-- Mal: se cruzan -->
<p>Esto es <strong>muy <em>importante</strong></em>.</p>

Usa la sangría para que se vea qué está dentro de qué:

<ul>
  <li>Primero</li>
  <li>Segundo</li>
</ul>

Al navegador le da igual la sangría, pero a ti y a quien lea tu código no.

Etiquetas de cierre opcionales

HTML permite omitir el cierre de algunos elementos, como </p>, </li> o </td>: el navegador lo deduce. Aun así, ciérralos siempre. Tu código será más claro y evitarás sorpresas.

Atributos

Los atributos añaden información o modifican un elemento. Van dentro de la etiqueta de apertura:

<img src="logo.png" alt="Logo de DevSchool" width="120">

• Cada atributo es un nombre, un signo = y un valor.
• El valor es siempre texto. Escríbelo entre comillas dobles, aunque a veces se puedan omitir.
• Si hay varios, se separan con espacios. El orden da igual.
• No se puede repetir el mismo atributo en un elemento.

Algunos atributos no necesitan valor: basta con que estén. Se llaman booleanos:

<input type="checkbox" checked>
<button disabled>No disponible</button>
<video src="clip.mp4" controls autoplay muted></video>

Atributos que funcionan en cualquier elemento

Atributo	Para qué sirve
id	Identificador único en la página. Se usa en enlaces internos, CSS y JavaScript
class	Una o varias clases separadas por espacios. Es el gancho principal para CSS
title	Texto que aparece al dejar el ratón encima
lang	Idioma del contenido de ese elemento
hidden	Oculta el elemento
data-*	Datos propios para JavaScript: data-precio="19.99"

<article id="producto-42" class="tarjeta oferta" data-precio="19.99">
  ...
</article>

Comentarios

Todo lo que va entre <!-- y --> es un comentario. El navegador lo ignora:

<!-- Menú principal: pendiente de añadir la sección de contacto -->

Úsalos para dejar notas, pero recuerda que cualquiera puede leerlos con “Ver código fuente”. Nunca escribas en ellos contraseñas ni datos privados.

¿Mayúsculas o minúsculas?

HTML no distingue mayúsculas de minúsculas en las etiquetas: <P> y <p> son lo mismo. Aun así, escribe siempre en minúsculas, que es lo que hace todo el mundo. (El contenido y los valores de algunos atributos sí pueden distinguirlas.)

Errores típicos

• Olvidar cerrar una etiqueta, sobre todo un <div> o un <a>: el resto de la página queda “dentro” y todo se descoloca.
• Cruzar etiquetas al anidar.
• Olvidar las comillas de cierre de un atributo: <a href="contacto.html> se come todo lo que viene detrás.
• Repetir el mismo id en dos elementos.
• Poner una etiqueta de cierre en un elemento vacío: <img ...></img>.

En la lección de validación y buenas prácticas verás cómo detectar todos estos errores automáticamente.

<p>Esto es <strong>muy <em>importante</strong></em>.</p>