Pourquoi devrais-je utiliser «li» au lieu de «div»?
Je ne sais pas pourquoi je dois utiliser ul-li vs simplement utiliser des divs pour lister les articles. Je peux faire en sorte que les deux se ressemblent exactement, alors où est l'avantage fonctionnel de créer une liste non ordonnée par rapport à l'alignement des 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 vs d'utiliser simplement des divs lors de la liste des articles. Je peux faire les deux look exactement les mêmes
Qu'il y a le mot clé dans votre question: "regardez". Pouvez-vous également les rendre de type identiques pour les aveugles utilisant un lecteur Braille? Pouvez-vous les faire sonner de la même manière pour les aveugles utilisant un synthétiseur de synthèse vocale? Pouvez-vous toujours les faire ressembler aux 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 par rapport au HTML, toutes les alarmes devraient se déclencher dans votre tête. Le HTML est un langage pour décrire la structure sémantique d'un document hypermédia. Une structure sémantique n'a pas un "look", c'est un concept abstrait.
Même si vous ne vous souciez pas de tout cet hocuspocus sémantique et que vous ne vous souciez pas des aveugles, considérez ceci: Google, Yahoo, MSN et Co. 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 les informations sont une liste, et pas seulement "quelque chose" (qui sait quoi) qui est du texte à l'intérieur d'un élément arbitraire.
Réponse directe à votre question: L'avantage fonctionnel est que divs signifie peu par lui-même, alors que l lis signifie explicitement "c'est une liste d'articles non ordonnée".
Le terme "sémantique" fait référence à la façon 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/façons établies de les utiliser pour 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'un autre côté, l'élément de division de page (DIV) est utilisé pour créer un 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, donc l'utilisation de divisions de page explicites (DIV) pour découper votre mise en page en CSS est un ajustement naturel. De cette façon, les balises div deviennent structurelles.
Si vous abusez ou abusez de la balise div, cela peut créer une signification et un gonflement de code involontaires.
Pour confondre les choses: Google utilise h et div pour "diviser" leurs résultats de recherche répertoriés. l> li> h3 + div
Ainsi, lorsque vous désactivez tous les styles (Maj + Cmd/Crtl + S dans Firefox avec la barre d'outils WebDeveloper), le divs devrait disparaître et s'empiler naturellement. Votre code HTML nu devrait 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 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, ce devrait être un document convaincant.
On parle beaucoup d’utiliser <li> ou en utilisant <div> mais aucun commentaire n'a donné un exemple solide du contenu qui se trouve à l'intérieur de ces balises. Mon sentiment est que <ul> et <li> 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.
<div> est beaucoup plus polyvalent. Si vous énumérez des ingrédients pour un gâteau, oui, c'est une liste. Si vous listez des choses à emporter pour une randonnée, oui, c'est une liste.
Mais qu'en est-il d'une forme d'utilisateur, par exemple, qui répertorie certaines 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, d'autres des cases à cocher et d'autres du texte. Divisez-le, si vous me demandez. Un aveugle serait mal informé s'il était marqué par <ul> et <li> et ils ont entendu "Voici une liste de ..." quand ce n'est qu'un méli-mélo de trucs, pas vraiment une liste.
Vous devez utiliser des 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 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 rendre la page de manière lisible.
Personnellement, j'aime les li pour la sémantique. Lorsque vous visualisez 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 répertoriés et DIV ne décrit vraiment rien, sauf que c'est un bloc.
Pour un rendu correct sur les navigateurs primitifs ou les appareils mobiles
Cela depend du projet. J'ai récemment réalisé 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 des 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 ...
En utilisant <li> (le cas échéant) réduit le <div> soupe de balises que vous voyez si souvent dans les pages Web, ce qui aide beaucoup les développeurs.
Pas ça <div> sont mauvais, mais chaque fois qu'une balise est surutilisée (comme <div> l'est souvent), il dilue le sens sémantique du tag au point d'être totalement inutile. J'ai récemment appris cela d'un entrepreneur que nous avons embauché pour aider avec le CSS/UI de notre application web, et la différence que cela a fait sur la lisibilité/maintenabilité du code HTML est très sensible pour moi.
Si tout ce dont vous vous souciez est d'obtenir que les listes se présentent d'une certaine manière avec un minimum d'effort, alors c'est déjà une évidence: <li> est 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.
une autre chose à propos de ul li est; vous pouvez utiliser ul comme conteneur qui vous aide à définir la classe de 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
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 du backend et mes données étaient agrégées dans un modèle de page créé par mon designer. il a utilisé les 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 saisir 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 plutôt à foirer toute la page.
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.