<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
<head> : première zone, contenant des informations pour le navigateur
<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>

<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
- ...
<link />
- <link rel="stylesheet" href="" />
- non recommandé pour le JavaScript
<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 ...

<header> : entête de page
<article>: zone contenant un contenu principal
<footer> : pied de page
<aside> : zone facultative d'informations complémentaires, placée à côte de l'article
<nav> : zone facultative de liens, située parfois dans le <header>
<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

<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>)

<p> : paragraphe : zone contenant des éléments en ligne : textes, images, composants de formulaires, ...
<blockquote> : zone contenant un texte en retrait et entre guillemets
<pre> : zone pour texte qui ne s'adapte pas à la taille de la fenêtre
<ol> : zone d'une liste ordonnée
<ul> : zone d'une liste non-ordonnée
<li> : zone d'un élément d'une liste
<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>)

<br />: pour indiquer un retour à la ligne
<a> : zone lien ( texte bleu, par défaut )
attribut obligatoire = href
<a href="http://www.chocoloup.be">Chocoloup</a>
<mark> : très important ( surligné jaune )
<strong> : important ( gras )
<em> : pour mettre en évidence ( italique )
<sup> : pour mettre en exposant
Classe de 4^ème primaire
Classe de 4<sup>ème</sup> primaire
<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>.
<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>
<code> : pour indiquer un bout de code
<code>alert("JavaScript");</code>

Balises non usuelles :

<sub> : pour indiquer un indice
E_i
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

title

Lorsque la souris passe sur le texte s'affiche la valeur de l'attribut title
L'union fait la force
<q title="Devise de la Belgique">L'union fait la force</q>

Les balises liées au multimédia

<img /> : zone image ( attributs obligatoires : "src" et "alt" )

<img src="../js/mini_cours_javascript/avertiss.gif" width="10" height="10" alt="attention" />
<video> : (tous les types de fichiers-video ne sont pas admis)
<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

<noscript> : pour indiquer que le moteur JavaScript du navigateur n'est pas activé
<script> : pour indiquer le fichier JavaScript (via l'attribut src)
<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

<form> :
<input /> : champ
<label> : étiquette du champ
<select> : liste déroulante
<option> : élément de la liste déroulante (ou de <datalist>)
<button> :
<textarea> : champ multi-lignes
<fieldset> : zone entourée d'un liseré ( traditionnellement, un ensemble de champs d'un formulaire )
<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

<table> : pour créer un tableau
<tr> : pour créer une ligne
<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 />)

a : lien externe ou interne
in-line
abbr : abréviation ( avec deux b)
in-line
address : adresse ( avec deux d)
block
area / : parent = map
ni in-line, ni block
article
block, doit contenir au moins un titre (<h1>...</h1>)
aside
block
audio : fichiers supportés : mp3, wav, ogg
in-line
b : non recommandée (gras)
in-line
base / : parent = head
ni in-line, ni block
bdi
in-line
bdo : sens de la lecture (de gauche à droite)
in-line
blockquote : enfants = p ou tout autre bloc-élément
block
body : unique, seul parent html
LE block
br / : retour à la ligne
ni in-line, ni block
button
inline
canvas : zone pour un graphique géré en JavaScript
in-line (Tutoriel)
caption : immédiatement après table
ni in-line, ni block
cite : titre d'un ouvrage (livre, film, chanson, ...)
in-line
code : extrait d'un code source
in-line
col / : parent = colgroup
ni in-line, ni block
colgroup : parent = table
ni in-line, ni block
data : pour permettre de lier le contenu de la balise à un code utile à un parseur (machine-readable translation) => attribut value obligatoire
in-line
datalist : parent = input /
ni in-line, ni block
dd : définition d'un terme (voir dl)
block
del : indique un texte obsolète (barré) => ~~ortografe~~ (bon = orthographe)
in-line

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>

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

<p>A <dfn id="def-validator">validator</dfn> is a program
that checks for syntax errors in code or documents.</p>

https://developer.mozilla.org/fr/docs/Web/HTML/Element/dfn

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).

https://developer.mozilla.org/fr/docs/Web/HTML/Element/dialog
div
block

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

Liste de définitions

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

dt : indique un terme (qui sera défini avec dd), voir aussi (voir dl)
block
em
in-line
embed : permet d'insérer du contenu lié à un plug-in du navigateur
in-line
fieldset : regroupe des champs (titre = legend)
block
figcaption : premier ou dernier enfant de figure
block
figure : enfants = img /, figcaption
block
footer
block
form : enfants : input /, textarea, button, select, option, optgroup, fieldset, label
block
h1
block

Son absence lancera un warning.
h2
block
h3
block
h4
block
h5
block
h6
block
head : unique, seul parent html
ni in-line, ni block
header
block
hr /
block
html : LA balise
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
iframe
in-line !
img /
in-line (avec largeur)
input /
in-line
ins : indique un texte nouveau (inséré)
in-line
kbd : indique ce qui doit être tapé au clavier
in-line
label : étiquette d'un input /
in-line
legend : titre d'un fieldset
ni in-line, ni block
li
block
link / seul parent head /
ni in-line, ni block ne doit pas contenir type="text/css" (en HTML 5)
main : contenu principal (unique, enfants = article, ...)
block

Son absence lancera un warning.
map : enfants : area /, attribut obligatoire = name
ni in-line, ni block
mark
in-line
meta /
ni in-line, ni block
meter : affiche une gauge
in-line
nav
block
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 !
object
in-line (avec largeur)
ol
block
optgroup : parent = select, enfants = option
ni in-line, ni block
option : élément d'une liste déroulante (ou d'un <datalist>)
ni in-line, ni block
output : résultat d'un script, extrait d'une base de données
in-line
p
block
param / : parent = object
ni in-line, ni block
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.
pre : zone où le texte ne retourne pas à la ligne automatiquement
block
progress : gauge liée à un JavaScript
in-line
q ; courte citation
in-line (pour une citation dans un block => <blockquote>)
rp : pour les langues asiatiques
rt : pour les langues asiatiques
ruby : pour les langues asiatiques
s : indique un texte obsolète (barré), comme del
in-line. ~~Exemple~~
samp : exemple de sortie, de résultat
in-line
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.
section
block
select : liste déroulante
in-line
small : texte plus petit
in-line

Rappel : Les balises HTML5 sont sémantiques => <big> a été supprimée.
Logiquement, <small> devrait l'être ... prochainement ?
source : parents = audio, picture, video
ni-inline, ni block
span : partie du texte
in-line
strong
in-line
style : non recommandé (préférez <link rel="stylesheet" href="x.css" />)
ni in-line, ni block, parent = head
sub : texte en indice. Exemple : A_indice
in-line
summary : parent = details. Toujours affiché, premier enfant
in-line
sup : texte en exposant. Exemple : M^onsieur
in-line
svg : zone pour une image vectorielle
in-line avec largeur, mini-cours
table : tableau
block (Toutefois, <p><table></table></p>)
tbody : corps du tableau
ni in-line, ni block. Contient plusieurs (ou un) <tr>...</tr>.
td : cellule d'un tableau
ni in-line, ni block
template
textarea : champ multi-ligne
in-line
tfoot : pied d'un tableau
ni in-line, ni block. Contient un (ou plusieurs) <tr>...</tr>.
th : cellule titre d'un tableau (en gras et centré)
ni in-line, ni block. Remplace <td>.
thead : en-tête d'un tableau
ni in-line, ni block. Contient un (ou plusieurs) <tr>...</tr>.
time : la valeur de l'attribut datetime = machine-readable date/time
in-line
title : obligatoire, parent = head
ni in-line, ni block
tr : ligne d'un tableau
ni in-line, ni block
track : piste, parent = audio ou video
ni in-line, ni block
u : non recommandée
in-line
ul : liste non ordonnée
block
var : lié à une variable
in-line
video
in-line avec largeur
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.

selon le contexte (comme ci-dessus) : formulaire, tableau, multimedia, grandes divisions de la page, texte, code javascript
par ordre alphabétique (comme ci-dessus)
selon la façon d'apparaître, par défaut, dans le flux (en-ligne et bloc)
Cette façon peut souvent être modifiée via le CSS
avec contenu (<a>, <p>, ... ) ou sans contenu (<br />, <hr />, <img />, <input />, ...)
appartenant au <head> ou au <body>
selon le degré d'exigence :
- balises obligatoires ou facultatives
- balise ayant des attributs obligatoires ou facultatifs

Quelques attributs

title

Pour afficher un retour de ligne, il faut taper le code HTML suivant : 
 (retour de ligne)
Exemple = laisser la souris sur le mot gras "title" (ci-dessus)