Anatomía del Samurai: Etiquetas, atributos y el poder del cierre

“Una etiqueta sin cierre es como una katana sin vaina: peligrosa e incompleta.” - Maestro Tanaka

🎯 Objetivo Ninja

Dominarás la sintaxis perfecta de HTML. Escribirás etiquetas como un samurai empuña su espada: con precisión, elegancia y sin errores.

🏯 Teoría: El Por Qué

Un samurai se compone de partes esenciales:

• Cabeza (pensamiento/propósito)
• Cuerpo (fuerza/contenido)
• Armadura (protección/atributos)

Una etiqueta HTML también:

<etiqueta atributo="valor">Contenido</etiqueta>
   ↑         ↑       ↑         ↑         ↑
 Nombre   Armadura  Poder   Cuerpo    Cierre

¿Por qué es crítico?

• Una etiqueta mal cerrada rompe TODA la página
• Los atributos son el 50% del poder de HTML
• El navegador es implacable: un error = caos

⚔️ Implementación

Estructura Base: Apertura y Cierre

<!-- CORRECTO ✅ -->
<p>Este es un párrafo ninja</p>

<!-- INCORRECTO ❌ -->
<p>Este párrafo no tiene cierre

Regla de Oro: Toda etiqueta que abres <tag>, debes cerrarla </tag>.

Excepción: Etiquetas auto-cerradas (no tienen contenido):

<!-- Auto-cerradas (no necesitan cierre) -->
<img src="ninja.webp" alt="Un ninja">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">

Atributos: La Armadura del Guerrero

Los atributos dan superpoderes a las etiquetas:

<img src="ruta/imagen.webp" alt="Descripción" width="300">
     ↑                      ↑                    ↑
  Atributo 1           Atributo 2          Atributo 3

Sintaxis:

nombre="valor"

Atributos universales (funcionan en TODAS las etiquetas):

<!-- ID: identificador único -->
<div id="header-principal">

<!-- CLASS: clasificación (puede repetirse) -->
<div class="card ninja destacado">

<!-- STYLE: estilos inline (NO recomendado) -->
<p style="color: red;">Texto rojo</p>

<!-- TITLE: tooltip al pasar el mouse -->
<a href="#" title="Clic para ver más">Link</a>

<!-- DATA-*: datos personalizados -->
<div data-ninja-rank="chunin" data-xp="150">

Anidamiento: El Arte de la Jerarquía

Las etiquetas pueden contener otras etiquetas (como muñecas rusas):

<!-- CORRECTO ✅ -->
<div>
  <p>
    <strong>Texto en negrita</strong> dentro de un párrafo
  </p>
</div>

<!-- INCORRECTO ❌ (cruzan etiquetas) -->
<div>
  <p>
    <strong>Texto que cruza
  </p>
  </strong>
</div>

Regla: La última que abriste es la primera que debes cerrar (LIFO - Last In, First Out).

Nombres de Etiquetas: Sensibilidad a Mayúsculas

<!-- TODO es válido, pero... -->
<P>Párrafo</P>
<p>Párrafo</p>
<P>Párrafo</p>  <!-- Técnicamente funciona -->

<!-- ESTÁNDAR NINJA (minúsculas) -->
<p>Párrafo</p>

Convención: Siempre minúsculas. Es el estándar moderno.

🎯 Reto Ninja

🔓 Pergamino Oculto (Bonus)

Técnica 1: Comentarios Ninja

<!-- Esto es un comentario. El navegador lo IGNORA -->

<!--
  Comentarios multilínea
  para explicar secciones complejas
-->

<div class="hero">
  <!-- TODO: Añadir imagen de fondo -->
  <h1>Bienvenido al Dojo</h1>
</div>

Uso ninja:

• Documentar código complejo
• Deshabilitar temporalmente código sin borrarlo
• Dejar notas para tu yo del futuro

Técnica 2: Atributos Booleanos

Algunos atributos no necesitan valor:

<!-- Checkbox marcado -->
<input type="checkbox" checked>

<!-- Input deshabilitado -->
<input type="text" disabled>

<!-- Video con autoplay -->
<video src="ninja.mp4" autoplay muted></video>

Si el atributo existe = true. Si no existe = false.

Técnica 3: Caracteres Especiales (Entidades HTML)

<!-- Problema: < y > rompen el HTML -->
<p>La etiqueta <p> es para párrafos</p>  ❌

<!-- Solución: Entidades HTML -->
<p>La etiqueta &lt;p&gt; es para párrafos</p>  ✅

<!-- Otros comunes: -->
&lt;   →  <
&gt;   →  >
&amp;  →  &
&copy; →  ©
&nbsp; →  (espacio no rompible)

Técnica 4: Validación HTML

Usa el validador del W3C para encontrar errores:

https://validator.w3.org/

Copia tu HTML, pégalo, y recibe un reporte ninja de todos tus errores.

✅ Checklist de Dominio

---

Próximo Pergamino: Los Tres Pilares - Dominarás la estructura global de un documento HTML (doctype, head, body).

¡La sintaxis es tu primera arma, ninja! 🥷⚔️