1. Encabezados y Párrafos

Los títulos son fundamentales para la jerarquía del contenido.

Código:

<h1>Encabezado H1 (Solo uno por página)</h1>

<h2>Encabezado H2 (Secciones principales)</h2>

<h3>Encabezado H3 (Subsecciones)</h3>

<h4>Encabezado H4</h4>

<h5>Encabezado H5</h5>

<h6>Encabezado H6</h6>

<p>Este es un párrafo (<p>). Es el bloque de texto estándar.</p>

2. Formato de Texto (Etiquetas en Línea)

Estas etiquetas dan significado o estilo al texto dentro de un bloque.

Código:

<p>Texto en <strong>negrita (importante)</strong> con <strong>.</p>

<p>Texto en <em>cursiva (énfasis)</em> con <em>.</p>

<p>Texto <mark>resaltado</mark> con <mark>.</p>

<p>Texto <small>pequeño (nota legal)</small> con <small>.</p>

<p>Texto <sub>subíndice</sub> (H<sub>2</sub>O) con <sub>.</p>

<p>Texto <sup>superíndice</sup> (m<sup>2</sup>) con <sup>.</p>

<p>Texto <del>tachado (eliminado)</del> con <del>.</p>

<p>Texto <ins>insertado (nuevo)</ins> con <ins>.</p>

<p>Cita corta: <q>Ser o no ser</q> con <q>.</p>

<p>Código: <code>console.log('hola')</code> con <code>.</p>

3. Listas

Hay tres tipos principales de listas en HTML.

Lista Desordenada (<ul>)

Código:

<ul>

    <li>Elemento de lista 1</li>

    <li>Elemento de lista 2</li>

    <li>Elemento de lista 3</li>

</ul>

Lista Ordenada (<ol>)

Código:

<ol>

    <li>Primer paso</li>

    <li>Segundo paso</li>

    <li>Tercer paso</li>

</ol>

Lista de Definición (<dl>)

Código:

<dl>

    <dt>HTML</dt>

    <dd>Lenguaje de Marcado de Hipertexto.</dd>

    <dt>CSS</dt>

    <dd>Hojas de Estilo en Cascada.</dd>

</dl>

4. HTML Semántico

Estas etiquetas no cambian mucho visualmente por sí solas, pero dicen qué es cada parte de la página a los buscadores y lectores de pantalla.

• <header>: Cabecera de la página o sección (logo, título).
• <nav>: Menú de navegación principal.
• <main>: Contenido principal y único de la página.
• <section>: Una sección temática del contenido.
• <article>: Contenido independiente y autónomo (un post, una noticia).
• <aside>: Contenido relacionado o barra lateral.
• <footer>: Pie de página (copyright, enlaces legales).

5. Contenido Desplegable (<details> y <summary>)

Las etiquetas <details> y <summary> permiten crear contenido desplegable nativo sin necesidad de JavaScript. Son ideales para FAQs, menús, acordeones y secciones que se pueden ocultar/mostrar.

Uso Básico

<details> es el contenedor del contenido ocultable, y <summary> es el título visible que el usuario puede hacer clic para expandir o contraer el contenido.

Código:

<details>

    <summary>Haz clic para ver más información</summary>

    <p>Este es el contenido oculto que se muestra al expandir el elemento.</p>

    <p>Puedes incluir cualquier tipo de contenido HTML aquí.</p>

</details>

Atributo open

El atributo open hace que el contenido esté visible (expandido) por defecto.

Código:

<details open>

    <summary>Esta sección está abierta por defecto</summary>

    <p>El contenido es visible desde el inicio gracias al atributo open.</p>

</details>

Menú Desplegable Multinivel

Puedes anidar elementos <details> dentro de otros para crear menús con múltiples niveles de profundidad, ideal para navegación jerárquica o documentación.

Código:

<details>

    <summary><strong>📚 Documentación</strong></summary>

    

    <details style="margin-left: 20px;">

        <summary>📄 HTML</summary>

        <ul style="margin-left: 20px;">

            <li><a href="#">Sintaxis básica</a></li>

            <li><a href="#">Etiquetas semánticas</a></li>

            <li><a href="#">Formularios</a></li>

        </ul>

    </details>

    

    <details style="margin-left: 20px;">

        <summary>🎨 CSS</summary>

        <details style="margin-left: 20px;">

            <summary>📐 Layouts</summary>

            <ul style="margin-left: 20px;">

                <li><a href="#">Flexbox</a></li>

                <li><a href="#">Grid</a></li>

            </ul>

        </details>

        <details style="margin-left: 20px;">

            <summary>🎬 Animaciones</summary>

            <ul style="margin-left: 20px;">

                <li><a href="#">Transiciones</a></li>

                <li><a href="#">Keyframes</a></li>

            </ul>

        </details>

    </details>

    

    <details style="margin-left: 20px;">

        <summary>⚡ JavaScript</summary>

        <ul style="margin-left: 20px;">

            <li><a href="#">Variables</a></li>

            <li><a href="#">Funciones</a></li>

            <li><a href="#">DOM</a></li>

        </ul>

    </details>

</details>

Consejos de Uso

• Sin JavaScript: Todo funciona nativamente en el navegador.
• Accesibilidad: Los lectores de pantalla reconocen estos elementos correctamente.
• Estilizable: Puedes usar CSS para personalizar el marcador ::marker o el elemento summary.
• Eventos: Con JavaScript puedes escuchar el evento toggle para detectar cuando se abre o cierra.