Pourquoi devrais-je utiliser ‘li’ au lieu de ‘div’?

Je ne sais pas pourquoi je dois utiliser ul-li ou simplement utiliser des div lors de la liste des éléments. Je peux faire en sorte que les deux aient exactement la même apparence, alors où est l’avantage fonctionnel de créer une liste non ordonnée par rapport à des div en alignement?

Pour la correction sémantique HTML a la capacité d’exprimer des listes de choses, et cela 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 suis pas sûr pourquoi je dois utiliser ul-li vs simplement utiliser des divs lors de la liste des éléments. Je peux faire les deux exactement les mêmes

Qu’il y a le mot clé dans votre question: “regarder”. Pouvez-vous également les faire taper la même chose pour les personnes aveugles utilisant un lecteur braille? Pouvez-vous les faire sonner de la même manière pour les aveugles utilisant un synthétiseur vocal? Pouvez-vous toujours les rendre identiques pour les personnes malvoyantes en utilisant des feuilles de style utilisateur CSS personnalisées côté client?

Ce mot, “look”, est un mot très dangereux – quand vous l’utilisez en relation avec le HTML, toutes les alarmes doivent être supprimées. HTML est un langage permettant de décrire la structure sémantique d’un document hypermédia. Une structure sémantique n’a pas de “look”, c’est un concept abstrait.

Même si vous vous moquez de tout ce hocuspocus sémantique et que vous ne vous souciez pas des personnes 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 consommasortingce que les informations sont une liste, et pas seulement “quelque chose” (qui sait quoi) qui contient du texte à l’intérieur d’un élément arbitraire.

Réponse directe à votre question: L’avantage fonctionnel est que les divs signifient peu par eux-mêmes, tandis qu’ul lis signifie explicitement “ceci est une liste non ordonnée d’items”.

Le terme “sémantique” désigne la manière dont vous utilisez la signification inhérente des structures existantes pour créer une signification explicite. HTML est composé de balises qui signifient certaines choses par elles-mêmes. Et il existe des règles / directives / des moyens établis pour les utiliser afin que votre document HTML publié transmette 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 distinct.

L’élément div “divise”. Lorsque vous regardez une page, il existe 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 la page correspondent à une présentation 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 la balise div , cela peut créer un sens et un code inattendu.

Pour confondre les choses: Google utilise h3 et div pour “diviser” leurs résultats de recherche répertoriés. ul> li> h3 + div

Donc, lorsque vous désactivez tous les styles (Maj + Cmd / Crtl + S dans Firefox avec la barre d’outils WebDeveloper), les divs doivent disparaître et emstackr naturellement. Votre code HTML nu devrait toujours afficher une belle page avec une hiérarchie claire: du haut en bas, du 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’append un lien vers le haut (pour les utilisateurs non-visuels) qui vous permet de passer directement au contenu principal, aux formulaires importants ou aux titres principaux (comme une table des matières).

Enfin, gardez à l’esprit que vous créez un document. Sans tous les effets visuels, il devrait toujours être un document pertinent.

Vous devez utiliser les balises appropriées pour le contenu que vous souhaitez mettre à l’intérieur. 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 affichera son style par défaut, ce qui le rend plus agréable à regarder si d’autres dispositifs de navigation sont utilisés. Cela améliore également l’accessibilité.

Si vous utilisez plutôt div, lynx ne sera pas en mesure de rendre la page lisible.

Personnellement, j’aime li pour la sémantique. Lorsque vous visualisez la source, vous voyez immédiatement que vous avez une liste de quelque chose si elles sont enveloppées par un li. Une collection div ne fournit aucune signification sémantique, et la seule sémantique de la liste est généralement introduite par les classes css comme “listItem”. Ce qui évoque é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 privilégie toujours un li sur un div.

  • signifie un élément dans une liste et permet aux parsingurs (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 parsingurs ne sauraient jamais que ces éléments sont listés et DIV ne décrit pas vraiment quoi que ce soit sauf que c’est un bloc.
  • On parle beaucoup de l’utilisation de

  • ou de l’utilisation de

    mais aucun commentaire ne donne un exemple solide du contenu contenu dans ces balises. Mon sentiment est que

      et

    • ne sont pas vraiment importants 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 sur papier.

      est beaucoup plus polyvalent. Si vous listez les ingrédients pour un gâteau, oui, c’est une liste. Si vous listez les choses à emballer pour une randonnée, oui, c’est une liste.

      Mais qu’en est-il d’un formulaire utilisateur, par exemple, qui répertorie des éléments 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, d’autres sont des cases à cocher et d’autres sont du texte. Divisez-le, si vous me le demandez. Une personne aveugle serait mal informée si elle était marquée avec

        et

      • et elle entendait “Voici une liste de …” quand il s’agit simplement d’un méli-mélo de choses, pas vraiment d’une liste.

        Utiliser

      • (le cas échéant) réduit la soupe de balises

        vous voyez si souvent dans les pages Web, ce qui aide beaucoup les développeurs.

        Ce n’est pas que

        est mauvais, mais chaque fois qu’une balise est surutilisée (comme souvent

        ), cela dilue la signification sémantique de la balise au sharepoint devenir totalement inutile. Je l’ai appris récemment d’un entrepreneur que nous avons embauché pour nous aider avec le CSS / UI de notre application Web, et la différence qu’il a apporté à la lisibilité et à la maintenabilité du code HTML me semble très évidente.

        Si tout ce qui vous intéresse est d’obtenir des listes avec un minimum d’effort, alors c’est une évidence:

      • est un caractère de moins que

        et sa balise de fermeture est facultative en HTML.

        Et cela s’ajoute à ce que tout le monde a dit à propos de la sémantique.

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

        Cela depend du projet. J’ai récemment réalisé un projet avec un menu conçu à l’aide d’une liste. Ils voulaient append un tas d’effets, tels que le glissement / la décoloration, et voulaient aussi 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 penser à la façon dont vous pourrez le changer à l’avenir …

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

          

        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 manière dont nous voulons l’utiliser et de la manière dont nous l’aimons. C’est comme ça que j’aime

        L’espoir aide merci

        Votre question a déjà été répondu par je veux append mes deux cents ici. Je travaillais sur un projet où je faisais la logique backend et mes données étaient regroupées dans un modèle de page créé par mon concepteur. Il a utilisé des balises ul et li pour représenter tous les types 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, mais elles ont tout gâché 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 soi.