Aller au contenu

Topic-B

La balise <main>

Description

La balise <main> est une balise structurelle introduite avec HTML5. Elle identifie le contenu principal d’une page web, c’est-à-dire celui qui est directement lié au sujet principal du document.

Caractéristiques principales

  • Ne doit pas être imbriquée dans d'autres balises structurelles comme <header>, <footer> ou <aside>.
  • Une page ne doit contenir qu’un seul élément <main>.

Compatibilité

main-1.png

Exemples

<header>Gecko facts</header>

<main>
  <p>
    Geckos are a group of usually small, usually nocturnal lizards. They are
    found on every continent except Antarctica.
  </p>

  <p>
    Many species of gecko have adhesive toe pads which enable them to climb
    walls and even windows.
  </p>
</main>

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Exemple avec main</title>
  </head>
  <body>
    <header>
      <h1>Bienvenue</h1>
    </header>
    <main>
      <h2>Contenu principal</h2>
      <p>Ceci est le contenu principal de la page web.</p>
    </main>
    <footer>
      <p>&copy; 2025 MonSiteWeb</p>
    </footer>
  </body>
</html>

La balise <img>

Description

L'élément HTML <img> permet d'intégrer une image dans un document.

Utilisation

L'attribut src est obligatoire, et contient le chemin vers l'image qu'on veut intégrer. L'attribut alt est obligatoire et contient une description textuelle de l'image, ce qui est extrêmement utile. En effet, les outils de lecture d'écran utilisent cette description pour la lire afin que les personnes sachent ce que l'image représente. Ce texte alternatif sera également affiché sur la page si l'image ne peut pas être chargée (par exemple s'il y a des erreurs réseau, du blocage de contenu ou un lien périmé). Il existe de nombreux autres attributs :

Le contrôle du référent et de la politique de gestion des ressources d'origines multiples (CORS) avec les attributs crossorigin et referrerpolicy. width et height qui permettent de définir la taille intrinsèque de l'image, lui permettant ainsi de prendre l'espace nécessaire avant son chargement (évitant ainsi d'avoir des décalages indésirables lors du chargement de la page). Des indications responsives avec sizes et srcset (voir également l'élément et le tutoriel sur les images adaptatives).

Compatibilité

compatibility-img.png

Exemples

<img
  class="fit-picture"
  src="/media/cc0-images/grapefruit-slice-332-332.jpg"
  alt="Grapefruit slice atop a pile of other slices"
/>

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Exemple avec img</title>
  </head>
  <body>
    <h1>Illustration d'une image</h1>
    <!-- Image avec attributs alt et titre -->
    <img
      src="https://via.placeholder.com/150"
      alt="Image de remplacement"
      title="Exemple d'image"
    />
    <!-- Image responsive -->
    <img
      src="https://via.placeholder.com/600x300"
      alt="Image large"
      style="width: 100%; height: auto;"
    />
  </body>
</html>