À propos de la pratique des balises sémantiques HTML5 (page blog)

Création d'une page de blog en utilisant HTML5 CSS3. La mise en page globale de l'effet est la suivante :



La mise en page est basée sur des éléments html5. Il est donc important de vous familiariser avec les éléments HTML5 avant de commencer, puis de vérifier si leur sémantique correspond à votre mise en page.

　La structure HTML5



Une chose est très importante, lorsque vous écrivez du code HTML5, n'utilisez pas simplement la balise

balise à la place. Il y a des moments où l'élément

est encore un bon choix sémantiquement

. Par exemple, wrapper ou conteneur p

L'une des nouvelles balises pouvant être utilisées pour remplacer l'élément p traditionnel est l'élément

Dans l'élément

, nous pouvons également placer l'élément

utilisé pour envelopper le menu de navigation principal

de la page. L'élément h1 contenant une ancre est le titre de notre blog.



Au début, j'ai utilisé

pour envelopper le contenu de la page, mais après avoir lu certains documents, j'ai senti que ce n'était pas sémantiquement correct à 100%. Toujours sélectionné l'élément p,

À l'intérieur de l'élément p, chaque article de blog est enveloppé dans son propre élément article.



Sous une série de blogs, il y a une paire de liens paginés. Habituellement, l'importance des liens de pagination n'est pas équivalente à celle de l'élément

(qui peut être utilisé à plusieurs endroits, pas seulement dans la navigation principale)

. Mais cette mise en page de blog traite toujours les liens de pagination comme navigation principale.



Avant la révision de l'élément

, il n'y avait aucun élément sémantiquement spécifique pour une barre latérale. Cependant, vous pouvez désormais utiliser l’élément side en toute sécurité sans vous soucier des problèmes de syntaxe.

Dans cet exemple, l'élément side contient plusieurs éléments de section. Il y a un simple champ de recherche en bas de la barre latérale. Il nous donne accès à quelques nouvelles fonctionnalités des formulaires HTML5.

L'un d'eux est l'attribut placeholder



La mise en page se termine par l'élément pied de page. Dans cet exemple, l'élément footer doit être placé à l'extérieur du conteneur p, de sorte que la largeur de l'élément footer s'étende sur toute la page.




L'article ci-dessus sur la pratique des balises sémantiques HTML5 (page de blog) est tout le contenu partagé par l'éditeur. Pour plus de contenu connexe, veuillez prêter attention à. PHP Chinese Net (www.php.cn) !