Aller au contenu

HTML

HTML, ou HyperText Markup Language, est le langage de balisage utilisé pour créer des pages web. Il s'agit d'un élément fondamental dans la création de sites web, car il permet de structurer le contenu d'une page en utilisant des balises. Ces balises définissent la signification et la présentation des éléments sur une page, tels que les titres, les paragraphes, les images, les liens, les formulaires, et bien plus encore.

HTML utilise une syntaxe composée de balises (encadrées par des chevrons, comme <balise>) et de contenu (placé entre les balises). Les balises peuvent également inclure des attributs qui fournissent des informations supplémentaires sur un élément. Par exemple, la balise <a> (utilisée pour les liens) peut inclure un attribut href qui spécifie l'URL vers laquelle le lien redirige. Les attributs sont ajoutés sous forme de paires nom-valeur à l'intérieur des balises, avec une syntaxe ressemblant à ceci : nom="valeur". Les navigateurs web interprètent ensuite le code HTML pour afficher la page web correspondante à l'utilisateur.

Une page HTML de base commence généralement par la balise <html> qui englobe l'ensemble du document. À l'intérieur de cette balise, on trouve les balises <head> pour les métadonnées et les liens vers des fichiers externes, ainsi que la balise <body> pour le contenu visible de la page.

Les balises HTML se divisent en trois catégories : les balises ouvrantes, les balises fermantes, et les balises auto-fermantes, chacune ayant un rôle spécifique.

Balises ouvrantes : Ce sont des balises qui débutent un élément HTML et sont entourées de chevrons, comme <p>. Elles marquent le début de l'élément et peuvent contenir des attributs.

Balises fermantes : Les balises fermantes marquent la fin d'un élément HTML et ressemblent aux balises ouvrantes, mais elles incluent un slash avant le nom, comme </p>. Elles indiquent où se termine l'élément.

Balises auto-fermantes : Ces balises sont utilisées pour les éléments qui ne contiennent pas de contenu textuel et se ferment immédiatement avec un slash, comme <img />. Elles sont couramment employées pour insérer des médias ou des éléments vides.

Note

Les balises auto-fermantes peuvent aussi s'écrire sans slash, comme <img>, selon les conventions d'écriture de code utilisées.

➡️ HTML Living Standard

Structure d'une page HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>…</title>
  </head>
  <body>
    …
  </body>
</html>

<!doctype html>

  • Le doctype est nécessaire pour des raisons historiques.
  • Lorsqu'il est omis, les navigateurs peuvent utiliser un mode de rendu différent, appelé "mode quirks", qui est incompatible avec certaines spécifications modernes.

<html lang="en">

  • L'élément html représente la racine d'un document HTML.
  • Il est recommandé de spécifier un attribut lang sur l'élément html, indiquant la langue principale du document.
  • Cela aide les outils d'accessibilité, comme les synthétiseurs vocaux, à utiliser les bonnes prononciations, et les outils de traduction à appliquer les règles linguistiques appropriées.

<head>

  • L'élément head contient un ensemble de métadonnées pour le document, telles que le titre, les liens vers les feuilles de style, et les informations de configuration.

<meta charset="utf-8">

  • Les éléments meta fournissent des métadonnées qui ne peuvent pas être exprimées avec les éléments title, base, link, style, ou script.
  • L'attribut charset spécifie l'encodage des caractères utilisé par le document, utf-8 étant l'encodage standard et recommandé.

<title>

  • L'élément title représente le titre ou le nom du document, qui apparaît dans l'onglet du navigateur.

<body>

  • L'élément body contient tout le contenu visible par les utilisateurs, tel que le texte, les images, les vidéos, et les autres éléments interactifs de la page.

Retour à la ligne

Les retours à la ligne dans le code source HTML ne provoquent pas de saut de ligne dans la page affichée par le navigateur web !

  • Pour insérer un saut de ligne, il faut utiliser la balise <br>.
<body>
  Some text…
  More text…
  <br>
  The "br" tag creates a line break!
</body>

html-br.png

Espace

Dans le code source HTML, les espaces multiples (c'est-à-dire plusieurs espaces consécutifs) sont réduits à un seul espace lorsqu'ils sont affichés dans le navigateur web. Ainsi, même si vous avez plusieurs espaces entre les mots ou les éléments HTML dans votre code, ils seront affichés comme un seul espace dans la page web résultante.

<body>
  <p>This     is     an     example</p>
</body>

html-space.png

Catégories de contenu

Les catégories de contenu sont un concept essentiel en développement web, car elles définissent comment les éléments HTML sont structurés et interagissent les uns avec les autres. Chaque élément appartient à un ou plusieurs types de catégories de contenu. Ces catégories regroupent donc des éléments partageant un ensemble de caractéristiques communes.

html-content-categories.png

Source image

Metadata Content (Contenu de métadonnées) : Cette catégorie regroupe les informations cruciales sur le document, telles que les données de référencement, les encodages de caractères, et les liens vers des feuilles de style et des scripts.

Balises : <base>, <link>, <meta>, <noscript>, <script>, <style>, <template> et <title>

Flow Content (Contenu de flux) : Les éléments de cette catégorie forment le cœur de la page, comprenant les paragraphes, les titres, les listes, les tableaux, les images, et les liens. Ils façonnent la structure générale de la page.

Balises : <a>, <article>, <audio>, <br>, <button>, <div>, <footer>, <h1>, <header>, <img>, <input>, <p>, <ul>, <table>, …

Sectioning Content (Contenu de sectionnement) : Ces éléments divisent la page en sections sémantiques, facilitant ainsi la compréhension et l'accessibilité du contenu. Ils définissent également la portée des éléments d'en-tête et de pied de page.

Balises : <article>, <aside>, <nav> et <section>

Heading Content (Contenu de titre) : Les balises de titre déterminent la hiérarchie des titres sur la page, aidant les utilisateurs et les moteurs de recherche à comprendre la structure de l'information.

Balises : <h1>, <h2>, <h3>, <h4>, <h5> et <h6>

Phrasing Content (Contenu de mise en forme) : Cette catégorie comprend les éléments qui mettent en forme le texte, contribuant à la présentation et à la structuration du contenu textuel.

Balises : <a>, <b>, <button>, <em>, <i>, <img>, <input>, <label>, <span>, <strong>, <textarea>, <u>, …

Embedded Content (Contenu incorporé) : Ces éléments permettent d'intégrer des médias et des contenus externes dans une page web, enrichissant l'expérience utilisateur.

Balises : <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg> et <video>

Interactive Content (Contenu interactif) : Les éléments interactifs permettent aux utilisateurs d'interagir directement avec la page via des formulaires, des boutons cliquables, et d'autres éléments.

Balises : <a>, <audio>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <label>, <select>, <textarea> et <video>

➡️ WHATWG - Kinds of content

Tip

Toujours se référer à la spécification HTML

Pour savoir comment utiliser les balises :

  • Comment créer des listes imbriquées ?

html-nested-lists.png

Pour connaître la sémantique d'une balise :

  • Quelle est la différence entre <b> et <strong> ?

html-b-vs-strong.png

Réponses : Listes imbriquées

html-ul-doc.png

Source image

html-li-doc.png

Source image

<ul>
  <li>
    Fruits
    <ul>
      <li>Pommes</li>
      <li>Oranges</li>
      <li>Bananes</li>
    </ul>
  </li>
  <li>
    Légumes
    <ul>
      <li>Carottes</li>
      <li>Tomates</li>
      <li>Brocolis</li>
    </ul>
  </li>
</ul>
Réponses : Différence entre <b> et <strong>

html-strong-doc.png

Source image

html-b-doc.png

Source image

<strong>Attention :</strong> Il est important de lire la documentation !

Le langage HTML est facile à écrire si on lit la <b>documentation</b> !

Références de caractères

Documentation

Les "named character references" en HTML, également appelées "entity references", sont des codes spéciaux utilisés pour représenter des caractères spéciaux ou réservés dans le code HTML. Ces codes commencent généralement par une esperluette (&) suivie d'un nom, puis se terminent par un point-virgule (;). Les caractères spéciaux et réservés doivent être encodés de cette manière pour éviter toute confusion avec la syntaxe HTML.

Deux caractères doivent techniquement toujours être encodés :

< (inférieur à)

  • Le caractère < est utilisé pour ouvrir les balises HTML.
  • Si vous souhaitez l'afficher tel quel dans le contenu de votre page, vous devez l'encoder en &lt;.
  • Sinon, il serait interprété comme le début d'une balise HTML, ce qui pourrait perturber la structure de la page.

& (esperluette)

  • L'esperluette est utilisée pour commencer une character reference en HTML.
  • Si vous souhaitez afficher une esperluette telle quelle, vous devez l'encoder en &amp;.
  • Sinon, le navigateur interprétera le texte suivant comme une référence HTML, ce qui peut entraîner des erreurs de rendu.

Afin d'éviter divers problèmes d'affichage et de sécurité (particulièrement sur les sites web dynamiques), certains caractères supplémentaires sont généralement aussi encodés :

> (supérieur à)

  • Ce caractère est utilisé pour fermer les balises HTML.
  • Pour afficher un > tel quel, vous pouvez l'encoder en &gt;.

" (guillemets doubles)

  • Les guillemets doubles sont utilisés pour délimiter les valeurs des attributs HTML.
  • Pour les afficher normalement, vous pouvez les encoder en &quot;.

' (apostrophe)

  • Les apostrophes sont également utilisées pour délimiter les valeurs des attributs HTML.
  • Pour les afficher sans problème, vous pouvez les encoder en &apos;.

Références de caractères numériques

Chaque caractère Unicode peut être encodé dans le code source HTML grâce aux références de caractères numériques décimales et hexadécimales. Il s'agit d'utiliser le code point du caractère Unicode sous la forme &#…; (décimale) ou &#x…; (hexadécimale).

Par exemple, 🥸 peut être encodé avec &#129400; ou &#x1F978;.

disguised-face-emoji.png

Source image

Caractères invisibles ou ambigus

Dans certains cas particuliers, il peut être nécessaire d'utiliser des caractères spéciaux invisibles. Un exemple est le caractère Unicode U+200F Right-To-Left Mark. Ce caractère peut être utilisé pour gérer la direction dans un texte bidirectionnel (par exemple, pour les écritures arabe ou hébraïque). Cependant, il n'a pas de forme graphique visible, ce qui rend difficile l'identification de sa présence dans le code source. S'ils sont omis ou oubliés, ces caractères peuvent provoquer des résultats inattendus lors d'une édition ultérieure.

Un exemple de caractère ambigu est le caractère Unicode U+00A0 No-Break Space. Cet espace empêche le retour à la ligne, mais il ressemble à un espace ordinaire lorsqu'il est utilisé. Il peut donc être compliqué de les identifier dans le code source.

Dans ce type de cas particuliers, il est fortement recommandé d'utiliser les références de caractères.

Lien utile

SYMBL (◕‿◕)

Conception d'une page web

  1. Réfléchir et concevoir la structure d'une page web avant de la coder.
  2. Aller au-delà du simple affichage dans un navigateur web.
  3. Utiliser les balises HTML en fonction de leur sémantique.

1. Réfléchir et concevoir

Le processus de conception d'une page web commence par des esquisses pour générer des idées, passe ensuite aux wireframes pour définir la structure, et se termine par les mockups pour créer une représentation visuelle détaillée de la page. Chaque étape joue un rôle crucial dans la création d'une page web fonctionnelle et esthétiquement agréable.

Sketch (Esquisse)

  • L'esquisse est la première étape du processus de conception.
  • Elle consiste à créer des croquis rapides et informels sur papier ou à l'aide d'outils numériques pour explorer des idées initiales.
  • À ce stade, l'accent est mis sur la créativité et la génération d'idées.
  • Les croquis peuvent inclure la disposition générale de la page, la disposition des éléments clés, la navigation de base, et d'autres idées visuelles.
  • Cela permet de capturer rapidement les concepts sans se soucier des détails.

Wireframe (Maquette fil de fer)

  • Après les esquisses, la prochaine étape consiste à créer des wireframes.
  • Les wireframes sont des représentations schématiques et structurées de la page web.
  • Ils sont généralement en noir et blanc, se concentrant sur la disposition et la hiérarchie des éléments.
  • Les wireframes définissent la structure de la page, l'emplacement des éléments, les zones réservées au contenu, la navigation, et d'autres éléments clés.
  • Ils aident à planifier la convivialité et la fonctionnalité de la page sans se soucier des aspects visuels détaillés.

Mockup (Maquette graphique)

  • Une fois la structure de base définie à l'aide des wireframes, on passe à la création de maquettes graphiques.
  • Les mockups sont des représentations visuelles de la page web avec des détails graphiques, tels que les couleurs, les polices, les images, et les éléments de design.
  • Les maquettes graphiques donnent vie à la conception en montrant à quoi ressemblera la page web une fois terminée.
  • Elles servent également de référence pour le développement, car elles fournissent des indications précises sur l'apparence visuelle de la page.

sketch-wireframe-mockup.png

Source image

2. Penser plus loin

Moteurs de recherche

L'optimisation pour les moteurs de recherche (SEO) est un aspect essentiel de la conception de pages web. Pour garantir que votre site soit bien classé dans les résultats de recherche et atteigne un public plus large, il est crucial de prendre en compte divers éléments :

  • Choix des mots-clés : Utiliser des mots-clés pertinents pour le contenu de la page.
  • Titre de la page (balise <title>) : S'assurer que le titre de chaque page est unique, descriptif, et contient un ou plusieurs mots-clés pertinents. Le limiter à environ 60 caractères.
  • URL conviviale : Créer des URLs lisibles par l'humain et inclure des mots-clés si possible. Éviter les URL longues et complexes contenant des chiffres ou des caractères spéciaux.
  • Balises de titre (balises <h1> à <h6>) : Utiliser les balises de titre pour structurer le contenu. L'élément <h1> devrait contenir le titre principal de la page et les autres balises de titre devraient organiser le contenu de manière logique.
  • Contenu de qualité : Rédiger un contenu informatif, pertinent, et de haute qualité, qui répond aux besoins des utilisateurs.
  • Balises sémantiques : Utiliser les balises HTML sémantiques (comme <article>, <section>, <header>, <footer>, etc.) pour structurer le contenu de manière claire et significative.
  • Optimisation des images : Utiliser les attributs alt pour décrire les images de manière concise et pertinente.
  • Liens internes et externes : Créer des liens internes vers d'autres pages du site pour améliorer la navigation. Inclure des liens vers des sources externes de confiance lorsque cela est pertinent.
  • Balises meta (meta-tags) : Rédiger des balises <meta> descriptives pour chaque page, en incluant des mots-clés pertinents.
  • …

web-search.png

Source image

Agrégation de contenus

L'agrégation de contenus, en informatique et dans le contexte du développement web, fait référence à la collecte, la fusion, et la présentation de contenu provenant de différentes sources ou sites web sur une seule plateforme. En général, l'agrégation de contenus permet de regrouper des informations de diverses sources pour offrir aux utilisateurs une expérience de navigation centralisée. Par exemple, un agrégateur de nouvelles en ligne peut rassembler des articles de plusieurs sources d'actualités et les présenter sur une seule page, permettant ainsi aux utilisateurs de consulter différentes perspectives en un seul endroit.

La création d'un site web destiné à être agrégé par d'autres sites et services nécessite une attention particulière aux aspects techniques du code HTML. Un code bien structuré et conforme aux normes permettra aux agrégateurs d'extraire facilement et avec précision votre contenu.

Les points techniques mentionnés pour les Moteurs de recherche s'appliquent également pour permettre à vos contenus d'être exploités efficacement sur les agrégateurs.

content-aggregation.png

Source image

google-news.png

Source image

Lecteur d'écran et synthèse vocale

La conception de pages web pour les lecteurs d'écran et la synthèse vocale est essentielle pour garantir l'accessibilité aux personnes ayant des limitations visuelles (aveugles, malvoyants, daltoniens, etc.).

  • Structuration sémantique : Utiliser les balises HTML appropriées (comme <header>, <nav>, <main>, <footer>, etc.) pour structurer le contenu de manière sémantique. Cela aide les lecteurs d'écran à comprendre la hiérarchie et la signification du contenu.
  • Texte alternatif pour les images : Chaque image doit avoir un attribut alt descriptif qui explique le contenu de l'image. Les lecteurs d'écran utiliseront ces descriptions pour informer l'utilisateur.
  • Ordre de lecture : Assurer un ordre de lecture du contenu logique et cohérent, même si la mise en page visuelle est différente. Les lecteurs d'écran suivent généralement l'ordre du code HTML.
  • Contraste : Le texte et les éléments interactifs doivent avoir un contraste suffisant par rapport à l'arrière-plan pour faciliter la lecture.
  • Éviter les éléments non textuels : Ne pas créer d'éléments interactifs qui ne sont que des images sans texte explicite, car cela peut rendre difficile la compréhension pour les utilisateurs de lecteurs d'écran.
  • ARIA : Utiliser les attributs ARIA (Accessible Rich Internet Applications) lorsque cela est nécessaire pour améliorer l'accessibilité des éléments interactifs complexes, comme les menus déroulants.

Note

Accessible Rich Internet Applications (ARIA), qu'on pourrait traduire par "applications Internet riches et accessibles", est un ensemble d'éléments techniques qui définissent comment rendre le contenu et les applications web accessibles (notamment ceux développés avec JavaScript) aux personnes en situation de handicap.

ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance lorsque les fonctionnalités standard ne le permettent pas. ARIA permet ainsi de rendre accessibles les widgets JavaScript, les indications dans les formulaires, les messages d'erreur, les mises à jour dynamiques du contenu, etc.

screen-reader.png

Source image

3. Structuration sémantique

La structuration sémantique d'une page web est un concept essentiel en développement web. Elle consiste à utiliser des balises HTML de manière appropriée pour décrire le contenu de la page de manière significative et structurée. Cela permet, par exemple, aux navigateurs web, aux moteurs de recherche, et aux technologies d'assistance de comprendre la hiérarchie et la signification du contenu de la page.

tags-semantic-markup.png

Source image

Article et Section

Les balises HTML <article> et <section> sont toutes deux utilisées pour structurer le contenu d'une page web, mais elles ont des significations et des utilisations légèrement différentes.

La balise <article> est généralement utilisée pour marquer une partie autonome et auto-suffisante du contenu de la page. Cela signifie qu'un <article> doit avoir un sens et une utilité indépendants, même s'il est retiré du contexte de la page. Par exemple, un article de blog, une publication de journal, ou un commentaire sur un forum pourrait être encapsulé dans une balise <article>.

La balise <section> est utilisée pour diviser le contenu d'une page en sections thématiques ou logiques. Elle est souvent utilisée pour organiser le contenu en chapitres ou en grandes parties. Les éléments <section> permettent de structurer la page de manière à rendre le contenu plus lisible et compréhensible pour les utilisateurs, mais ils ne sont pas censés être des éléments autonomes comme <article>.

tag-article.png

Source image | Source image

Les balises HTML <nav>, <header>, <footer>, et <aside> sont toutes des éléments de structure utilisés pour organiser et définir la structure d'une page web.

La balise <nav> est utilisée pour marquer une section de la page qui contient des liens de navigation. Cela peut inclure un menu de navigation principal, un menu secondaire, ou tout autre ensemble de liens qui aident les utilisateurs à naviguer sur le site ou à accéder à d'autres parties du site.

La balise <header> est généralement utilisée pour englober le contenu d'en-tête d'une section ou de la page entière. Cela peut inclure des éléments tels que le logo du site, le titre principal de la page, et les éléments de navigation. Le <header> est généralement positionné en haut de la page ou de la section.

La balise <footer> est utilisée pour marquer le contenu de bas de page d'une section ou de la page entière. Elle contient généralement des informations de pied de page telles que les coordonnées, les liens vers des pages de politique ou de mentions légales, la date de copyright, etc. Le <footer> est généralement positionné en bas de la page ou de la section.

La balise <aside> est utilisée pour marquer le contenu qui est légèrement lié au contenu principal de la page, mais qui peut être considéré comme "à part". Cela peut inclure des éléments tels que des encarts publicitaires, des informations connexes, ou des citations. Les éléments <aside> sont souvent affichés à côté du contenu principal, mais ils ne sont pas essentiels à la compréhension de celui-ci.

tags-nav-header-footer-aside.png

Source image | Source image | Source image | Source image

Document outline

Le "document outline" en HTML se réfère à la structure logique d'un document basée sur l'utilisation des éléments de titres (<h1> à <h6>). L'idée est que ces éléments de titres aident à organiser et à définir clairement les différentes parties d'une page web. Pour que les outils d'assistance, comme les lecteurs d'écran, puissent afficher la structure d'une page web, une organisation logique des titres est essentielle, comme dans une table des matières d'un document, rapport, livre, etc.

✅ Exemple conforme

<body>
  <h1>Level 1</h1>
  <h2>Level 2</h2>
  <h3>Level 3</h3>
  <h1>Level 1</h1>
</body>

document-outline-1.png

document-outline-1-web.png

❌ Exemple non conforme

<body>
  <h1>Level 1</h1>
  <h3>Level 3</h3>
  <h2>Level 2</h2>
  <h1>Level 1</h1>
</body>

document-outline-2.png

document-outline-2-web.png

Cas particulier - H1

Les titres de niveau 1 <h1> ne doivent pas être utilisés à l'intérieur d'éléments de la catégorie "Sectioning Content" (Contenu de sectionnement), qui regroupe les éléments définissant la structure d'un document : <article>, <aside>, <nav>, et <section>.

✅ Exemple conforme

<body>
  <h1>Level 1</h1>
  <section>
    <h2>Level 2</h2>
  </section>
  <h3>Level 3</h3>
  <h1>Level 1</h1>
</body>

document-outline-1.png

document-outline-1-web.png

❌ Exemple non conforme

<body>
  <h1>Level 1</h1>
  <section>
    <h1>Level 1</h1>
  </section>
  <h2>Level 2</h2>
  <h1>Level 1</h1>
</body>

document-outline-2.png

document-outline-2-web.png

Note

Le premier titre dans une page HTML (code source) doit toujours être un titre <h1>.

Même si c'est autorisé, n'utilisez pas plus d'un titre <h1> par page de contenu.

Un titre qui suit un autre doit toujours avoir une différence de niveau de maximum ±1.

Ajoutez un titre à chaque élément <section> et <article>.

Lien utile

Nu Html Checker

💡 En résumé

think-write-check.png

Réfléchir / Coder / Vérifier

DOM

Le DOM, ou Document Object Model, est une représentation hiérarchique de la structure d'une page HTML. Il s'agit essentiellement d'une interface de programmation qui permet aux développeurs de manipuler dynamiquement le contenu et la structure d'une page web à l'aide de langages de programmation tels que JavaScript.

dom.png

Source image

Le DOM est extrêmement utile pour les développeurs, notamment lors du développement et de l'utilisation des outils de développement (Developer Tools) dans les navigateurs web.

Inspection des éléments : Les outils de développement des navigateurs permettent aux développeurs d'inspecter la structure du DOM en temps réel. Ils peuvent voir la hiérarchie des éléments HTML sur une page, les propriétés CSS appliquées à chaque élément, ainsi que les valeurs des attributs.

Modification en temps réel : Les outils de développement permettent aux développeurs de modifier en temps réel le contenu du DOM. Ils peuvent tester des changements de texte, d'attributs, de styles, etc., directement dans le navigateur sans avoir à modifier le code source de la page.

Debugging : Les développeurs peuvent utiliser le DOM pour diagnostiquer et résoudre des problèmes sur une page web. Ils peuvent définir des points d'arrêt (breakpoints) dans leur code JavaScript pour examiner comment le DOM est modifié au fur et à mesure que leur code s'exécute.

developer-tools.png