La création de pages web débute par le HTML. L'ajout de styles et d'interactivité viendra plus tard avec CSS et JavaScript. Pour concevoir des sites statiques fonctionnels, maîtrisez d'abord le langage HTML. Besoin d'une introduction rapide ? Consultez notre FAQ HTML.
Apprendre le HTML implique de mémoriser de nombreux éléments. Pour simplifier, nous avons compilé cette aide-mémoire experte, couvrant balises et attributs essentiels pour structurer vos pages, formater le texte, intégrer formulaires, images, listes, liens et tableaux. Elle inclut les nouveautés HTML5 et les entités de caractères courantes.
TÉLÉCHARGEMENT GRATUIT : Obtenez ce guide au format PDF téléchargeable via notre partenaire TradePub. Remplissez un court formulaire pour un accès unique. Téléchargez l'aide-mémoire HTML Essentials.
Aide-Mémoire HTML Essentials
Balises de base
| Raccourci | Description |
|---|
| <html> ... </html> | Balises d'ouverture et de fermeture du document. Tous les autres éléments s'y trouvent. |
| <head> ... </head> | Contient les métadonnées du document. |
| <title> ... </title> | Titre de la page, affiché dans l'onglet du navigateur. |
| <body> ... </body> | Contenu visible de la page web. |
Informations sur le document
| Raccourci | Description |
|---|
| <base/> | URL de base pour les liens relatifs. |
| <meta/> | Informations supplémentaires (auteur, date, etc.). |
| <link/> | Liaison vers des ressources externes comme les CSS. |
| <style> ... </style> | Styles CSS intégrés. |
| <script> ... </script> | Scripts JavaScript ou liens externes. |
Formatage du texte
| Raccourci | Description |
|---|
| <strong> ... </strong> ou <b> ... </b> | Texte en gras. |
| <em> ... </em> | Texte en italique (emphase sémantique). |
| <i> ... </i> | Texte en italique. |
| <strike> ... </strike> | Texte barré. |
| <cite> ... </cite> | Citation d'un auteur. |
| <del> ... </del> | Partie supprimée du texte. |
| <ins> ... </ins> | Section insérée. |
| <blockquote> ... </blockquote> | Citations longues (souvent avec <cite>). |
| <q> ... </q> | Guillemets courts. |
| <abbr> ... </abbr> | Abréviations avec titre explicatif. |
| <address> ... </address> | Coordonnées de contact. |
| <dfn> ... </dfn> | Définition d'un terme. |
| <code> ... </code> | Extrait de code. |
| <sub> ... </sub> | Indice (bas-de-ligne). |
| <sup> ... </sup> | Exposant (haut-de-ligne). |
| <small> ... </small> | Texte réduit (annotations en HTML5). |
Structure du document
| Raccourci | Description |
|---|
| <h1> à <h6> ... </h1> à </h6> | Niveaux de titres (h1 principal, h6 mineur). |
| <div> ... </div> | Groupes de blocs pour mise en page. |
| <span> ... </span> | Éléments en ligne (images, icônes, etc.). |
| <p> ... </p> | Paragraphe de texte. |
| <br/> | Saut de ligne. |
| <hr/> | Ligne horizontale de séparation. |
Listes
| Raccourci | Description |
|---|
| <ol> ... </ol> | Liste ordonnée (numérotée). |
| <ul> ... </ul> | Liste non ordonnée (à puces). |
| <li> ... </li> | Élément de liste. |
| <dl> ... </dl> | Liste de définitions. |
| <dt> ... </dt> | Terme défini. |
| <dd> ... </dd> | Description du terme. |
Liens
| Raccourci | Description |
|---|
| <a href="url"> ... </a> | Hyperlien standard. |
| <a href="mailto:email"> ... </a> | Lien e-mail. |
| <a href="tel:+33..."> ... </a> | Lien téléphonique. |
| <a name="id"> ... </a> | Ancre pour lien interne. |
| <a href="#id"> ... </a> | Lien vers ancre sur la même page. |
Images
| Raccourci | Description |
|---|
| <img src="url" alt="texte" /> | Affiche une image. |
Attributs img : src="url", alt="texte", height="px", width="px", align="", border="".
| Raccourci | Description |
|---|
| <map> ... </map> | Carte d'image cliquable. |
| <area shape="" coords="" /> | Zone cliquable d'une carte. |
Formulaires
| Raccourci | Description |
|---|
| <form action="url" method=""> ... </form> | Conteneur de formulaire. |
Attributs form : action, method (GET/POST), enctype, autocomplete, novalidate, accept-charset, target.
| Raccourci | Description |
|---|
| <fieldset> ... </fieldset> | Groupe d'éléments liés. |
| <label> ... </label> | Étiquette pour champ de saisie. |
| <legend> ... </legend> | Titre du fieldset. |
| <input type="" name="" /> | Champ d'entrée utilisateur. |
Attributs input : type (text, password, etc.), name, value, size, maxlength, required, width, height, placeholder, pattern, min, max, disabled.
| Raccourci | Description |
|---|
| <textarea> ... </textarea> | Zone de texte multiligne. |
| <select> ... </select> | Liste déroulante. |
| <option value=""> ... </option> | Option d'une liste. |
| <button> ... </button> | Bouton de soumission. |
Objets et iFrames
| Raccourci | Description |
|---|
| <object> ... </object> | Intégration de média externe. |
| <param /> | Paramètres pour object. |
| <embed /> | Intégration de plugin externe. |
| <iframe src=""> ... </iframe> | Frame intégré. |
Tableaux
| Raccourci | Description |
|---|
| <table> ... </table> | Contenu d'un tableau. |
| <caption> ... </caption> | Légende du tableau. |
| <thead> ... </thead> | En-têtes de colonnes. |
| <tbody> ... </tbody> | Corps du tableau. |
| <tfoot> ... </tfoot> | Pied de page du tableau. |
| <tr> ... </tr> | Ligne de tableau. |
| <th> ... </th> | Cellule d'en-tête. |
| <td> ... </td> | Cellule de données. |
| <colgroup> ... </colgroup> | Groupe de colonnes. |
| <col /> | Colonne unique. |
Nouvelles balises HTML5
| Raccourci | Description |
|---|
| <header> ... </header> | En-tête de page. |
| <footer> ... </footer> | Pied de page. |
| <main> ... </main> | Contenu principal. |
| <article> ... </article> | Article indépendant. |
| <aside> ... </aside> | Contenu latéral. |
| <section> ... </section> | Section thématique. |
| <details> ... </details> | Informations supplémentaires pliables. |
| <summary> ... </summary> | Titre visible pour details. |
| <dialog> ... </dialog> | Boîte de dialogue. |
| <figure> ... </figure> | Figure ou graphique. |
| <figcaption> ... </figcaption> | Légende de figure. |
| <mark> ... </mark> | Texte surligné. |
| <nav> ... </nav> | Menu de navigation. |
| <menuitem> ... </menuitem> | Élément de menu. |
| <meter> ... </meter> | Jauge de mesure. |
| <progress> ... </progress> | Barre de progression. |
| <rp> ... </rp> | Texte de fallback pour Ruby. |
| <rt> ... </rt> | Annotations Ruby (typographie asiatique). |
| <ruby> ... </ruby> | Annotation Ruby. |
| <time> ... </time> | Date ou heure. |
| <wbr /> | Suggestion de saut de ligne. |
¹Entités HTML5 pour caractères spéciaux
| Entité | Caractère |
|---|
| " ou " | " |
| < ou < | < |
| > ou > | > |
| | Espacement insécable |
| © | © |
| ™ ou ™ | ™ |
| @ ou @ | @ |
| & ou & | & |
| • ou · | • |
¹Ignorez l'espace avant le point-virgule.
Créez un site web pour pratiquer
Une fois les bases HTML acquises, complétez avec CSS et JavaScript. Téléchargez aussi nos aides-mémoire CSS3 et JavaScript pour référence !
[
]
