Premières balises de contenu

Avertissement

Cette page vous montre les balises principales. Il en existe bien plus...
>>N'hésitez pas à consulter une doc de référence. Vous avez un aperçu des balises existantes dans le menu latéral de gauche.

Comment choisir les balises ?

Les balises doivent identifier le contenu affiché. Est-ce un titre, un paragraphe, une citation, une liste, etc. ? Une fois que le contenu est identifié, recherchez la balise la plus adéquate pour le représenter.

Exemple :

  <p>Activités</p>
  <p>Voici mes activités favorites :</p>
  <p>Sport</p>
  <p>Basket</p>
  <p>Natation</p>
  <p>Jeux</p>
  <p>Fortnite</p>
  <p>Doom</p>

  

    <h1>Activités</h1>
    <p>Voici mes activités favorites :</p>
    <ul>
      <li>Sport 
        <ol>
          <li>Basket</li>
          <li>Natation</li>
        <ol>
      <li>
      <li>Jeux 
        <ol>
          <li>Fortnite</li>
          <li>Doom</li>
        <ol>
      <li>
    <ul>

Pour vous aider, voici les questions à vous poser :

Que représente le contenu ?

Il est important d'identifier la nature du contenu : est-ce un titre, un paragraphe, une citation, une liste, etc. ? Par exemple, un titre principal utilisera une balise <h1>, tandis qu'un paragraphe simple utilisera <p>.
Quelle est la hiérarchie de l'information ?

Les balises de titre (<h1> à <h6>) permettent de structurer l'information en niveaux, facilitant ainsi la lecture par les utilisateurs et les moteurs de recherche.
S'agit-il d'une information visuelle ou fonctionnelle ?

Certaines balises, comme <strong> et <em>, ajoutent de la signification au texte, tandis que d'autres, comme <div> ou <span>, sont purement structurelles et n'apportent aucune sémantique.
Le contenu doit-il être interactif ?

Si le contenu nécessite une interaction utilisateur (boutons, formulaires), des balises spécifiques comme <button>, <form>, ou <input> sont nécessaires pour assurer accessibilité et fonctionnalité.

La sémantique est un élément très important. Nous y reviendrons en datail dans le chapitre suivant

Titre

Les éléments <h1><h2>... représentent des titres. Il y a 6 niveaux de titres.

<h1> correspond au niveau le plus haut et <h6> correspond au niveau le plus faible.

Il ne peut y avoir qu'un seul titre principal dans une page, représenté par un <h1>

La hiéarchie des titres doit être respectée. Vous ne pouvez donc pas avoir de <h3> si vous n'avez pas de <h2>, vous ne pouvez pas avoir de <h2> si vous n'avez pas de <h1>, ...

Ajoutez 6 niveaux de titre (<h1> jusque <h6>). Que constatez-vous visuellement ?

Solution

Plus le niveau du titre est haut, plus la taille de la police est grande. L'erreur courante lorsqu'on début est de choisir le niveau du titre en fonction de sa taille. Grande erreur ! En effet, le niveau des titres permet de structurer le contenu. Les lecteurs d'écran utilisent cette hiérarchie pour naviguer efficacement à travers le contenu, améliorant ainsi l'accessibilité. Les moteurs de recherche utilisent ces balises pour comprendre la structure et l'importance du contenu, ce qui peut influencer le classement des pages.

Toute page doit possèder un titre principale <h1> et les titres suivants respectront la hiérachie. Et ne vous tracassez pas du visuel, celui-ci sera réalisé en CSS.

See the Pen html : 6 titres by Flolec (@Flolec) on CodePen.

Paragraphe

See the Pen Untitled by Flolec (@Flolec) on CodePen.

Remarquez, par défaut, la balise provoque un retour à la ligne. Résistez à la tentation d'englober des éléments avec des <p> uniquement pour réaliser des retours à la ligne...

La balise <p> doit être utilisée pour englobler du contenu représentant des paragraphes.

Exemple avec une énumération de données.

Don't do this

  Liste de courses
  <p>Pomme</p>
  <p>Poire</p>
  <p>Pêche</p>

Do this

  Liste de courses
  <ul>
    <li>Pomme</li>
    <li>Poire</li>
    <li>Pêche</li>
  </ul>

Liste

Liste ordonnée

See the Pen Html : liste ordonnée by Flolec (@Flolec) on CodePen.

Liste non ordonnée

Listes imbriquées

Erreur classique : les enfants directs du <ul> doivent être obligatoirement des <li>. Les sous-listes doivent donc être incluses dans les balises <li>…</li> de la liste principale.

Don't do this

  <ul>
    <li>Cerise</li>
    <li>Pomme</li>
      <ul>
        <li>Gala</li>
        <li>JonaGold</li>
      </ul>
    <li>Poire</li>
    <li>Pêche</li>
  </ul>

Do this

  Liste de courses
  <ul>
    <li>Cerise</li>
    <li>Pomme
      <ul>
        <li>Gala</li>
        <li>JonaGold</li>
      </ul>
    </li>
    <li>Poire</li>
    <li>Pêche</li>
  </ul>

Strong (gras)

La balise <strong> indique que le texte a une importance particulière. Cela se traduit généralement par un affichage en gras.

Emphase (italique)

La balise <em> indique un texte sur lequel on veut insister. Cela se traduit généralement par un affichage en italique.

Tip: On peut bien sûr cumuler les balises

Image

<img src="/chemin/fichier.ext" alt="texte alternatif" width="100" height="50" >

L'attribut src: le chemin de l'image...
L'attribut alt: obligatoire et contient le texte qui sera affiché si l'image ne peut être chargée. Ce texte est également important pour les non-voyants.
Les attributs width et height : ils permettent de spécifier en pixels la taille de l'image. Pour accélérer le rendu de la page, il est recommandé de spécifier les dimensions de l'image.

Remarque importante : Pour assurer la qualité du rendu des images et éviter un temps de chargement trop important, les images d'un site doivent être redimensionnées aux dimensions finales d'affichage à l'aide d'un logiciel de traitement d'images (Photoshop, Gimp, ...). Il est aussi nécessaire d'utiliser le meilleur format de fichier pour les images; ainsi pour les plus courants:

PNG: (Portable Network Graphic) format compressé sans perte, supporte la transparence, idéal pour logo, dessin,...
JPG: (Joint Photographic Expert Group) format très compressé pour photo, pas de transparence, perte de qualité à la sauvegarde,
GIF: (Graphics Interchange Format) format peu compressé sans perte, supporte la transparence et les animations, idéal pour image avec peu de dégradés de couleurs, animations simples.

Rappel: Évitez les espaces et les caractères accentués dans les noms de dossiers et noms de fichiers.

Hyperlien

<a href="url" target="_blank"> élément cliquable </a>

L'attribut href: l'url vers la ressource vers laquelle pointe le lien
L'attribut target: indique si le lien sera ouvert dans un nouvel onglet (_blank). Si attribut omis, le lien est ouvert dans le même onglet.
L'attribut title: texte d'info-bulle qui apparait au survol du lien

Tip : L'élément cliquable peut être un texte, une image, un bouton, ....

Saut de ligne

<br>

Affiche un saut de ligne (en général dans un paragraphe).

Remarque importante : N'utilisez pas la balise <br> pour espacer les éléments ! Toutes les mises en page seront réalisées via les CSS.

Les tableaux

Un tableau <table> est conçu ligne <tr> par ligne. Chaque ligne contient des cellules <td> . Les cellules d'entête <th> sont placées généralement dans la première ligne du tableau.

Tip: Sans css, il n'est pas possible d'afficher des bordures, des espaces... Attention à ne pas utiliser des attributs dépréciés.

Remarque importante : les tableaux ne sont pas utilisés pour réaliser des mises en pages. Les tableaux sont utilisés pour afficher des données tabulaires.

Les entités HTML

Deux formats existent :

par code UTF-8 : le signe égal peut être affiché par = (code décimal) ou = (code hexadécimal)
par mot-clef: le signe égal peut être affiché par =

Tous les caractères peuvent être écrits grâce aux entités HTML. Les entités commencent toujours par "&" et se terminent par ";". Les entités sont généralement utilisées pour afficher des caractères réservés (qui seraient autrement interprétés comme du code HTML) et des caractères invisibles (comme des espaces insécables).

Vous pouvez exploiter cette liste des entités HTML.

Comparez les codes html et les rendus :