無料ブログ「rentafree.net」の管理人ブログ

HTML5のセクション要素を導入しました

ブログ公式テンプレートに、HTML5のセクション要素を導入しました。
公式サイトの方も公開部分はだいたい導入しました。

HTML5のセクション要素ってやつなんですが、
見た目に影響はでないのですが、
ページ内の記事部分や共通部分を囲むのに使うタグです。
人間向けではなく機械向けのタグなので、SEO的に効果があると思うので導入しました。
検証していないので、短期的に逆効果があるかもしれません。
気に入らない場合は、公式テンプレートを複製して編集してください。


導入したタグは
<header>
<nav>
<article>
<aside>
<footer>
です。
<section>は意味がわからないので導入しませんでした。

ページの重要部分を<article>で囲む。
ページに関連するが参考程度の部分を<aside>で囲む。
サイト内の共通部分や別ページの内容(リンク)は<header><footer><nav>で囲む。
ってな感じで、ページ内の文章のランク付けに使われるのではないかと思います。


全体構造は、

<header>ブログヘッダ</header>
<nav>サイドバー</nav>
<article>個別記事</article>
<nav>前後リンク</nav>
<footer>ブログフッタ</footer>

こんな感じです。
個別記事は別々に<article>で囲まれます。
プラグインは基本的に<nav>に入りますが、一部セクションから外れます。


<article>内は、

記事ヘッダは<header>しません。
<header>はサイト内の共通部分に利用するタグだと思いますので、
記事タイトルは記事の最重要部分ですから、囲まないほうがいいのではないかと思いました。

記事フッタは<footer>ではなく<nav>で囲みます。
記事フッタ下にコメント等が続く場合があるので、それより上に<footer>使っていいのか怪しいので<nav>にしました。

コメント及びトラックバックは表示される場合は別々に<aside>で囲みます。

「続きを読む」リンクがある場合は<nav>で囲みます。


Wikiの公式テンプレートも修正すると思います。

HTML5の<menu>タグ

HTML5に<menu>タグってのがあって、
HTMLレベルでブラウザ標準のコンテキストメニューが作れるみたいなんだが、
ブログエディタのコンテキストメニューに使いたいな・・・
独自実装のコンテキストメニューよりも、ブラウザ標準のメニューのがいいと思う。

だが、このタグはFirefox 8.0から対応。
Firefoxについては、今月末?にFirefox 10がでて、その後少しすると3.6のサポートが終了になるみたい。
Firefox 10は長期サポートで、次がFirefox 17らしい。
Firefox 4-9は短期サポート品。
ってわけで、もう少しするとFirefox 10未満は全部切り捨てられる。
IEはわからんが、IE9でもダメじゃないかな。
というか、Windows XPがIE8までしか入れられないからXPのサポート期限が終了してくれないとIE8は捨てられないよな・・・

ってわけで、現状導入は難しい・・・