コミュ力あがるHTML

セマンティックHTML
 
まず初めにセマンティックって?というところ

セマンティックとは、一般的には「意味」や「意味論に関することを指す語である。IT用語としては、コンピュータ文書情報の持つ意味を正確に解釈させ、文書関連付け情報収集などの処理を自動的に行わせる技術について用られる語である。セマンティックとは、一般的には「意味」や「意味論に関することを指す語である。IT用語としては、コンピュータ文書情報の持つ意味を正確に解釈させ、文書関連付け情報収集などの処理を自動的に行わせる技術について用られる語である。

セマンティックとは - IT用語辞典 Weblio辞書

 

要するに、
セマンティック(意味論)とは、意味づけをしっかりしましょうということ。
 
 
HTMLに置き換えると、
<p>を使うならそこは段落!空白行は<p>を使って表現してはいけないよ。
<div>がたくさんあって意味的じゃない?だったらHTML5からはヘッダーならヘッダー、フッターならフッターのタグを用意しますからこれ使って!
 
 
といった具合にタグの意味を考えて、それにあった記述をしていくということ。
 
 
これによって他の開発者との間で連携も取れ、再利用もしやすくなる。
さらにはコンピュータにもわかりやすい構造にすることができるのでアクセシビリティも上がり、SEO対策にもなる。
 
だから、今まで<div>を使われてきたところがHTML5からはより意味のあるタグに置き換わってたりする。
 
 
ヘッダーには<header>。フッターには<footer>というタグが使える具合に。
以下のサイトでHTML5から使えるようになったタグ一覧があるので参考になった。
 
 
セクション…文書を論理的に分割した単位。 ex)章、節、項…ページ、ダイアログ...
<section><article><aside><nav>がある
<section>は他の3つで置き換えられないもの。
<article>は独立した本文を扱う。RSSリーダーで意味が通じるなら<section>ではなく<article>
広告やサイドバーガジェットなど本文と関わりが薄いセクションには<aside>
サイト内のメニューに対しては<nav>
 
セクションの中には以下の要素が入る。
見出し要素 h1~h6, hgroup
セクションルート <body><blockquote><details><fieldset><figure><td>
ヘッダ、フッタ<header><footer>
 
そのほかにも日付や日時を表す<time>や問い合わせ先アドレスを表す<address>がある。
 
セクションでは文書のアウトラインを構成し、スタイル用途でブロックを作成する際には<div>を用いる
1セクションに対して1見出し!h1のみでOK
1つのセクションに2つ以上の見出しをつける場合にはそのセクションの内側をhgroupで囲う。
 
セクションルートはセクションとは独立したアウトラインを構成する。
 
 
まとめ
セマンティックHTMLとは他者(人、機械)とうまくコミュニケーションするための考え方。
コミュ力あげればみんなハッピー!
これはHTML5の新しく追加されたタグで実現可能になった。
 
文書はセクションを用いてブロック分けし、divはスタイルに関する記述に対して使用する。
 
 

最後に

HTML5関連で同様の作者のスライドを見るとHTML5に対する可能性をすごく感じる。
特にスライドの中で紹介されていたこのサイトはすごい!