HTML5のマークアップで参考になったサイトとか、疑問点とか

ホント、ちょっと真剣にコーディングやってなかったら、浦島太郎状態になっていた、やまだです。
HTML5のマークアップ、「?」満載、ドツボにはまりまくりw

今、WP構築のお仕事をさせてもらってるのですが、HTML5でコーディングしています。
定番的なブログと違って、お店や会社などのサイトとなると「?」な部分がいろいろでてきました。

このサイトも勉強がてら、HTML5で作ってはみたもののなんとなくな感じでしかやっていなくて(なのでこのサイトは参考にならずw)まだまだ分からないことだらけ。
とにかく、
正しいコーディングはSEOにもつながるので、しっかり実践して確認しながら一生懸命 知識を頭の中にたたき込みます。(体で覚えるタイプw)

まず、ぶつかったのがarticleとsectionの取り扱い。

articleとsectionについて、いろいろなサイトのソースを見ても人によってarticleとsectionの扱いが違くて、本を読んでもいまいちピンとこない。
ここの説明がとてもわかり易かったのですが、いまだ自信がない(だめじゃんw)

そして次は navの扱い。asideと混同してました。

しかも、asideはサイドバーとか思ってました(補助的なナビゲーションに使うとです)。
navは、以下のとおり。

●目次
もちろん yes だ。これは特にコンテンツにとっては主たるナビゲーションだ。
●前へ/次へ ボタン(またはページネーション)
これにいては yes と言えるだろう。これはブログサイトの全体構造や階層にとって重要だからだ。
●検索フォーム
私なら、もちろん yes だ。しかし、仕様には書かれていない。検索フォームはサイトのナビゲーションには極めて重要だ。特に自前の検索エンジンに依存する大規模サイトではそうだ。
●パンくずリスト
これも yes と言えるだろう。パンくずリストはいつも必要というわけではなく、適用しなくても使えるけれども、大規模サイトでは、パンくずリストの導線は重要なナビゲーションとなる。

nav 要素を使ったセマンティックなナビゲーション:から引用

となると・・・
html1
というか、この場合そもそもパンくずは必要なのだろうか・・・・?
今回の左ナビは、むしろメインナビゲーションでありここでいう目次にあたるわけで
TOPはパンくずなしなので、2階層目からのパンくずをnavとして、sectionにするべき?
つうか、べつにnavである必要ないとか・・・・意味不明(米倉涼子風に)

でもって・・・パンくずのマークアップの問題も浮上

「パンくずにmicrodata入れてよ~ん」とのことで、microdataを調べていくうちに、パンくずのマークアップとかいろいろ出てきて
またまた意味不明(米倉涼子風に)・・・

こちらはul(リストタグ)化をすすめてるけど
こちらは

ulじゃなくp>divを勧めてるけど、HTML5ではp>divの方がいいよってことだよね?

まだまだわからないことだらけで、何一つ解決してませんが
なんにせよ情報がきちんとユーザーに伝わることが一番大事。一生懸命作るに限ります(=゚ω゚)ノ(これでいいのか?)w

自分用にWPに設置する方法もリンクも貼っとこう。

おまけで、できたページはここでチェック!

そして、先日
hgroupが削除されて、mainが追加されましたとさ・・・追いていくのに必死です(=゚ω゚)ノ

◎このサイトを作った時参考にした、HTML5の本

この記事をシェアする