Mini-cours de HTML

Balises usuelles

Toutes les balises

Quelques attributs

  1. <html> : indique la (seule) zone contenant des balises HTML

    Aucun texte/code ne doit être à l'extérieur de cette zone, hormis la déclaration avant cette zone

  2. <head> : première zone, contenant des informations pour le navigateur

  3. <body> : seconde et dernière zone, contenant des informations pour le lecteur

Une balise = un ordre à exécuter par le logiciel
Un navigateur = un logiciel dédié à la lecture de fichiers HTML

Les balises qui n'ont pas de contenu ( et donc pas de balises de fermeture ) doivent contenir des informations dans leurs attributs. En XHTML, elles finissent par />.

Certaines balises ( avec ou sans contenu ) ont des attributs obligatoires.
Certaines balises sont obligatoires ( pour que le fichier soit valide ).
Les trois balises <html>, <head> et <body> sont obligatoires.

dans le <head>

  1. <meta />
    • <meta charset="utf-8" />
      Pour afficher correctement les caractères utilisés.

      Pour des raisons historiques, le charset vaut, en Europe occidentale, par défaut, "ISO-8859-1" (souvent appelé latin-1).

    • <meta name="description" content="Liste des balises usuelles" />
    • <meta name="keywords" content="" />
    • <meta name="robots" content="xxx" /> où xxx vaut : noindex, nofollow, index, follow, all, none, nosnippet, max-snippet, max-video-preview, max-image-preview, noarchive, nocache, notranslate, noimageindex, noodp, noydir, unavailable_after, attribut data-nosnippet. Plus d'info
    • ...
  2. <link />
    • <link rel="stylesheet" href="" />
    • non recommandé pour le JavaScript
  3. <title> ( obligatoire ) : titre de la page
    • <title>Les balises usuelles</title>

    • Dans un navigateur, s'affiche en haut comme nom de l'onglet.
      Est utilisé par les moteurs de recherche.

Ces trois balises ne peuvent être présentes que dans le <head>

3 balises non usuelles : <base />, <style>, <script>
Il est recommandé de placer le style et le code dans des fichiers CSS ou JS.

dans le <body>

Les balises blocs prennent toute la largeur de leur conteneur.
La balise <body> est une balise bloc qui prend toute la largeur de la fenêtre du navigateur.

Les grands blocs

Souvent, un grand bloc n'a pour parent que <body>
Mais, un grand bloc peut aussi avoir pour parent un autre grand bloc ...

  1. <header> : entête de page
  2. <article>: zone contenant un contenu principal
  3. <footer> : pied de page
  4. <aside> : zone facultative d'informations complémentaires, placée à côte de l'article
  5. <nav> : zone facultative de liens, située parfois dans le <header>
  6. <div> : bloc quelconque
    Très pratique pour regrouper un ensemble de blocs.

Les balises de section, landmarks (en anglais), devraient être utilisées dans cet ordre <header>, <nav> , <main>, (<section>) <article>, (<aside>), <footer>

<main> est obligatoire pour obtenir 100 % d'accessibilité lors d'un audit fait par Google.

  • <main>  = zone unique, ne peut pas être fille de <article>, <aside>, <footer>, <header>, or <nav>

  • <section> : zone facultative, contenant d'autres zones
    Un article peut contenir plusieurs sections.
    Une section peut contenir plusieurs articles.
    Il peut exister plusieurs articles / sections dans une page.

Les petits blocs

  1. <h1> ... <h6> : zone de titres ( <h1> obligatoire dans <article> )

1 balise non usuelle : <hgroup> qui sert à regrouper des titres et qui donc ne peut avoir comme enfants que <h1> ... <h6>)

  1. <p> : paragraphe : zone contenant des éléments en ligne : textes, images, composants de formulaires, ...
  2. <blockquote> : zone contenant un texte en retrait et entre guillemets
  3. <pre> : zone pour texte qui ne s'adapte pas à la taille de la fenêtre
  4. <ol> : zone d'une liste ordonnée
  5. <ul> : zone d'une liste non-ordonnée
  6. <li> : zone d'un élément d'une liste
  7. <hr /> : zone séparatrice ( ligne horizontale )

Les balises <p>, <h1>, ... <h6> titres ne peuvent pas contenir de balises blocs.

La balise <li> ne peut être que fille de <ol> ou <ul>
Les balises <ol> et <ul> peuvent contenir d'autres balises <ol> et/ou <ul>

Un petit bloc peut contenir un autre petit bloc (mais jamais un grand bloc).
Ainsi, <li> peut contenir plusieurs <p>.

Une balise bloc doit toujours avoir un contenu (elle n'est jamais auto-fermante, hormis <hr />)

Les balises liées au texte

Les balises liées au texte sont des balises en ligne.
Les balises en ligne sont de petites zones ( qui n'occupent pas toute la largeur ).
Elles ne peuvent pas contenir de balises blocs, mais sont toujours dans une balise bloc (généralement, <p>)

  1. <br />: pour indiquer un retour à la ligne
  2. <a> : zone lien ( texte bleu, par défaut )
    attribut obligatoire = href
    <a href="http://www.chocoloup.be">Chocoloup</a>
  3. <mark> : très important ( surligné jaune )
  4. <strong> : important ( gras )
  5. <em> : pour mettre en évidence ( italique )
  6. <sup> : pour mettre en exposant
    Classe de 4ème primaire
    Classe de 4<sup>ème</sup> primaire
  7. <span> : pour créer une petite zone de couleur différente dans le texte
    pour créer <span class="red">une petite zone de couleur différente</span> dans le texte
    Très pratique pour donner un style particulier.
    Très pratique pour donner un <span style="text-decoration: overline;">style particulier</span>.

  8. <q> : pour une courte citation ( avec des guillemets automatiques )
    L'union fait la force
    <q title="Devise de la Belgique">L'union fait la force</q>
  9. <code> : pour indiquer un bout de code
    <code>alert("JavaScript");</code>

Balises non usuelles :

  • <sub> : pour indiquer un indice
    Ei
    E<sub>i</sub>
  • <abbr> : pour indiquer une abréviation
    <abbr title="Hyper Text Meta Language">HTML</abbr>
  • <address> : pour indiquer une adresse
  • <bdo> : pour modifier le sens de lecture

    Dans certaines langues, le texte se lit de droite à gauche :
    0123456789

    Dans ces langues, la marge est à droite.

    בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ.

    Au commencement, Dieu créa les cieux et la terre.
    = Premier verset de la Torah

    بِسۡمِ ٱللهِ ٱلرَّحۡمَـٰنِ ٱلرَّحِيمِ

    Au nom de Dieu, le Très Miséricordieux, le Très Miséricordieux
    = Premier verset du Coran 

    <div style="text-align:right">
  <p>
    Dans ces langues, la marge est à droite.
  </p>
  <p dir="rtl" class="gigantesque">
    בְּרֵאשִׁית, בָּרָא אֱלֹהִים, אֵת הַשָּׁמַיִם, וְאֵת הָאָרֶץ.
  </p>
  <p>
    Au commencement, Dieu créa les cieux et la terre.<br />
    = Premier verset de la Torah
  </p>
  <p dir="rtl" class="gigantesque">
     بِسۡمِ ٱللهِ ٱلرَّحۡمَـٰنِ ٱلرَّحِيمِ
  </p>
  <p>
    Au nom de Dieu, le Très Miséricordieux, le Très Miséricordieux<br />
    = Premier verset du Coran
  </p>
</div>
  • <time> : pour indiquer une date
    <time datetime="2010-02-19">19 février 2010</time>

Les attributs liés au texte

Les balises liées au multimédia

  1. <img /> : zone image ( attributs obligatoires : "src" et "alt" )
    attention
    <img src="../js/mini_cours_javascript/avertiss.gif" width="10" height="10" alt="attention" />
  2. <video> : (tous les types de fichiers-video ne sont pas admis)
  3. <audio> : (tous les types de fichiers-audio ne sont pas admis)

Balises non usuelles :

  • <svg> : pour afficher une image vectorielle
  • <map> : pour créer des zones dans une image
  • <area> : pour indiquer une zone d'une image sensible au clic
    Seul parent = <map>
  • <meter> :
  • <progress> :
  • <figure> :
  • <figcaption> :
  • <source> :

Les balises liées au JavaScript

  1. <noscript> : pour indiquer que le moteur JavaScript du navigateur n'est pas activé
  2. <script> : pour indiquer le fichier JavaScript (via l'attribut src)
  3. <output> : pour afficher un résultat

Balises non usuelles :

  • <canvas> : pour afficher une image dessinée par JavaScript

Ces balises seront abordées avec l'étude du JavaScript

Les balises liées au formulaire

  1. <form> :
  2. <input /> : champ
  3. <label> : étiquette du champ
  4. <select> : liste déroulante
  5. <option> : élément de la liste déroulante (ou de <datalist>)
  6. <button> :
  7. <textarea> : champ multi-lignes
  8. <fieldset> : zone entourée d'un liseré ( traditionnellement, un ensemble de champs d'un formulaire )
  9. <legend> : balise contenue dans <fieldset>, pour lui donner un titre qui s'affiche dans le liséré
    titre <fieldset><legend>titre</legend></fieldset>

Balises non usuelles :

  • <optgroup> : pour regrouper les éléments d'une liste déroulante (gras, non selectionnable)
  • <datalist> : pour des valeurs prédéfinies

Ces balises seront aussi abordées avec l'étude du JavaScript

Les balises liées au tableau

Pour la présentation de données dans une grille

  1. <table> : pour créer un tableau
  2. <tr> : pour créer une ligne
  3. <td> : pour ajouter une cellule dans la ligne

    Une cellule peut contenir un tableau, <ol>, <ul>, <p>, ...

Balises non usuelles :

  • <thead> :
  • <tbody> :
  • <tfoot> :
  • <th> :
  • <caption> : titre du tableau (ne peut avoir comme parent que <table>)
  • <col /> :
  • <colgroup> :

Le tableau ne doit pas servir à la présentation d'une page web.

Outre les balises, le HTML utilise des entités pour certains caractères spéciaux, ainsi que des commentaires <-- commentaire --> et souvent, avant la balise <html>, une déclaration : <!DOCTYPE html>.

Nombre de balises servent à faciliter l'analyse de la page web par un programme. Cette analyse permet de classer votre page dans une base de données interrogée lorsqu'un internaute fait une recherche (Google).

Toutes les balises

Uniquement reconnues en HTML 5.0.
En vert foncé, les balises apparues avec HTML 5.0
Pour tout savoir en détail sur n'importe quelle balise : https://www.w3schools.com/tags/default.asp (en anglais)

Les versions 5.1 et 5.2 ajoutent deux nouvelles balises (picture et dialog)

Ci-dessous un mini-résumé. Les balises sont les plus courantes
Les balises block utilisent toute la largeur de leur conteneur.
Les balises in-line n'utilisent que la largeur nécessaire. Toutefois, ces balises peuvent avoir pour largeur celle indiquée via la propriété width de leur style (CSS)
Les balises in-line avec largeur utilisent la largeur indiquée via l'attribut width (telle que <img />)
Certaines balises ne sont ni in-line, ni block car elles n'utilisent pas de largeur. Telles que les balises du head, celles dépendant d'autres balises tel que <table>, <object>, <form> ... ou n'ayant pas de contenu (hormis <hr />)

  1. a : lien externe ou interne
    in-line

  2. abbr : abréviation ( avec deux b)
    in-line

  3. address : adresse ( avec deux d)
    block

  4. area / : parent = map
    ni in-line, ni block

  5. article
    block, doit contenir au moins un titre (<h1>...</h1>)

  6. aside
    block

  7. audio : fichiers supportés : mp3, wav, ogg
    in-line

  8. b : non recommandée (gras)
    in-line

  9. base / : parent = head
    ni in-line, ni block

  10. bdi
    in-line

  11. bdo : sens de la lecture (de gauche à droite)
    in-line

  12. blockquote : enfants = p ou tout autre bloc-élément
    block

  13. body : unique, seul parent html
    LE block

  14. br / : retour à la ligne
    ni in-line, ni block

  15. button
    inline

  16. canvas : zone pour un graphique géré en JavaScript
    in-line (Tutoriel)

  17. caption : immédiatement après table
    ni in-line, ni block

  18. cite : titre d'un ouvrage (livre, film, chanson, ...)
    in-line

  19. code : extrait d'un code source
    in-line

  20. col / : parent = colgroup
    ni in-line, ni block

  21. colgroup : parent = table
    ni in-line, ni block

  22. data : pour permettre de lier le contenu de la balise à un code utile à un parseur (machine-readable translation) => attribut value obligatoire
    in-line

  23. datalist : parent = input /
    ni in-line, ni block

  24. dd : définition d'un terme (voir dl)
    block

  25. del : indique un texte obsolète (barré) => ortografe (bon = orthographe)
    in-line

  26. details : zone affichée/cachée, sans JavaScript
    block

    Ce qui est affiché (titre) 
      <details>
    <summary>Ce qui est affiché (titre)</summary>
    <div id="noAnchor">
      <p>Le contenu de la zone "details" n'est pas accessible via un lien</p>
    </div>
  </details>

  27. dfn : définition d'un terme
    in-line

  28. dialog:
    ni in-line, ni block

    Cette nouvelle balise est apparue avec le HTML 5.2. Normalement, elle s'utilise conjointement avec du Javascript (qui ouvre ou ferme une zone (de dialogue) dans la page).

  29. div
    block

  30. dl : marque le début d'une liste de définitions
    block

    Liste de définitions 
      <dl><!--début d'une liste de définition-->
    <dt>Terme 1</dt>
    <dd>Définition du terme 1</dd>
    <dt>Terme 2</dt>
    <dd>Définition du terme 2</dd>
  </dl>

  31. dt : indique un terme (qui sera défini avec dd), voir aussi (voir dt)
    block

  32. em
    in-line

  33. embed : permet d'insérer du contenu lié à un plug-in du navigateur
    in-line

  34. fieldset : regroupe des champs (titre = legend)
    block

  35. figcaption : premier ou dernier enfant de figure
    block

  36. figure : enfants = img /, figcaption
    block

  37. form : enfants : input /, textarea, button, select, option, optgroup, fieldset, label
    block

  38. h1
    block

    Son absence lancera un warning.

  39. h2
    block

  40. h3
    block

  41. h4
    block

  42. h5
    block

  43. h6
    block

  44. head : unique, seul parent html
    ni in-line, ni block

  45. header
    block

  46. hr /
    block

  47. html : LA balise

  48. i : représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l'expression des pensées d'un personnage.
    in-line

  49. iframe
    in-line !

  50. img /
    in-line (avec largeur)

  51. input /
    in-line

  52. ins : indique un texte nouveau (inséré)
    in-line

  53. kbd : indique ce qui doit être tapé au clavier
    in-line

  54. label : étiquette d'un input /
    in-line

  55. legend : titre d'un fieldset
    ni in-line, ni block

  56. li
    block

  57. main : contenu principal (unique, enfants = article, ...)
    block

    Son absence lancera un warning.

  58. map : enfants : area /, attribut obligatoire = name
    ni in-line, ni block

  59. mark
    in-line

  60. meta /
    ni in-line, ni block

  61. meter : affiche une gauge
    in-line

  62. nav
    block

  63. noscript : Le contenu de cette balise n'est affiché que si le navigateur n'a pas activé le JavaScript.
    in-line 

      <body>
    <noscript><span class="red">Votre navigateur est "mal" configuré ...</span> Veuillez consulter
    les <a href="../../use.htm">conditions d'utilisation</a> du site.</noscript>

    => Cette balise devrait être présente dans tous les fichiers HTML liés à du JavaScript.
    Donc, en pratique, elle devrait toujours être présente !

  64. object
    in-line (avec largeur)

  65. ol
    block

  66. optgroup : parent = select, enfants = option
    ni in-line, ni block

  67. option : élément d'une liste déroulante (ou d'un <datalist>)
    ni in-line, ni block

  68. output : résultat d'un script, extrait d'une base de données
    in-line

  69. p
    block

  70. param / : parent = object
    ni in-line, ni block

  71. picture : enfants = 1 img / et 1 ou + source
    ni in-line, ni block, prendre la largeur de la balise <img />

    Cette nouvelle balise est la cause de l'apparition de la version 5.1, en lien avec le nouvel attribut srcset de la balise (déjà existante) <source>. Cette évolution permet de choisir le fichier à appeler en fonction de la taille de l'écran et ainsi réduire la bande passante et le temps de chargement. Cette évolution est liée à l'utilisation de plus en plus fréquente du smartphone pour surfer.

  72. pre : zone où le texte ne retourne pas à la ligne automatiquement
    block

  73. progress : gauge liée à un JavaScript
    in-line

  74. q ; courte citation
    in-line (pour une citation dans un block => <blockquote>)

  75. rp : pour les langues asiatiques

  76. rt : pour les langues asiatiques

  77. ruby : pour les langues asiatiques

  78. s : indique un texte obsolète (barré), comme del
    in-line. Exemple

  79. samp : exemple de sortie, de résultat
    in-line

  80. script
    ni-inline, ni block, ne doit pas contenir type="text/javascript" (en HTML 5)

    Si l'attribut defer => Le script (situé dans le fichier JS identifié via l'attribut src) est exécuté après que la page soit lue totalement.
    Est équivalent à une balise située juste avant la balise de fin body.

  81. section
    block

  82. select : liste déroulante
    in-line

  83. small : texte plus petit
    in-line

    Rappel : Les balises HTML5 sont sémantiques => <big> a été supprimée.
    Logiquement, <small> devrait l'être ... prochainement ?

  84. source : parents = audio, picture, video
    ni-inline, ni block

  85. span : partie du texte
    in-line

  86. strong
    in-line

  87. style : non recommandé (préférez <link rel="stylesheet" href="x.css" />)
    ni in-line, ni block, parent = head

  88. sub : texte en indice. Exemple : Aindice
    in-line

  89. summary : parent = details. Toujours affiché, premier enfant
    in-line

  90. sup : texte en exposant. Exemple : Monsieur
    in-line

  91. svg : zone pour une image vectorielle
    in-line avec largeur, mini-cours

  92. table : tableau
    block (Toutefois, <p><table></table></p>)

  93. tbody : corps du tableau
    ni in-line, ni block. Contient plusieurs (ou un) <tr>...</tr>.

  94. td : cellule d'un tableau
    ni in-line, ni block

  95. template

  96. textarea : champ multi-ligne
    in-line

  97. tfoot : pied d'un tableau
    ni in-line, ni block. Contient un (ou plusieurs) <tr>...</tr>.

  98. th : cellule titre d'un tableau (en gras et centré)
    ni in-line, ni block. Remplace <td>.

  99. thead : en-tête d'un tableau
    ni in-line, ni block. Contient un (ou plusieurs) <tr>...</tr>.

  100. time : la valeur de l'attribut datetime = machine-readable date/time
    in-line

  101. title : obligatoire, parent = head
    ni in-line, ni block

  102. tr : ligne d'un tableau
    ni in-line, ni block

  103. track : piste, parent = audio ou video
    ni in-line, ni block

  104. u : non recommandée
    in-line

  105. ul : liste non ordonnée
    block

  106. var : lié à une variable
    in-line

  107. video
    in-line avec largeur

  108. wbr
    in-line

Certaines balises introduites en HTML 5 ou maintenues sont "discutées", non reconnues par des navigateurs, non recommandées, ... Preuve que ce langage continue d'évoluer. Ces balises sont notamment : slot, svg, ...

Notons également que lorsqu'une balise est maintenue, certains de ses attributs peuvent avoir été supprimés et d'autres apparaître.

On peut classifier les balises selon plusieurs critères.

Quelques attributs