Curso HTML 3.5 Anatomía de un elemento HTML (etiquetas, atributos, contenido)

Introducción a la anatomía de un elemento HTML

Un elemento HTML se compone básicamente de tres partes:

• Etiqueta de inicio (start tag)
• Contenido
• Etiqueta de cierre (end tag) — salvo en elementos void (sin cierre)

Además, las etiquetas pueden incluir atributos que aportan información adicional o modifican el comportamiento del elemento.

Componentes de un elemento

Etiqueta de inicio

Sintaxis general:

<nombre-etiqueta atributo1='valor1' atributo2 valorBooleano />
  

• nombre-etiqueta: identificador del elemento (p.ej. div, a, img…).
• atributos: pares nombre=valor o booleanos.
• Un espacio separa cada atributo. El slash final (/>) indica elemento void o self-closing en XHTML.

Ejemplo con atributos

<a href='https://example.com' title='Ir a ejemplo' target='_blank'>Visitar ejemplo</a>
  

Aquí:

• href: URL de destino.
• title: texto emergente al pasar el ratón.
• target: indica dónde abrir el recurso (_blank abre en nueva pestaña).

Contenido de un elemento

El contenido es lo que va entre las dos etiquetas. Puede ser:

• Texto plano.
• Elementos anidados (otros tags) formando un árbol DOM.
• Datos especiales: comentarios (<!-- ... -->), CDATA en script, etc.

Ejemplo con texto y anidamiento

<div class='tarjeta'>
  <h2>Título de la tarjeta</h2>
  <p>Este es un párrafo de ejemplo en el contenido.</p>
  <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
  </ul>
</div>
  

Cada elemento anidado respeta su propia anatomía de etiqueta inicio, contenido y cierre.

Etiqueta de cierre

Sintaxis: </nombre-etiqueta>. Siempre va en su propia etiqueta, sin atributos.

</section>
</p>
</blockquote>
  

Los elementos void (como img, br, input) no necesitan cierre. Por ejemplo:

<img src='foto.jpg' alt='Descripción de imagen'>
<br>
<input type='text' name='usuario'>
  

Atributos en profundidad

Los atributos amplían la funcionalidad o definen comportamientos. Se clasifican en:

• Globales: se pueden usar en cualquier elemento (class, id, style, data-*…).
• Específicos: propios de ciertos elementos (p.ej. src en img, alt, for en label…).
• Booleanos: su sola presencia equivale a verdadero (hidden, disabled, checked…).
• Enumerados: asumen uno de varios valores predefinidos (method en form: get o post).

Ejemplo de atributos booleanos y globales

<button disabled aria-label='cerrar ventana'>Cerrar</button>
<div id='modal1' data-user-id='42'>Contenido del modal</div>
  

En el primer botón, disabled bloquea la interacción y aria-label añade accesibilidad. En el div, id y un data-* registran metadatos.

Reglas de sintaxis

• Los nombres de etiquetas y atributos no distinguen mayúsculas/minúsculas en HTML5 (aunque por consistencia suelen escribirse en minúscula).
• Los valores de atributos pueden ir entre comillas dobles ('valor') o simples ('valor'). A veces (atributos booleanos) pueden omitirse.
• Separar atributos con espacios y nunca olvidar el cierre de la etiqueta (<>).
• Evitar atributos duplicados en la misma etiqueta.

Errores comunes

• No cerrar una etiqueta: se rompe el árbol DOM.
• Omitir comillas en valores con espacios (title=Mi título falla; usar title='Mi título').
• Usar etiquetas obsoletas o mal anidadas (<p><div>…</p></div>).

Resumen

Comprender la anatomía de un elemento HTML (etiquetas, atributos, contenido) es clave para:

1. Crear estructuras semánticas correctas.
2. Mejorar la accesibilidad y el SEO.
3. Asegurar compatibilidad y mantenimiento futuro.

Dominar esta base permite construir cualquier componente web con solidez y claridad.