Structure en balises HTML : <html>, <head> et <body>
Lorsque vous créez une page web en HTML, il est essentiel de comprendre la structure de base du document. Cette structure est composée de trois balises principales : <html>, <head> et <body>. Dans cette section, nous examinerons en détail chacune de ces balises et leur rôle dans la construction d'une page web.
Balise <html>
La balise <html> est l'élément racine de tout document HTML. Elle englobe tout le contenu de la page et indique au navigateur que le document est écrit en HTML. Voici à quoi ressemble une structure de base avec la balise <html> :
<!doctype html>
<html>
<!-- Contenu de la page -->
</html>Balise <head>
La balise <head> est utilisée pour contenir des informations sur le document, telles que le titre de la page, les liens vers des fichiers CSS ou JavaScript, les métadonnées, etc. Cette section n'est pas visible à l'écran. Voici comment inclure la balise <head> dans la structure HTML :
<!doctype html>
<html>
<head>
<!-- Informations sur le document -->
</head>
</html>Balise <title>
La balise <title> est utilisée à l'intérieur de la balise <head> pour définir le titre de la page. Ce titre est affiché dans l'onglet du navigateur lorsqu'il ouvre la page. Voici un exemple :
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
</head>
</html>Autres balises de <head>
Outre la balise <title>, vous pouvez inclure d'autres éléments importants dans la balise <head>. Par exemple, vous pouvez lier des fichiers CSS externes pour styliser votre page avec la balise <link>, ou lier des fichiers JavaScript pour ajouter des fonctionnalités dynamiques avec la balise <script>. Voici un exemple :
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
</html>Balise <body>
La balise <body> contient le contenu visible de la page web. C'est là que vous placez les éléments tels que les titres, les paragraphes, les images, les liens et tout autre élément interactif. Voici comment inclure la balise <body> dans la structure HTML :
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Contenu visible de la page -->
</body>
</html>Exemple complet de structure HTML
Voici un exemple complet d'une structure HTML de base, incluant la balise <html>, <head> et <body> :
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Titre principal</h1>
<p>Ceci est un paragraphe.</p>
<img src="image.jpg" alt="Description de l'image" />
<a href="https://www.example.com">Lien vers Example</a>
</body>
</html>Dans cet exemple, la balise <html> englobe tout le contenu de la page, la balise <head> contient les informations sur le document, et la balise <body> contient le contenu visible, tel que le titre principal <h1>, un paragraphe <p>, une image <img> et un lien <a>.
Conclusion
La structure en balises HTML avec <html>, <head> et <body> est cruciale pour créer une page web bien organisée et cohérente. Comprendre le rôle de chaque balise et comment les inclure dans votre code HTML est essentiel pour développer des pages web efficaces.
La balise <html> est l'élément racine de tout document HTML, la balise <head> contient les informations sur le document, telles que le titre, les liens vers des fichiers externes et les scripts, tandis que la balise <body> contient le contenu visible de la page.
En utilisant cette structure de base, vous pouvez commencer à construire des pages web en HTML. Avec une compréhension claire de la structure HTML, vous êtes prêt à continuer à apprendre et à explorer d'autres balises et fonctionnalités pour développer vos compétences en développement web.