Pourquoi devrais-je utiliser «li» au lieu de «div»?

Je ne sais pas pourquoi j'ai besoin d'utiliser ul-li plutôt que d'utiliser simplement des divs lors de la liste des éléments. Je peux faire en sorte que les deux se ressemblent exactement, alors quel est l'avantage fonctionnel de créer une liste non ordonnée par rapport à l'alignement de divs?

Pour l'exactitude sémantique. HTML a la capacité d'exprimer des listes de choses, et il aide le robot Google, les lecteurs d'écran et toutes sortes d'utilisateurs qui ne se soucient pas uniquement de la présentation du site à mieux comprendre votre contenu.

Je ne sais pas pourquoi j'ai besoin d'utiliser ul-li plutôt que d'utiliser simplement les divs lors de la liste des éléments. Je peux faire en sorte que les deux se ressemblent exactement

Qu'il y a le mot clé dans votre question: «regardez». Pouvez-vous également les faire taper de la même manière pour les personnes aveugles utilisant un lecteur Braille? Pouvez-vous les faire sonner de la même manière pour les personnes aveugles à l'aide d'un synthétiseur de synthèse vocale? Pouvez-vous toujours leur donner la même apparence pour les personnes malvoyantes en utilisant des feuilles de style utilisateur CSS personnalisées côté client?

Ce mot, «regardez», est un mot très dangereux - lorsque vous l'utilisez en relation avec HTML, toutes les alarmes devraient se déclencher dans votre tête. HTML est un langage pour décrire la structure sémantique d'un document hypermédia. Une structure sémantique ne possède un « look », c'est un concept abstrait.

Même si vous ne vous souciez pas de tout ce hocuspocus sémantique et que vous ne vous souciez pas des aveugles, considérez ceci: Google, Yahoo, MSN et Cie n'ont pas d'yeux, ils ne "regardent" pas votre CSS rendu .

En utilisant un balisage sémantiquement correct, vous intégrez des informations supplémentaires dans votre texte. En utilisant ul / li, vous communiquez à l'application consommatrice que l'information est une liste, et pas seulement "quelque chose" (qui sait quoi) qui est un texte à l'intérieur d'un élément arbitraire.

Réponse directe à votre question: L'avantage fonctionnel est que les divs ne signifient pas grand-chose en eux-mêmes, alors que ul lis signifie explicitement "ceci est une liste d'éléments non / ordonnée".

Le terme «sémantique» fait référence à la manière dont vous utilisez la signification inhérente des structures existantes pour créer une signification explicite. Le HTML est composé de balises qui signifient certaines choses par elles-mêmes. Et il existe des règles / directives / moyens établis pour les utiliser afin que votre document HTML publié exprime ce que vous voulez qu'il signifie.

Si vous répertoriez quelque chose dans votre document, ajoutez une liste ordonnée (UL) ou une liste non ordonnée (OL). D'autre part, l'élément de division de page (DIV) est utilisé pour créer un élément de contenu spécifique et séparé.

L' élément div "divise". Lorsque vous regardez une page, il y a des parties spécifiques comme un corps de contenu, le pied de page, un en-tête, une navigation, des menus, des formulaires, etc. Et vous pouvez utiliser des balises div pour créer ces divisions. Souvent, les parties de page correspondent à une mise en page visuelle, il est donc naturel d'utiliser des divisions de page explicites (DIV) pour découper votre mise en page en CSS. De cette façon, les balises div deviennent structurelles.

Si vous utilisez ou abusez de la balise div , cela peut créer une signification involontaire et un gonflement du code.

Pour brouiller les choses: Google utilise h3 et div pour "diviser" les résultats de recherche répertoriés. ul> li> h3 + div

Ainsi, lorsque vous désactivez tous les styles (Maj + Cmd / Crtl + S dans Firefox avec la barre d'outils WebDeveloper), les divs devraient disparaître et s'empiler naturellement. Votre code HTML nu doit toujours afficher une belle page avec une hiérarchie claire: de haut en bas, le contenu le plus important en premier, et des listes avec des puces et des numéros pour les éléments répertoriés. Et c'est une bonne idée d'ajouter un lien vers le haut (pour les utilisateurs non visuels) qui vous permet de passer directement à: le contenu principal, les formulaires importants ou les titres principaux (comme une table des matières).

Enfin, gardez à l'esprit que vous créez un document. Sans tous les effets visuels, ce devrait être un document convaincant.

Il y a beaucoup de discussions sur l'utilisation <li>ou l'utilisation, <div>mais aucun commentaire n'a donné un exemple solide du contenu qui entre à l'intérieur de ces balises. Mon sentiment est que <ul>et ce <li>n'est pas vraiment important car je ne peux pas vous dire la dernière fois que j'ai lu une «liste» de choses sur un site Web, un journal ou un magazine - en ligne ou en version imprimée.

<div>est beaucoup plus polyvalent. Si vous énumérez les ingrédients d'un gâteau, oui, c'est une liste. Si vous faites la liste des choses à emporter pour une randonnée, oui, c'est une liste.

Mais qu'en est-il d'une forme utilisateur, par exemple, qui répertorie des choses aléatoires qui ne sont pas vraiment une liste, ni une série de paragraphes, ni tous les «en-têtes». Certaines choses sont des dates, certaines sont des cases à cocher et d'autres sont du texte. Divisez-le, si vous me demandez. Une personne aveugle serait mal informée si elle était marquée avec <ul>et <li>et qu'elle entendait "Voici une liste de ..." alors que ce n'est qu'un méli-mélo de choses, pas vraiment une liste.

Vous devez utiliser des balises appropriées pour le contenu que vous souhaitez insérer. Cela ne signifie pas seulement que ul / li est plus approprié pour les listes. Cela signifie également que vous devez considérer le contenu de votre liste et voir s'il s'agit d'une liste non ordonnée / ordonnée ou de définition.

Un autre argument est que lorsque vous désactivez css. Le navigateur rendra son style par défaut, ce qui le rend plus agréable à regarder si d'autres appareils de navigation sont utilisés. Il améliore également l'accessibilité.

Si vous utilisez plutôt div, lynx ne pourra pas afficher la page de manière lisible.

J'aime personnellement les li pour la sémantique. Lorsque vous affichez la source, vous voyez immédiatement que vous avez une liste de quelque chose s'ils sont enveloppés par un li. Une collection div ne fournit aucune signification sémantique, et généralement la seule sémantique de la liste est introduite par les classes css comme "listItem". Ce qui indique évidemment le fait qu'un li aurait dû être utilisé en premier lieu.

Si vous avez une boucle dans votre logique de présentation, je préfère toujours un li à un div.

<li> signifie un élément dans une liste et qui permet aux analyseurs (navigateurs, moteurs de recherche, araignées) de savoir que vous répertoriez des éléments. Vous pouvez utiliser DIV au lieu de LI mais ces analyseurs ne sauront jamais que ces éléments sont listés et DIV ne décrit vraiment rien sauf que c'est un bloc.

Cela depend du projet. J'ai récemment fait un projet qui avait un menu conçu à l'aide d'une liste. Ils voulaient ajouter un tas d'effets, comme le glissement / fondu, et voulaient également le rendre pliable avec plusieurs niveaux.

Dans ce cas, les DIV étaient beaucoup plus appropriés. J'ai pu créer des conteneurs pour les div enfants et appliquer jQuery pour obtenir les effets souhaités.

Même si votre projet n'a pas encore ces exigences, il peut être prudent de réfléchir à la façon dont vous pourriez le changer à l'avenir ...

L'utilisation <li>(le cas échéant) réduit la <div>soupe de balises que vous voyez si souvent dans les pages Web, ce qui aide beaucoup les développeurs.

Ce n'est pas que ce <div>soit mauvais, mais chaque fois qu'une balise est surutilisée (comme <div>souvent), elle dilue le sens sémantique de la balise au point d 'être totalement inutile. J'ai appris cela récemment d'un entrepreneur que nous avons embauché pour aider avec le CSS / UI de notre application Web, et la différence que cela a apportée à la lisibilité / maintenabilité du code HTML est très perceptible pour moi.

Si tout ce qui vous intéresse, c'est que les listes apparaissent d'une certaine manière avec un minimum d'effort, alors c'est déjà une évidence: il <li>y a un caractère de moins à taper que <div> et sa balise de fermeture est facultative en HTML.

Et c'est en plus de ce que tout le monde a dit sur la sémantique.

Pour un rendu correct sur les navigateurs primitifs ou les appareils mobiles

Votre question est déjà répondue par je veux ajouter mes deux cents ici. Je travaillais sur un projet où je faisais la logique backend et mes données étaient agrégées dans un modèle de page créé par mon concepteur. il a utilisé les balises ul et li pour représenter chaque type de liste sur la page, dont certains étaient des widgets. Les données provenaient d'un cms où les utilisateurs pouvaient entrer du texte enrichi via des balises html. lorsque les utilisateurs ont commencé à créer des listes dans leur contenu, les listes ne ressemblaient plus à des listes à puces, au lieu de vider la page entière.

leçon apprise: n'utilisez pas de balises de liste avec des sélecteurs css génériques si votre contenu peut contenir du html en lui-même.

une autre chose à propos de ul li est; vous pouvez utiliser ul comme conteneur qui vous aide à définir la classe Style

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

J'aime ce modèle quand j'utilise ul

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

Bien sûr, cela dépend de la façon dont nous voulons l'utiliser et de la façon dont nous l'aimons. C'est comme ça que j'aime

L'espoir aide Merci