×
![]()
Bienvenue dans une plongée approfondie dans le monde du développement HTML et Web avec serpulse.com. Le sujet d'aujourd'hui concerne la balise LI en HTML. Si vous êtes un développeur en herbe ou même un professionnel chevronné, comprendre comment utiliser cette petite balise peut faire une grande différence dans la qualité et la fonctionnalité de vos sites Web.
La balise LI signifie « List Item » et elle est utilisée conjointement avec les balises UL (Unordered List) ou OL (Ordered List) pour créer des listes sur votre site Web. Les listes sont essentielles pour organiser les informations, rendre le contenu plus lisible et guider les utilisateurs à travers votre site. Considérez LI comme les éléments constitutifs de ces structures de liste.
Pour créer une liste non ordonnée à l'aide de la balise LI, vous la structureriez comme ceci :
- Premier élément
- Deuxième élément
- Troisième élément
Cela affichera une liste à puces sur votre page Web. Pour une liste ordonnée, remplacez simplement la balise UL par une balise OL :
- Premier élément
- Deuxième élément
- Troisième élément
Cela produira une liste numérotée à la place.
Les listes jouent un rôle crucial dans la conception Web pour plusieurs raisons. Avant tout, ils facilitent la digestion des informations. Les utilisateurs peuvent parcourir rapidement les listes pour trouver ce qu'ils recherchent sans avoir à lire des paragraphes de texte. Deuxièmement, les listes aident à la navigation. De nombreux sites Web utilisent des listes dans leurs en-têtes ou pieds de page pour créer des menus qui guident les utilisateurs vers différentes sections du site. Enfin, les moteurs de recherche adorent les listes car elles offrent une structure et une organisation claires, ce qui peut améliorer les performances SEO de votre site Web.
L'un des aspects les plus puissants de l'utilisation de la balise LI est sa capacité à être stylisée à l'aide de CSS. Vous pouvez modifier les puces ou les chiffres, ajuster l'espacement, la taille de la police, la couleur et même ajouter des images ou des icônes à côté de chaque élément de la liste. Voici un exemple de la manière dont vous pouvez styliser une liste non ordonnée :
ul {
type de style de liste : carré ;
remplissage à gauche : 20 px ;
}
li {
taille de police : 18 px ;
marge inférieure : 5 px ;
}
Cela donnerait à votre liste des puces carrées et augmenterait la taille de la police de chaque élément tout en ajoutant un espace entre eux. Pour les listes ordonnées, vous pouvez spécifier différents types de numérotation :
ol {
type de style de liste : alpha supérieur ;
}
Cela afficherait les éléments de la liste avec des lettres alphabétiques majuscules au lieu de chiffres.
Au-delà des simples listes à puces et numérotées, il existe de nombreuses façons avancées d'utiliser la balise LI. Une méthode populaire consiste à créer un menu déroulant. En imbriquant des balises UL supplémentaires dans un LI, vous pouvez créer des structures de navigation à plusieurs niveaux qui apparaissent lorsque les utilisateurs les survolent :
Une autre technique avancée consiste à utiliser la balise LI en conjonction avec JavaScript pour la génération de contenu dynamique. Par exemple, vous pouvez créer un quiz interactif dans lequel les utilisateurs cliquent sur les éléments de la liste pour révéler les réponses ou progresser dans les questions.
Lorsque vous intégrez la balise LI dans vos projets Web, il est important de suivre les bonnes pratiques pour garantir l'accessibilité et la convivialité :
La balise LI, bien qu'apparemment simple, est un outil puissant dans le développement Web. En maîtrisant ses options d'utilisation et de style, vous pouvez créer des sites Web plus organisés, accessibles et attrayants. Que vous créiez un petit blog personnel ou un grand site d'entreprise, n'oubliez pas qu'une utilisation appropriée des listes peut grandement améliorer votre expérience utilisateur. Restez à l'écoute pour plus d'informations et de didacticiels de serpulse.com alors que nous continuons à explorer ensemble le monde du HTML et de la conception Web.
Bon codage !
| Position | Domaine | Page | Actes |
|---|---|---|---|
| 1 | li-auto-russia.ru | / | |
|
URL complète
Titre
Li Auto (Lixiang) купить в России - электромобиль Ли Авто ...
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
Привезём Li в Россию на зака з. Мы предлагаем доставку автомобилей бренда Li (LiXiang) в Россию, предлагая широкий выбор моделей и комплектаций. |
|||
| 2 | developer.mozilla.org | /ru/docs/web/html/re... | |
|
Titre
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
23 июн. 2025 г. — HTML-элемент используется для создания элементов списка . Он также должен находиться в родительском элементе |
|||
| 3 | borishof-volt.ru | /cars/lixiang/ | |
|
URL complète
Titre
Электрокар LiXiang в Москве
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
Li Auto (прежнее название бренда LiXiang ) – марка новых люксовых гибридных автомобилей, появившаяся на рынке в 2015 году. Автомобили уже завоевали широкую ... |
|||
| 4 | ru.wikipedia.org | /wiki/%d0%91%d1%83%d... | |
|
Titre
Букины
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
«Бу́кины» — российский комедийный телесериал 2023 года , продолжение ситкома «Счастливы вместе». Главные роли в нём сыграли Виктор Логинов, Наталья Бочкарёва, ... |
|||
| Position | Domaine | Page | Actes |
|---|---|---|---|
| 1 | w3schoolsrus.github.io | /tags/tag_li.html | |
|
URL complète
Titre
HTML Тег < li >. Справочник тегов. W3Schools на русском
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
HTML тег li определяет элемент (пункт) списка, используется в упорядоченных и неупорядоченных списках, в меню списках. |
|||
| 2 | doka-guide.vercel.app | /html/li/ | |
|
URL complète
Titre
< li > — HTML — Дока
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
< li > по умолчанию имеет блочные стили, поэтому пункты будут располагаться друг под другом. |
|||
| 3 | m-elek.h1n.ru | /web/html/html-list.... | |
|
URL complète
Titre
HTML. Списки
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
Для установки маркированного списка используются тэги
|
|||
| 4 | hcdev-ru.pages.dev | /html/li/ | |
|
URL complète
Titre
< li > HTML и CSS с примерами кода
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
Атрибут value устанавливает номер, с которого будет начинаться список. value применяется только для нумерованных списков, когда элемент < li ... |
|||
| 5 | developer.mozilla.org | /ru/docs/web/html/re... | |
|
Titre
< li > - HTML | MDN | MDN Web Docs
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
Закрывающий тег может быть опущен, если за элементом непосредственно следует другой элемент < li > или если в родительском элементе нет больше... |
|||
| 6 | dan-it.gitlab.io | /fe-book/programming... | |
|
URL complète
Titre
Основы языка разметки гипертекста · GitBook
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
Отдельные элементы списка должны быть заключены в тег < li > . |
|||
| 7 | fructcode.com | /ru/blog/what-is-ord... | |
|
Titre
Что такое маркированные списки(Unordered Lists)...
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
Unordered list ul li example. В HTML для создания маркированного списка обычно используется специальных тег
|
|||
| 8 | htmlacademy.ru | /blog/html-tags/li | |
|
URL complète
Titre
li — элемент списка — журнал «Доктайп» | HTML Academy
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
Тег < li > используется для создания элементов списка. Тег может быть вложен в элемент маркированного списка —
|
|||
| 9 | skillbox.ru | /media/code/vyerstka... | |
|
Titre
HTML-списки (list) для новичков
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
В него помещаются пункты, которые оборачиваются в теги < li >. Рассмотрим на примере процесс создания простого маркированного списка из пяти... |
|||
| 10 | puzzleweb.ru | /html/tag_li.php | |
|
URL complète
Titre
Элемент < li > (элемент списка) | HTML
Dernière mise à jour
N / A
Autorité de la page
N / A
Trafic:
N / A
Liens retour:
N / A
Partages sociaux:
N / A
Temps de chargement:
N / A
Aperçu de l'extrait:
Элемент < li > используется в качестве дочернего элемента в следующих трёх элементах |
|||