前回は、h1～6タグ・pタグ・articleタグ・sectionタグ・asideタグ・navタグにつきまして、記載方法のサンプルソースコードと共に記載いたしました。
XHTMLではdivタグでマークアップをおこなっていた要素が、HTML5より変更された新しいタグにより、マークアップも比較的シンプルに記載できるものと思います。また、ここであえて記載いたしますが、新しい意味合いを持つHTMLタグ、これを利用するとCSSなどを適応させる際、シンプルに適用させることが出来ることと思います。
よくIDやClassを付け加えるために、divタグやspanタグなどが複雑に重なり合ったマークアップを見ることがございますが、出来る事であれば極力少なくシンプルなマークアップを心がけることが、ページの表示速度およびSEOに対しまして重要なように思います。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
header要素は、それを含むもっとも近いセクションまたは、セクショニングルートのヘッダーを表します。
もっとも近い要素がbody要素であった場合は、そのヘッダーは文書全体のへッダーとなります。
footer要素は、それを含むもっとも近いセクションを表します。
もっとも近い要素がbody要素であった場合、そのフッターは文書全体のフッターとなります。
一般的に、フッターはセクション内の最後に配置されますが、前の方に配置することも可能です。
main要素は、そのHTML文書のメインコンテンツを表します。
main要素の要素内容には、サイト内の各ページで共通しているコンテンツ（ロゴ・ナビゲーションetc）は含めないこととなります。
div要素とspan要素は、その内容が何であるかは表さずに、ただその範囲だけを示す要素です。
div要素の違いは、div要素がブロックレベル要素であるのに対して、span要素はインライン要素である点になります。
任意の範囲をグループ化したい場合や、CSSを適用するために範囲を指定する必要がある場合に使用します。ただし、その範囲に使用すべき適切な要素が他にある場合は、そちらの要素を使用することが望ましいように思います。
という事で今回は、HTMLセクションと範囲を2回にわたって記載してみました。
今回のヘッダー・フッター・メイン・divやspan、比較的簡単かと思います。しかしながら、最初に記載したとおりdivやspanタグは必要最低限の使用にとどめることが、HTMLのマークアップをおこなうことで重要なように思います。
XHTMLからコーディングをおこなっている方であれば、<div id="header"></div>などが一般的な記載方法でしたから、なおさら注意が必要になるかと思います。
HTMLのマークアップは、極力シンプルにがクローラーに優しいマークアップと言えることと思います。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
