Introduction au Développement HTML et CSS
Introduction au Développement HTML et CSS

Listes, tableaux et liens internes/externes en HTML

Bienvenue dans cette leçon consacrée à des éléments fondamentaux du HTML qui permettent de structurer et d'organiser le contenu de vos pages web, ainsi que de les relier entre elles ou au reste du monde : les listes, les tableaux et les liens hypertexte. Maîtriser ces concepts est essentiel pour créer des pages web claires, accessibles et navigables.

1. Les Listes en HTML : Organiser l'Information

Les listes HTML sont des outils puissants pour présenter des informations de manière structurée et facile à lire. Elles améliorent la sémantique de votre code et l'accessibilité de votre contenu. Il existe trois types principaux de listes en HTML.

1.1. Les Listes Non Ordonnées (<ul> et <li>)

Une liste non ordonnée est utilisée pour regrouper des éléments qui n'ont pas un ordre particulier. Chaque élément est généralement précédé d'une puce (un petit symbole, dont l'apparence peut être modifiée avec CSS).

  • <ul> (Unordered List) : C'est le conteneur principal de la liste.
  • <li> (List Item) : Chaque élément individuel de la liste est défini par cette balise.
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Listes</title>
</head>
<body>

    <h3>Mes fruits préférés :</h3>
    <ul>
        <li>Pomme</li>
        <li>Banane</li>
        <li>Orange</li>
        <li>Kiwi</li>
    </ul>

</body>
</html>

Dans cet exemple, la balise <ul> englobe l'ensemble de la liste, et chaque fruit est défini par une balise <li>. Le navigateur affichera ces éléments avec des puces par défaut.

1.2. Les Listes Ordonnées (<ol> et <li>)

Une liste ordonnée est utilisée lorsque l'ordre des éléments est important, comme des étapes d'une recette, un classement ou une procédure. Chaque élément est numéroté par défaut.

  • <ol> (Ordered List) : Le conteneur principal de la liste ordonnée.
  • <li> (List Item) : Chaque élément de la liste.

Les listes ordonnées peuvent avoir des attributs utiles :

  • type: Spécifie le type de marqueur (par exemple, 1 pour des chiffres, a pour des lettres minuscules, A pour des lettres majuscules, i pour des chiffres romains minuscules, I pour des chiffres romains majuscules).
  • start: Indique la valeur de départ de la numérotation.
  • reversed: Inverse l'ordre de numérotation (compte à rebours).
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Listes Ordonnées</title>
</head>
<body>

    <h3>Étapes pour faire du thé :</h3>
    <ol>
        <li>Faire bouillir de l'eau.</li>
        <li>Mettre un sachet de thé dans une tasse.</li>
        <li>Verser l'eau bouillante dans la tasse.</li>
        <li>Laisser infuser quelques minutes.</li>
        <li>Ajouter du sucre ou du lait si désiré.</li>
    </ol>

    <h3>Top 3 des langages de programmation (ordre inversé, en lettres) :</h3>
    <ol type="A" start="3" reversed>
        <li>JavaScript</li>
        <li>Python</li>
        <li>HTML/CSS (pour le fun !)</li>
    </ol>

</body>
</html>

Le premier exemple montre une liste ordonnée simple. Le second illustre l'utilisation des attributs type, start et reversed pour personnaliser la numérotation.

1.3. Les Listes de Description (<dl>, <dt>, <dd>)

Les listes de description (anciennement appelées listes de définitions) sont utilisées pour créer une liste de termes et leurs descriptions correspondantes.

  • <dl> (Description List) : Le conteneur principal de la liste de description.
  • <dt> (Description Term) : Le terme à décrire.
  • <dd> (Description Description) : La description ou définition du terme.
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Liste de Description</title>
</head>
<body>

    <h3>Glossaire HTML :</h3>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language, langage de balisage utilisé pour créer des pages web.</dd>

        <dt>CSS</dt>
        <dd>Cascading Style Sheets, langage de feuilles de style utilisé pour décrire la présentation d'un document HTML.</dd>

        <dt>JavaScript</dt>
        <dd>Langage de programmation léger et interprété utilisé pour rendre les pages web interactives.</dd>
    </dl>

</body>
</html>

Dans cet exemple, HTML, CSS et JavaScript sont les termes (<dt>), et leurs explications respectives sont les descriptions (<dd>).

2. Les Tableaux en HTML : Structurer les Données Tabulaires

Les tableaux HTML sont utilisés pour afficher des données sous forme de lignes et de colonnes, de manière structurée. Il est crucial de noter que les tableaux sont destinés à afficher des données tabulaires et non à des fins de mise en page (layout). Pour la mise en page, utilisez CSS (Flexbox, Grid).

2.1. Structure de Base d'un Tableau

Un tableau est construit avec plusieurs balises imbriquées :

  • <table> : Le conteneur principal du tableau.
  • <thead> (Table Head) : Groupe le contenu de l'en-tête du tableau. C'est ici que l'on place les titres de colonnes.
  • <tbody> (Table Body) : Groupe le contenu du corps du tableau, c'est-à-dire les données principales.
  • <tfoot> (Table Foot) : Groupe le contenu du pied de tableau (par exemple, des totaux ou des notes).
  • <tr> (Table Row) : Définit une ligne de tableau.
  • <th> (Table Header) : Définit une cellule d'en-tête de tableau. Elles sont généralement centrées et en gras par défaut. Elles doivent être utilisées dans <thead> ou pour des en-têtes de ligne.
  • <td> (Table Data) : Définit une cellule de données standard.
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Tableau</title>
    <style>
        /* Quelques styles CSS de base pour rendre le tableau lisible */
        table {
            width: 80%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

    <h2>Tableau des Produits</h2>

    <table>
        <thead>
            <tr>
                <th>Produit</th>
                <th>Prix Unitaire</th>
                <th>Quantité</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ordinateur Portable</td>
                <td>1200 €</td>
                <td>1</td>
                <td>1200 €</td>
            </tr>
            <tr>
                <td>Souris Gamer</td>
                <td>50 €</td>
                <td>2</td>
                <td>100 €</td>
            </tr>
            <tr>
                <td>Clavier Mécanique</td>
                <td>120 €</td>
                <td>1</td>
                <td>120 €</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total Général</td>
                <td>1420 €</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>

Dans cet exemple, nous avons un en-tête (<thead>) avec les titres de colonnes, un corps (<tbody>) avec les données des produits, et un pied (<tfoot>) pour le total général.

2.2. Attributs Importants : colspan et rowspan

Ces attributs permettent de fusionner des cellules, un peu comme dans un tableur.

  • colspan : Étend une cellule sur plusieurs colonnes. La valeur est le nombre de colonnes que la cellule doit couvrir.
  • rowspan : Étend une cellule sur plusieurs lignes. La valeur est le nombre de lignes que la cellule doit couvrir.

L'exemple précédent du tableau des produits utilise déjà colspan="3" dans le pied de tableau pour que la cellule "Total Général" s'étende sur trois colonnes, laissant la dernière colonne pour le montant total.

2.3. Accessibilité des Tableaux

Pour rendre les tableaux accessibles aux lecteurs d'écran, utilisez :

  • <caption> : Définit une légende pour le tableau. Elle est placée juste après la balise <table> ouvrante.
  • scope (sur <th>): Indique si le <th> est un en-tête pour une col (colonne) ou une row (ligne).
<table summary="Ce tableau présente les ventes mensuelles par catégorie de produit.">
    <caption>Ventes Mensuelles (en €)</caption>
    <thead>
        <tr>
            <th scope="col">Mois</th>
            <th scope="col">Électronique</th>
            <th scope="col">Vêtements</th>
            <th scope="col">Livres</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Janvier</th>
            <td>15000</td>
            <td>8000</td>
            <td>3000</td>
        </tr>
        <tr>
            <th scope="row">Février</th>
            <td>12000</td>
            <td>9500</td>
            <td>4000</td>
        </tr>
    </tbody>
</table>

L'attribut summary est déprécié en HTML5, mais <caption> est toujours recommandé. L'attribut scope sur les <th> est très important pour l'accessibilité.

3. Les Liens en HTML (Hyperliens) : La Navigation sur le Web

Les liens hypertexte sont l'épine dorsale du web, permettant aux utilisateurs de naviguer d'une page à l'autre, d'un site à l'autre, ou même à une section spécifique de la même page. La balise clé pour créer un lien est <a> (anchor).

3.1. Structure de Base d'un Lien (<a>)

  • <a> : La balise d'ancrage. Le texte ou l'élément entre les balises <a> ouvrante et fermante est ce qui est cliquable.
  • href (Hypertext Reference) : L'attribut le plus important. Il spécifie l'URL (Uniform Resource Locator) de la ressource vers laquelle le lien pointe.

3.2. Liens Externes : Vers d'Autres Sites Web

Un lien externe pointe vers une ressource située sur un autre domaine ou une autre URL complète.

  • URL absolue : href doit contenir l'URL complète, y compris le protocole (http:// ou https://).
  • target="_blank" : Ouvre le lien dans un nouvel onglet ou une nouvelle fenêtre du navigateur.
  • rel="noopener noreferrer" : Recommandé avec target="_blank" pour des raisons de sécurité et de performance. noopener empêche la nouvelle page d'obtenir une référence à la page ouvrante. noreferrer empêche l'envoi de l'adresse de la page d'origine à la nouvelle page.
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Liens</title>
</head>
<body>

    <h2>Découvrez d'autres ressources :</h2>
    <p>Visitez le site <a href="https://developer.mozilla.org/fr/" target="_blank" rel="noopener noreferrer">MDN Web Docs</a> pour une documentation complète sur le développement web.</p>
    <p>Apprenez à coder gratuitement sur <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

</body>
</html>

3.3. Liens Internes (Ancre) : Navigation au Sein de la Même Page

Les liens d'ancre permettent de naviguer vers une section spécifique à l'intérieur de la même page web. Cela est très utile pour les pages longues (par exemple, des tables des matières).

  1. Créer une ancre (cible) : Donnez un attribut id unique à l'élément vers lequel vous voulez pointer.
  2. Créer le lien : Utilisez le signe # suivi de l'identifiant de l'ancre dans l'attribut href.
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liens Internes</title>
    <style>
        /* Un peu de CSS pour espacer le contenu et voir l'effet de l'ancre */
        body { font-family: sans-serif; margin: 20px; }
        .section {
            height: 600px; /* Grande hauteur pour rendre le défilement visible */
            border: 1px solid #ddd;
            margin-bottom: 20px;
            padding: 20px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>

    <h1>Table des Matières</h1>
    <ul>
        <li><a href="#introduction">Aller à l'Introduction</a></li>
        <li><a href="#listes">Aller aux Listes</a></li>
        <li><a href="#tableaux">Aller aux Tableaux</a></li>
    </ul>

    <div class="section" id="introduction">
        <h2><a id="introduction">Introduction</a></h2>
        <p>Ceci est l'introduction de notre document. Elle pourrait contenir de nombreux paragraphes pour que l'on puisse scroller.</p>
        <!-- Contenu long ici -->
        <p>Fin de l'introduction.</p>
    </div>

    <div class="section" id="listes">
        <h2><a id="listes">Les Listes en HTML</a></h2>
        <p>Cette section détaille l'utilisation des listes non ordonnées, ordonnées et de description.</p>
        <!-- Contenu long ici -->
        <p>Fin de la section sur les listes.</p>
    </div>

    <div class="section" id="tableaux">
        <h2><a id="tableaux">Les Tableaux en HTML</a></h2>
        <p>Cette section explique comment structurer des données tabulaires avec HTML.</p>
        <!-- Contenu long ici -->
        <p>Fin de la section sur les tableaux.</p>
    </div>

</body>
</html>

Lorsque vous cliquez sur "Aller à l'Introduction", le navigateur défilera automatiquement jusqu'à la div ayant l'attribut id="introduction". Notez que l'attribut id peut être placé sur n'importe quelle balise HTML.

3.4. Liens Relatifs : Navigation au Sein du Même Site

Les liens relatifs sont utilisés pour pointer vers d'autres pages ou ressources au sein du même site web. Ils sont "relatifs" à l'emplacement du fichier HTML actuel.

  • Même dossier : href="autre-page.html"
  • Dossier enfant : href="dossier/page-dans-dossier.html"
  • Dossier parent : href="../page-dans-dossier-parent.html"
  • Racine du site : href="/images/logo.png" (commence par / si le lien est relatif à la racine du site web, non au système de fichiers).
<!-- Si le fichier actuel est "index.html" dans le dossier racine -->

<!-- Lien vers une page dans le même dossier -->
<p><a href="about.html">À propos de nous</a></p>

<!-- Lien vers une page dans un sous-dossier "produits" -->
<p><a href="produits/catalogue.html">Voir le catalogue</a></p>

<!-- Lien vers une image dans un dossier "images" au même niveau que "index.html" -->
<img src="images/banner.jpg" alt="Bannière du site">

<!-- Si le fichier actuel est "produits/details.html" -->

<!-- Lien vers une page dans le dossier parent (racine du site) -->
<p><a href="../index.html">Retour à l'accueil</a></p>

<!-- Lien vers une image dans un dossier "images" au même niveau que le dossier "produits" -->
<img src="../images/produit_detail.png" alt="Image de détail du produit">

Les liens relatifs sont préférables aux liens absolus pour la navigation interne car ils rendent le site plus portable (vous pouvez déplacer le dossier du site sans avoir à modifier toutes les URL) et peuvent être plus performants.

3.5. Attribut title pour les Liens

L'attribut title fournit des informations supplémentaires sur le lien. Ce texte apparaît généralement sous forme d'info-bulle lorsque l'utilisateur survole le lien avec la souris. Il est utile pour l'accessibilité et la convivialité.

<p>Pour plus d'informations, visitez <a href="https://www.example.com" title="Accéder au site d'exemple pour plus de détails">notre site web</a>.</p>

Conclusion

Cette leçon vous a introduit aux éléments essentiels pour structurer et lier le contenu de vos pages web.

  • Les listes (<ul>, <ol>, <dl>) sont parfaites pour organiser des informations de manière sémantique, qu'elles soient ordonnées, non ordonnées ou sous forme de termes/descriptions.
  • Les tableaux (<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>) sont indispensables pour présenter des données tabulaires de manière claire et accessible, en évitant leur utilisation pour la mise en page.
  • Les liens (<a>) sont le moteur du web, permettant la navigation entre les pages de votre site (liens relatifs), vers d'autres sites (liens absolus avec target="_blank" et rel="noopener noreferrer") et même vers des sections spécifiques au sein d'une même page (liens d'ancre via l'attribut id).

Maîtriser ces concepts vous permettra de créer des pages web bien organisées, faciles à naviguer et sémantiquement riches, offrant une meilleure expérience utilisateur et une meilleure accessibilité. Continuez à pratiquer en créant vos propres pages HTML pour solidifier vos acquis !