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 意識すると、デザインのためにもなって、一石二鳥なのでオススメです!