Comment insérer un filet horizontal avec la balise <hr> ?
Le filet horizontal permet de séparer visuellement différentes sections de votre contenu web. Il s'insère très simplement grâce à la balise orpheline <hr>.
À noter que dans le HTML5 moderne, l'attribut noshade est obsolète. Il est préférable d'utiliser le CSS pour styliser l'apparence de votre trait (couleur, ombre, épaisseur). Cela permet de séparer la structure du contenu de sa mise en forme.
Voici les attributs que vous pouvez ajouter pour personnaliser votre filet :
<hr size=5 width="10%" align=left noshade color="#000000">
- size : définit l'épaisseur du trait en pixels.
- width : précise la largeur du filet (en pixels ou en pourcentage).
- align : gère l'alignement du filet (valeurs possibles :
left,center,right). - noshade : un attribut booléen pour supprimer l'effet d'ombre 3D par défaut.
- color : modifie la couleur du trait (code hexadécimal ou nom de couleur).
Comment créer des listes numérotées et à puces en HTML ?
Pour organiser l'information de manière claire, HTML propose trois types de listes principales : les listes numérotées, les listes à puces et les listes de définitions. Voyons comment maîtriser la numérotation.
Les listes numérotées : balises <ol> et <li>
On utilise les balises <ol></ol> (pour Ordered List, soit liste ordonnée) pour définir le conteneur de la liste. Ensuite, chaque élément de la liste doit être placé entre des balises <li></li> (pour List Item).
L'attribut type est très pratique pour changer le style de numérotation sans passer par le CSS.
Exemple 1 — Numérotation classique (1, 2, 3...) :
<ol>
<li>Premier point</li>
<li>Deuxième point</li>
<li>Troisième point</li>
</ol>
Résultat :
1. Premier point
2. Deuxième point
3. Troisième point
Exemple 2 — Lettres majuscules (TYPE="A") :
<ol type="A">
<li>Option A</li>
<li>Option B</li>
</ol>
Résultat :
A. Option A
B. Option B
Exemple 3 — Lettres minuscules (TYPE="a") :
<ol type="a">
<li>Première étape</li>
<li>Deuxième étape</li>
</ol>
Résultat :
a. Première étape
b. Deuxième étape
Exemple 4 — Chiffres romains majuscules (TYPE="I") :
Idéal pour créer des plans structurés ou des sections hiérarchiques.
<ol type="I">
<li>Introduction</li>
<li>Développement</li>
</ol>
Résultat :
I. Introduction
II. Développement
Exemple 5 — Chiffres romains minuscules (TYPE="i") :
<ol type="i">
<li>Chapitre un</li>
<li>Chapitre deux</li>
</ol>
Résultat :
i. Chapitre un
ii. Chapitre deux
