Actuellement, les documents HTML sont principalement structurés à l'aide d'éléments div. Le formatage et le positionnement de ces conteneurs sont généralement réalisés avec du CSS. Pour les logiciels tels que les lecteurs d'écran, cette approche est bien sûr inutile car ils ne peuvent pas reconnaître la signification de certains contenus. Cela devrait changer grâce aux nouveaux éléments de structuration.
Deux des nouveaux éléments les plus importants sont les éléments section et article, qui sont au centre de ce tutoriel.
Marquer les articles
Avec l'élément article, il est possible de marquer des textes (messages de forum, articles de presse, etc.) en tant qu'articles. L'exemple suivant montre la définition d'un article type.
<article> <h1>Créer des applications web (Partie 09) : jQuery mobile (1)</h1> <p>jQuery est sans aucun doute l'un des frameworks JavaScript les plus connus. Sur les sites web "classiques", jQuery est déjà largement utilisé...</p> ... </article>
Grâce à l'élément article, vous pouvez structurer vos contenus de manière sémantique.
Vous pouvez voir un exemple concret en consultant un blog.
<article>
<header>
<h1>Créer des applications web (Partie 09) : jQuery mobile (1)</h1>
<p>Publié le : <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery est sans aucun doute l'un des frameworks JavaScript les plus connus. Sur les sites web "classiques", jQuery est déjà largement utilisé...</p>
...
<footer>
<p><small>Droits d'auteur par PSD-Tutorials.de</small></p>
</footer>
</article>
Dans cet exemple, à l'intérieur de l'élément article, la division typique en en-tête, contenu principal et pied de page est effectuée. Et une telle division est souvent rencontrée dans les blogs.
Créer des sections
Passons maintenant à l'élément section. L'élément section divise la page en différentes sections. Il peut s'agir par exemple de sections, de chapitres, d'onglets, etc. Grâce à section, il est possible de séparer logiquement des éléments tels que l'introduction et les annonces actuelles.section sert à diviser les contenus selon des critères sémantiques réels. Je reviendrai d'ailleurs sur la différence entre section et div à la fin de ce tutoriel.
L'exemple suivant montre une structure de blog typique. Cependant, cette structure contient quelque chose que de nombreux blogs ont réellement besoin, à savoir une zone de commentaires. Cette zone de commentaires est définie à l'intérieur d'un élément section. Les commentaires individuels à l'intérieur de la zone section sont ensuite encadrés par un élément article chacun.
<article>
<header>
<h1>Créer des applications web (Partie 09) : jQuery mobile (1)</h1>
<p>Publié le : <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery est sans aucun doute l'un des frameworks JavaScript les plus connus. Sur les sites web "classiques", jQuery est déjà largement utilisé...</p>
...
<section>
<h2>Commentaires</h2>
<article>
<header>
<h3>Commenté par : Ami des nouvelles</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Il y a une heure</time></p>
</header>
<p>Merci pour ce tutoriel !</p>
</article>
<article>
<header>
<h3>Commenté par : Becker</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Il y a deux heures</time></p>
</header>
<p>Génial ! Cela m'aide beaucoup.</p>
</article>
</section>
</article>Il convient également de mentionner ici que je parlerai en détail des éléments utilisés comme header, footer, etc. Bien entendu, ces éléments permettent de diviser les contenus en en-têtes et pieds de page, facilitant ainsi une structure logique supplémentaire des documents.
Un autre exemple pour illustrer davantage la combinaison des éléments article et section. En fait, l'élément section peut être utilisé pour diviser un article en sections logiques, chacune ayant ses propres titres.
<article>
<h1>Développement d'applications</h1>
<p>>Ici, vous apprendrez comment créer des applications web.</p>
<section>
<h2>Créer des applications web (Partie 09) : jQuery mobile (1)</h2>
<p>jQuery est sans aucun doute l'un des frameworks JavaScript les plus connus.</p>
</section>
<section>
<h2>Créer des applications web (Partie 08) : Le guide de démarrage rapide de jQuery</h2>
<p>>JavaScript est une excellente ressource pour les sites web car elle permet de réaliser de nombreuses choses intéressantes.</p>
</section>
</article>
Il est également possible d'inclure des éléments article à l'intérieur d'un élément section. Un exemple typique peut être une zone de commentaires, comme cela a déjà été montré. Il est également envisageable de diviser la section en sections sur les sujets traités dans le blog.
Encore un exemple pertinent à ce sujet :
<section>
<h1>Développement d'applications</h1>
<article>
<h2>Créer des applications Web (Partie 09) : jQuery mobile (1)</h2>
<p>jQuery est sans aucun doute l'un des frameworks JavaScript les plus connus.</p>
</article>
<article>
<h2>Créer des applications Web (Partie 08) : Introduction rapide à jQuery</h2>
<p>JavaScript est une chose merveilleuse pour les sites web, car elle permet de réaliser toutes sortes de choses intéressantes.</p>
</article>
</section>
De plus, un élément section peut contenir d'autres éléments section. Les imbrications sont donc autorisées. Voici un exemple à ce sujet :
<section>
<h1>PSD-Tutorials.de</h1>
<section>
<h2>Bienvenue</h2>
<p>Nous sommes ravis...</p>
</section>
<section>
<h2>Tutoriels</h2>
<p>Voici nos derniers tutoriels...</p>
</section>
<aside>
<p>Contact</p>
</aside>
</section>
<footer>
<p>(c) 2014 PSD-Tutorials.de</p>
</footer>
Cette imbrication de sections aboutit à la structure suivante :
1. PSD-Tutorials.de
1.1 Bienvenue
1.2 Tutoriels
1.3 Contact
- (c) 2014 PSD-Tutorials.de
Ces structurations sont donc également possibles.
La différence entre div, article et section
Admettons que la délimitation entre div, article et section n'est pas tout à fait simple à comprendre. En fait, l'élément article a été principalement défini pour structurer les articles de blog. L'élément section est en réalité un niveau en dessous de article. De plus, à l'intérieur de l'élément section, il devrait toujours y avoir une balise de titre définie. Même s'il n'y a effectivement aucun titre défini, il devrait être théoriquement possible de spécifier un titre à l'intérieur de l'élément en question.
En outre, les éléments div ne sont pas non plus à proscrire en HTML5, mais doivent toujours être utilisés. Ils sont intéressants, par exemple, lorsque vous avez besoin de regrouper des éléments.
Enfin, il convient de rappeler l'impact visuel des éléments présentés jusqu'à présent. En fait, pour une mise en forme appropriée, vous avez besoin de CSS. L'utilisation normale des éléments montrés n'a aucun effet dans le navigateur. Vous structurez ici uniquement le contenu de manière sémantique. Tout ce qui concerne l'aspect visuel est géré via les feuilles de style.
