webサイトを作るときの要素の使い方2巻 article section

NO IMAGE

さて、前回はwebサイトを構成する際、適切に要素を配置するための内容を書いていきました。

前回の記事

今回は残りのsection、article要素について考えてみます。
似ている部分もあるこの二つのセクション。他のセクショニング要素に比べてあやふやな部分が多いこの要素を、一体どのように配置したらいいでしょうか?

一つのまとまりであることを示すsection要素

意外とやりがちなのがmain直下の要素にsectionを使用して、wrapper代わりに使う。ということですが、これは間違いです。

webサイト内の一部分がひとまとまりの内容である場合に使用するのがsection要素なので、むしろ細かい単位で使用する要素になります。

この内容はどのまとまりに当たるのか明示する必要があるので、見出しをつけることが推奨されてます。
(むしろ見出しがつく、つかないでsectionになるかどうか判断できる。)

例えばサービス一覧という見出しをつけたセクション要素の中に、主要サービスのリンクをまとめる。といった使い方ができますね。

ページから切り離しても活躍できるarticle要素

article要素の定義は、その要素内で完結する内容になっているかどうか
blogの記事やフォーラム部分など、ほぼほぼ投稿系のページに集中するかもしれませんね。

通常のwebサイトであればsectionで区切る構成は多いので、実はそんなに使わなくてもいいのではないかと思ってます。
(会社概要の会社情報リストはarticleでも良さそう)

sectionもarticleも使いまくって最適化しましょう

まだまだあやふや定義になりそうですが使う際に考え抜いで、自分なりに最適解を見つけて構成していきたいものです。

htmlカテゴリの最新記事