KENスクールブログ | パソコン教室・パソコン講座なら個別指導のKENスクール

BLOGKENスクールブログ

  1. KENスクール TOP >
  2. KENスクールブログ > Web・DTPデザイン > HTMLを始めよう! その5

Web・DTPデザイン

HTMLを始めよう! その5

前回は、HTML5の「article要素」についてお話しました。
今回は、「section要素」と「article要素」の組合せ方についてお話します。

「section要素」と「article要素」についてそれぞれ意味をお話しましたが、
「どうやって使い分けるの?」って思う人も多いです。
今回はそんな方にsection要素とarticle要素の組合せ方を説明します。

articleの中にsection

前回の例題にあるように、article要素の中にsection要素を使うことができます。

 

articleの中にarticle

article要素の中にarticle要素を入り子(ネスト)にして使うことができます。
ただし、内側のarticle要素は、外側のarticle要素の内容と関係がある時場合のみです。

sectionの中にarticle

section要素の中には同様に、article要素を(複数)配置することができます。
主にブログに多く、Webサイトには使う機会は少ないかもしれませんが、ひとつひとつ完結した内容をまとめることも可能です。

このようにsection要素とarticle要素はお互いに入り子で使用することが可能ですが。
多様ではありますが、Webサイトの内容をしっかり把握し使い分け・組合せで使いましょう。

HTML5より明確なマークアップになりましたが、Webサイトの内容をしっかり把握できていないとマークアップも悩むことになるので注意しましょう。

この記事に関連する講座

Webデザインの現場ではHTMLやCSS基礎知識は必須です。

詳しくはこちら