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要素の使いどころを考えてみる 前編...   皆さん、コーディングしている時に使わないhtml要素ってありませんか? 僕はhtmlリファレンスを見るとコレ、全然使ってないなあ。なんて要素がかなりあります。 (上手に使ってる方はもちろんいらっしゃるのでしょうが、、、) なので今日は自戒の意味も込めて、htmlの使って...
webサイトを作るときの要素の使い方 1巻... webサイトのコーディングも時代が変わるたびに色々な手法が試されてきました。 table要素でレイアウト全体を構成したり、divでセクション区切りを作ったり。 今はhtml5が定着し、中身を明示してレイアウトできる要素が数多く誕生したので、サイト内の構成を昔より定義しやすくなったような印象が...
使いどころが分かりにくいhtml要素の使いどころを考えてみる 後編... さて、重い腰を上げてhtml要素の使いどころ 後編いってみたいと思います。 前回分は前の記事でご確認下さい。 使いどころが分かりにくいhtml要素の使いどころを考えてみる 前編 まずは大枠の仕分け コンテンツの埋め込み フォーム ユーザー操作 テーブル要素に...
webサイトを作る時の要素の使い方 4巻 head内の記述... 前回はmeta要素の書き方について記事を投稿しました。 前回の記事リンク webサイトを作る時の要素の使い方 4巻 meta要素 今回は少し幅を拡げて、head内の記述について掘り下げていこうと思います。 掘り下げたらびっくり。数が結構あるんですね、、、 ...

htmlカテゴリの最新記事