セマンティックマークアップ

Transcript

1. HTMLにセマンティックを求めるのは 間違っているだろうか
2. そもそHTMLとはなにか？
5. そもそHTMLとはなにか？ HyperText Markup Languageは、ウェブページを表現す るために用いられる。ハイパーリンクや画像等のマルチ メディアを埋め込むハイパーテキストとしての機能、見出 しや段落といったドキュメントの抽象構造、フォントや文 字色の指定などの見た目の指定、などといった機能が ある。 〜 wikipediaより 〜
6. そもそもマークアップは コンテンツや人によって正解が違います
7. 詳細度の違い - <span>や<div>など汎用的なタグを使う - <time>や<header>など意味を持つタグを使う どちらも間違いではありません 解釈の違い コンテンツの文脈やデザインの受け取り方次第で変わってしまい ます 個人的に<nav>や<aside>などはブレやすいと思ってます
8. それなら全て<div>で マークアップしとけば間違いない？
9. セマンティックであることが 望ましいです
10. そもそセマンティックとはなにか？
11. そもそセマンティックとはなにか？ セマンティックとは、一般的には「意味」や「意味論」に関 することを指す語である。IT用語としては、コンピュータ に文書や情報の持つ意味を正確に解釈させ、文書の関 連付けや情報収集などの処理を自動的に行わせる技術 について用られる語である。 〜 weblio辞書より 〜
12. マシンリーダブルにすることで アクセシビリティを高めることができます
13. セマンティックなマークアップを 心がけましょう
14. 間違えやすいマークアップ
15. コピーライト あるサイトのコピーライトです
16. コピーライト <small> 〜 </small> 小さいなどのスタイルとは関係なく、著作権表示や注釈 などを表します
17. 画像とキャプション あるサイトの画像とキャプションです
18. 画像とキャプション <figure> <img/> <figcaption> 〜 </figcaption> </figure> この形である必要はありませんが、<img/>に<p>などで ラップするのはやめましょう <p>はテキストの段落を表します
19. タブメニュー よくあるタブメニューです
20. タブメニュー <ul> <li><a href=”#id1”> 〜 </a></li> ... </ul> <section id=”id1”> … </section>
21. カルーセル よくあるカルーセルです
22. カルーセル <div> <ul> <li><img/></li> ... </ul> <button type=”button” class=”left”> 〜 </button> <button type=”button” class=”right”> 〜 </button> </div>
23. 正しいマークアップをしましょう