La liste des balises HTML est longue, très longue. Avec plus d’une centaine de balises HTML, tu peux te poser la question : « est ce qu’il faut toutes les apprendre et savoir les maitriser ? »
Le langage HTML est l’un des premiers langages que l’on apprend lorsque l’on débute dans le web.
Tout le monde veut faire les choses bien et être un bon élève. Apprendre correctement tout ça, pour avoir de bonnes bases en HTML. Mais tu peux alors te demander s’il faut toutes les connaitre, toutes les apprendre.
C’est vrai, au début on n’en connait aucune. On ne sait pas celles qui sont utiles, celles qui sont souvent utilisées ou celles que l’on utilise jamais.
Mais rassure-toi, dans 80% du temps, on n’utilise que 20% de cette liste des balises HTML.
Alors lesquelles apprendre ? Comment les écrire correctement ? Comment structurer mon code ?
C’est ce que l’on va voir ensemble dans cet article
Comment écrire une balise HTML ?
Savoir utiliser et écrire des balises HTML est la base du web. Il est donc essentiel de savoir les utiliser.
Mais rien de bien sorcier à cela. Heureusement le langage HTML est l’un des plus facile à apprendre et à utiliser : c’est simplement des balises avec du contenu à l’intérieur.
Une balise HTML est constituée de deux chevrons, un ouvrant « < » et un fermant « > ». Entre ces deux chevrons, on retrouve le nom de la balise. Par exemple : <p>, qui est la balise pour écrire des paragraphes.
A l’intérieur d’une balise, on peut retrouver des attributs, c’est-à-dire des éléments supplémentaires qui vont donner des informations complémentaires sur la balise. Par exemple <div class=“maClasse“ id=“monIdentifiant“>. Ici, on a rajouté deux attributs, « class » et « id ».
Les attributs sont optionnels et peuvent être utilisés pour différentes choses :
- Mettre un style à cette balise (CSS)
- Ajouter des informations qui seront utilisées par le Javascript (ex : attribut « data-XXX »)
- Renseigner des données d’affichage (ex : <img width=“200px“>
- Identifier de façon unique un élément pour le manipuler par la suite en JavaScript (ex : <p id=“monId“>
Le fonctionnement de la majorité des balises HTML est le suivant :
<p> : une balise ouvrante
Le contenu entre les deux balises. Ce contenu doit être indenté (espacé) afin que le code reste lisible
</p> : une balise fermanteCertaines balises sont dites « orphelines ». Elles n’ont qu’une seule balise (pas de balise fermante). C’est notamment le cas des balises : « <img> », « <br> », « <input> », « meta ».
Il faut connaitre ces balises pour ne pas faire l’erreur d’ajouter de balises fermantes.
Faut-il connaitre par cœur la liste des balises HTML ?
Non ce n’est pas nécessaire.
Et ça sera le même principe pour tous les langages. Il n’y a pas besoin de connaitre par cœur tout un langage. Déjà parce que c’est hyper compliqué de tout apprendre et surtout de retenir des choses que l’on n’utilise pas assez régulièrement. Aussi, parce qu’il est possible de retrouver facilement n’importe qu’elle information rapidement en recherchant sur internet.
L’essentiel est de comprendre le fonctionnement des choses. Une fois compris, il est facile d’aller trouver les informations sur internet.
De plus, l’apprentissage se fera surtout en pratiquant. A force de pratiquer, tu verras que tu utilises souvent les mêmes balises.
La méthode de Pareto pour la liste des balises HTML (80/20)
Si tu ne connais pas la méthode de Pareto, je t’invite à aller jeter un coup d’œil sur Wikipédia pour bien comprendre. Mais le principe est assez simple : 20% des effets produisent 80% des causes.
La définition est un peu générique mais si on l’applique aux balises HTML, cela donne : « 20% des balises HTML sont utilisés 80% du temps ».
Il existe énormément de balises HTML mais heureusement, la plupart du temps, on en utilise que 20%. Et ces 20% nous permettent de faire 80% de notre code HTML.
Tu peux donc concentrer tes efforts d’apprentissage sur ces 20% de balises. Pour t’aider, je t’ai classé les balises par type de contenu (structure HTML, métadonnées, contenu textuel, formulaire, …) et pour chaque contenu, je te donne la liste des 20% de balises HTML « les plus utilisés ».
Je t’ai aussi mis les 80% des balises qu’il n’y a pas besoin de mémoriser mais que tu pourras retrouver facilement.
Dans certains cas (structure HTML, balises de métadonnées, balises de sectionnement, balises générique), il faudra connaitre toutes les balises. Ne t’en fait pas il n’y en a que 4 ou 5 par type à retenir.
Les balises de document (structure HTML)
Les balises de document, permettent de créer toute la structure du document HTML. C’est la base du document. TOUTES les pages HTML du monde utilisent ces balises et ont cette structure de base.
| < !DOCTYPE> | Indique au navigateur, qu’il s’agit d’une page de type HTML |
| <html> | C’est la balise qui va englober tout le HTML de la page. |
| <head> | Cette balise va contenir des informations sur la page. On peut y retrouver les feuilles de styles (CSS), des informations pour le référencement, pour la navigation mobile, …. Toutes ces informations ne sont pas affichées visuellement dans le navigateur. |
| <body> | La balise body va contenir tout le corps de la page, tous les éléments visuels de la page HTML. Il ne peut y avoir qu’une seule balise body par page HTML |
La structure minimale en HTL
Lorsque tu créé une page HTML, voici la structure minimale à respecter :
<!DOCTYPE>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de ma page</title>
<head>
<body>
</body>
</html>Les balises d’entête
Les balises d’entête, sont celles qui se trouvent au tout début du HTML (dans l’entête), c’est-à-dire dans la balise <head>. Une exception pour la balise <script>, qui peut être placée dans la balise <head> mais aussi dans le <body>, généralement à la fin du <body>.
Ces balises vont servir à différentes choses : charger des fichiers complémentaires, donner des informations aux robots pour l’indexation du site dans les moteurs de recherche, renseigner le navigateur sur la navigation mobile, le type d’encodage, etc …
Ces balises ne sont pas visuelles. C’est-à-dire qu’elles ne vont rien afficher sur le navigateur.
| <link> (Balise orpheline) | Permet d’inclure une ressource externe. Généralement, elle est utilisée pour inclure les feuilles de style (CSS). |
| <meta> (Balise orpheline) | Balise qui permet de fournir des informations au navigateur au sujet de la page en question. Les balises méta peuvent contenir des données pour l’encodage de la page, des données concernant le référencement de la page, etc … |
| <script> | Permet d’inclure un script dans la page. Généralement utilisé pour ajouter du JavaScript. Grâce à l’attribut « src », il est possible d’inclure un fichier externe. Sinon, le script peut être écrit directement entre la balise ouvrante et fermante. |
| <style> | Pour rajouter du style (CSS) à la page. |
| <title> | Indique le titre de la page. C’est le titre que l’on retrouve dans l’onglet du navigateur mais aussi comme titre dans les résultats des moteurs de recherche. |
Balise de sectionnement (nav, aside, footer, header, main)
Pour constituer une belle page HTML, il faut la découper en section. C’est-à-dire des blocs qui vont chacun avoir un rôle dans la page. On peut ainsi imaginer différentes configurations de page HTML. Voici une configuration classique :
Chaque section est traduite par une balise spécifique. A l’intérieur de ces balises, on y inclu le contenu que l’on souhaite. Par défaut, les balises de sectionnement ne positionnent pas les blocs à des endroits précis. Il faudra le faire à l’aide du CSS.
Ces balises aident simplement à structurer la page HTML et à aider les moteurs de recherches à comprendre la structure des pages.
| <header> | Section d’entête. Généralement, ce sont les bandes qui se trouvent tout en haut des pages web. |
| <nav> | Ces balises sont utilisées pour créer des menus de navigation. On retrouve souvent des listes à puce (ul) avec des liens à l’intérieur de ces balises de navigation. |
| <section> | Définit les sections principales de la page |
| <article> | Contient du contenu autonome : un message, un article de journal, un commentaire, … |
| <aside> | Permet de faire un élément « à part », un élément qui n’as pas forcément de rapport avec le contenu principal |
| <footer> | C’est le pied de page. On y retrouve généralement des informations complémentaires sur le site : mentions légales, CGV, contact, … |
Balises génériques
Certaines balises peuvent être utilisés pour plusieurs cas / situation différentes, c’est ce que l’on appelle des balises génériques. Elles servent en général à délimiter un bloc ou simplement pour pouvoir ajouter des attributs à un bloc ou un bout de contenu.
| <div> | La balise div n’a pas de signification particulière, il représente un conteneur générique qui permet de structurer un bloc. La balise permet ainsi d’attribuer un style à ce bloc à l’aide de classes ou d’un id |
| <span> | <span> fonctionne sur le même principe que <div> mais sur du contenu textuel. On peut le mettre sur du texte afin de lui ajouter un style. Ex : <p>Ceci est <span>un paragraphe</span></p>. On peut ainsi donner un style particulier uniquement à « un paragraphe ». |
Balises de structuration de texte
Les balises de structuration de texte sont les plus utilisées dans le HTML. C’est elles qui permettent de créer une grosse partie du contenu d’une page.
Certaines sont très utiles et régulièrement utilisées, d’autres un peu moins. Je te les ai donc séparés en deux catégories :
- A connaitre : celles qu’il faut que tu apprennes en priorité, que tu connaisses et maitrise
- Les autres : celles qui sont secondaires. Il faut savoir qu’elles existent mais il n’y a pas besoin de les maitriser. Tu pourras les trouver facilement sur internet.
A connaitre
| <p> | La balise <p> est l’une des balises les plus essentielles et les plus utilisées. Elle permet de créer des paragraphes. |
| <hn> (h1, h2, h3, h4, h5, h6) | Permet de créer des titres de différent niveau. Le titre h1 est le titre de plus haut niveau (le plus gros) et h6, de plus bas niveau (le plus petit). Pour un bon référencement, il est conseillé de ne mettre qu’une balise h1 par page et de respecter une bonne structure de document (voir ci-dessous) |
| <img> (balise orpheline) | Permet d’intégrer une image. Il faut ajouter l’attribut « src » pour lui indiquer la source de l’image (interne ou externe). « width » et « height » peuvent aussi être ajouté pour gérer la taille de l’image |
| <a> | La balise <a> permet de faire des liens hypertexte. Les liens sont aussi des éléments essentiels qui jouent sur le référencement de votre page. Ils permettent de faire naviguer l’utilisateur sur votre site, ou l’envoyer sur des pages externes. Pour indiquer vers quelle page, on souhaite envoyer l’utilisateur, il faut ajouter l’attribut « href » |
| <br/> (balise orpheline) | Fait un retour à la ligne |
| <strong> | Mets en valeur le texte. Par défaut, il met en gras le texte. |
Une bonne structure de page grâce aux balises hn
<h1>Titre de la page</h1>
<h2>Titre secondaire<h2>
<h3>Titre tertiaire </h3>
...
<h3>Titre tertiaire</h3>
<h2>Titre secondaire 2<h2>
<h3>Titre tertiaire </h3>
...
<h3>Titre tertiaire</h3>Les autres
| <abbr> | Abréviation |
| <blockquote> | Citation longue |
| <cite> | Titre d’une œuvre, film, chanson, … |
| <q> | Citation (courte) qui ne nécessite pas de saut de page. Pour les plus longue, utiliser blockquote |
| <sup> | Exposant (pour les chiffres) |
| <sub> | Indice |
| <em> | Mise en valeur normale (emphase) |
| <mark> | Mise en valeur visuelle. C’est un texte marqué, un texte qui veut être marqué ou souligné |
| <figure> | Figure (schéma, figure) |
| <figcaption> | Légende de la figure |
| <hr/> | Ligne de séparation horizontale |
| <ins> | Bout de texte ajouter dans un document |
| <kbd> | Représente du texte saisie par un utilisateur à partir d’un clavier ou d’une saisie vocale |
| <pre> | Affiche du texte formaté (du code par exemple) |
| <progress> | Barre de progression qui indique l’état de complétion d’une tâche |
| <time> | Représente une période donnée |
| <small> | Un texte écrit en petit, ou des commentaires |
| <adress> | Adresse de contact |
| <del> | Texte supprimé |
Intégration de contenu
Les balises d’intégration de contenu vont permettre d’ajouter de l’audio, de la vidéo, à ta page.
La balise img aurait pu être mise ici aussi.
A connaitre
| <iframe> | L’iframe permet d’intégrer une autre page HTML (interne ou externe) de façon imbriqué. |
| <audio> | Ajouter des pistes audio |
| <video> | Ajouter des vidéos |
| <source> | Indique la source des balises <video> ou <audio> |
Exemple d’utilisation de la balise <video>
<video width=“500“>
<source src="…">
</video>Les autres
| <object> | Intégrer une ressource externe qui sera traitée de façon différente selon son type (image, contenu imbriqué,…) |
| <embed> | Intégrer une application externe ou pour du contenu interactif |
Balise de formulaire
Les formulaires sont des éléments important dans les pages HTML. Ils permettent à l’utilisateur d’interagir et renseigner des informations. Maitriser la création et la gestion des formulaires est nécessaire.
A connaitre
| <button> | Utilisé pour créer des boutons. Ces boutons peuvent être utilisés pour soumettre un formulaire (en rajoutant l’attribut type=“submit“) ou pour d’autres fonctionnalités en dehors des formulaires. |
| <form> | Balise qui va contenir l’ensemble des champs d’un formulaire. Les balises form sont généralement accompagnées de l’attribut « action » (l’URL sur laquelle le formulaire sera envoyé) et « method » (qui définit la méthode http utilisée pour ce formulaire) |
| <input> | Permet de créer un champ dans lequel l’utilisateur pourra rentrer des informations. Pour déterminer le type de données attendues dans ce champ, il faudra rajouter l’attribut « type ». Ex : <input type=“number“>, créé un champs dans lequel des nombres (uniquement) seront attendus |
| <label> | Utilisé pour ajouter une légende, un titre rattaché à un champs input |
| <select> | L’équivalent de la balise input mais pour les listes déroulante de choix. |
| <option> | Définit l’ensemble des choix à l’intérieur d’une balise select |
| <optgroup> | Permet de définir des groupes d’« <option> » |
| <textarea> | Définit un champs texte qui peut être édité sur plusieur ligne |
Exemple d’un formulaire HTML
<form action="" method="POST">
<label for="nom">Nom</label>
<input type="text" name="nom">
<label for="description">Une description</label>
<textarea name="description" rows="5" cols="10" ></textarea>
<label for="age">Votre age</label>
<select name="age">
<optgroup label="Mineur">
<option value="16">16 ans</option>
<option value="17">17 ans</option>
</optgroup>
<optgroup label="Majeur">
<option value="18">19 ans</option>
<option value="19">19 ans</option>
</optgroup>
</select>
</form>
Les autres
| <datalist> | Contient une liste d’option qui peut être complétée par du texte. Permet de faciliter l’auto-complétion |
| <fieldset> | Permet de regrouper plusieurs éléments d’un formulaire sous une même étiquette |
| <legend> | Représente la légende de l’élément <fieldset> |
| <meter> | Un peu comme la balise <progress>, cette balise permet de visualiser un état de complétion donné |
| <output> | Donne le résultat d’un calcul ou d’une valeur renseignée par l’utilisateur |
Balises de tableau
Les tableaux sont des éléments que l’on retrouve régulièrement dans les pages web. Ils sont pratiques pour afficher les informations de manière structurée. De plus ils sont facilement modulables.
Les balises <table> fonctionnent un peu de la même façon que la structure HTML : une balise qui contient le tableau « table » dans laquelle on retrouve une entête (thead) et un corps (tbody). On peut aussi y ajouter un pied de tableau (tfoot)
A connaitre
| <table> | C’est la balise qui représente le tableau et qui vas le contenir. Elle va contenir tous les éléments ci-dessous. |
| <thead> | Représente l’entête du tableau. Généralement on met le nom des colonnes à l’intérieur de la balise <head> |
| <tbody> | Le <body> contient tout le corps du tableau. C’est-à-dire toutes les informations du tableau |
| <tfoot> | Le pied de page a le même rôle que le <thead> mais se situe en bas du tableau. On peut par exemple y remettre le nom de chaque colonne |
| <tr> | Représente une ligne du tableau. Dans cette ligne, on vas y mettre plusieurs cellules (<th> / <td>) |
| <th> | Représente une cellule d’entête. Par défaut les balises <th> sont en gras |
| <td> | Représente une cellule du tableau |
Exemple d’un tableau en HTML
<table>
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dupont</td>
<td>Paul</td>
<td>23</td>
</tr>
<tr>
<td>Polin</td>
<td>Jade</td>
<td>26</td>
</tr>
<tr>
<td>Vobon</td>
<td>Pierre</td>
<td>35</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Age</th>
</tr>
</tfoot>
</table>Les autres
| <colgroup> | Représente un groupe composé d’une ou plusieurs colonnes de tableau |
| <col> | Représente une ou plusieurs colonnes dans un groupe de colonne représenté par un élément colgroup |
| <caption> | Pour ajouter un titre à son élément tableau parent |
Balises de liste
Les balises HTML de listes sont très pratiques lorsque l’on veut lister des éléments, créer des menus, afficher un ensemble d’éléments, …
A connaitre
| <ul> | C’est le conteneur d’une liste. La balise <ul> permet de déclarer une liste non numérotée et non ordonnée (ul = unordered list). Elle vas contenir les balises <li> |
| <li> | Représente les éléments de la liste |
| <ol> | C’est le conteneur d’une liste ordonnée et donc numérotée (1,2,3,…). ol = ordered list |
Exemple de liste
<ul>
<li>Elément 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<ol>
<li>Elément 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ol>On obtient :
Les autres
| <dl> | Déclare une liste de définition (clé / valeur) |
| <dt> | Terme à définir (clé) |
| <dd> | Définition du terme (valeur) |
Liste des balises HTML : ce qu’il faut retenir
Le langage HTML est l’un des premiers langages que l’on apprendre lorsque l’on débute le web. Il est constitué de balises, beaucoup de balises.
Avec plus d’une centaine de balises, il est difficile de toutes les connaitre et de toutes les apprendre.
Heureusement pour nous, il n’y a pas besoin de les apprendre toutes par cœur et savoir toutes les utiliser.
Dans 80% du temps se sont uniquement 20% des balises HTML qui sont utilisées. Il faut donc concentrer ces efforts d’apprentissage sur ces balises.
A force de les utiliser, tu vas les apprendre et leur utilisation sera un automatisme chez toi. Lorsque tu auras besoin d’une balise spécifique, que tu ne connais pas, tu peux venir faire une tour sur cette liste et trouver celle qu’il te faut.
