HTMLセクションと範囲header/footer/main/div/span：html step6

HTMLセクションと範囲header/footer/main/div/span：html step6

前回は、h1～6タグ・pタグ・articleタグ・sectionタグ・asideタグ・navタグにつきまして、記載方法のサンプルソースコードと共に記載いたしました。

XHTMLではdivタグでマークアップをおこなっていた要素が、HTML5より変更された新しいタグにより、マークアップも比較的シンプルに記載できるものと思います。また、ここであえて記載いたしますが、新しい意味合いを持つHTMLタグ、これを利用するとCSSなどを適応させる際、シンプルに適用させることが出来ることと思います。

よくIDやClassを付け加えるために、divタグやspanタグなどが複雑に重なり合ったマークアップを見ることがございますが、出来る事であれば極力少なくシンプルなマークアップを心がけることが、ページの表示速度およびSEOに対しまして重要なように思います。

という事で、それでは今回はッ、

上記について記載していこうと思います…。

ヘッダーの範囲を示すheader

header要素は、それを含むもっとも近いセクションまたは、セクショニングルートのヘッダーを表します。
もっとも近い要素がbody要素であった場合は、そのヘッダーは文書全体のへッダーとなります。

フッターの範囲を示すfooter

footer要素は、それを含むもっとも近いセクションを表します。
もっとも近い要素がbody要素であった場合、そのフッターは文書全体のフッターとなります。

一般的に、フッターはセクション内の最後に配置されますが、前の方に配置することも可能です。

メインコンテンツのmain

main要素は、そのHTML文書のメインコンテンツを表します。
main要素の要素内容には、サイト内の各ページで共通しているコンテンツ（ロゴ・ナビゲーションetc）は含めないこととなります。

独自に範囲を示すdivおよびspan

div要素とspan要素は、その内容が何であるかは表さずに、ただその範囲だけを示す要素です。
div要素の違いは、div要素がブロックレベル要素であるのに対して、span要素はインライン要素である点になります。

任意の範囲をグループ化したい場合や、CSSを適用するために範囲を指定する必要がある場合に使用します。ただし、その範囲に使用すべき適切な要素が他にある場合は、そちらの要素を使用することが望ましいように思います。

という事で今回は、HTMLセクションと範囲を2回にわたって記載してみました。

今回のヘッダー・フッター・メイン・divやspan、比較的簡単かと思います。しかしながら、最初に記載したとおりdivやspanタグは必要最低限の使用にとどめることが、HTMLのマークアップをおこなうことで重要なように思います。

XHTMLからコーディングをおこなっている方であれば、<div id="header"></div>などが一般的な記載方法でしたから、なおさら注意が必要になるかと思います。

HTMLのマークアップは、極力シンプルにがクローラーに優しいマークアップと言えることと思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。