032.1 Leçon 1
Certification : |
Web Development Essentials |
---|---|
Version : |
1.0 |
Thème : |
032 Balisage de documents HTML |
Objectif : |
032.1 Anatomie d’un document HTML |
Leçon : |
1 sur 1 |
Introduction
Le HTML (HyperText Markup Language) est un langage de balisage qui indique aux navigateurs web comment structurer et afficher les pages web. La version actuelle est la 5.0, qui a été publiée en 2012. La syntaxe HTML est définie par le World Wide Web Consortium (W3C).
Le HTML est une compétence fondamentale dans le développement web, car il définit la structure et une grande partie de l’apparence d’un site web. Si vous souhaitez faire carrière dans le développement web, le HTML est certainement un bon point de départ.
Anatomie d’un document HTML
Une page HTML basique a la structure suivante :
<!DOCTYPE html>
<html>
<head>
<title>My HTML Page</title>
<!-- This is the Document Header -->
</head>
<body>
<!-- This is the Document Body -->
</body>
</html>
Maintenant, analysons cette structure en détail.
Balises HTML
Le langage HTML utilise des éléments et des balises pour décrire et formater le contenu. Les balises sont des noms placés entre des crochets, par exemple <title>
. Le nom de la balise n’est pas sensible à la casse, bien que le World Wide Web Consortium (W3C) recommande d’utiliser des lettres minuscules dans les versions actuelles du HTML. Ces balises HTML sont utilisées pour construire des éléments HTML. La balise <title>
est un exemple de balise ouvrante d’un élément HTML qui définit le titre d’un document HTML. Cependant, un élément possède deux autres composants. Un élément <title>
complet ressemble à ceci :
<title>My HTML Page</title>
Ici, My HTML Page
sert de contenu à l’élément, tandis que </title>
sert de balise fermante qui déclare que cet élément est complet.
Note
|
Tous les éléments HTML n’ont pas besoin d’être fermés ; dans ce cas, on parle d’éléments vides ou d’éléments auto-fermants. |
Voici les autres éléments HTML de l’exemple précédent :
<html>
-
Entoure l’ensemble du document HTML. Il contient toutes les balises qui composent la page. Il indique également que le contenu de ce fichier est en langage HTML. La balise fermante correspondante est
</html>
. <head>
-
Un conteneur pour toutes les informations méta concernant la page. La balise fermante correspondante de cet élément est
</head>
. <body>
-
Un conteneur pour le contenu de la page et sa représentation structurelle. La balise fermante correspondante est
</body>
.
Les balises <html>
, <head>
, <body>
et <title>
sont appelées balises squelettes, qui fournissent la structure de base d’un document HTML. En particulier, elles indiquent au navigateur Web qu’il est en train de lire une page HTML.
Note
|
Parmi ces éléments HTML, le seul qui est obligatoire pour qu’un document HTML soit validé est la balise |
Comme vous pouvez le constater, chaque page HTML est un document bien structuré et pourrait même être représenté comme un arbre, où l’élément <html>
représente la racine du document et les éléments <head>
et <body>
sont les premières branches. L’exemple montre qu’il est possible d’imbriquer des éléments : Par exemple, l’élément <title>
est imbriqué dans l’élément <head>
, qui est à son tour imbriqué dans l’élément <html>
.
Pour que votre code HTML soit lisible et facile à maintenir, assurez-vous que tous les éléments HTML sont fermés correctement et dans l’ordre. Les navigateurs Web peuvent toujours rendre votre site Web comme prévu, mais l’imbrication incorrecte des éléments et de leurs balises est une pratique sujette aux erreurs.
Enfin, une mention spéciale va à la déclaration doctype tout en haut de la structure du document d’exemple. <!DOCTYPE>
n’est pas une balise HTML, mais une instruction pour le navigateur web qui spécifie la version HTML utilisée dans le document. Dans la structure du document HTML de base présentée précédemment, <!DOCTYPE html>
a été utilisé, spécifiant que le HTML5 est utilisé dans ce document.
Commentaires en HTML
Lors de la création d’une page HTML, il est bon d’insérer des commentaires dans le code afin d’en améliorer la lisibilité et de décrire l’objectif des plus grands blocs de code. Un commentaire est inséré entre les balises <!--
et -->
, comme le montre l’exemple suivant :
<!-- This is a comment. -->
<!--
This is a
multiline
comment.
-->
L’exemple montre que les commentaires HTML peuvent être placés sur une seule ligne, mais peuvent aussi s’étendre sur plusieurs lignes. Dans tous les cas, le résultat est que le texte entre <!--
et -->
est ignoré par le navigateur Web et n’est donc pas affiché dans la page HTML. Sur la base de ces considérations, vous pouvez déduire que la page HTML basique présentée dans la section précédente n’affiche aucun texte, car les lignes <!-- This is the Document Header -->
et <!-- This is the Document Body -->
ne sont que deux commentaires.
Warning
|
Les commentaires ne peuvent pas être imbriqués. |
Attributs HTML
Les balises HTML peuvent inclure un ou plusieurs attributs pour préciser les détails de l’élément HTML. Une balise simple avec deux attributs a la forme suivante :
<tag attribute-a="value-a" attribute-b="value-b">
Les attributs doivent toujours être définis dans la balise ouvrante.
Un attribut se compose d’un nom, qui indique la propriété à définir, d’un signe égal et de la valeur souhaitée entre guillemets. Les guillemets simples et les guillemets doubles sont tous deux acceptables, mais il est recommandé d’utiliser les guillemets simples ou les guillemets doubles de manière cohérente tout au long d’un projet. Il est important de ne pas mélanger les guillemets simples et doubles pour une même valeur d’attribut, car le navigateur Web ne reconnaîtra pas les guillemets mixtes comme une seule unité.
Note
|
Vous pouvez inclure un type de guillemets dans un autre type sans aucun problème. Par exemple, si vous devez utiliser |
Les attributs peuvent être classés en attributs de base et en attributs spécifiques, comme expliqué dans les sections suivantes.
Attributs de base
Les attributs de base sont des attributs qui peuvent être utilisés sur n’importe quel élément HTML. Ils comprennent :
title
-
Décrit le contenu de l’élément. Sa valeur est souvent affichée sous la forme d’une infobulle qui s’affiche lorsque l’utilisateur déplace son curseur sur l’élément.
id
-
Associe un identifiant unique à un élément. Cet identifiant doit être unique dans le document, et le document ne sera pas validé si plusieurs éléments partagent le même
id
. style
-
Affecte des propriétés graphiques (styles CSS) à l’élément.
class
-
Spécifie une ou plusieurs classes pour l’élément dans une liste de noms de classe séparés par des espaces. Ces classes peuvent être référencées dans les feuilles de style CSS.
lang
-
Spécifie la langue du contenu de l’élément en utilisant les codes de langue à deux caractères de la norme ISO-639.
Note
|
Le développeur peut stocker des informations personnalisées sur un élément en définissant ce que l’on appelle un attribut |
Attributs spécifiques
D’autres attributs sont spécifiques à chaque élément HTML. Par exemple, l’attribut src
d’un élément HTML <img>
spécifie l’URL d’une image. Il existe de nombreux autres attributs spécifiques, qui seront abordés dans les leçons suivantes.
En-tête du document
L’en-tête du document définit les méta-informations concernant la page et il est décrit par l’élément <head>
. Par défaut, les informations contenues dans l’en-tête du document ne sont pas rendues par le navigateur Web. Bien qu’il soit possible d’utiliser l’élément <head>
pour contenir des éléments HTML qui pourraient être affichés sur la page, il n’est pas recommandé de le faire.
Titre
Le titre du document est spécifié à l’aide de l’élément <title>
. Le titre défini entre les balises apparaît dans la barre de titre du navigateur web et constitue le nom suggéré pour le signet lorsque vous essayez de mettre la page en signet. Il est également affiché dans les résultats des moteurs de recherche comme titre de la page.
Voici un exemple de cet élément :
<title>My test page</title>
La balise <title>
est obligatoire dans tous les documents HTML et ne doit apparaître qu’une seule fois dans chaque document.
Note
|
Ne pas confondre le titre du document avec le titre de la page, qui est placé dans le corps du document. |
Métadonnées
L’élément <meta>
est utilisé pour spécifier des méta informations afin de décrire plus précisément le contenu d’un document HTML. C’est un élément dit auto-fermant, ce qui signifie qu’il n’a pas de balise fermante. Outre les attributs de base qui sont valables pour chaque élément HTML, l’élément <meta>
utilise également les attributs suivants :
name
-
Définit les métadonnées qui seront décrites dans cet élément. Il peut être défini par n’importe quelle valeur personnalisée, mais les valeurs couramment utilisées sont
author
(auteur),description
(description) etkeywords
(mots-clés). http-equiv
-
Fournit un en-tête HTTP pour la valeur de l’attribut
content
. Une valeur courante estrefresh
, qui sera expliquée plus tard. Si cet attribut est défini, l’attributname
ne doit pas être défini. content
-
Fournit la valeur associée à l’attribut
name
ouhttp-equiv
. charset
-
Spécifie le codage des caractères pour le document HTML, par exemple
utf-8
pour définir le codage à Unicode Transformation Format — 8 bits.
Ajouter un auteur, une description et des mot-clés
En utilisant la balise <meta>
, vous pouvez spécifier des informations supplémentaires sur l’auteur de la page HTML et décrire le contenu de la page comme ceci :
<meta name="author" content="Name Surname">
<meta name="description" content="A short summary of the page content.">
Essayez d’inclure une série de mots-clés liés au contenu de la page dans la description. Cette description est souvent la première chose qu’un utilisateur voit lorsqu’il navigue avec un moteur de recherche.
Si vous souhaitez également fournir aux moteurs de recherche des mots-clés supplémentaires liés à la page Web, vous pouvez ajouter cet élément :
<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">
Note
|
Dans le passé, les spammeurs saisissaient des centaines de mots-clés et de descriptions sans rapport avec le contenu réel de la page, de sorte que celle-ci apparaissait également dans des recherches sans rapport avec les termes recherchés par les internautes. Aujourd’hui, les balises |
Rediriger une page HTML et définir un intervalle pour l’autorafraichissement du document
En utilisant la balise <meta>
, vous pouvez rafraîchir automatiquement une page HTML après une certaine période (par exemple après 30 secondes) de cette manière :
<meta http-equiv="refresh" content="30">
Vous pouvez également rediriger une page web vers une autre page web après le même laps de temps avec le code suivant :
<meta http-equiv="refresh" content="30; url=http://www.lpi.org">
Dans cet exemple, l’utilisateur est redirigé de la page actuelle vers http://www.lpi.org
après 30 secondes. Les valeurs peuvent être ce que vous voulez. Par exemple, si vous spécifiez content="0 ; url=http://www.lpi.org"
, la page est redirigée immédiatement.
Spécifier le codage des caractères
L’attribut charset
spécifie le codage des caractères pour le document HTML. Un exemple courant est :
<meta charset="utf-8">
Cet élément spécifie que le codage des caractères du document est utf-8
, qui est un jeu de caractères universel comprenant pratiquement tous les caractères de toutes les langues humaines. Par conséquent, en l’utilisant, vous éviterez les problèmes d’affichage de certains caractères que vous pourriez rencontrer en utilisant d’autres jeux de caractères tels que ISO-8859-1 (l’alphabet latin).
Autres exemples utiles
Deux autres applications utiles de la balise <meta>
sont :
-
Définition des cookies pour garder la trace d’un visiteur du site.
-
Prise du contrôle de la fenêtre d’affichage (la zone visible d’une page web à l’intérieur d’une fenêtre de navigateur web), qui dépend de la taille de l’écran de l’appareil de l’utilisateur (par exemple, un téléphone mobile ou un ordinateur).
Cependant, ces deux exemples dépassent le cadre de l’examen et leur étude est laissée au lecteur curieux qui pourra l’explorer ailleurs.
Exercices guidés
-
Pour chacune des balises suivantes, indiquez la balise fermante correspondante :
<body>
<head>
<html>
<meta>
<title>
-
Quelle est la différence entre une balise et un élément ? Utilisez ce bout de code comme référence :
<title>HTML Page Title</title>
-
Quelles sont les balises entre lesquelles un commentaire doit être placé ?
-
Expliquez ce qu’est un attribut et donnez quelques exemples pour la balise
<meta>
.
Exercices d’exploration
-
Créez un document HTML version 5 simple avec le titre
My first HTML document
et un seul paragraphe dans le corps, contenant le texteHello World
. Utilisez la balise de paragraphe<p>
dans le corps. -
Ajouter l’auteur (
Kevin Author
) et la description (This is my first HTML page.
) au document HTML. -
Ajoutez les mots-clés suivants relatifs au document HTML :
HTML
,Example
,Test
, etMetadata
. -
Ajoutez l’élément
<meta charset="ISO-8859-1">
à l’en-tête du document et changez le texteHello World
au japonais (こんにちは世界
). Que se passe-t-il ? Comment pouvez-vous résoudre le problème ? -
Après le changement du texte du paragraphe en revenant à
Hello World
, redirigez la page HTML vershttps://www.google.com
après 30 secondes et ajoutez un commentaire expliquant cela dans l’en-tête du document.
Résumé
Dans cette leçon, vous avez appris :
-
Le rôle du HTML
-
Le squelette HTML
-
La syntaxe HTML (balises, attributs, commentaires)
-
L’en-tête HTML
-
Les balises meta
-
Comment créer un document HTML simple
Les termes suivants ont été abordés dans cette leçon :
<!DOCTYPE html>
-
La balise de déclaration.
<html>
-
Le conteneur de toutes les balises qui composent la page HTML.
<head>
-
Le conteneur pour tous les éléments de l’en-tête.
<body>
-
Le conteneur pour tous les éléments du corps.
<meta>
-
La balise pour les métadonnées, utilisée pour spécifier des informations supplémentaires pour la page HTML (comme l’auteur, la description et le codage des caractères).
Réponses aux exercices guidés
-
Pour chacune des balises suivantes, indiquez la balise fermante correspondante :
<body>
</body>
<head>
</head>
<html>
</html>
<meta>
None
<title>
</title>
-
Quelle est la différence entre une balise et un élément ? Utilisez ce bout de code comme référence :
<title>HTML Page Title</title>
Un élément HTML se compose d’une balise de début, éventuellement d’une balise de fin et de tout ce qui se trouve entre les deux. Une balise HTML est utilisée pour marquer le début ou la fin d’un élément. Par conséquent,
<title>HTML Page Title</title>
est un élément HTML, tandis que<title>
et</title>
sont respectivement les balises ouvrante et fermante. -
Quelles sont les balises entre lesquelles un commentaire doit être placé ?
Un commentaire est inséré entre les balises
<!--
et-->
et peut être placé sur une seule ligne ou s’étendre sur plusieurs lignes. -
Expliquez ce qu’est un attribut et donnez quelques exemples pour la balise
<meta>
.Un attribut est utilisé pour spécifier plus précisément un élément HTML. Par exemple, la balise
<meta>
utilise la paire d’attributsname
etcontent
pour ajouter l’auteur et la description d’une page HTML. En outre, l’attributcharset
permet de spécifier le codage des caractères pour le document HTML.
Réponses aux exercices d’exploration
-
Créez un document HTML version 5 simple avec le titre
My first HTML document
et un seul paragraphe dans le corps, contenant le texteHello World
. Utilisez la balise de paragraphe<p>
dans le corps.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> </head> <body> <p>Hello World</p> </body> </html>
-
Ajouter l’auteur (
Kevin Author
) et la description (This is my first HTML page.
) au document HTML.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> </head> <body> <p>Hello World</p> </body> </html>
-
Ajoutez les mots-clés suivants relatifs au document HTML :
HTML
,Example
,Test
, etMetadata
.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> <meta name="keywords" content="HTML, Example, Test, Metadata"> </head> <body> <p>Hello World</p> </body> </html>
-
Ajoutez l’élément
<meta charset="ISO-8859-1">
à l’en-tête du document et changez le texteHello World
au japonais (こんにちは世界
). Que se passe-t-il ? Comment pouvez-vous résoudre le problème ?Si l’exemple est exécuté comme décrit, le texte japonais ne s’affiche pas correctement. Cela est dû au fait que la norme ISO-8859-1 représente le codage des caractères pour l’alphabet latin. Pour afficher le texte, vous devez modifier le codage des caractères, en utilisant par exemple UTF-8 (
<meta charset="utf-8">
). -
Après le changement du texte du paragraphe en revenant à
Hello World
, redirigez la page HTML vershttps://www.google.com
après 30 secondes et ajoutez un commentaire expliquant cela dans l’en-tête du document.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> <meta name="keywords" content="HTML, Example, Test, Metadata"> <meta charset="utf-8"> <!-- The page is redirected to Google after 30 seconds --> <meta http-equiv="refresh" content="30; url=https://www.google.com"> </head> <body> <p>Hello World</p> </body> </html>