Organiser efficacement le contenu web peut être un défi sans structure appropriée.
Sans une bonne organisation, les utilisateurs peuvent se perdre, rendant l’expérience frustrante.
Les listes HTML offrent une solution simple et efficace pour structurer visuellement le contenu, que l’article explore en détail.
Lancez votre carrière de développeur web avec une formation pratique.
HTML : Listes non ordonnées
Dans le langage de balisage HTML , les listes sont un élément essentiel , très utilisé aussi bien dans du contenu textuel que structurel ; ils apportent de la clarté et l’ordre à nos document .
Il existe deux grands types de listes en HTML : les listes ordonnées et les listes non-ordonnées. Dans cette première partie nous allons découvrir les listes non ordonnées.
Les listes non-ordonnées vont être utiles pour lister des éléments dans un ordre arbitraire, sans hiérarchie numérique, ni ordre logique.
Pour créer une liste non-ordonnée, nous allons commencer par la balise <ul> (qui veut dire « unordered list ») qui va représenter la liste en soi ainsi que la balise <li> (« list item » ) pour chaque nouvel élément de liste , c’est-à-dire on va placer les éléments li à l’intérieur de l’élément de liste ul .
Voici un exemple des listes non-ordonnées en HTML :
Voici le résultat :
Les puces (les points noirs) apparaissent automatiquement devant chaque élément d’une liste non-ordonnée par défaut.
Ces puces sont utilisées pour indiquer visuellement chaque élément de la liste, offrant une séparation claire entre eux. Nous allons pouvoir changer ce comportement et personnaliser l’apparence de nos listes en CSS que nous étudierions plus tard.
HTML : Listes ordonnées
Au contraire des listes non-ordonnées, les listes ordonnées sont utilisées pour afficher des éléments dans un ordre séquentiel ou numérique.
Les éléments de la liste ne sont pas affichés avec des puces par défaut, mais ils seront numérotés automatiquement.
Par défaut, les éléments sont numérotés en séquence, commençant généralement par 1.
Pour créer une liste ordonnée, nous allons cette fois-ci utiliser la balise <ol> (« ordered list ») pour définir la liste en soi et à nouveau des éléments <li> pour chaque élément de la liste.
Voici un exemple des listes ordonnées en HTML :
Voici le résultat :
L’attribut ‘type’ va nous permettre de changer l’apparence des puces d’une liste ordonnée, et spécifier le type de numérotation ou de style des marqueurs utilisés. Notez bien que cet attribut est facultatif, car les navigateurs utilisent une valeur par défaut si elle n’est pas spécifiée.
Voici quelques valeurs de l’attribut type, et leurs significations :
- type = « 1 » :valeur par défaut. Des chiffres apparaitront devant chaque élément de la liste .
- type = »I » :Des chiffres romains majuscules apparaitront devant chaque élément de la liste .
- type= « I » :Des chiffres romains minuscules apparaitront devant chaque élément de la liste .
- type= « A » :Des lettres majuscules apparaitront devant chaque élément de la liste .
- type= »a » :Des lettres minuscules apparaitront devant chaque élément de la liste .
Voici un exemple pour utiliser cette attribut :
Voici le résultat :
HTML : Listes imbriquées
Dans cette partie nous allons découvrir le concept des listes imbriquées qui sont des listes qui contiennent d’autres listes à l’intérieur de leurs éléments de liste. Elles sont couramment utilisées pour représenter des structures hiérarchiques où chaque élément principal peut avoir des sous-éléments.
Pour imbriquer une liste dans une autre, il suffit de définir une nouvelle liste à l’intérieur de l’un des éléments d’une autre liste, juste avant la balise fermante de cet élément.
Voici le résultat de l’exemple précedant :
Voici un autre exemple ou vous pouvez ajouter aussi un attributs à votre liste imbriqués :
On obtient le résultat suivant :
Notez bien qu’il est très important de bien indenter son code afin de ne pas se perdre au milieu de nos listes .
Applications des listes HTML
Dans cette dernière partie des listes, on va faire une application de ce que nous avons vu précédemment pour bien assimiler ce qu’on vient d’apprendre.
On va créer la page suivante :
Premiérement , commencer par mettre en place votre texte dans l’IDE afin de le structurer au fur et à mesure , comme ceci :
Voici le résultat de cette première étape :
Ensuite nous allons définir le titre principal, la liste et mettre en place ses items et les paragraphes de notre texte , comme ceci :
Voici le résultat :
Maintenant , on va transformer la liste en ordonnées avec la balise <ol> , et on va ajouter l’attribut type= »I » pour avoir la numérotation en romain , et aussi les éléments de la liste vont être affiches en gras avec la balise strong qu’on a vu précédemment .
Voici le résultat final :
Pour résumer, Les listes en HTML sont des éléments importants pour organiser le contenu de manière logique et structurée sur une page web. Elles disposent de deux options principales : les listes non ordonnées pour présenter les éléments sans ordre spécifique, et les listes ordonnées lorsque l’ordre des éléments est important. Les listes peuvent également être imbriquées pour créer des structures hiérarchiques et claires. Maintenant, passons à l’étude des liens, un autre élément essentiel pour la navigation et l’interaction sur le web.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Qu'est-ce qu'une liste non ordonnée en HTML ?
- et chaque élément est défini à l’intérieur avec la balise
- . Les éléments sont généralement précédés de puces, qui peuvent être personnalisées avec du CSS. Ce type de liste est idéal pour les éléments sans hiérarchie numérique, comme les points à puces classiques sur les sites web.
Comment créer une liste ordonnée en HTML ?
- pour ouvrir la liste et
- pour chaque élément. Les éléments sont affichés avec une numérotation automatique. Vous pouvez personnaliser cette numérotation avec l’attribut ‘type’, qui permet d’utiliser des chiffres, des lettres ou des chiffres romains. Ce format est utile lorsque l’ordre des éléments est important, comme dans des instructions ou des classements.
Comment imbriquer des listes en HTML ?
- ou
- existant. Cela est particulièrement utile pour représenter des sous-catégories ou des ensembles d’éléments liés dans une hiérarchie visuelle.
- à l’intérieur d’un élément
Quels sont les types d'attributs possibles pour les listes ordonnées ?
Pourquoi utiliser des listes en HTML ?
Conclusion
Les listes HTML sont un outil puissant pour structurer le contenu web. Quelle nouvelle idée pourriez-vous appliquer à vos projets web en utilisant ces listes ?
