Sont de nouveaux éléments HTML5 comme <section> et <article> inutile?

Question

Ne me tuez pas tout de suite, je pose la question par pure curiosité.

Des éléments comme l' <section>, <nav>, <article>, <aside> etc sembler tout à fait inutile. Assurez-vous qu'ils font de tout, avoir sa propre peu de place (et de référencement avais)... mais il est possible d'organiser les choses. Il ya certains cas où les choses ne rentrent pas dans l'une des catégories trop. Il augmente aussi le temps passé à essayer de code de ces choses. Je ne vois pas de réel but pour aller de l'ajout de ces nouveaux éléments.

Ce qui ne nous (les développeurs et les gens qui afficher les pages web semblables) ont à gagner de l'ajout d'eux?

Answer 1

Ces éléments sont importants pour des lecteurs d’écran comme les lecteurs aveugles et des lecteurs de livres électroniques tels que Kindle. Cela les aide à savoir quoi montrer / lire et quand.

Answer 2

Ont lu cet article, comme il le souligne de nombreux avantages tels que:

Il y a plusieurs avantages à utiliser ces éléments. Lorsque utilisé dans conjointement avec la rubrique éléments (h1 à h6), tous ces fournissent un moyen pour marquer les sections imbriquées avec niveaux de titre, au-delà de six niveaux possible avec les versions précédentes de HTML.

et

Par l'identification de l'application des articles dans la page d'aide spécifique de sectionnement les éléments, les technologies d'assistance peuvent aider à l'utilisateur de naviguer plus facilement la page. Par exemple, ils peuvent facilement sauter la navigation ou de la section rapidement passer d'un article à l' à côté sans la nécessité pour les auteurs de fournir des liens d'évitement. Les auteurs ont également avantage, parce que de remplacer un grand nombre de la divs dans le document avec l'un des plusieurs éléments distincts peuvent aider rendre le code source plus clair et plus facile d'auteur.

Answer 3

HTML5 de style CSS est aussi un peu plus facile à lire:

div#header
div#content .article
div#content .article h1
div#content .article h1+h2
div#footer

vs

header
section#content
section#content article
section#content article hgroup h1
section#content article hgroup h2
footer

(n'utilisant pas d'avancée sélecteur)

Et comme keyboardP laissé entendre par le biais de la citation, il est plus facile de naviguer d'une page pour les non humains visiteurs. Il ajoute de la sémantique. Mais je suis d'accord avec vous, que, parfois, il peut être difficile de déterminer quel élément à utiliser section, article ou de bons vieux - div. L'OMI, ce qui rend la sémantique de moins en moins forte. Mais permet de voir ce qui se passe.

Answer 4

Il est tout au sujet de la sémantique!

Mais je suis d'accord avec vous que, pour certaines personnes ces nouvelles balises peuvent sembler inutiles. Une question souvent posée est pourquoi ces balises et pas tous les autres ont été choisis, d'autant plus que certains de ces étiquettes sont très blog spécifique (article, section, etc), mais n'inclut pas d'autres noms couramment utilisés, tels que le produit ou le contenu. Comme vous pouvez le voir dans les commentaires ci-dessous, c'est un sujet chaudement débattu!

Donc, pour l'utilisation de ces nouvelles balises cela dépend vraiment de la façon dont vous écrivez votre balisage, et il n'y a pas de bonne ou de mauvaise façon pour comment aller à ce sujet. Prendre listes par exemple, vous pouvez les utiliser pour votre navigation et de ne pas leur style et aussi de les utiliser dans votre contenu principal et ont besoin de leur style. Vous pouvez soit ajouter des catégories à préciser quelles sont les listes de style ou vous pouvez utiliser votre balisage et de la cible les styles de la tags seul:

<nav>
<ul>
 <li><a href="">Nav item 1</a></li>
 <li><a href="">Nav élément 2</a></li>
</ul>
</nav>
<div>
<ul>
 <li><a href="">élément de la Liste 1</a><li>
 <li><a href="">élément de la Liste 1</a></li>
<ul>
</div>

et dans ton CSS:

ul { list-style: bullet }
nav ul { list-style: none; }

Answer 5

Je pense que la grande faiblesse du HTML sémantique des divisions telles que, est que le code pour effectuer ces travaux dans le monde réel implique plusieurs états pour faire face à la réelle navigateurs qui sont en cours d'utilisation par des personnes réelles. Les exemples donnés ci-dessus ne sont pas réelles et, en tout cas, à lire le code html5 rappelez-vous que le pied de page est une sorte de div. Juste de l'appeler un div et en lui donnant un descriptif ID me semble être beaucoup plus claire, même si nous oublions les multiples déclarations que vous aurez vraiment besoin (vraiment, vous. Depuis plusieurs années). Voici une idée. Faire de la sémantique div Id attributs, comme 'title=', et ainsi de suite - laisser les navigateurs et les lecteurs d'écran utiliser cette information pour identifier les sections, des apartés et ainsi de suite et le code sera plus propre. Ne pas arrêter d'appeler un div d'une div, parce que vous ne pouvez pas installer les nouveaux navigateurs pour l'ensemble de la planète.

<div id ="footer" class="someclass someotherclass" semantic="footer">You, the screen
readers and all browsers know this is a div</div>