Les fondamentaux du HTML5

Le HTML (HyperText Markup Language) est le langage standard pour créer des pages web. HTML5 est la dernière version de ce langage, apportant de nombreuses nouvelles fonctionnalités et améliorations.

Structure de base d’une page HTML5

Voici la structure de base d’une page 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>

Les balises sémantiques de HTML5

HTML5 a introduit plusieurs balises sémantiques qui permettent de mieux structurer le contenu :

<header> : En-tête de la page ou d’une section
<nav> : Section de navigation
<main> : Contenu principal de la page
<section> : Section générique de contenu
<article> : Contenu autonome et indépendant
<aside> : Contenu connexe mais distinct
<footer> : Pied de page

Exemple d’utilisation des balises sémantiques

<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>

Formulaires en HTML5

HTML5 a également amélioré les formulaires avec de nouveaux types d’entrées et attributs :

<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>

Éléments multimédias

HTML5 a introduit des balises natives pour l’audio et la vidéo :

<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>

Conclusion

HTML5 offre de nombreuses fonctionnalités qui facilitent la création de sites web modernes et accessibles. En utilisant les balises sémantiques appropriées, vous améliorez non seulement la structure de votre code, mais aussi l’accessibilité et le référencement de votre site.

Pour approfondir vos connaissances en HTML5, je vous recommande de consulter la documentation officielle du MDN (Mozilla Developer Network) et de pratiquer régulièrement en créant des projets personnels.

À propos de InSkillCoach

Expert en formation et technologies

Coach spécialisé dans les technologies avancées et l'IA, porté par GNeurone Inc.

GitHub Voir tous les articles

Certifications:

AWS Certified Solutions Architect – Professional
Certifications Google Cloud
Microsoft Certified: DevOps Engineer Expert
Certified Kubernetes Administrator (CKA)
CompTIA Security+

2.0k