社内5分LTの。 Semantic HTML はデザインのためにもなるよねーっていう話です。

1. Semantic HTML が止まらない
Yumi ishizaki 20120628

2. W3C LOVEなHtml markupオタクが
気にすること3つ
Semantic accessibility responsive
• Htmlには • 誰でも使 • デバイス
意味があ える に合った
るよ！ レイアウ
ト

3. Semantic HTMLって何？
• 意味
– Htmlの中身の要素に意味を持たせてあげるこ
と
– ブラウザや検索エンジンがちゃんと理解して
くれるように
• 例
– <h1>…見出しなのです
– <p>…段落ですよ
– <blockquote>…引用文なのですよ

4. 余談の悪い例：目立たせるために
<h1>
Cssで頑張り
ましょう

5. 余談の悪い例：<br>2回繰り返して
段落
<p>で囲みま
しょう

6. Semantic HTMLってなぜ必要？
• Accessibilityにもつながる
– 障害を持つ人々でもwebサイトに何が書いてあるか分かるように。
（semantic htmlのみでは完璧なaccessibilityにはならないけど…）
• SEO
– いわゆる検索エンジン向け
– White hat SEO って言われる正当な方法でのSEO
• Htmlが軽くなる
• 制作者同士で「仕様」の共有が、コードの中で出来る。
• デザインのガイドラインが作りやすい
• Cssで模様替え/リニューアルが簡単

7. html5
• 今までdevやspanを使い、idやclass指定で、意味を持たせていたもの
があって、、、
よく使われるものがhtml5で出来たので感激ですね！
詳しくはW3Cドキュメント見てね。
– <header>
– <footer>
– <article>
– <nav>
• 古いブラウザには対応してなかったりで、色々とまだ問
題はありますが！

8. Semantic HTMLの本当にいいところ
（持論）
• デザインのためになること！

9. Semantic HTMLで組む作業は
デザインを考える前の手順！
• 要素・情報を意味を持って整理
バラバラな情報 情報をきれいに
何が見出しで何が本文だか分からない状態 整理整頓する

10. デザインの手順
• Step1：要素・情報を整理する
• Step2：それをレイアウトに落としこむ
（ここがsemantic Html！）
• Step3：デザインの作業…色…フォント…イ
メージ…などなどが続く…

11. 結論
• ガッチガチなSemantic HTMLじゃなくても
Semantic HTML 意識すると、
デザインのためにもなって、一石二鳥なのでオススメで
す！