Structure d’un Document HTML Expliquée
Tout d'abord, nous examinons la structure d'un document HTML.
Structure d'un document HTML
Chaque document HTML doit respecter une structure cohérente. Les éléments présentés ici constituent la base pour organiser le contenu, définir la structure de la page et améliorer l'expérience utilisateur sur le web.
balise html
La balise <html> est l’élément racine d’un document HTML. Tous les autres éléments seront écrits à l’intérieur de celle-ci. La balise d’ouverture <html> marque le début du document HTML, tandis que la balise de fermeture </html> marque la fin.
Exemple :
<html>
<!-- Other elements go here -->
</html>
balise head
La balise <head> contient des méta-informations sur le document HTML, telles que le titre, l'encodage des caractères et les ressources externes comme les feuilles de style et les scripts. Elle ne contient pas de contenu directement visible par l'utilisateur sur la page web.
Exemple :
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
Explication :
- La balise
<title>définit le titre d'une page web. Il s'affiche dans la barre de titre du navigateur ou dans l'onglet du navigateur. Le titre d'une page offre un aperçu concis de son contenu, facilitant la compréhension de l'objectif de la page et la navigation efficace entre plusieurs onglets ; <meta charset="UTF-8">sert à spécifier l'encodage des caractères utilisé dans un document HTML. Cet encodage détermine la manière dont les navigateurs web interprètent et affichent le texte ;- Quelques balises meta courantes incluent :
<meta name="description" content="Brief description of the page">: Fournit une description concise du contenu de la page, qui peut apparaître dans les résultats des moteurs de recherche ;<meta name="keywords" content="keyword1, keyword2, ...">: Spécifie des mots-clés pertinents pour le contenu de la page, contribuant à améliorer le référencement (SEO) ;<meta name="viewport" content="width=device-width, initial-scale=1.0">: Définit les paramètres du viewport pour le design réactif, assurant un affichage adapté sur différents appareils.
balise body
La balise <body> contient le contenu principal visible par les utilisateurs sur une page web. Ce contenu comprend du texte, des images, des liens, des formulaires et d'autres éléments avec lesquels les utilisateurs peuvent interagir lors de la visite du site. Essentiellement, la balise <body> contient ce que les utilisateurs voient et manipulent lorsqu'ils naviguent sur un site web.
Exemple :
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
Déclaration du type de document
La déclaration du type de document informe le navigateur web de la version de HTML utilisée dans le document. Cette déclaration garantit que le navigateur affiche correctement le document en suivant la norme HTML spécifiée. Pour les documents HTML5, la déclaration doctype est <!DOCTYPE html>.
Exemple :
<!DOCTYPE html>
Structure résultante
Pour conclure, rassemblons tous les éléments que nous avons étudiés et combinons-les dans un seul document HTML.
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
</html>
Ci-dessous, vous pouvez voir comment le document HTML s'affiche dans le navigateur web.
Tutoriel vidéo
1. Quelle balise est l’élément racine d’un document HTML ?
2. Que contient la balise <head> ?
3. Que définit la balise <title> ?
4. Quel est le but de la balise <body> ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you explain more about the purpose of the head and body tags?
What is the significance of the doctype declaration in HTML?
Are there any other important tags I should know about in a basic HTML document?
Awesome!
Completion rate improved to 3.13Structure d’un Document HTML Expliquée
Glissez pour afficher le menu
Tout d'abord, nous examinons la structure d'un document HTML.
Structure d'un document HTML
Chaque document HTML doit respecter une structure cohérente. Les éléments présentés ici constituent la base pour organiser le contenu, définir la structure de la page et améliorer l'expérience utilisateur sur le web.
balise html
La balise <html> est l’élément racine d’un document HTML. Tous les autres éléments seront écrits à l’intérieur de celle-ci. La balise d’ouverture <html> marque le début du document HTML, tandis que la balise de fermeture </html> marque la fin.
Exemple :
<html>
<!-- Other elements go here -->
</html>
balise head
La balise <head> contient des méta-informations sur le document HTML, telles que le titre, l'encodage des caractères et les ressources externes comme les feuilles de style et les scripts. Elle ne contient pas de contenu directement visible par l'utilisateur sur la page web.
Exemple :
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
Explication :
- La balise
<title>définit le titre d'une page web. Il s'affiche dans la barre de titre du navigateur ou dans l'onglet du navigateur. Le titre d'une page offre un aperçu concis de son contenu, facilitant la compréhension de l'objectif de la page et la navigation efficace entre plusieurs onglets ; <meta charset="UTF-8">sert à spécifier l'encodage des caractères utilisé dans un document HTML. Cet encodage détermine la manière dont les navigateurs web interprètent et affichent le texte ;- Quelques balises meta courantes incluent :
<meta name="description" content="Brief description of the page">: Fournit une description concise du contenu de la page, qui peut apparaître dans les résultats des moteurs de recherche ;<meta name="keywords" content="keyword1, keyword2, ...">: Spécifie des mots-clés pertinents pour le contenu de la page, contribuant à améliorer le référencement (SEO) ;<meta name="viewport" content="width=device-width, initial-scale=1.0">: Définit les paramètres du viewport pour le design réactif, assurant un affichage adapté sur différents appareils.
balise body
La balise <body> contient le contenu principal visible par les utilisateurs sur une page web. Ce contenu comprend du texte, des images, des liens, des formulaires et d'autres éléments avec lesquels les utilisateurs peuvent interagir lors de la visite du site. Essentiellement, la balise <body> contient ce que les utilisateurs voient et manipulent lorsqu'ils naviguent sur un site web.
Exemple :
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
Déclaration du type de document
La déclaration du type de document informe le navigateur web de la version de HTML utilisée dans le document. Cette déclaration garantit que le navigateur affiche correctement le document en suivant la norme HTML spécifiée. Pour les documents HTML5, la déclaration doctype est <!DOCTYPE html>.
Exemple :
<!DOCTYPE html>
Structure résultante
Pour conclure, rassemblons tous les éléments que nous avons étudiés et combinons-les dans un seul document HTML.
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
</html>
Ci-dessous, vous pouvez voir comment le document HTML s'affiche dans le navigateur web.
Tutoriel vidéo
1. Quelle balise est l’élément racine d’un document HTML ?
2. Que contient la balise <head> ?
3. Que définit la balise <title> ?
4. Quel est le but de la balise <body> ?
Merci pour vos commentaires !
