Texto con Alma: Títulos, párrafos, listas y énfasis

“Las palabras sin estructura son como kunais sin punta: inútiles.” - Maestro Hatake

🎯 Objetivo Ninja

Estructurarás texto como un profesional: jerárquico, semántico y accesible. El 80% de la web es texto. Domínalo.

🏯 Teoría: El Por Qué

Un pergamino ninja se lee porque tiene:

• Título principal (misión)
• Subtítulos (pasos)
• Párrafos (explicaciones)
• Listas (requisitos)
• Énfasis (IMPORTANTE)

HTML replica esto EXACTAMENTE.

⚔️ Implementación

Títulos: La Jerarquía del Poder

<h1>Título Principal (solo UNO por página)</h1>
<h2>Sección importante</h2>
<h3>Subsección</h3>
<h4>Detalle</h4>
<h5>Más detalle</h5>
<h6>Micro-detalle</h6>

Reglas ninja:

• <h1> = Solo UNO por página (como un Hokage)
• Nunca saltarse niveles (<h2> → <h4> ❌)
• Orden jerárquico estricto

<!-- CORRECTO ✅ -->
<h1>Ruta del Shinobi</h1>
  <h2>Módulo 1: Frontend</h2>
    <h3>HTML Básico</h3>
    <h3>CSS Básico</h3>
  <h2>Módulo 2: Backend</h2>

<!-- INCORRECTO ❌ -->
<h1>Ruta del Shinobi</h1>
  <h4>Esto está mal (saltamos h2 y h3)</h4>

Párrafos: El Cuerpo del Mensaje

<p>Este es un párrafo normal. 
   Automáticamente tiene margen superior e inferior.</p>

<p>Cada párrafo nuevo empieza en línea nueva.</p>

Saltos de línea:

<p>Primera línea<br>Segunda línea (mismo párrafo)</p>

<hr> <!-- Línea horizontal separadora -->

Listas: Organización Ninja

Listas desordenadas (bullets):

<ul>
  <li>Kunai</li>
  <li>Shuriken</li>
  <li>Pergamino explosivo</li>
</ul>

Listas ordenadas (numeradas):

<ol>
  <li>Hacer sello de manos</li>
  <li>Concentrar chakra</li>
  <li>Ejecutar jutsu</li>
</ol>

Listas anidadas:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Énfasis: Dar Importancia

<!-- Negrita (importancia fuerte) -->
<strong>Esto es CRÍTICO</strong>

<!-- Itálica (énfasis suave) -->
<em>Esto tiene énfasis</em>

<!-- Combinados -->
<p>El jutsu <strong>más poderoso</strong> requiere <em>mucho chakra</em>.</p>

<!-- Solo visual (NO semántico - evitar) -->
<b>Negrita visual</b>
<i>Itálica visual</i>

Diferencia ninja:

• <strong> = Importancia semántica (lectores de pantalla lo enfatizan)
• <b> = Solo visual (no ayuda a accesibilidad)

Citas y Referencias

<!-- Cita corta -->
<p>Como dijo Itachi: <q>Las personas viven sus vidas atadas por su conocimiento.</q></p>

<!-- Cita en bloque -->
<blockquote>
  <p>El verdadero cambio no puede ser dictado, debe venir desde dentro.</p>
  <cite>- Naruto Uzumaki</cite>
</blockquote>

<!-- Código inline -->
<p>Usa <code>&lt;div&gt;</code> para contenedores.</p>

<!-- Bloque de código -->
<pre><code>function ninja() {
  return "¡Hola!";
}</code></pre>

🎯 Reto Ninja

🔓 Pergamino Oculto (Bonus)

Técnica 1: Listas de Definición

<dl>
  <dt>Genin</dt>
  <dd>Ninja de rango bajo, recién graduado.</dd>
  
  <dt>Chunin</dt>
  <dd>Ninja de rango medio, líder de equipos.</dd>
  
  <dt>Jonin</dt>
  <dd>Ninja de élite, misiones de alto riesgo.</dd>
</dl>

Técnica 2: Marcado Semántico Avanzado

<!-- Texto marcado/resaltado -->
<p>Este jutsu es <mark>extremadamente peligroso</mark>.</p>

<!-- Texto borrado/insertado (control de versiones) -->
<p>El ninja <del>Sasuke</del> <ins>Naruto</ins> es el mejor.</p>

<!-- Subíndice y superíndice -->
<p>H<sub>2</sub>O y E=mc<sup>2</sup></p>

<!-- Abreviaciones -->
<abbr title="HyperText Markup Language">HTML</abbr>

Técnica 3: Atributo contenteditable

<!-- Texto editable en navegador -->
<p contenteditable="true">Puedes editar este texto directamente.</p>

✅ Checklist de Dominio

---

Próximo Pergamino: Multimedia y Enlaces - Los caminos del ninja (imágenes, videos, links).

¡El texto es tu kunai, ninja! Úsalo con precisión. 🥷📜