Numérique et Sciences Informatiques > Internet et le Web > Langages du Web (HTML, CSS, JavaScript - Notions de Base) > HTML : structure d'une page web, balises principales

La Structure Essentielle d'une Page Web en HTML

Découvrez les fondations de toute page web : la structure HTML. Apprenez à construire une page avec les balises indispensables et comprenez leur rôle crucial dans l'organisation du contenu.

Introduction à la Structure HTML

Le HTML (HyperText Markup Language) est le langage de base du web. Il permet de structurer le contenu d'une page web, en définissant les titres, les paragraphes, les images, les liens, etc. Chaque élément HTML est défini par une balise.

Une page HTML est un fichier texte avec l'extension .html ou .htm. Ce fichier est interprété par le navigateur web pour afficher la page à l'utilisateur.

Les Balises Fondamentales

Toute page HTML valide doit contenir une structure de base avec les balises suivantes :

  • <!DOCTYPE html> : Déclaration du type de document. Indique au navigateur qu'il s'agit d'un document HTML5. C'est la première ligne de code de votre page.
  • <html> : Balise racine de la page HTML. Tout le contenu de la page est inclus dans cette balise.
  • <head> : Contient des informations sur la page (métadonnées), comme le titre, les liens vers les feuilles de style CSS, et les scripts JavaScript. Ces informations ne sont généralement pas affichées directement dans la page, mais sont utilisées par le navigateur et les moteurs de recherche.
  • <body> : Contient le contenu visible de la page web. C'est ici que vous placerez le texte, les images, les vidéos, et tous les autres éléments que vous voulez que l'utilisateur voie.

Exemple :


<!DOCTYPE html>
<html>
<head>
  <title>Titre de la page</title>
</head>
<body>
  <p>Ceci est un paragraphe.</p>
</body>
</html>

Détails sur la Balise <head>

La balise <head> est un conteneur pour les métadonnées. Voici quelques balises courantes utilisées à l'intérieur de <head>:

  • <title> : Définit le titre de la page, qui apparaît dans l'onglet du navigateur et dans les résultats de recherche. Le titre doit être concis et pertinent.
  • <meta> : Fournit des métadonnées sur le document HTML, comme la description, les mots-clés, l'auteur, etc. Les moteurs de recherche utilisent ces informations pour indexer et classer la page. Il existe différents types de balises <meta>, notamment pour la définition du charset (encodage des caractères) : <meta charset="UTF-8"> et pour la description : <meta name="description" content="Description de la page">.
  • <link> : Définit la relation entre le document actuel et une ressource externe, comme une feuille de style CSS. Par exemple, pour lier une feuille de style nommée style.css, on utilise : <link rel="stylesheet" href="style.css">.
  • <style> : Permet d'inclure du code CSS directement dans la page. Cependant, il est généralement préférable d'utiliser une feuille de style externe pour une meilleure organisation et maintenance du code.

Détails sur la Balise <body>

La balise <body> contient tout le contenu visible de la page web. Voici quelques balises courantes utilisées à l'intérieur de <body>:

  • <p> : Définit un paragraphe. Utilisez-le pour structurer votre texte en blocs logiques.
  • <a> : Définit un lien hypertexte. L'attribut href spécifie l'URL de la page vers laquelle le lien pointe : <a href="https://www.exemple.com">Lien vers Exemple</a>.
  • <img> : Affiche une image. L'attribut src spécifie l'URL de l'image, et l'attribut alt fournit une description alternative de l'image, utile pour l'accessibilité et les moteurs de recherche : <img src="image.jpg" alt="Description de l'image">.
  • <div> : Définit une division ou une section dans un document HTML. Il est souvent utilisé comme conteneur pour d'autres éléments HTML afin de les grouper et de les styliser avec CSS.
  • <span> : Similaire à <div>, mais utilisé pour des portions de texte plus petites.
  • <ul> et <ol> : Créent respectivement une liste non ordonnée (à puces) et une liste ordonnée (numérotée). Chaque élément de la liste est défini par la balise <li>.
  • <table> : Crée un tableau. Les lignes du tableau sont définies par la balise <tr>, les cellules d'en-tête par la balise <th> et les cellules de données par la balise <td>.

Importance de la Validation HTML

Il est crucial de valider votre code HTML pour vous assurer qu'il est conforme aux normes du W3C (World Wide Web Consortium). Un code HTML valide garantit que votre page s'affichera correctement sur tous les navigateurs et qu'elle sera accessible aux utilisateurs ayant des besoins spécifiques. Vous pouvez utiliser des outils de validation HTML en ligne pour vérifier votre code et corriger les erreurs.

Ce qu'il faut retenir

  • Une page HTML est structurée autour des balises <!DOCTYPE html>, <html>, <head> et <body>.
  • La balise <head> contient les métadonnées de la page, comme le titre et les liens vers les feuilles de style.
  • La balise <body> contient le contenu visible de la page.
  • Le HTML utilise des balises pour définir les éléments de la page, comme les paragraphes (<p>), les liens (<a>) et les images (<img>).
  • Il est important de valider votre code HTML pour garantir sa conformité aux normes et son accessibilité.

← JavaScript : Interactivité côté client (Événements et Manipulation du DOM) Le DNS : Un Annuaire Téléphonique pour Internet →

FAQ

  • Quelle est la différence entre <div> et <span> ?

    <div> est un élément de bloc, ce qui signifie qu'il occupe toute la largeur disponible et crée un saut de ligne avant et après. <span> est un élément en ligne, ce qui signifie qu'il n'occupe que la largeur nécessaire pour son contenu et ne crée pas de saut de ligne.
  • Pourquoi utiliser <!DOCTYPE html> ?

    <!DOCTYPE html> indique au navigateur qu'il doit interpréter le document comme un document HTML5. C'est crucial pour assurer une interprétation correcte et cohérente de la page sur différents navigateurs.