Introduction à HTML

La structure d'une page web

Chaque page web que vous consultez est construite avec un langage appelé HTML, ou HyperText Markup Language. Pensez au HTML comme au squelette d'une page. Il fournit la structure de base, en définissant les différents éléments comme les titres, les paragraphes et les listes.

Toute page HTML bien formée suit une structure standard. C'est un peu comme la grammaire d'une langue. Voici le modèle de base que vous utiliserez toujours.

<!DOCTYPE html>
<html>
<head>
    <title>Titre de ma page</title>
</head>
<body>
    <h1>Mon premier titre</h1>
    <p>Ceci est mon premier paragraphe.</p>
</body>
</html>

Analysons cela :

<!DOCTYPE html> : C'est une déclaration qui indique au navigateur que le document est une page HTML5.
<html> : C'est l'élément racine de la page. Tout le reste est imbriqué à l'intérieur.
<head> : Cette section contient des méta-informations sur la page, comme son titre. Ce contenu n'est pas affiché directement sur la page, mais il est utilisé par les navigateurs et les moteurs de recherche. La balise <title> à l'intérieur définit le titre qui apparaît dans l'onglet du navigateur.
<body> : C'est ici que se trouve tout le contenu visible de votre page web : le texte, les images, les liens, etc.

Les balises essentielles

En HTML, nous utilisons des balises (tags) pour définir les différents types de contenu. Une balise est simplement un mot-clé entouré de chevrons, comme <p>. La plupart des balises viennent par paires : une balise d'ouverture (<p>) et une balise de fermeture (</p>). La balise de fermeture est identique à celle d'ouverture, mais avec une barre oblique avant le nom de la balise. Tout ce qui se trouve entre les deux est le contenu de cet élément.

Pensez aux balises comme à des conteneurs. La balise <p> dit au navigateur : "Tout ce qui se trouve ici est un paragraphe."

Voici quelques-unes des balises les plus courantes pour structurer le texte.

Titre

noun

Les balises de titre vont de <h1> à <h6>. Elles créent une hiérarchie dans votre contenu. <h1> est le titre le plus important, généralement utilisé pour le titre principal de la page, tandis que <h6> est le moins important.

<h1>Ceci est un titre principal</h1>
<h2>Ceci est un sous-titre</h2>
<p>Et voici un paragraphe normal qui suit.</p>

Ensuite, nous avons les listes. Elles sont parfaites pour organiser les informations. Il en existe deux types principaux : les listes non ordonnées (à puces) et les listes ordonnées (numérotées).

Pour une liste non ordonnée, on utilise la balise <ul> (unordered list) qui entoure les éléments de la liste, définis par la balise <li> (list item).

<ul>
    <li>Pommes</li>
    <li>Bananes</li>
    <li>Oranges</li>
</ul>

Pour une liste ordonnée, le principe est le même, mais on utilise ol (ordered list).

<ol>
    <li>Première étape</li>
    <li>Deuxième étape</li>
    <li>Troisième étape</li>
</ol>

Enfin, les liens sont ce qui rend le web... eh bien, un web ! Un lien permet de naviguer d'une page à une autre. On le crée avec la balise <a> (anchor). L'attribut href (hypertext reference) spécifie l'URL de destination.

<a href="https://www.wikipedia.org">Visitez Wikipédia</a>

Donner du sens avec la sémantique

Vous pourriez être tenté d'utiliser les balises pour leur apparence. Par exemple, utiliser un <h1> juste pour avoir un gros texte. C'est une mauvaise pratique. Il faut plutôt utiliser les balises pour leur signification. C'est ce qu'on appelle le HTML sémantique.

Le HTML sémantique consiste à utiliser la balise la plus appropriée pour le type de contenu que vous décrivez.

Par exemple, au lieu d'utiliser des balises génériques <div> pour tout, HTML5 a introduit des balises plus descriptives pour structurer les sections d'une page :

<header> : Pour l'en-tête d'une page ou d'une section.
<footer> : Pour le pied de page.
<nav> : Pour un bloc de liens de navigation.
<main> : Pour le contenu principal et unique de la page.
<article> : Pour un contenu autonome, comme un article de blog.
<section> : Pour regrouper des contenus thématiquement similaires.

Pourquoi est-ce si important ? Deux raisons principales : l'accessibilité et le référencement (SEO).

Les lecteurs d'écran, utilisés par les personnes malvoyantes, se basent sur la structure sémantique pour comprendre et naviguer dans la page. Une page bien structurée est beaucoup plus facile à utiliser pour eux.

De même, les moteurs de recherche comme Google analysent cette structure pour comprendre le contenu de votre page. Utiliser les bonnes balises aide les moteurs de recherche à mieux classer votre site.

Maintenant que vous connaissez les bases, il est temps de tester vos connaissances.

Quiz Questions 1/5

Quel est le rôle principal de la balise <head> dans un document HTML ?

Quiz Questions 2/5

Pour créer une liste à puces (non numérotée), quelles balises HTML devez-vous utiliser ?

Vous avez maintenant les outils pour créer la structure de base de n'importe quelle page web. La prochaine étape consiste à apprendre à la styliser, mais c'est un autre sujet. Pour l'instant, entraînez-vous à construire des squelettes de pages solides et sémantiques.

HTML et CSS pour Débutants