Los fundamentos de HTML5

HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. HTML5 es la última versión de este lenguaje y aporta numerosas funcionalidades y mejoras nuevas.

Estructura básica de una página HTML5

Esta es la estructura básica de una página HTML5:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
</head>
<body>
    <!-- Contenu de la page -->
</body>
</html>

Las etiquetas semánticas de HTML5

HTML5 introdujo varias etiquetas semánticas que permiten estructurar mejor el contenido:

• <header>: encabezado de la página o de una sección
• <nav>: sección de navegación
• <main>: contenido principal de la página
• <section>: sección genérica de contenido
• <article>: contenido autónomo e independiente
• <aside>: contenido relacionado pero distinto
• <footer>: pie de página

Ejemplo de uso de las etiquetas semánticas

<header>
    <h1>Mon Site Web</h1>
    <nav>
        <ul>
            <li><a href="/">Accueil</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h2>À propos</h2>
        <p>Bienvenue sur mon site web...</p>
    </section>
    
    <article>
        <h2>Mon dernier article</h2>
        <p>Contenu de l'article...</p>
    </article>
    
    <aside>
        <h3>Articles connexes</h3>
        <ul>
            <li><a href="#">Article 1</a></li>
            <li><a href="#">Article 2</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>&copy; 2023 Mon Site Web</p>
</footer>

Formularios en HTML5

HTML5 también ha mejorado los formularios con nuevos tipos de entrada y atributos:

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    
    <label for="website">Site web:</label>
    <input type="url" id="website">
    
    <label for="age">Âge:</label>
    <input type="number" id="age" min="0" max="120">
    
    <label for="birthday">Date de naissance:</label>
    <input type="date" id="birthday">
    
    <button type="submit">Envoyer</button>
</form>

Elementos multimedia

HTML5 introdujo etiquetas nativas para el audio y el vídeo:

<video controls width="500">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Votre navigateur ne prend pas en charge la vidéo HTML5.
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Votre navigateur ne prend pas en charge l'audio HTML5.
</audio>

Conclusión

HTML5 ofrece numerosas funcionalidades que facilitan la creación de sitios web modernos y accesibles. Al utilizar las etiquetas semánticas adecuadas, mejoras no solo la estructura de tu código, sino también la accesibilidad y el posicionamiento SEO de tu sitio.

Para profundizar tus conocimientos de HTML5, te recomiendo consultar la documentación oficial de MDN (Mozilla Developer Network) y practicar con regularidad creando proyectos personales.