En esta página

Etiquetas esenciales

12 min lectura TextoCap. 1 — Fundamentos de HTML

Encabezados (h1-h6)

Los encabezados van del <h1> (más importante) al <h6> (menos importante). Solo debe haber un <h1> por página, y deben seguir una jerarquia lógica.

Parrafos y texto

El elemento <p> define un párrafo. Otros elementos de texto incluyen:

  • <strong> — Texto importante (se muestra en negrita)
  • <em> — Enfasis (se muestra en cursiva)
  • <code> — Código en linea
  • <mark> — Texto resaltado
  • <small> — Texto secundario

Listas

HTML ofrece tres tipos de listas:

  1. Listas no ordenadas (<ul>) — Viñetas
  2. Listas ordenadas (<ol>) — Numeradas
  3. Listas de definición (<dl>) — Terminos y definiciones

Enlaces

El elemento <a> crea un enlace (hipervínculo). El atributo href específica la URL de destino.

Seguridad: Cuando uses target="_blank", siempre agrega rel="noopener" para prevenir ataques de tab-napping.

Práctica

  1. Crea una jerarquia de encabezados: Escribe una página con un <h1>, dos <h2> y al menos un <h3> dentro de cada sección, respetando el orden jerarquico.
  2. Construye tres tipos de lista: Crea una lista no ordenada (<ul>), una lista ordenada (<ol>) y una lista de definición (<dl>) con al menos tres elementos cada una.
  3. Aplica formato de texto: Escribe un párrafo que use <strong>, <em>, <code> y <mark> para resaltar diferentes partes del contenido.

En la siguiente leccion aprenderemos sobre HTML semántico.

Cuidado
No saltes niveles de encabezado (ej de h1 a h3 sin h2). Esto afecta la accesibilidad y el SEO.
html
<h1>Título principal</h1>
<h2>Subtitulo</h2>

<p>Este es un párrafo con <strong>texto importante</strong> y <em>enfasis</em>.</p>

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

<a href="https://example.com" target="_blank" rel="noopener">
  Visitar sitio
</a>