-
<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
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 :
0123456789Dans 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é
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 -
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
blockCe 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>
-
dialog:
ni in-line, ni blockCette 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
blockListe 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 -
form : enfants : input /, textarea, button, select, option, optgroup, fieldset, label
block -
h1
blockSon 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 contenirtype="text/css"
(en HTML 5) -
main : contenu principal (unique, enfants = article, ...)
blockSon 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 -
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 contenirtype="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-lineRappel : 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 : Aindice
in-line -
summary : parent = details. Toujours affiché, premier enfant
in-line -
sup : texte en exposant. Exemple : Monsieur
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 -
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)