• Home
  • HTML – Expert

HTML – Expert

  • Course level: Intermédiaire

Description

Créer des listes en HTML

Dans cette nouvelle leçon, nous verrons à quoi servent les listes, explorerons différents types de listes et apprendrons à les créer.

Qu’est-ce qu’une liste HTML ? A quoi servent les listes ?

Le HTML est un langage sémantique: il consiste à donner le sens des différents contenus d’un afin qu’ils soient correctement reconnus et affichés ainsi que les navigateurs et les moteurs de recherche “comprennent leurs pages. I.

Les listes HTML répondent exactement à cela car elles vous permettent d’organiser votre contenu.
Ce contenu peut être hiérarchisé ou non.

Les listes HTML sont constituées de différents éléments de liste.
Visuellement une liste va ressembler à ceci :

• Premier élément de ma liste,

• Deuxième élément de ma liste,

• Troisième élément de ma liste.

Les listes vont ainsi nous permettre de lister plusieurs éléments en les groupant sous un dénominateur commun qu’est la liste en soi.
Par conséquent, les navigateurs et les moteurs de recherche trouvent des relations entre différents éléments de liste.

Par conséquent, la liste serait très utile pour organiser et séquencer nos documents.

De plus, nous utiliserons également HTML pour créer la navigation.

Il existe deux principaux types de listes ordonnées et de listes non ordonnées.

Il existe également un troisième type de liste, un type de liste spécifique et moins utilisé: la liste de définitions.

Les listes non ordonnées

Une liste non ordonnée est utile pour lister sans hiérarchie ni logique.

Par exemple, si je voulais lister les mots «pomme» et «guitare» sans contexte, j’utiliserais la liste non ordonnée.

En effet, on ne peut définir aucun concept de hiérarchie ou de dépendance entre ces trois termes

Pour créer une liste non ordonnée, nous aurons besoin de l’élément ul qui représentera la liste elle-même.

Ainsi qu’un élément li pour chaque nouvel élément.

Comme vous pouvez le voir, nous allons mettre l’élément de liste li.

Cela a du sens puisque les éléments de la liste «appartiennent» à une liste particulière.

Visuellement, les puces s’ajoutent automatiquement avant chaque élément d’une valeur par défaut non ordonnée.

Nous pourrons changer ce comportement et personnaliser l’apparence de la liste en CSS spécial grâce aux propriétés qui seront étudiées plus tard dans ce cours.

Les listes ordonnées

Contrairement aux listes non ordonnées, nous utiliserons soit un concept d’ordre ou de logique, soit une hiérachie entre les éléments de la liste.

Par exemple, si nous voulons lister les étapes naturelles de la vie ou pour créer un résumé, nous avons généralement des listes ordonnées.

Pour créer une liste dite “ordonnée”, nous allons cette fois-ci à l’élément qui définit la liste par lui-même et li éléments pour chaque élément de la liste.

Comme vous pouvez le voir, cette fois, les nombres sont affichés avant chaque élément de la liste.

Encore une fois, nous pouvons changer ce comportement pour différents types de puces en utilisant la propriété CSS

Les attributs HTML des listes ordonnées

En plus des propriétés CSS, nous devrions pouvoir utiliser HTML avec nos listes organisées pour les modifier.

Ici il faut absolument comprendre que ces attributs n’existent pas en premier car HTML n’est pas concerné par la présentation, mais en présence de CSS.

Cependant, les languages sont en constante évolution, c’est pourquoi son rôle n’est pas encore fixé et certains languages aujourd’hui ne peuvent pas faire certaines choses.

Telles sont les principales raisons de l’existence de celles-ci que je vais vous présenter par souci d’exhaustivité.

N’oubliez pas que vous devez toujours donner la priorité à l’utilisation de CSS pour votre mise en page, comme le peut le contenu HTML.

Commençons par la propriété type qui nous permet d’apparaître les puces d’une liste ordonnée.

Cette propriété existait auparavant pour les propriétés hors liste, mais elle ne peut pas être utilisée pour ces propriétés.

Il est possible qu’il soit également déprécié dans le futur pour les listes ordonnées, car HTML ne devrait pas se soucier du formatage.

Pour cette raison, je ne recommande pas d’utiliser la propriété et d’utiliser plutôt CSS.

Cependant, je présente toujours des valeurs que vous pourrez fournir dans un souci d’exhaustivité:

• ” 1 ” : valeur par défaut.

Les numéros apparaissent avant chaque élément de la liste

• ” I ” : Des chiffres romains majuscules apparaitront devant chaque élément de la liste ;

• « i » : Des chiffres romains minuscules apparaitront devant chaque élément de la liste ;

• « A » : Des lettres majuscules apparaitront devant chaque élément de la liste ;

• « a » : Des lettres minuscules apparaitront devant chaque élément de la liste.

Voici également un exemple d’utilisation de cette propriété :

Notez que par défaut, le premier élément de l’alphabet est mis en surbrillance avec le chiffre «1» comme première lettre de l’alphabet «a».

Nous serons en mesure de modifier ce comportement et de démarrer la liste à partir d’un point sélectionné en utilisant la valeur ou la valeur de départ HTML.

La propriété start nous permettra de choisir un point pour notre liste triée.

Par conséquent, nous le placerons dans la balise d’ouverture de l’élément qui représente la liste.

Cependant, la propriété value nous permettra d’évaluer la valeur de chaque puce d’élément de liste.

On va pouvoir ajouter un attribut value pour chaque élément .

Dans le cas où certains éléments li n’ont aucune valeur, la valeur de leur puce augmentera par rapport à la valeur de la puce précédente.

Notez que dans les cas où la propriété start est spécifiée pour la liste et la propriété value est le premier élément de la liste, la valeur plus la propriété est prioritaire et exécute sa valeur.

Voici quelques exemples d’utilisation de ces propriétés :

Enfin, nous pouvons inverser le nombre de puces d’une liste ordonnée en utilisant la propriété reverse.

Le premier élément de la liste sera alors le plus élevé, puis nous supprimons le nouvel élément jusqu’à ce qu’il atteigne par défaut “1” ou “a” pour le dernier élément de la liste.

L’attribut reversed ne possède qu’une valeur qui est reversed .

Puisque reversed n’a qu’une seule valeur, cela est évident et peut être ignoré.

Les listes de définitions

La liste de définitions, également appelée «liste de description», nous permettra de lister les termes et définitions ou descriptions de chacun de ces termes.

Pour créer une liste de définitions, nous utiliserons ce dl signifiant “description list” ou liste de description “en français pour la liste elle-même, puis chaque élément et à la fin le même élément est pour la définition / de lui-même.

N’oubliez pas que lors de la création d’une liste de définitions, placez toujours le terme prédéfini avant sa définition, avant l’élément.

C’est généralement assez intuitif.

L’imbrication de listes

Enfin, notez qu’il est possible d’imbriquer une liste dans une autre en suivant quelques règles simples.

Pour imbriquer une liste dans une autre, définissez simplement une nouvelle liste dans l’une des autres listes, juste avant la balise de fermeture de l’élément.

Comme vous pouvez le voir, il s’avère qu’il est bon d’indenter son code pour ne pas se perdre dans notre liste!

Notez que vous pouvez imbriquer autant de listes que vous le souhaitez.

Pour plus de lisibilité, cependant, vous ne devez créer que les niveaux supplémentaires de la liste, nécessaires pour répondre à vos besoins.

Sujets pour ce cours

3 Leçons

HTML – Expert

Créer des liens en HTML
Envoi de mails et téléchargement de fichiers
Compatibilité, support et validation du code

À propos du formateur/de la formatrice

0 (0 notations)

12 Cours

1 apprenants

Gratuit