sectionとarticle要素の違い　結局どう使うのが良いのか。。。

基本のマークアップとして、これまでは 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>２番目のコンテンツ部分の記述だヨーーー</p>
        　　<div>
            	<p>２番目のコンテンツ部分の記述だヨーーー</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>２番目の子のコンテンツ部分の記述だヨーーー</p>
                <div>
                    <p>２番目の子のコンテンツ部分の記述だヨーーー</p>
                </div>
            </section>
        </article>
        
    </article>
        
    <footer>
    		<p>footer部分の記述だヨーーー</p>
    		<small>コピーライトを書いたりするよーー</small>
    </footer>

上記の様な形で記述すると、お客様に好評な印象があります。

結局は記述する内容によって、タグは変えますが、基本的な使用方法の参考になればと。

コーディング代行依頼はいつでもお待ちしています。

それではまたーーー。