Comprendre et utiliser les éléments d'article et de section dans les compétences du didacticiel HTML5_html5

HTML5 apporte une série de nouveaux éléments et sera largement utilisé dans le futur. Cependant, certains éléments peuvent prêter à confusion à utiliser, notamment deux nouveaux éléments :

et

.
La question la plus fréquemment posée est : dans quelles circonstances doit-on utiliser ces éléments ? Et comment utiliser correctement ces éléments ?

Élément de section
C'est l'élément le plus ambigu. En quoi est-il différent de l'élément

Nous utilisons

pour diviser les paragraphes, donc à part

, quand devrions-nous utiliser cet élément. Nous citons la documentation officielle pour l’illustrer. Selon le document WHATWG, l'élément

est décrit comme suit :
"L'élément

représente un paragraphe commun dans un document ou une application - WHATWG"

À partir de la description, nous pouvons voir Le but de l'élément

est de le segmenter, plus ou moins similaire à

. Mais il y a quand même un cas particulier. Dans la documentation, une déclaration spéciale a été ajoutée :
"Lorsqu'un élément est utilisé uniquement pour le style ou pour des raisons de commodité de script, nous encourageons les auteurs à utiliser

. L'élément

s'applique lorsque le contenu de l'élément est explicite la liste est requise. - WHATWG"

Sur cette base, nous pouvons résumer les deux points suivants :
Premièrement, bien que l'élément de section puisse techniquement être stylisé, nous recommandons néanmoins de l'utiliser. éléments div lorsqu’il existe des styles ou des scripts complexes.
Deuxièmement, similaire à l'élément

, l'élément section est utilisé pour répertorier le contenu.

Donc dans un exemple réel, la raison d'utiliser l'élément

est de structurer le contenu du blog, le code est le suivant :

Copier le code

Le code est le suivant :

post">

Titre de l'article de blog

Tarte glacée en poudre gelée-o.
Gâteau au chocolat Gummies biscuit à la crème glacée halva tiramisu jelly-o.

-title">Titre de l'article de blog

Tarte glacée en poudre jelly-o.
Gummies gâteau au chocolat biscuit à la crème glacée halva tiramisu jelly-o.

Titre de l'article de blog

>

Tarte glacée en poudre jelly-o
Gummies gâteau au chocolat biscuit à la crème glacée halvah tiramisu jelly-o.

🎜>

Ceci n'est qu'un exemple, l'élément

Élément d'article

D'après le nom, il s'est déjà bien expliqué, mais il faut encore regarder comment le document officiel le décrit :
"Dans Un document, page, application ou section d'un site qui est, en général, redistribuable ou réutilisable de manière indépendante, par exemple dans un message de forum, un magazine ou un article d'actualité, une entrée de blog ou des commentaires d'utilisateur, des widgets interactifs ou tout autre support. seul élément de contenu. »

De la description ci-dessus, nous pouvons conclure que l'élément

est dédié aux articles structurés, en particulier à ce que nous souhaitons publier, comme le contenu d'un blog, d'une page ou d'un forum. L'exemple suivant montre comment utiliser

Copier le code

Le code est le suivant :

Ceci est le titre de l'article de blog

meta">

• Nom de l'auteur


• Enregistrer dans les catégories

snaps au sésame.
Barre de chocolat faworki à la gelée de biscuit en poudre. Pudding à l'avoine
gâteau au rouleau de tootsie, bonbons au pain d'épice à la sucette
gummies halvah biscuit danois applicake au pain d'épice jelly-o pâtisserie. /div>

De plus, l'élément

pour diviser l'article en plusieurs paragraphes, comme le montre l'exemple ci-dessous.

Copier le code

Le code est le suivant :

Ceci est le titre de l'article de blog

• Nom de l'auteur


• Enregistrer dans les catégories
;/div> ;

;
Sweet roll halvah biscuit caramel tarte à la réglisse pudding sésame snaps
Biscuit poudre jelly-o fruitcake faworki gâteau au chocolat
tootsie roll sésame snaps sucette bonbon au pain d'épice
gummies biscuit danois. applicake gelée de pain d'épices -o pâtisserie

gaufrettes au chocolat
gâteau. Barre de chocolat sucre prune garniture glace gâteau aux carottes bonbon danois
Cheesecake gummi ours dragée dragée brownie jelly biscuit

Comme le prédisaient les fondateurs de HTML5 et les directeurs du W3C, tous les nouveaux éléments créés par HTML5 visent à rendre la structure du Web plus sémantique. L’application correcte de ces éléments fait encore l’objet de débats parmi les développeurs et concepteurs Web.
En tout cas, ne mélangez pas les idées. Comme je l'ai mentionné précédemment, si cela a du sens et que vous voyez que la structure a du sens en l'utilisant, alors utilisez-la.