Les balises à connaître

Par ordre d'apprentissage :

1. html : obligatoire et unique, n'a que deux enfants : head et body
2. head : obligatoire et unique, premier enfant du html, zone pour le navigateur
3. meta : balise sans contenu, seul parent = head (pour indiquer notamment la table des caractères utilisée)
4. title : seul parent = head, obligatoire et unique, s'affiche au dessus du menu du navigateur

   Son contenu est uniquement textuel

5. link : balise sans contenu, seul parent = head, pour lier le fichier à un autre (souvent un CSS)
6. body : obligatoire et unique, second et dernier enfant du html, zone visible (pour les internautes)

Les balises ci-dessous sont filles ou petites-filles du body (et ne se trouvent jamais dans le head).

7. p : zone paragraphe (bloc)
8. a : zone lien
9. h1 : titre de niveau 1 (bloc)
10. h2 : titre de niveau 2 (bloc)
11. h3 : titre de niveau 3 (bloc)
12. h4 : titre de niveau 4 (bloc)
13. h5 : titre de niveau 5 (bloc)
14. h6 : titre de niveau 6 (bloc)
15. ol : zone liste ordonnée (bloc)
16. ul : zone liste non-ordonnée (bloc)
17. li : zone élément d'une liste (ordonnée ou non) (bloc)

    Cet élément peut, à son tour, contenir une liste ...

18. hr : balise (sans contenu) qui dessine une ligne horizontale (bloc)
19. br : balise (sans contenu) qui impose un retour à la ligne
20. img : balise (sans contenu !) qui permet d'afficher une image
21. mark : zone très très importante (surlignage jaune, comme avec un fluo)
22. strong : zone très importante (gras)
23. em : zone importante (italique)
24. div : zone quelconque (bloc)

    Souvent utilisée conjointement avec du CSS

25. header : zone en haut de page (bloc)
26. article : zone qui représente le corps de la page (bloc)
    et qui doit contenir au moins un titre (<h1>...</h1>)
27. footer : zone en bas de page (bloc)
28. aside : zone qui permet d'illustrer ou de commenter (bloc)
29. section : zone contenant d'autres zones (bloc)
    et qui doit contenir au moins un titre (<h1>...</h1>)
30. pre : zone qui permet de présenter du code (bloc)

Balises sans contenu

Toutefois, certaines balises n'ont pas de contenu !
Elles contiennent alors ses contenus dans ses attributs ! (s'ils existent)
Elles ne se terminent par  />.

Dans le head :

• <meta ... />
• <link ... />

Dans le body :

• <hr />
• <br />
• <img ... />

<p>        <br />          </p>

=

<p><br /></p>

Type de balises

1. Les balises "bloc" occupent toute la largeur de leur conteneur. Lorsque deux blocs se suivent, ils s'affichent l'un sous l'autre.

   p, h1, h2, h3, h4, h5, h6, ol, ul, li, hr, div, header, article, footer, aside, section, pre

2. Les balises "in-line" n'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de retour à la ligne. Lorsque 2 éléments en-ligne se suivent dans une page, ils s'affichent l'un à côté l'autre (si la largeur de leur conteneur le permet).

   a, img, mark, strong, em, br

   br n'est pas une balise "bloc", donc ...

Une balise "in-line" doit être mise dans une balise "bloc", mais pas l'inverse ! C'est pourquoi il est important de connaître le type d'une balises.

Les balises "bloc" et "in-line" sont des filles du body.

Un conteneur est ce qui contient. Le conteneur de la zone p peut être une zone div qui peut être contenue dans la zone article qui peut être contenue dans la zone de base body.

À propos de certaines balises

p

Le contenu de la balise p ne peut pas contenir d'autres balises-bloc.

h1, h2, h3, h4, h5, h6

L'ordre des balises doit être respecté : de 1 vers 6

Comme le contenu d'un paragraphe, leur contenu ne peut pas contenir d'autres balises-bloc

pre

La balise pre se comporte comme la balise p, à la différence près qu'elle préserve la présentation du texte et notamment les espaces. Le contenu peut donc déborder de son conteneur (si les lignes sont trop longues).

Très longue ligne pour montrer que le contenu d'une balise pre ne s'adapte pas à la taille de l'écran. Cette balise convient cependant très bien �  la présentation de lignes de code informatique.
          Les espaces sont    scrupuleusement     respectés.

Ci-dessous, le même contenu dans une balise p.

Le contenu peut être mis en forme (mark, strong, em) comme dans une balise p. On peut même y placer un lien.

a

Le contenu de la balise a peut être une image.
L'image est alors cliquable (et souvent entourée d'une bordure bleue)

Ne sont pas des balises

1. <!DOCTYPE html>
   

2. <!-- commentaire -->
   

Les attributs globaux

Un attribut est dit "global", lorsqu'il peut s'appliquer à quasi toutes les balises.

Liste de quelques attributs globaux :

Le nom de l'attribut est suivi du signe égal (=), suivi d'une valeur mise entre guillemets.

• id : pour identifier de manière unique une balise

  La valeur de l'attribut id est un identifiant qui doit être composé que de lettres non accentuées et chiffres, pour éviter de jouer avec le feu.
  Depuis le HTML 5.0, les caractères '_', '-' et '.' sont acceptés s'ils ne sont pas utilisés au début de l'identifiant. Le premier caractère de l'identifiant doit être une lettre minuscule (recommandée). Plus d'info et voir aussi (Idem pour le nom d'une variable en C.)
  Jouer avec le feu = Utiliser des caractères qui ne sont pas interdits en HTML dans la valeur d'un attribut, mais qui peuvent facilement être à l'origine d'un bug lors du traitement de cette valeur dans d'autres langages (JavaScript, PHP, Java, ...), surtout si cette valeur est envoyée à un serveur qui ne connaît pas l'encodage utilisé pour ces caractères.

• title : pour afficher un court message lors du survol de la souris

• class : pour indiquer le nom d'une classe CSS (qui contient les définitions de style à appliquer à la balise)

  La valeur de l'attribut class respecte les mêmes règles que celle de l'attribut id. Toutefois, la même valeur de cet attribut peut être utilisée dans plusieurs balises HTML.

<h1 id="ch14">Les attributs globaux</h1>

  <div class="code">
    <p class="note"><a href="#" title="lien n'allant nulle part !">lien</a></p>
  </div>

Le nom d'un attribut peut avoir le même nom que celui d'une balise, comme title. La balise title a un rôle, l'attribut title a un rôle totalement différent.

En plus des attributs globaux, certaines balises ont leurs attributs propres :

• a : href (pour l'adresse du fichier)
• img : src (pour l'adresse du fichier-image) et alt (= texte si l'image ne s'affiche pas)

Pour aller plus loin

Quelques liens

• Mini-cours de CSS
• Apprenez à créer votre site web avec HTML5 et CSS3
• W3Schools (en anglais)
• Mozilla Developper Network (en français)
• Les noms des couleurs (en anglais)
• Toutes les balises du HTML5 (en anglais)

Quelques livres

• HTML 5 et CSS 3 - Cours et exercices corrigés : par Jean ENGELS aux Editions Eyrolles

Stop. Pour aujourd'hui, vous en avez appris assez !
Maintenant, vous en savez (théoriquement) assez pour un mini-pro du HTML.
Dormez et demain commencer une relecture de ce mini-cours !

Pour voir ce que vous savez faire, sans CSS, cliquez ici.
Pour voir ce que vous saurez faire bientôt, avec CSS, cliquez jour7.htm.

Si vous êtes sûr d'avoir bien assimilé ce mini-cours,
étudiez un peu de CSS avant de créer vos notes ou pages web.

Sachez que pour réaliser ce mini-cours, 44 balises différentes ont été utilisées : ['html', 'head', 'meta', 'link', 'title', 'body', 'noscript', 'div', 'header', 'p', 'a', 'main', 'br', 'h1', 'ul', 'li', 'details', 'summary', 'strong', 'pre', 'mark', 'i', 'figure', 'img', 'code', 'u', 'ol', 'em', 'aside', 'nav', 'footer', 'script', 'article', 'h2', 'span', 'abbr', 'h3', 'h4', 'h5', 'h6', 'hr', 'sub', 'sup']

Voici les 14 balises qui vous sont encore inconnues. Elles ne sont pas très importantes, mais elles vous permettent de créer des pages web plus professionnelles.

31. u : pour souligner
    pour <u>souligner</u>
32. i : pour mettre en italique
    pour mettre en <i>italique</i>
33. sup : pour mettre en ^exposant
    pour mettre en <sup>exposant</sup>
34. sub : pour mettre en _indice
    pour mettre en <sub>indice</sub>
35. span : pour créer une zone spéciale dans un paragraphe <p>
    <span class="code">zone spéciale</span>
    Très souvent, cette balise contient l'attribut class pour mettre en forme cette zone (ici, un fond blanc)
36. code : pour créer, dans un paragraphe, une zone dédiée à du code : (a+b)2 = a2 + 2ab + b2
<code>(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></code>

37. abbr : pour indiquer une abréviation. Le nom non abrégé est alors indiqué dans la valeur de l'attribut title.

    Le HTML est une abréviation.

    Le <abbr title="Hyper Text Meta Language">HTML</abbr> est une abréviation.

    Il suffit de laisser la souris un bref instant sur l'abréviation pour le texte non abrégé apparaisse sous la souris. Très souvent, le navigateur signale qu'il est possible de connaître le texte non abrégé en soulignant en pointillé l'abréviation.

38. details : pour créer un bloc qui peut s'ouvrir.
    Cette balise doit être immédiatement suivie par la balise <summary>

39. summary : enfant unique de la balise <details>, elle sert à créer un titre cliquable pour ouvrir un bloc.

    Titre cliquable pour afficher une zone cachée

    Une second clic sur le titre permet de re-cacher la zone.

    <details>
      <summary>
        Titre cliquable pour afficher une zone cachée
      </summary>
      <p>
        Une second clic sur le titre permet de re-cacher la zone.
      </p>
    </details>

40. figure :

    Pour créer un bloc pour une image

    

    <figure><img src="sphinx.webp" width="964" height="502" alt=""></figure>
    Très souvent, cette balise contient une balise <img />

41. script : pour écrire du Javacript ou placer un lien vers un fichier *.js (bloc)
42. noscript : pour afficher un message lorsque l'utilisateur a configuré le navigateur de telle sorte que le moteur JavaScript soit désactivé. (bloc)
43. main : pour créer une section principale (bloc)
44. nav : pour créer une section contenant des liens (bloc)

Maintenant, vous connaissez toutes les balises qui ont été utilisées pour réaliser ce mini-cours.

Les 110 balises

Code Python pour lister les balises utilisées