HTML5 Structure - <article>, <section> <div> l'utilisation
Bonne Journée,
J'ai juste commencé à apprendre le HTML5 n'avons pas de problèmes, tout va parfaitement.
J'ai seulement une petite question à propos de la sémantique de l'utilisation de <article>, <section> et <div> balises.
Je sais que <div> élément n'a pas de sens sémantique HTML5, il doit être utilisé principalement pour l'écriture de scripts/style fins. Ici, tout est clair pour moi. J'ai trouvé beaucoup d'informations utiles dans la question: HTML5 a de nouvelles balises de l'article, la section et le de côté. Quand devrais-je utiliser la balise div?.
Cependant, j'ai quelques problèmes avec <article> et <section> d'utilisation. W3C HTML5 spécification indique que <article> tag
Spécifie indépendante, autonome, contenu, pourrait être un communiqué de l'article, billet de blog, un post sur un forum, ou d'autres articles qui peuvent être distribués de manière indépendante du reste du site.
où <section> balise ne doit pas être utilisé
Pour une section dans un document. Comme les chapitres, les en-têtes, pieds de page, ou toutes les autres sections du document.
En théorie, tout est clair. Cependant, tout en préparant le code de mon premier HTML5 le site que j'ai trouvé un peu dur à différer.
Laissez-moi vous expliquer mon site internet de la structure:
- Décors sont ajoutés à l'élément body. Fonctionne parfaitement.
- - Je utiliser 960.gs système de grille à chacun de mes HTML/CSS du projet. Cette fois, je l'utilise trop. Comme vous le savez sûrement, il nécessite un conteneur pour être ajouté (avec une classe: container_12 dans mon cas).
De conclure explication de ma structure:
- Comme un conteneur principal, j'ai utilisé
<div class="container_12"> - Le premier élément dans mon document est un
<header>. Il contient quelques éléments: le curseur et la barre du haut. La barre du haut est un<section>. Il dispose de deux éléments enfants: numéro de téléphone sur la gauche et de la langue sur la liste de droite. Pour ces éléments, j'ai utilisé<section>trop. Pour un curseur (ou un slogan court espace réservé à l'intérieur des pages, j'ai utilisé<section>balise qui contient deux<section>tags: la gauche et la colonne de droite. - Comme le principal contenu de l'enveloppe pour la page d'accueil j'ai décidé d'utiliser
<section>élément. Pour les pages intérieures, je suis en utilisant<article>pour les pages comme Sur Nous, etc. Pour les blogs de la liste, je suis en utilisant un<section>avec une liste de<article>balises à l'intérieur. Pour un seul post, je suis en utilisant<article>élément. - Évidemment, pour un pied de page, je suis en utilisant
<footer>élément avec trois<section>éléments d'une colonne wrappers.
Ma mise en page avant la conversion en HTML5:
<div class="container_12">
<div class="grid_12 header">
<div class="bar grid_12 alpha omega">
<div class="grid_6 alpha">
Phone number
</div>
<div class="grid_6 omega">
German - English - French
</div>
</div>
<div class="grid_6 alpha">
LOGOTYPE
</div>
<div class="grid_6 omega">
<ul>
navigation
</ul>
</div>
<div class="grid_12 alpha omega">
<div class="grid_6 alpha">
Slider I col
</div>
<div class="grid_6 omega">
Slider II col
</div>
</div>
</div>
<div class="grid_12 content">
</div>
<div class="grid_12 footer">
<div class="grid_4 alpha">
Footer I col
</div>
<div class="grid_4">
Footer II col
</div>
<div class="grid_4 omega">
Footer III col
</div>
</div>
</div>Voici mon code après le convertir en HTML5:
<div class="container_12">
<header class="grid_12">
<section class="bar grid_12 alpha omega">
<section class="grid_6 alpha">
Phone number
</section>
<section class="grid_6 omega">
German - English - French
</section>
</section>
<section class="grid_6 alpha">
LOGOTYPE
</section>
<nav class="grid_6 omega">
<ul>
navigation
</ul>
</nav>
<section class="grid_12 alpha omega">
<section class="grid_6 alpha">
Slider I col
</section>
<section class="grid_6 omega">
Slider II col
</section>
</section>
</header>
<section class="grid_12 content">
</section>
<footer class="grid_12">
<section class="grid_4 alpha">
Footer I col
</section>
<section class="grid_4">
Footer II col
</section>
<section class="grid_4 omega">
Footer III col
</section>
</footer>
</div>Est mon approche correcte? Pourriez-vous ajouter ou corriger quelque chose?
Pour éviter toutes les questions: je sais que <section> n'est pas un remplacement pour un <div>.
OriginalL'auteur DaveW | 2012-01-04
Vous devez vous connecter pour publier un commentaire.
Eh bien, une façon de répondre à cette question est de regarder le plan du document à l'aide d'un outil comme http://gsnedders.html5.org/outliner/. Vous remarquerez que chaque section a besoin d'un titre pour faire sens, sans contenu, c'est difficile à dire. Si chaque section a un H!!! la balise qui fait sens, alors que c'est généralement droit. Si une section n'a pas besoin d'un h1 alors que c'est généralement mauvais.
Sections doit faire sens de leur propre chef, sans contexte. Une manière facile à comprendre c'est de penser à un flux RSS - chaque entrée sur le nourrir, c'est comme une section. Si vous souhaitez ajouter un flux RSS (ou il aurait du sens dans ce contexte), alors il est probablement une section. Si c'est juste une chronique sur un pied de page, puis vous ne le mettrais pas sur un flux RSS, donc c'est probablement pas une section.
Sur cette base, je le ferais probablement quelque chose comme ceci (basé sur mon hypothèse sur ce que vous mettez dans chaque morceau). Je suis aussi d'ajouter de la WAI-ARIA rôles de repère, comme ils sont simples et faire une grande différence lorsque vous utilisez un lecteur d'écran.
<section>propriétés de l'élément 🙂Content qu'il était de l'aide!
OriginalL'auteur Rich Bradshaw