Structurer des informations complexes sur une page web peut être un défi.
Sans une organisation claire, les utilisateurs peuvent se perdre, ce qui nuit à l’expérience utilisateur.
Les listes HTML offrent une solution efficace pour organiser et présenter des informations de manière logique et accessible.
Lancez votre carrière de développeur web avec une formation pratique.
Listes HTML 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.
Listes HTML 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 :
Listes HTML 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 .
Balisage HTML et CSS pour listes :
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?
- pour le conteneur de liste et
- pour les éléments, ces listes sont souvent utilisées pour des éléments de même niveau d’importance. Les puces apparaissent automatiquement devant chaque élément pour une séparation visuelle claire. Ces listes sont idéales quand l’ordre n’a pas d’importance et peuvent être personnalisées en CSS pour changer l’apparence des puces.
Comment créer une liste ordonnée en HTML?
- pour définir la liste et utilisez
- pour chaque élément. Les éléments seront numérotés automatiquement, généralement à partir de 1, mais l’attribut ‘type’ permet de personnaliser le style de numérotation, comme des chiffres romains ou des lettres. Cette liste est idéale pour les éléments nécessitant un ordre précis, permettant une présentation claire et structurée.
Qu'est-ce qu'une liste imbriquée?
Comment personnaliser les listes en HTML avec CSS?
Pourquoi utiliser des listes en HTML?
Conclusion
Les listes en HTML sont des outils puissants pour organiser le contenu web. Quelle est votre méthode préférée pour structurer des informations complexes?
