基本のマークアップとして、これまでは div 要素で囲んで、デザインを当てていく事が多かったかと思います。
ただしHTML5での記述が当たり前になった現在では、articleとsectionを使用して、マークアップしているのではないでしょうか。
数々のコーディング代行を行わせて頂いておりますが、コーディング規約にarticleとsectionの使用方法について言及されるご依頼主様は非常に少ないです。
未だに使用方法が曖昧な方も多いのではないでしょうか。
それぞれの違いを簡単に記述しますと、
div = 特別な意味合いはありません
article = 要素内が一つのコンテンツとして、単体で完結する内容の物
section = 文章内に出てくる “節” や “章” という意味合い
使用方法は
div = 何でもok
article = 入れ子okだが、子は親の内容を踏襲した物でなければならない
section = 入れ子okだが、”節” や “章”である必要がある
みたいな感じです。
結局、どう記述するのかというと、
■単一ページの場合(LPや縦長一枚HP等)
<head> <p>head部分の記述だヨーーーー</p> </head> <article> <section> <p>コンテンツ部分の記述だヨーーー</p> <div> <p>コンテンツ部分の記述だヨーーー</p> </div> </section> <section> <p>2番目のコンテンツ部分の記述だヨーーー</p> <div> <p>2番目のコンテンツ部分の記述だヨーーー</p> </div> </section> </article> <footer> <p>footer部分の記述だヨーーー</p> <small>コピーライトを書いたりするよーー</small> </footer>
■ブログ等archive系のページの場合
<head> <p>head部分の記述だヨーーーー</p> </head> <article> <section> <p>親の内容を記述するヨーーー</p> </section> <article><!-- ブログ記事① --> <section> <p>子のコンテンツ部分の記述だヨーーー</p> <div> <p>子のコンテンツ部分の記述だヨーーー</p> </div> </section> </article> <article><!-- ブログ記事② --> <section> <p>2番目の子のコンテンツ部分の記述だヨーーー</p> <div> <p>2番目の子のコンテンツ部分の記述だヨーーー</p> </div> </section> </article> </article> <footer> <p>footer部分の記述だヨーーー</p> <small>コピーライトを書いたりするよーー</small> </footer>
上記の様な形で記述すると、お客様に好評な印象があります。
結局は記述する内容によって、タグは変えますが、基本的な使用方法の参考になればと。
コーディング代行依頼はいつでもお待ちしています。
それではまたーーー。