HTML: Organización de contenido

Aprende a organizar contenido HTML con estructura semántica para mejorar accesibilidad, SEO y mantenimiento web de forma eficiente y profesional.

Organización de contenido en HTML

La estructura adecuada de un documento HTML es fundamental para crear páginas web accesibles, mantenibles y bien posicionadas en buscadores. En este módulo exploraremos cómo organizar el contenido HTML de manera semántica y eficiente, aprovechando las características modernas del lenguaje de marcado.

Importancia de la organización del contenido

Una buena organización del contenido en HTML proporciona múltiples beneficios:

Mejora la accesibilidad para usuarios con discapacidades
Optimiza el posicionamiento SEO en motores de búsqueda
Facilita el mantenimiento del código a largo plazo
Mejora la compatibilidad con diferentes dispositivos y navegadores
Proporciona una estructura lógica que ayuda a los usuarios a navegar por la página

Elementos estructurales básicos

HTML5 introdujo varios elementos semánticos que permiten definir claramente las diferentes secciones de una página web:

<header>: Define la cabecera de una página o sección
<nav>: Contiene los enlaces de navegación principales
<main>: Engloba el contenido principal de la página
<section>: Define una sección temática del documento
<article>: Representa contenido independiente y autocontenido
<aside>: Contiene información relacionada pero no esencial
<footer>: Define el pie de página o de sección

Veamos un ejemplo básico de estructura:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>Welcome to my website</h2>
            <p>This is the main content of the page.</p>
        </section>
        
        <section id="about">
            <h2>About Us</h2>
            <p>Information about our company.</p>
        </section>
    </main>
    
    <aside>
        <h3>Related Links</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </aside>
    
    <footer>
        <p>&copy; 2023 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

Jerarquía de encabezados

Los encabezados (<h1> a <h6>) son cruciales para establecer una estructura jerárquica clara:

<h1>: Título principal de la página (debe ser único)
<h2>: Encabezados de secciones principales
<h3>-<h6>: Subencabezados con niveles de importancia decreciente

Es importante mantener una jerarquía lógica sin saltar niveles (por ejemplo, no pasar de <h2> a <h4> sin usar <h3>).

<h1>Título principal</h1>
<section>
    <h2>Sección importante</h2>
    <p>Contenido de la sección...</p>
    
    <h3>Subsección</h3>
    <p>Más contenido detallado...</p>
    
    <h3>Otra subsección</h3>
    <p>Información adicional...</p>
</section>

Agrupación de contenido

HTML ofrece varios elementos para agrupar contenido relacionado:

<div>: Contenedor genérico sin valor semántico específico
<section>: Agrupa contenido temáticamente relacionado
<article>: Contenido independiente que podría distribuirse por separado
<figure> y <figcaption>: Para imágenes, diagramas o fragmentos de código con su leyenda

Ejemplo de uso de <figure> y <figcaption>:

<figure>
    <img src="mountain.jpg" alt="Mountain landscape">
    <figcaption>Fig. 1: Beautiful mountain view in summer</figcaption>
</figure>

Listas para organizar información

Las listas son excelentes para presentar información de manera estructurada:

<ul>: Lista no ordenada (con viñetas)
<ol>: Lista ordenada (con números o letras)
<dl>: Lista de definiciones (términos y sus descripciones)

Ejemplo de lista de definiciones:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language, the standard language for creating web pages.</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets, used for styling HTML documents.</dd>
    
    <dt>JavaScript</dt>
    <dd>A programming language that enables interactive web pages.</dd>
</dl>

Tablas para datos tabulares

Las tablas deben usarse exclusivamente para presentar datos tabulares, no para maquetar la página:

<table>
    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$180</td>
        </tr>
    </tfoot>
</table>

Los elementos <thead>, <tbody> y <tfoot> mejoran la accesibilidad y facilitan el estilizado con CSS.

Organización de formularios

Los formularios bien estructurados mejoran la experiencia del usuario:

<form action="/submit" method="post">
    <fieldset>
        <legend>Personal Information</legend>
        
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>
        
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>
    </fieldset>
    
    <fieldset>
        <legend>Preferences</legend>
        
        <div>
            <input type="checkbox" id="newsletter" name="newsletter">
            <label for="newsletter">Subscribe to newsletter</label>
        </div>
    </fieldset>
    
    <button type="submit">Submit</button>
</form>

El elemento <fieldset> agrupa controles relacionados y <legend> proporciona un título descriptivo para cada grupo.

Microformatos y datos estructurados

Los datos estructurados ayudan a los motores de búsqueda a entender mejor el contenido:

<article itemscope itemtype="http://schema.org/BlogPosting">
    <h2 itemprop="headline">How to Structure HTML Content</h2>
    <p>Published on: <time itemprop="datePublished" datetime="2023-05-15">May 15, 2023</time></p>
    <p itemprop="description">Learn how to properly structure your HTML documents.</p>
    <div itemprop="articleBody">
        <p>The content of the article goes here...</p>
    </div>
    <footer>
        <p>Author: <span itemprop="author">John Smith</span></p>
    </footer>
</article>

Estos atributos itemscope, itemtype e itemprop siguen el estándar Schema.org y mejoran significativamente el SEO.

Consideraciones de accesibilidad

Una buena estructura HTML es la base de la accesibilidad web:

Usa elementos semánticos apropiados para cada tipo de contenido
Mantén una jerarquía lógica de encabezados
Incluye atributos alt descriptivos en las imágenes
Agrupa elementos relacionados con <fieldset> en formularios
Utiliza <label> para asociar etiquetas con campos de formulario
Implementa ARIA (Accessible Rich Internet Applications) cuando sea necesario

<nav aria-label="Main Navigation">
    <ul>
        <li><a href="#" aria-current="page">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Conclusión

La organización adecuada del contenido HTML no solo mejora la legibilidad del código, sino que también beneficia la accesibilidad, el SEO y la experiencia del usuario. Utilizando los elementos semánticos apropiados y siguiendo las mejores prácticas, podemos crear páginas web más robustas y efectivas.

En las próximas lecciones, exploraremos cada uno de estos conceptos en mayor profundidad y aprenderemos a implementarlos en proyectos reales.

Empezar curso de HTML

Lecciones de este módulo de HTML

Lecciones de programación del módulo Organización de contenido del curso de HTML.

Tablas (Table, Tr, Td, Th)

Formularios (Form, Input, Select, Textarea, Button)

Etiquetas Semánticas (Article, Section, Header, Footer, Nav, Aside)

División (Div)

Ejercicios de programación en este módulo de HTML

Evalúa tus conocimientos en Organización de contenido con ejercicios de programación Organización de contenido de tipo Test, Puzzle, Código y Proyecto con VSCode.