HTML5でのマークアップで多いミス

HTML5勧告きたけど、日本語の解説サイトってW3Cのガイドライン本当に見てんのかなーって思う位ヒドイ。

section要素はアウトラインだ

ほとんどの解説サイトが、sectionというタグをレイアウトで使う、今までのdivの位置づけの様に使わせてる。
これはアウトライン要素なので、文書構造を区切る要素。
なのでレイアウトの為に使うものじゃない。

section始まりました。hnは一緒にどうぞ。これ絶対。
見出し無いならsection使わずだまってdiv使えばいいのに、何でもかんでもsection使うのは間違い。

nav要素はメインのナビゲーションだけ！

なんでもかんでもナビゲーションリンクにnav要素使ってる事多いけど、これも違うんじゃないか。
通常サイトのヘッダにあるサイトナビゲーションには使えるだろうけど、サイドバーにあるタグクラウドにまでnav使うのは違う。
ただ、パンくずは別。パンくずはユーザビリティを高めるためだけじゃなくて、あれは立派なサイトのナビゲーションです。

例えばサイトを大きい病院に例えて、第一病棟・第二病棟・受付。
ココら辺はメインのナビゲーションでしょうよ。
しかし、例えば精神科の長友先生っていうのは、おっきい病院からしたらメインの案内ではないでしょうよ。

でもね、今いるとこがわかんなくなっちゃうから、今いるとこはここだよーっていうのは無いと不便、それがパンくずの位置づけだし、そんな観点から見るとメインのnavなんだよ。

一番ヒドイなって思うのは、ブログ記事内のソーシャルリンクをnavで囲ってあるってやつです。
あーそう、それ、メインなんだ。
じゃあサイト見ないでtwitter行くね。ﾊﾞｲﾊﾞｰｲ

aside要素は『まーこれはいいとして。一応書いとくね』という位置づけ

『asideはブログサイドバーを囲みます』とか恥ずかしくて言えない。
asideはレイアウトで使うもんじゃないよ・・。（ケースバイケースだけど。）
100％違うとはいえないんだけど。

補助的な要素とか、はたまた広告なんていう、『まーこれはいいとして』的な扱いの要素を書きたいときに使うもの。
なので、サイドバー全体をasideで囲っちゃうのは間違いだと思ってる。
サイドバーにも大事なことってあるんだよ。
サイドバーに広告置くなら、そこ、囲っちゃえば？

あと、上でも書いたけど、ソーシャルリンクも補助的な、『まーこれはいいとして』要素だし、ブログの記事につけるFacebookとかのいいねボタンとか。あんなのは、まるっとasideで囲っちゃう。

疲れた。
またねー。

• 書いた人
• Latest Posts

About Little

WordPressをいじくり倒して早10年。一人ぼっちでひたすらソースとにらめっこ厨。 有り難いことに、Welcart/WP e-commerce/WooCommerce/EC-Cube等で多数ECサイトを制作させていただいたけど、ふと気付いた、ちゃんと売れるのか。 効果的に売れるようにするためにはどうしたらいいのか。ということでお勉強を兼ねてECサイトも運営中。

• Facebook GraphAPI v2.9でいいね・シェア数をPHPで取得して表示 - 2017年9月7日
• phpstormのFilewatcherでautoprefixerを使う方法 - 2017年1月19日
• Custom Field Templateを使用してのプレビューを実装 - 2016年1月14日
• WordPress：WooCommerceを使ってみて分かったこと - 2013年7月5日
• 誰得なプラグイン Ultimate Google Analytics改をひっそりと公開します - 2013年6月4日
• プラグイン『WooCommerce Fields for Japan』を公開しました - 2013年4月21日
• 公式 WordPress.orgプラグインディレクトリでのプラグイン公開のススメ - 2013年4月17日
• WordPress:WooCommerceを日本仕様へと日本語化 - 2013年4月15日
• webクリエイター パソコンを買う。 - 2013年3月16日
• WordPress:『続きを読む』read moreをpタグで囲む - 2013年3月5日