ついにHTML5が正式勧告
-
フロンティアビジョン
-
- #HTML・CSS
ブログ更新担当日のちょうど前日に「HTML5が正式勧告」と、いい感じにブログネタが手に入って喜んでいます。
個人的には2年くらい前から、HTML5のDOCTYPE宣言と使いやすい主要なタグ（header、footer、section、article、navなど）を、案件によってはこっそり（弊社自社サイトも）と使い続けてきましたが、これからはバリバリ使っていけそうですね！
HTML5 のメリットとは
- ソースの見た目がすっきり
- より文書構造が明確になる（SEOの内部対策にも！）
- JavaScriptと組み合わせることによってFlashや画像でしか出来なかった表現が可能に
- フォームやaタグの改善によりユーザビリティの向上と、制作者にも優しくなる
一瞬で思いついたものを書いてみました！
まだまだマダマダあると思います。
HTML5 でマークアップされて参考になるサイト様
さて私が以前から、または最近参考にしている HTML5でマークアップされて参考になるサイト様をいくつかご紹介したいと思います。
いつもお世話になります。 Yahoo!ニュース
本サイトやその他サービスはまだHTML4だったりXHTML等ですが Yahoo!ニュースの個人、Buzz、意識調査のカテゴリーではHTML5でマークアップされておりました！（2014年10月30日調べ）
いったい何時ごろから変わっていたのでしょう。今日改めて見てみて発見したのですが、全然気づきませんでした！
細かい所でnav、time、figure等でマークアップされており、また全体的にもsection、articleの使い方が勉強になると思います。
みんなのアイドル。 Apple
AppleのサイトのiPhone比較のページです。
最近になってついにレスポンシブ対応をなされて話題になりましたね！
そこで気になったのがfigureの使い方です。
ソースを見てみると、なんとfigureの中は何も空！
代替えテキストも入れずに堂々とタグの中身は空白で、背景画像を駆使して描画している斬新なマークアップです。
レスポンシブ面ではメディアクエリーの力によって簡単に画像を変更できる点から採用されているのでしょうが、こういったマークアップもありなのでしょうか…！
といったご紹介まで。
<figure>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文（メインフロー）から参照されるようなイラスト・図・写真・ソースコードなどのことです。
図表は本文から参照される内容ですが、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。
必要ならば、図表にキャプションや注釈を付けても良いでしょう。図表にキャプションを付ける場合には、<figcaption>タグを使用します。
CodeGrid読んでます。 ピクセルグリッド
スタッフの方たちが技術面で何かしらアウトプット出来る場（ブログや執筆など）を持っていらっしゃる方ばかりで、サイトのソースが非常に勉強になります。
特徴なのはスタイル目的でIDを使用していない事！ classのみ、しかもハイフン繋ぎできちんと統一されているのでとても見やすいです。
僕も真似して比較的新しい案件からはそうしているのですが、IDかclassか？で迷わなくなったり、統一されているのでCSSのメンテナンスが楽になりました。
流石ですわW3Cメンバー。 ミツエーリンクス
サイトのメインコンテンツとなる要素を大きくmainで囲い、sectionの中には必ずhx（h1、h2など）を入れるなど厳格なマークアップをされています。
W3Cチェックでもエラー無しのページばかり！ また早い段階でレスポンシブデザインに対応し、印刷用のCSSもきちんと考えられていてサイトのソースからはとても勉強になります。
やりやがったぜ！ フロンティアビジョン
ここでまさかの自社サイト…！！
弊社も頑張って約半年前（2014年7月7日）にHTML5で自社サイトをマークアップ致しました。
とはいっても…HTML5の要素は有名で基本的なものばかりの使用と、IDやclassが混在していたりちょっとお見苦しいのですが（こっそり修正していく所存…）、
「熊本 ホームページ制作」の検索1位という結果に恥じぬよう構築したつもりですので、参考になる部分があれば幸いでございます。
というわけで
なにはともあれ、HTMLは一つの節目を迎えた、ということですね。
HTMLしかりCSSしかりJavascriptやPHP等々…フロントエンド周りの近頃は本当に考えたり覚えたり、やることがどんどん増えてきている感じがします。
新しい技術や仕組みに、おいて行かれないように、
じゃんじゃんばりばり試して作って見せたりして行きたいです！
