Résumé du HTML

Résumé du HTML
Crédit photo : Markus Spiske sur Unsplash

Cet article est un résumé du langage HTML.

Une référence complète des balises et de leur utilisation se trouve sur le MDN.

Une version graphique est également disponible, c’est le tableau périodique des éléments HTML

1. Principes généraux du HTML

Le HTML est un langage de balisage de texte. Les balises ont toutes la forme <nom> où nom est le nom de la balise. La plupart des balises ont un ouvrant et un fermant (de la forme </nom>) mais certaines balises (dites void) n’ont pas de fermant.

Les balises se classent en deux catégories : les blocs et les in-line. Les éléments blocs provoquent de retours à la ligne.

La catégorisation complète (selon la norme HTML5) est ici.

Les balises peuvent avoir des attributs (forme : <nom nom_attribut="valeur_attribut">). Certains attributs sont des booléens. Dans ce cas, ils n’ont pas de valeur et s’ils sont vrais, on emploie simplement le nom de l’attribut. La valeur de l’attribut peut être entre des simples (') ou des doubles (") quotes. Dans une quote, on n’emploie pas de quotes mais plutôt des entités HTML (par exemple une simple quote sera encodée : &apos;).

Un document HTML de base :

<!DOCTYPE html>
<html lang="fr-FR">
  <head>
    <meta charset="utf-8" />
    <title>Une page HTML simple</title>
  </head>
  <body>
    <p>Ici, le contenu.</p>
  </body>
</html>

Ce document présente une page des plus simples mais avec tout de même :

  • une balise DOCTYPE indiquant l’utilisation de HTML5.
  • une balise meta indiquant que le document est encodé en UTF-8.
  • un titre et un corps bref.

Remarque : les espaces, tabulations, retous à la ligne (ce que les anglais nomment collectivement les whitespaces) ne sont pas significatifs en HTML.

Certains caractères sont utilisés pour la syntaxe du HTML lui-même et ne peuvent donc pas être utilisés directement. On les encode de la façon suivante :

  • < : &lt; (lesser than)
  • > : &gt; (greater than)
  • & : &amp; (ampersand)
  • " : &quote;
  • ' : &apos;
  • et d’autres…

Les commentaires en HTML commencent par <!-- et finissent par -->.

2. L’entête du document

2.1 Balises courantes

L’entête contient généralement :

  • le titre (balise <title>), affiché dans le titre de la fenêtre du navigateur,
  • des balises <meta> comme :
    • <meta charset="utf-8" /> pour indiquer le format d’encodage du document,
    • <meta name="author" content="Nom d'auteur" /> pour indiquer l’auteur du document,
    • <meta name="description" content="Description du document"> pour indiquer un bref résumé du document,
    • et bien d’autres…
  • une balise <link rel="icon" href="favicon.ico" type="image/x-icon" /> pour définir une icône ppour la page,
  • une balise <link rel="stylesheet" href="monstyle.css" /> pour attacher une feuille de style CSS à la page,
  • une balise <script src="fichier_script.js" defer></script> pour charger un script en Javascript. A noter, l’attribut defer indique de ne charger le fichier que lorsque le rendu de la page HTML est terminé.

Enfin, pas tout à fait dans l’entête mais juste au dessus, la balise <html> accepte un attribut lang qui permet de préciser la langue du document (ex : fr-FR pour le français). Les codes de langues sont définis par la norme ISO 639-1.

2.2 Définition du viewport

Le viewport (la zone effectivement affichée) est définie dans l’entête du document en utilisant une balise <meta name="viewport" content="" />. L’attribut content est une liste de clé=valeur séparés par des virgules. Les clés possibles sont :

  • width : définit la largeur du viewport. Cela peut être une valeur fixe en pixels pour avoir une zone d’affichage striuctement délimitée (au risque d’avoir un ascenseur horizontal si la fenêtre réelle est moins large) ou un pourcentage (100% pour que le viewport correspondant exactement à la fenêtre). Cet attribut est particulièrement important sur les mobiles dont les navigateurs retournent généralement une fausse valeur de viewport et zooment artificellement les pages.
  • height : définit de la même façon la hauteur de la page.
  • initial-scale : niveau de zoom au chargement de la page (entre 0.1 et 10).
  • minimum-scale et maximum-scale : seuils min et max de zoom autorisés. Le maximum ne devrait jamais être défini en dessous de 3 pour permttre l’accessibilité des pages.
  • user-scalable : peut prendre les valeurs yes, no (ou 1 ou 0 resp.) pour indiquer si l’utilisateur aura le droit de zoomer sur la page. Pour des questions d’accessibilité des sites, il est fortement recommandé de laisser la valeur par défaut (1).
  • interactive-widget : indique si l’affichage d’un widget tel qu’un clavier virtuel se fait en changeant les dimensiosn de la page (resize-content), de l’affichage (resize-visual par défaut) ou en surimpression (overlays-content).

3. Les balises dans le corps du document

3.1 Balises courantes

Le HTML définit six niveaux de titres/sous-titres allant de <h1> à <h6>.

Le texte principal utilise généralement des balises de paragraphe <p>. L’emphase sera indiquée avec la balise <em> (ou parfois <i>) et <strong> (ou parfois <b>). Toutefois, dans un HTML moderne, on évite l’emploi des balises <i>, <b> et <u> (souligné) au profit d’un balisage sémantique associé à des styles CSS.

Les listes peuvent être ordonnées <ol> ou non <ul>. Les éléments des listes seront dans des balises <li>. Les listes peuvent s’imbriquer.

Les liens se font avec la balise <a href="URL pointée" title="description du lien"> et éventuellement un attribut target pour indiquer si le lien doit s’afficher à la place du document en cours ou non.

3.2 Balises avancées

Les listes descriptives se créent avec les balises <dl>. Leurs items sont <dt> pour le terme à définir et <dd> pour la définition en elle même. Note : il est permis d’avoir plusieurs définitions pour un terme.

Une citation d’un autre document peut être indiquée par la balise <bloquequote> et l’attribut cite indiquera le document cité. Pour faire une citation dans le flux de texte (sans créer de paragraphe), on préférera la balise <q>.

La balise <abbr> indique que le terme qu’elle contient est une abbréviation. Son attribut title permet de préciser le terme abbrégé.

Les infos de contact de l’auteur d’une page peuvent être balisées à l’aide de <address>.

Les exposants et les indices se font à l’aide des balises <sup> et <sub>.

La balise <time> et son attribut datetime permettent d’indiquer une date et une heure à la fois en termes lisibles par un humain (le contenu de la balise) et interprétables par une machine (le contenu de l’attribut).

3.3 Représenter du code

La balise <code> délimite un fragment de code. La balise <pre> indique que les whitespaces seront significatifs. Généralement, cette balise est rendue avec une police à chassse fixe. La balise <var indique spécifiquement un nom de variable. La balise <kbd> signale un texte tel qu’il devrait être saisi au clavier. Et la balise <samp> marque la sortie d’un programme.

3.4 Balises de structuration du document

Les différentes parties d’un document peuvent être délimitées par des balises spécifiques : <header> pour l’entête, <footer> pour le pied de page, <nav> pour la barre de navigation, <aside> pour une barre latérale (souvent placée dans la partie principale).

La partie principale sera délimitée par des balises <main>, elle-même divisée en <section>, <article> ou <div>. La balise <main> devrait être unqiue par page et immédiatement fille de <body>.

Note : les balises <div> (de type bloc) et <span> (de type flux) ne correspondent à aucune sémantique forte et peuvent être utilisées pour tout autre balisage. Il est toutefois préférable d’utiliser les balises ayant le plus spécifique possible.

La balise <br> impose un retour à la ligne.

La balise <hr> sépare visuellement deux parties avec une ligne horizontale.

3.5 Multimédia et intégrations

Les images sont insérées grâce à la balise <img>. Elle nécessite un attribut src pour indiquer l’URL de l’image et un attribut alt pour préciser un texte alternatif (pour les cas où l’image ne pourrait être obtenue). De nombreux autres attributs sont disponibles.

Une image peut être placée dans une balise <figure> et accompagnée d’une balise <figcaption> pour permettre de joindre une légende. Le contenu de <figcaption> n’est pas la même chose que l’attribut alt. L’attribut sert à remplacer l’image pour les cas où elle ne peut pas être affichée ou pour les personnes qui ne voient pas les images tandis que le <figcaption> est bien une légende qui complète l’image.

La balise <picture>, plus complète permet d’inclure des images en spécifiant plusieurs sources, plusieurs formats et plusieurs résolutions.

Au delà des images, il est également possible d’include d’autres éléments multimédia avec les balises <video> et <audio>, accompagnés de la balise <track> pour inclure les sous-titres.

On peut également intégrer une page HTML dans une autre en utilisant la balise <iframe>. Elle présente de nombreux attributs pour gérer finement l’interaction entre les deux sites.

Enfin, les balises <embed> et <object> permettent également d’inclure des contenus variés dans le HTML.

3.6 Tableaux

Les balises de définition de tableaux ne doivent plus être utilisées pour faire de la mise en page mais seulement pour présenter des données tabulaires. Ce sont les suivantes :

  • <table> : déclaration de la table
  • <tr> : une ligne de table
  • <td> : une cellule de table, les attributs colspan et rowspan permettent d’étendre une cellule sur plusieurs colonnes ou lignes.
  • <th> : une en-tête (de colonne avec l’attribut scope="col" ou de ligne avec scope="row")
  • <caption> : titre de la table
  • <colgroup> et <col> : défintion des colonnes et des groupes de colonnes
  • les balises <thead>, <tbody> et <tfoot> permettent de donner de la sémantique à une table en caractérisant les lignes.

3.7 Formulaires

Des balises spécifiques sont utilisées pour créer des formulaires dans les pages HTML.

Le formulaire en lui même est défini par la balise <form> dont les attributs action et method indiquent l’action a réaliser pour traiter le formulaire et la méthode HTTP pour transmettre les données.

Les entrées du formulaires seront des balises :

  • <input> dont l’attribut type précisera le type de donnée
    • text : saisie de texte simple
    • email : saisie d’une adresse email
    • password : saisie d’un mot de passe
    • hidden : un champ caché
    • checkbox : une case à cocher
    • radio : un sélecteur (toutes les balises ayant la même valeur d’attribut name seront considérées comme appartenant au même sélecteur)
    • submit, reset et button : boutons
    • image : une image (un bouton image en fait)
    • file : un sélecteur de fichier
    • search : un champ de recherche
    • tel : un numéro de téléphone
    • url : une URL
    • number : une valeur numérique (les attributs min et max permettent de fixer des bornes et l’attribut step un incrément. Si la valeur de step est any, il est possible de saisir des nombres flottants, sinon seulement des entiers. La valeur par défaut de step est 1).
    • slider : fonctionne comme number mais propose un potentiomètre plutôt qu’un champ de saisie simple.
    • datetime-local : un sélecteur de date et heure.
    • month : un sélecteur de mois et année.
    • time : une saisie d’heure (heure et minutes).
    • week : un numéro de semaine et une année.
    • color : un sélecteur de couleurs.
  • <label> ajoute un libellé associé à la balise <input>. Son attribut for doit correspondre à l’attribut id de la balise auquel se rapporte le libellé.
  • <textarea> permet la saisie d’une zone de texte plus étendue.
  • <button> permet de créer des boutons.
  • <select> : une combo, les différentes valeurs possibles seront détaillées dans des balises <option>, éventuellement regroupées dans des <optgroups> qui formeront des ruptures. Avec l’attribut multi, cette balise s’affiche comme une liste à choix multiple.
  • <datalist> et <option> permettent de fournir des valeurs de complétion automatique à une autre <input> (la balise recevant la complétion automatique devra avoir un attribut list dont la valeur est l’id de la balise <datalist>).

Toutes ces variantes de balises partagent quelques attributs communs (et certaines ont des attributs spécifiques) :

  • id : comme toutes les balises du document, les balises de formulaires peuvent avoir des identifiants (uniques dans la page !).
  • name : le nom de la balise qui est envoyé au serveur pour identifiée la données saisie correspondante.
  • form : pour associer une balise à un formulaire même quand elle ne se trouve pas dedans (la valeur de cet attribut doit correspondre à l’attribut id de la balise <form> associée).
  • value : une valeur initiale.
  • disabled : un booléen indiquant que le champ du formulaire est désactivé.
  • autofocus : un booleen indiquant la balise (unique) qui recevra le focus par défaut.

L’ensemble des champs de saisie du formulaire peut être regroupé par groupes logiques dans une balise <fieldset> et accompagné d’une balise <legend>, à la fois dans un soucis sémantique et pour aider à l’accessibilité.

3.8 Autres balises

Le HTML propose encore d’autres balises pour des usages spécifiques.

  • <map> et <area> : zones de clicage
  • <base> : indique l’URL de base de toutes les URL relatives du document
  • <bdi> : indique que son contenu est formé de texte bidirectionnel (ex : un mélange d’alphabet latin et arabe)
  • <bdo> : surcharge le sens de rendu en cours du texte
  • <canvas> : support de dessin (à utiliser en Javascript avec l’API Canvas)
  • <data> : attache une donnée à une portion du document
  • <del> et <ins> : représente du texte supprimé ou inséré
  • <details> : affiche son contenu dans une zone “refermée” avec un bouton d’ouverture (permet de masquer une réponse ou un spoil)
  • <dfn> : indique un terme défini dans le contexte de la phrase
  • <mark> : surligne un passage
  • <menu> : représente un menu (fonctionne comme <ul> et contient également des <li> qui forment les options du menu)
  • <meter> : affiche une jauge
  • <noscript> : contient le HTML à afficher si le script n’est pas supporté par le navigateur ou s’il est désactivé
  • <output> : emplacement dans lequel le site peut injecter le résultat d’un calcul
  • <picture> : regroupe plusieurs variantes d’une image (formats, tailles, résolution…) et laisse le navigateur afficher la plus adaptée
  • <progress> : affiche une barre de progression
  • <q> : citation en ligne (pour une citation longue, préférer <blockquote>)
  • <ruby>, <rp> et <rt> : annotation ruby. Permet d’ajouter des annotations de prononciation sur des caractères asiatiques.
  • <s> : texte barré
  • <samp> : texte d’exemple
  • <script> : inclusion d’un script Javascript dans le document
  • <slot> et <template> : éléments de la technologie WebComponent qui permet de définir des fragments de documents indépendants
  • <small> : petit texte (infos de copyright par exemple)
  • <source> : source d’un fichier, utilisé dans <video>, <audio> ou <picture>
  • <style> : intégration de CSS dans le document
  • <summary> : texte de résumé à utiliser avec <detail>
  • <track> : balise pour spécifier les informations de sous titrage des balises <audio> et <video>
  • <wbr> : indique un emplacement de césure possible à l’intérieur d’un mot très long

3.9 Balises dépréciées

Ces balises ne sont officiellement plus supportées. Elles ne doivent plus être utilisées dans de nouveaux sites mais peuvent être encore acceptées par certains navigateurs.

  • <acronym> : définition d’un acronyme, utiliser <abbr> à la place
  • <applet> : insertion d’une application Java, remplacée par <object>
  • <bgsound> : jouer un son en fond, remplacée par <audio>
  • <big> : gros texte, remplacée par CSS
  • <blink> : texte clignotant (déconseillé, possible en CSS)
  • <center> : texte centré, remplacé par CSS
  • <content> : non standard, déprécié
  • <dir> : répertoire de fichiers, utiliser <ul> à la place
  • <font> : changement de la police de caractères, utiliser CSS à la place
  • <frameset>, <frame> et <noframes> : définition d’un ensemble de cadre, utiliser <iframe> à la place
  • <image> : image, remplacée par <img>
  • <keygen> : génération de clé de chiffrement, obsolète
  • <marquee> : texte animé, utiliser CSS à la place
  • <menuitem> : élément de manu contextuel, non standard, obsolète
  • <nobr> : fragment insécable, non standard, utiliser CSS à la place
  • <noembed> : alternative à <embed>, préférer <object>
  • <param> : paramètre pour un <object>, obsolète
  • <plaintext> : obsolète, remplacé par <pre>
  • <rb> : obsolète
  • <rtc> : obsolète
  • <shadow> : obsolète
  • <spacer> : espacement, remplacé par CSS
  • <strike> : texte barré, utiliser CSS à la place
  • <tt> : teletype (police à chasse fixe), préférer une balise sémantique ou <pre>
  • <xmp> : obsolète, remplacé par <pre> ou <code>