Quel est le point des éléments span, ul, li, h1 etc (et autres) lorsque les divs stylés peuvent imiter leurs fonctionnalités?

Question

Je crée des modèles HTML personnalisables par l'utilisateur et décide des types d'éléments à utiliser. D'une part, je pourrais utiliser le type d'élément HTML le plus approprié pour chaque type de contenu - ul/li pour les listes, h1, h2 (etc) pour les rubriques et ainsi de suite. D'un autre côté, je pourrais juste utiliser div avec des attributs de classe. En fait, je devrais utiliser les attributs de classe avec l'une ou l'autre approche et je devrais en outre mettre à zéro certaines des propriétés par défaut désagréables sur certains types d'éléments HTML si j'utilisais l'approche précédente.

Étant donné la flexibilité de CSS, il est assez facile d'utiliser des éléments div pour pratiquement tous les éléments contenant du texte, et probablement possible en utilisant moins de CSS. Dois-je essayer d'utiliser h1 à h6, span, ul, li, hr, p etc pour leurs fins prévues, ou juste aller avec divs?

Answer 1

Vous devriez utiliser les balises appropriées car elles véhiculent la sémantique de vos données. Il y a une différence entre dire "ceci est un en-tête" et "ceci est un gros texte en gras". Cette information est précieuse pour les lecteurs d'écran, les moteurs de recherche et d'autres types d'agents utilisateurs qui ne sont pas vos navigateurs «normaux». En outre, les personnes qui n'utilisent pas vos feuilles de style (pour quelque raison que ce soit) seront toujours capables de les lire, mais elles ne le seront pas si tous vos tags sont divs et span (du moins pas aussi facilement).

Answer 2

En un mot, oui. Vous devriez utiliser l'élément approprié, et pour plus de quelques raisons:

Les lecteurs d'écran utilisent les étiquettes pour déterminer l'importance de placer sur l'information, ou où un nouveau paragraphe commence, etc. Les divs ne signifient rien pour eux.

Les robots de recherche utilisent vos balises H # pour déterminer leur importance.

Answer 3

Un mot, sémantique.

Pour moi au moins les étiquettes ont une signification au-delà de ce qu'elles produisent sur l'écran pour un utilisateur. La sémantique de la page en HTML est (au-dessus de ma tête) le contexte des éléments et la façon dont ils s'emboîtent dans la page. Par exemple, en termes de référencement, la plupart des pages doivent avoir une belle balise <h1> pour afficher le titre du contenu des pages. D'autres éléments comme celui-ci ont une signification supplémentaire en fonction de ce que c'est et comment il apparaît dans la page.

le code correctement formé sera toujours (!) Ont des titres imbriqués correctement, coller avec les balises de titre,

<h1>The Title of my page</h1> 
<h2>The subtitle of my page</h2> 
<h3>Perhaps the title of a section</h3> 

Ainsi, en utilisant les balises aux fins ils sont destinés, vous pouvez également donner Brower et ainsi à l'utilisateur un meilleur aperçu de la façon dont votre code est formé.

Une autre raison pourrait être que l'utilisateur n'a pas chargé votre feuille de style, à quel point tous vos divs iront partout. Tels que l'utilisation d'un navigateur mobile sur un plan de données limité.

Une autre raison que je pense serait que votre code sera illisible plus tard dans la ligne. Un énorme tas de divs avec des classes augmentera non seulement la taille de vos pages, prendra plus de temps à coder, il sera déroutant lorsque vous l'approchez plus loin dans la ligne. Pour revenir au point de sémantique, en vertu de la loi britannique, vous devez obligatoirement répondre aux besoins des utilisateurs handicapés. En utilisant divs, vous n'êtes pas. Un lecteur d'écran aura du mal à déchiffrer votre code en raison de sa folie inhérente.

:)

Answer 4

Il existe des agents autres que purement visuels. Pour ceux-là, les éléments sous-jacents peuvent être importants. Nous ne parlons pas seulement de l'accessibilité et des navigateurs non conventionnels que malheureusement beaucoup de concepteurs visuels aiment ignorer; le cas même, ils sont préoccupés par le moteur de recherche.

Un moteur de recherche sait que le texte d'un <h1> est plus significatif que le texte d'un <p>. Un moteur de recherche sait que le texte d'un <span> circule ensemble pour former des phrases contiguës avec le texte en ligne qui l'entoure, alors que le texte d'un <div> est une ligne distincte (même si vous avez utilisé CSS display: inline pour modifier son apparence).

Vous n'avez vraiment rien obtenu en utilisant <div class="h1"> au lieu de l'élément sémantiquement le plus approprié. Si vous utilisez <ul>, <table> ou <form>, vous aurez peut-être besoin de plus de règles reset-CSS, mais c'est à peu près tout.

Answer 5

Ces étiquettes décrivent toutes la signification ou avec un mot gentil, semantics. Les personnes malvoyantes qui utilisent des lecteurs d'écran dépendent du fait que la page Web est construite avec des balises qui leur indiquent quels sont les différents morceaux de texte sur la page. Par exemple. Dites-leur que c'est un en-tête. P leur dit que c'est un paragraphe. UL/LI leur dit que c'est une liste à puces. etc. Une personne avec un lecteur d'écran utilise ces balises pour parcourir la page. Ils peuvent "voir" combien de balises d'en-tête (H1, H2, Hn) les étiquettes qui sont sur la page, puis juste les parcourir pour trouver la section qu'ils veulent lire.