Aller au contenu

Aide-Mémoire HTML pour SNT⚓︎

Balises de Structure⚓︎

Balise Description Balise Fermante Exemple
<html> Élément racine d'un document HTML. </html> <html lang="fr"></html>
<head> Contient des métadonnées. </head> <head></head>
<title> Définit le titre du document. </title> <title>Mon Document</title>
<body> Contient le contenu principal du document. </body> <body></body>

Balises de Texte⚓︎

Balise Description Balise Fermante Exemple
<h1> à <h6> Titres de différents niveaux. </h1> à </h6> <h1>Titre Principal</h1>
<p> Paragraphe. </p> <p>Ceci est un paragraphe.</p>
<div> Division ou section générique. </div> <div></div>
<br> Retour à la ligne. (auto-fermante) <p>Ligne 1<br>Ligne 2</p>
<hr> Ligne horizontale. (auto-fermante) <hr>
<strong> Texte en gras. </strong> <strong>Texte en gras</strong>
<em> Texte en italique. </em> <em>Texte en italique</em>
<small> Texte plus petit. </small> <small>Texte plus petit</small>
<mark> Texte surligné. </mark> <mark>Texte surligné</mark>
<del> Texte barré. </del> <del>Texte barré</del>
<ins> Texte souligné. </ins> <ins>Texte souligné</ins>
<sub> Texte en indice. </sub> <sub>Indice</sub>
<sup> Texte en exposant. </sup> <sup>Exposant</sup>

Balises de Listes⚓︎

Balise Description Balise Fermante Exemple
<ul> Liste non ordonnée. </ul> <ul><li>Élément 1</li><li>Élément 2</li></ul>
<ol> Liste ordonnée. </ol> <ol><li>Élément 1</li><li>Élément 2</li></ol>
<li> Élément de liste. </li> <li>Élément de liste</li>

Balises de Liens et Images⚓︎

Balise Description Balise Fermante Exemple
<a> Lien hypertexte. </a> <a href="https://example.com">Lien</a>
<img> Image. (auto-fermante) <img src="image.jpg" alt="Description">

Balises de Tableaux⚓︎

Balise Description Balise Fermante Exemple
<table> Tableau. </table> <table></table>
<tr> Ligne de tableau. </tr> <tr></tr>
<th> En-tête de tableau. </th> <th>En-tête</th>
<td> Cellule de tableau. </td> <td>Cellule</td>
<caption> Légende du tableau. </caption> <caption>Légende</caption>

Balises de Métadonnées⚓︎

Balise Description Balise Fermante Exemple
<meta> Métadonnées. (auto-fermante) <meta charset="UTF-8">
<link> Lien vers une ressource externe. (auto-fermante) <link rel="stylesheet" href="styles.css">
<script> Lien vers un script JavaScript. </script> <script src="script.js"></script>

Example

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mon Document HTML</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <header>
            <h1>Bienvenue sur mon site</h1>
        </header>
        <div>
            <ol>
                <li>Accueil</li>
                <li>À propos</li>
                <li>Contact</li>
            </ol>
        <div>
        <div>
        <h2>Accueil</h2>
        <p>Bienvenue sur la page d'accueil.</p>
        <h2>À propos</h2>
        <p>Informations sur le site.</p>
        <h2>Contact</h2>
        <p>
            <ul>
                <li>Aristote</li>
                <li>Thalès</li>
                <li>Pythagore</li>
            </ul>
        </p>
        <p>
        <h2>Mes liens préférés</h2>
            <a href = "https://www.qwant.com">Le meilleur moteur de recherche</a>
            <br/>
            <a href = "https://www.duckduckgo.com">Le 2ème meilleur moteur de recherche</a>
        </div>
    </body>
</html>

Mon Document HTML

Bienvenue sur mon site

  1. Accueil
  2. À propos
  3. Contact

Accueil

Bienvenue sur la page d'accueil.

À propos

Informations sur le site.

Contact

  • Aristote
  • Thalès
  • Pythagore

Mes liens préférés

Le meilleur moteur de recherche
Le 2ème meilleur moteur de recherche