Semantic HTML が止まらない

Yumi ishizaki 20120628

W3C LOVEな Html markupオタクが気にすること 3つ

Semantic

• Htmlには意味があるよ！

accessibility

• 誰でも使える

responsive

• デバイスに合ったレイアウト

Semantic HTMLって何？• 意味– Htmlの中身の要素に意味を持たせてあげること

–ブラウザや検索エンジンがちゃんと理解してくれるように

• 例– <h1>…見出しなのです– <p>…段落ですよ– <blockquote>…引用文なのですよ

余談の悪い例：目立たせるために <h1>

Cssで頑張りましょう

余談の悪い例： <br>2回繰り返して段落

<p>で囲みましょう

Semantic HTMLってなぜ必要？• Accessibilityにもつながる

– 障害を持つ人々でも webサイトに何が書いてあるか分かるように。（ semantic htmlのみでは完璧な accessibilityにはならないけど…）

• SEO– いわゆる検索エンジン向け– White hat SEO って言われる正当な方法での SEO

• Htmlが軽くなる• 制作者同士で「仕様」の共有が、コードの中で出来る。• デザインのガイドラインが作りやすい• Cssで模様替え /リニューアルが簡単

html5• 今まで devや spanを使い、 idや class指定で、意味を持たせていたものがあって、、、よく使われるものが html5で出来たので感激ですね！詳しくはW3Cドキュメント見てね。– <header>– <footer>– <article>– <nav>

• 古いブラウザには対応してなかったりで、色々とまだ問題はありますが！

Semantic HTMLの本当にいいところ（持論）

• デザインのためになること！

Semantic HTMLで組む作業はデザインを考える前の手順！

• 要素・情報を意味を持って整理

バラバラな情報何が見出しで何が本文だか分からない状態

情報をきれいに整理整頓する

デザインの手順• Step1：要素・情報を整理する• Step2：それをレイアウトに落としこむ（ここが semantic Html！）

• Step3：デザインの作業…色…フォント…イメージ…などなどが続く…

結論• ガッチガチな Semantic HTMLじゃなくても

Semantic HTML 意識すると、デザインのためにもなって、一石二鳥なのでオススメです！