Dans ce tutoriel, nous allons définir la balise HTML et passer en revue les plus connues de la dernière version en date du langage HTML.
Pré-requis
- Vous connaissez la syntaxe du langage HTML
- Pour tester les balises, vous avez la possibilité d’éditer du texte brut, avec un logiciel de type “Bloc-Note” ou « Notepad++ »
Rappel de la syntaxe HTML5
Les balises qui peuvent contenir un contenu complexe s’écrivent :
<balise attribut1="valeur_1" attribut2="valeur_2"> (contenu) </balise>
Les balises plus simple s’écrivent juste :
<balise attribut1="valeur_1" attribut2="valeur_2">
Balise HTML de structure du document
Les balises qui permettent de structurer le document HTML5 en lui-même sont html, head et body, elles vont respecter le format suivant :
<html> <head> (en-tête du document) </head> <body> (corps du document) </body> </html>
Balises d’entête de document
Les balises d’entête de document sont attendues à l’intérieur de la balise head :
- link permet de donner un lien vers une feuille de style CSS
- meta permet de préciser une métadonnée de la page (un jeu de caractère, des mots-clés, etc.)
- title donne le titre de la page courante
<link rel="stylesheet" href="/feuille/de/style.css"> <meta charset="utf-8"> <meta name="keywords" content="mot-clé 1, mot-clé 2, ..."> <title>Titre de la page</title>
Balises de code
Les balises script et style peuvent être placées dans le head ou dans le body du document indifféremment. Elles peuvent contenir respectivement du code JavaScript (ou TypeScript) interne ou externe à la page, et du code CSS interne à la page.
<script type="text/javascript"> // Du code JavaScript interne à la page </script> <script type="text/javascript" src='script.js'></script> <style type="text/css"> /* Du code CSS interne à la page */ </style>
Balises génériques
Les balises génériques sont span et div, la première étant générique pour les éléments s’affichant comme du texte ( en CSS : display: inline) et la seconde pour les éléments s’affichant comme des blocs visuels (en CSS : display: block) :
<span></span> <div></div>
L’utilisation de ces balises est à présent déconseillé dans la mesure du possible, du fait de leur généricité ; elles n’ont d’intérêt réel que combinées à des attributs id et class spécifiques au site.
Balises de structuration de la page
Les balises suivantes permettront de mieux structurer la page.
Les balises <header> et <footer> définissent respectivement une entête et un pied de page pour la page courante. <nav> quant à lui permet de définir un ensemble de liens de navigation.
<section> est utilisé pour définir une section principale de la page, <article> permet de définir un élément indépendant de la page.
<aside> permet de définir un élément secondaire “sur le côté”, comme un menu de navigation ou un menu pour interagir avec un élément parent.
<header></header> <footer></footer> <nav></nav> <setion></section> <article></article> <aside></aside>
Balises de structuration du texte
Ces balises permettent de donner une structure et une importance aux textes utilisés dans la page. <h1>, … <h6> sont utilisées pour signaler les titres des parties de la page, en commençant par <h1> qui définit le niveau de titre le plus important :
<h1>Titre principal</h1> <h2>Titre secondaire</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h6>
<p> permet de désigner des paragraphes de base, alors que <blockquote>, <cite> et <q> permettent de définir des citations :
<p> Un paragraphe. </p> <blockquote> Une longue citation. </blockquote> <cite>Titre de la citation.</cite> <q>Une petite citation.</q>
Il est possible de déclarer un saut de ligne dans une balise de paragraphe avec la balise <br>.
<a> permet de déclarer un lien hypertexte, donné par l’attribut href :
<a href="https://google.fr">Un moteur de recherche bien connu</a>
<sup> et <sub> mette respectivement un texte en exposant et en indice. <strong> et <em> permettent de mettre l’emphase sur une partie du texte (mettre le texte en valeur).
<p>Un texte normal <sup>avec une partie en exposant</sup> et <sub>avec une partie en indice</sub></p>
On rappelle le fonctionnement de l’exposant et de l’indice :
Un texte normal avec une partie en exposant et avec une partie en indice
Une image se définit avec <img>, alors qu’une vidéo ou un fichier audio se désigné par <video> ou <audio> respectivement (ils devront contenir dans ce cas une balise inférieure <source> pour indiquer l’URL du média à lire).
<img src="/un/fichier/image.jpeg"> <video> <source src="/un/fichier/video.ogg" type="video/ogg"> </video> <audio> <source src="/un/fichier/audio.ogg" type="audio/ogg"> </audio>
Il est conseillé, quand il s’agit d’illustrer un propos, de mettre ces balises à l’intérieur d’une balise <figure>, et d’en indiquer le titre avec <figcaption> :
<figure> <figcaption>Graphique 42: Réchauffement climatique en fonction du nombre de pirates vivants</figcaption> <img src="/pasta/farian/graph_42.png"> </figure>
La balise <pre> permet d’afficher un texte brut (pour afficher un code source, par exemple) :
<pre>
if (!is_robot) {
alert('Hello, human!');
}
</pre>
Balises de listes
Les listes les plus utilisées peuvent être déclarées comme numérotées avec <ol> ou non-numérotées avec <ul> (respectivement “ordered list” et “unordered list”). Les éléments d’une liste <li> (en anglais, “list item”) sont déclarés au niveau en-dessous de la liste :
<ul> <li>Premier élément</li> <li>Deuxième élément</li> <li>Troisième élément</li> </ul> <ol> <li>Premier élément</li> <li>Deuxième élément</li> <li>Troisième élément</li> </ol>
Les deux exemples précédents donneront respectivement :
Balises de tableaux
Un tableau <table> pourra comporter une entête <thead>, il comportera un corps <tbody> et éventuellement un titre en pied <tfoot>. Pour définir une ligne, on utilisera <tr>, pour afficher les cellules de titres on appliquera <th> et pour afficher les cellules de données on appliquera <td> :
<table> <thead> <tr> <th>Colonne 1</th> <th>Colonne 2</th> <th>Colonne 3</th> </tr> </thead> <tbody> <tr> <td>Donnée 1.1</td> <td>Donnée 1.2</td> <td>Donnée 1.3</td> </tr> <tr> <td>Donnée 2.1</td> <td>Donnée 2.2</td> <td>Donnée 2.3</td> </tr> </tbody> <tr> <th>Colonne 1</th> <th>Colonne 2</th> <th>Colonne 3</th> </tr> <tfoot> </tfoot> </table>
Cela donnera :
Balises de formulaires
Les balises de formulaires sont toutes placées dans une balise <form>, qui définit un formulaire avec une page cible et une méthode de formulaire, définies respectivement par les attributs action et method.
Leur fonctionnement peut être résumé dans l’exemple suivant, que nous vous invitons à recopier pour bien en comprendre le fonctionnement :
<form action="resultat.php" method="POST"> <fieldset> <legend>Informations personnelles</legend> <label for="prenom">Entrez votre prénom</label> <input name="prenom" type="text"> <label for="age">Entrez votre âge</label> <select name="age"> <optgroup label="Enfant"> <option>15 ans ou moins</option> <option>16 ans</option> <option>17 ans</option> </optgroup> <optgroup label="Adulte"> <option>18 ans</option> <option>19 ans</option> <option>20 ans ou plus</option> </optgroup> </select> </fieldset> <fieldset> <legend>Êtes-vous satisfait de notre service ?</legend> <input type="radio" id="oui" checked="checked" name="satisfait"> <label for="oui">Oui</label> <input type="radio" id="non" name="satisfait"> <label for="non">Non</label> </fieldset> <fieldset> <legend>Votre avis nous intéresse !</legend> <label for="feedback">Écrivez votre message</label> <textarea id="feedback"></textarea> </fieldset> <input type="checkbox" required id="cgu"> <label for="cgu">J'accepte les CGU</label> <input type="submit" value="Envoyer"> </form>
Bonus balise HTML : quelques balises supplémentaires
A présent, voici une vidéo offerte par Tuto.com vous montrant une petite sélection supplémentaire de balises qui pourront vous être utiles. Et si vous souhaitez maîtriser ce langage sur le bout des doigts, cette formation vidéo devrait vous être d’une grande aide 😉
> Apprendre HTML5 & CSS3 rapidement et facilement