Pourquoi devrais-je utiliser "li" au lieu de "div" ?

Question

Je ne sais pas pourquoi j'ai besoin d'utiliser des ul-li plutôt que de simples divs pour lister les éléments. Je peux faire en sorte que les deux aient exactement la même apparence, alors quel est l'avantage fonctionnel de créer une liste non ordonnée plutôt que d'aligner des divs ?

Answer 1

Pour la correction sémantique. Le 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.

Answer 2

Je ne sais pas pourquoi j'ai besoin d'utiliser des ul-li plutôt que de simples divs pour lister les éléments. Je peux faire les deux regardez exactement la même chose

C'est là le mot clé de votre question : "regarder". Pouvez-vous aussi les faire type la même chose pour les personnes aveugles utilisant un lecteur braille ? Pouvez-vous les faire son la même chose pour les personnes aveugles qui utilisent un synthétiseur texte-parole ? Pouvez-vous toujours leur donner la même apparence pour les personnes malvoyantes en utilisant des feuilles de style utilisateur CSS côté client ?

Ce mot, "look", est un mot très dangereux - lorsque vous l'utilisez en relation avec le HTML, toutes les alarmes devraient se déclencher dans votre tête. Le HTML est un langage permettant de décrire la structure sémantique d'un document hypermédia. Une structure sémantique n'est pas ont un "look", c'est un concept abstrait.

Même si vous ne vous intéressez pas à toutes ces aberrations sémantiques 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.

Answer 3

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 du texte à l'intérieur d'un élément arbitraire.

Answer 4

Réponse directe à votre question : L'avantage fonctionnel est que divs ne signifient pas grand-chose en soi, alors que ul lis signifie explicitement "c'est une liste d'éléments 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. Le langage HTML est composé de balises qui signifient certaines choses en elles-mêmes. Il existe des règles, des lignes directrices et des méthodes établies pour les utiliser afin que votre document HTML publié transmette ce que vous voulez qu'il signifie.

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

El div élément "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, la navigation, les menus, les formulaires, etc. Et vous pouvez utiliser div pour créer ces divisions. Souvent, les parties de la page correspondent à une mise en page visuelle. L'utilisation de divisions de page explicites (DIV) pour découper votre mise en page en CSS est donc naturelle. De cette façon, les div Les balises deviennent structurelles.

Si vous utilisez mal ou trop le div cela peut créer une signification involontaire et un gonflement du code.

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

Ainsi, lorsque vous désactivez tous les styles (Shift+Cmd/Crtl+S dans Firefox avec la barre d'outils WebDeveloper), l'option divs devrait disparaître, et s'empiler naturellement. Votre code HTML nu devrait quand même donner 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 énumérés. C'est une bonne idée d'ajouter un lien vers le haut (pour les utilisateurs non visuels) qui permet de passer directement au contenu principal, aux formulaires importants ou aux principaux titres (comme une table des matières).

Enfin, gardez à l'esprit que vous construisez un document. Sans tous les effets visuels, il doit rester un document cohérent.

Answer 5

Vous devez utiliser des balises appropriées pour le contenu que vous souhaitez y placer. Cela ne signifie pas seulement que ul/li est plus approprié pour les listes. Cela signifie également que vous devez prendre en compte 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 le css. Le navigateur rendra son style par défaut, ce qui le rendra plus agréable à regarder si des dispositifs de navigation alternatifs sont utilisés. Cela améliore également l'accessibilité.