Os fundamentos do HTML5

O HTML (HyperText Markup Language) é a linguagem padrão para criar páginas web. O HTML5 é a versão mais recente dessa linguagem, trazendo muitos novos recursos e melhorias.

Estrutura básica de uma página HTML5

Esta é a estrutura básica de uma 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>

As tags semânticas do HTML5

O HTML5 introduziu várias tags semânticas que permitem estruturar melhor o conteúdo:

• <header>: Cabeçalho da página ou de uma seção
• <nav>: Seção de navegação
• <main>: Conteúdo principal da página
• <section>: Seção genérica de conteúdo
• <article>: Conteúdo autônomo e independente
• <aside>: Conteúdo relacionado, mas distinto
• <footer>: Rodapé

Exemplo de uso das tags 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>

Formulários em HTML5

O HTML5 também aprimorou os formulários com novos tipos de entrada e 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 multimídia

O HTML5 introduziu tags nativas para áudio e 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>

Conclusão

O HTML5 oferece muitos recursos que facilitam a criação de sites web modernos e acessíveis. Ao usar as tags semânticas adequadas, você melhora não apenas a estrutura do seu código, mas também a acessibilidade e o SEO do seu site.

Para aprofundar seus conhecimentos em HTML5, recomendo consultar a documentação oficial do MDN (Mozilla Developer Network) e praticar regularmente criando projetos pessoais.