Web
Client

Aide-mémoire - HTML

<html>

Englobe l'ensemble du code HTML. Contient un attribut lang pour indiquer la langue de la page.

<head>

Contient les métadonnées de la page, comme son titre, ainsi que les liens vers les fichiers CSS et Javascript à charger. Elle doit être placée dans la balise html, avant la balise body.

<body>

Contient le contenu visible de la page, comme les entêtes, paragraphes, images, liens, etc. Elle doit être placée dans la balise html, après la balise head.

<title>

Contient le titre de la page, qui s'affiche dans l'onglet du navigateur. Elle doit être placée dans la balise head.

<meta>

Contient des métadonnées sur la page, comme son encodage, sa description, ses mots-clés, etc. Elle doit être placée dans la balise head. Pour l'instant, vous pouvez simplement garder celles qui sont autogénéré, mais vous aurez à en ajouter d'autres plus tard.

<!-- -->

Commentaires HTML. Ils ne sont pas affichés dans le navigateur et sont utilisés pour ajouter des notes ou des explications dans le code.

<strong>

Met en évidence un texte important. Il est généralement affiché en gras par défaut, mais on peut le changer à l'aide du CSS.

<h1> à <h6>

Un titres, où h1 est le titre principal de la page et h6 est le titre le moins important. Elles sont utilisées pour structurer le contenu de la page. Assurez-vous que ces balises sont utilisées dans le bon ordre, sans sauter de niveaux.

<p>

Un paragraphe. Elle est utilisée pour structurer le texte en paragraphes. Elle peut contenir du texte, des liens, des images, etc.

<ul>

Une liste non ordonnée. Elle est utilisée pour créer des listes à puces. Elle doit contenir des balises li pour chaque élément de la liste.

<ol>

Une liste ordonnée. Elle est utilisée pour créer des listes numérotées. Elle doit contenir des balises li pour chaque élément de la liste.

<li>

Un élément de liste. Elle est utilisée à l'intérieur des balises ul ou ol pour définir un élément dans la liste.

<dl>

Une liste de définitions. Elle est utilisée pour créer des listes de termes et leurs définitions. Elle doit contenir des balises dt et dd.

<dt>

Un terme dans une liste de définitions. Elle est utilisée à l'intérieur de la balise dl pour définir un terme.

<dd>

La définition d'un terme dans une liste de définitions. Elle est utilisée à l'intérieur de la balise dl pour fournir la définition du terme défini par la balise dt.

<header>

L'entête d'une page ou d'une section de page. Elle contiendra souvent le titre de la page, le logo et le menu de navigation. Assurez-vous de ne pas la confondre avec la balise head.

<footer>

Le pied de page d'une page ou d'une section de page. Elle contiendra souvent des informations de copyright, des liens vers les documents légaux, ainsi que des liens vers les réseaux sociaux.

<main>

Contient le contenu principal de la page. On y mettra le texte, les images et tout autre contenu qui est propre à la page.

<nav>

Le menu de navigation. Il contient une liste de liens vers les différentes sections de la page ou du site. On le voit souvent dans le header, mais il peut aussi être ailleurs.

<section>

Une section de la page. Elle est utilisée pour regrouper des contenus liés entre eux et créer des sections distinctes dans la page. Elle doit commencer par une balise h1 à h6 pour être valide et accessible.

<article>

Un article indépendant. Il est utilisé pour représenter un contenu autonome, comme un article de blog ou une nouvelle.

<aside>

Un contenu secondaire ou complémentaire à la page principale. Il est souvent utilisé pour afficher des informations supplémentaires, comme des liens vers d'autres articles ou des publicités ou encore pour faire une barre de navigation sur le côté de la page..

<a>

Balise de lien. Elle est utilisée pour créer des liens vers d'autres pages ou ressources. Elle doit contenir un attribut href pour indiquer l'URL de la ressource liée.

<img>

Balise d'image. Elle est utilisée pour afficher des images sur la page. Elle doit contenir un attribut src pour indiquer l'URL de l'image et un attribut alt pour fournir une description de l'image.

<audio>

Balise audio. Elle est utilisée pour intégrer des fichiers audio dans la page. Elle contiendra généralement une balise source pour indiquer le fichier audio à lire, ainsi que des attributs comme controls pour afficher les contrôles de lecture.

<video>

Balise vidéo. Elle est utilisée pour intégrer des fichiers vidéo dans la page. Elle contiendra généralement une balise source pour indiquer le fichier vidéo à lire, ainsi que des attributs comme controls pour afficher les contrôles de lecture.

<source>

Source pour les balises audio et video. Elle est utilisée pour indiquer le fichier audio ou vidéo à lire. Elle doit contenir un attribut src pour indiquer l'URL du fichier et un attribut type pour indiquer le type de fichier.

<table>

Une table de données. Elle est utilisée pour afficher des données sous forme de tableau. Elle contiendra des balises thead, tbody et tfoot pour structurer le tableau, ainsi que des balises tr, th et td pour les lignes et les cellules.

<thead>

L'en-tête d'un tableau. Elle est utilisée pour définir les rangées d'entête. Elle doit contenir des balises tr et th pour les lignes et les cellules d'entête.

<tbody>

Le contenu principal d'un tableau. Il doit contenir des balises tr et td pour les lignes et les cellules de données.

<tfoot>

Le bas d'un tableau. Elle définit les lignes de conclusion ou de sommaire dans une table, comme des totaux. Elle doit contenir des balises tr et td.

<tr>

Une ligne dans une table. Elle est utilisée à l'intérieur des balises thead, tbody ou tfoot pour définir une ligne de la table.

<th>

Une cellule d'entête dans une table. Elle est utilisée à l'intérieur de la balise tr dans le thead pour définir une cellule d'entête de colonne.

<td>

Une cellule de données dans une table. Elle est utilisée à l'intérieur des balises tr partout dans le tableau, sauf dans le thead.

<caption>

La légende d'un tableau. Elle est utilisée pour fournir un titre ou une description à un table. Elle doit être placée en premier, en haut, à l'intérieur de la balise table.

<form>

Un formulaire. Il regroupe les balises d'entrée input, textarea ou select et les balises d'information comme les label qui forme un formulaire à soumettre.

<input>

Un champ de saisie qu'on utilise pour collecter des données de l'utilisateur. Il doit contenir un attribut type pour indiquer le type de champ parmi les champs valide.

<textarea>

Un champ de saisie de texte multiligne qu'on utilise pour collecter du texte plus long que ce qu'un champ input peut contenir.

<select>

Une liste déroulante qu'on utilise pour permettre à l'utilisateur de choisir une ou plusieurs options parmi une liste prédéfinie. Elle doit contenir des balises option pour chaque option disponible.

<option>

Une option dans une liste déroulante. Elle est utilisée à l'intérieur de la balise select pour définir une option disponible à l'utilisateur.

<label>

Un libellé pour un champ de saisie. Il est utilisée pour associer un texte descriptif à un champ de saisie input, textarea ou select. Dans un formulaire, chaque champ devrait avoir un libellé pour être accessible.

<button>

Un bouton cliquable qu'on utilise pour soumettre un formulaire ou déclencher une action. Il peut contenir du texte, des images ou d'autres éléments.

<fieldset>

Un groupe de champs de saisie dans un formulaire. On l'utilise souvent pour sectionner les grands formulaires. Elle peut contenir une balise legend pour fournir un titre au groupe.

<legend>

Le titre d'un groupe de champs. Elle est utilisée à l'intérieur de la balise fieldset pour fournir un titre au groupe de champs.

<figure>

Une figure, comme une image ou un graphique avec du texte associé. Elle est utilisée pour regrouper une image et sa légende. Elle va généralement contenir une balise figcaption pour fournir une description de l'image.

<figcaption>

La légende ou texte associé à une image, schémas ou figure. Elle est utilisée pour fournir une description de l'image ou du graphique contenu dans la balise figure.

<details>

Une section qui peut être développée ou réduite. Elle est utilisée pour afficher des informations supplémentaires qui ne sont pas immédiatement visibles, comme une FAQ, des instructions supplémentaires ou des spoilers. Elle doit contenir une balise summary pour fournir un résumé de la section.

<summary>

Le résumé ou titre d'une section développable. Elle est utilisée à l'intérieur de la balise details pour fournir un titre ou un résumé de la section.

<time>

Une date ou une heure. Elle est utilisée pour indiquer une date ou une heure spécifique, comme la date de publication d'un article ou l'heure d'un événement. Elle doit contenir un attribut datetime pour indiquer la date ou l'heure dans un format accepté.

<kbd>

Une entrée au clavier. Elle est utilisée pour indiquer une touche, comme A ou encore Échap, ou une combinaison de touches à utiliser, comme Ctrl + C pour copier.

<blockquote>

Une citation. Elle est utilisée pour afficher une citation ou un extrait de texte provenant d'une autre source. Elle peut contenir une balise cite pour indiquer la source de la citation.

<cite>

La source d'une citation. Elle est utilisée à l'intérieur de la balise blockquote pour indiquer la source de la citation ou de l'extrait de texte.

<code>

Un code de programmation informatique. Elle est utilisée pour afficher du code source ou des extraits de code dans le texte. Elle est beaucoup utilisé dans ce site web.

<pre>

Un texte préformaté. Elle est utilisée pour afficher du texte avec une mise en forme préservée, comme des espaces et des sauts de ligne. Elle est souvent utilisée conjointement à la balise code pour afficher du code source ou des extraits de code.

<iframe>

Un cadre intégré. Elle est utilisée pour intégrer une autre page web ou un contenu externe dans la page actuelle.

<div>

Une division ou un conteneur générique. Elle est utilisée pour regrouper des éléments et appliquer des styles ou des scripts à un groupe d'éléments. Elle n'a pas de signification sémantique particulière, mais elle est très utile pour la mise en page.

<span>

Un conteneur de texte générique. Elle est utilisée pour regrouper des éléments en ligne et appliquer des styles ou des scripts à un groupe d'éléments. Elle n'a pas de signification sémantique particulière, mais elle est très utile pour la mise en forme du texte.

<link>

Un lien vers une ressource externe, comme une feuille de style CSS. Elle est utilisée dans la balise head pour lier des fichiers de CSS à la page.

<script>

Un script à charger dans la page. Elle est utilisée pour inclure du code JavaScript dans la page. On le place dans la balise head.