Balises Fondamentales

Ces balises structurent tout document HTML et sont indispensables pour une page web valide.

Balise Description Attributs Importants
<!DOCTYPE html> Déclaration du type de document (HTML5) Aucun
<html> Racine du document lang (fr, en...)
<head> Contient les métadonnées Aucun
<title> Titre de la page (onglet/navigateur) Aucun
<body> Contenu visible de la page Aucun
structure-de-base.html 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Structure</title>
</head>
<body>
    <!-- Contenu visible -->
    <h1>Mon Titre Principal</h1>
    <p>Un paragraphe de texte.</p>
</body>
</html>

Bonnes Pratiques

1. Toujours commencer par <!DOCTYPE html>

2. Définir l'attribut lang pour l'accessibilité

3. Inclure les balises <head> et <body>

Balises de Texte

Balises pour structurer et mettre en forme le contenu textuel.

Titres et Paragraphes

Balise Description Exemple
<h1> à <h6> Hiérarchie des titres (h1 le plus important) <h1>Titre</h1>
<p> Paragraphe de texte <p>Texte...</p>
<br> Saut de ligne (auto-fermante) Ligne 1<br>Ligne 2
<hr> Ligne horizontale de séparation <hr>

Mise en Forme Sémantique

Balise Description Usage
<strong> Texte important (gras) <strong>Attention</strong>
<em> Texte en emphase (italique) <em>Important</em>
<mark> Texte surligné <mark>Mots-clés</mark>
<small> Texte secondaire (plus petit) <small>Note</small>
exemple-texte.html 
<article>
    <h1>Titre Principal</h1>
    <p>Ceci est un <strong>paragraphe</strong> avec du texte <em>mis en emphase</em>.</p>
    <hr>
    <h2>Sous-section</h2>
    <p>Autre paragraphe avec <mark>mots-clés</mark>.</p>
</article>

Balises de Structure

Balises HTML5 pour une structure sémantique.

Balise Description Usage
<header> En-tête de page ou de section Logo, navigation principale
<nav> Section de navigation Menu principal
<main> Contenu principal unique Contenu central
<article> Contenu autonome Article de blog, actualité
<section> Section thématique Regroupement de contenu
<aside> Contenu complémentaire Barre latérale, widgets
<footer> Pied de page ou de section Informations de contact, copyright
structure-semantique.html 
<body>
    <header>
        <h1>Mon Site</h1>
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Services</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Article Principal</h2>
            <p>Contenu de l'article...</p>
        </article>

        <aside>
            <h3>En relation</h3>
            <p>Contenu complémentaire...</p>
        </aside>
    </main>

    <footer>
        <p>© 2023 Mon Site</p>
    </footer>
</body>

Balises de Formulaire

Éléments pour créer des formulaires interactifs.

Balise Description Attributs Clés
<form> Conteneur de formulaire action, method
<input> Champ de saisie type, name, placeholder
<textarea> Zone de texte multiligne rows, cols
<select> Liste déroulante name, multiple
<button> Bouton cliquable type (submit/reset/button)
<label> Étiquette pour champ for (id du champ)
formulaire.html 
<form action="/traitement" method="post">
    <div>
        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" required>
    </div>

    <div>
        <label for="email">Email :</label>
        <input type="email" id="email" name="email" required>
    </div>

    <div>
        <label for="message">Message :</label>
        <textarea id="message" name="message" rows="5"></textarea>
    </div>

    <button type="submit">Envoyer</button>
</form>

Balises Média

Intégration d'images, vidéos et autres contenus multimédias.

Balise Description Attributs Clés
<img> Image src, alt, width, height
<video> Contenu vidéo src, controls, autoplay
<audio> Contenu audio src, controls
<figure> Conteneur pour média Aucun
<figcaption> Légende pour figure Aucun
media.html 
<!-- Image -->
<figure>
    <img src="image.jpg" alt="Description" width="600">
    <figcaption>Légende de l'image</figcaption>
</figure>

<!-- Vidéo -->
<video controls width="600">
    <source src="video.mp4" type="video/mp4">
    Votre navigateur ne supporte pas la vidéo.
</video>

<!-- Audio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>