最近フロントエンドはあまりやってないけど、いつ何時必要になるかわからないので、自分の古いHTMLの知識をざっくり補っておく。完全な仕様は参考サイトが詳しい。
HTML5リファレンス
http://www.htmq.com/html5/
ページの雛形
HTML5になったら最低限必要な属性はしっかり書かないとね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="description" content="Hello world"> <style> p { color: red; } </style> <link rel="stylesheet" href="style.css"> <link rel="shortcut icon" href="favicon.ico"> <title>Hello world</title> </head> <body> <p>Hello world</p> </body> </html> |
テーブル
テーブルをエレメント分けするタグが増えた。
|
1 2 3 |
<thead> table header element <tbody> table body element <tfoot> table footer elementer |
<tbody>－HTML5タグリファレンス
http://www.htmq.com/html5/tbody.shtml
trとかtdって何の略だっけ？と、記憶が怪しいので復習。
|
1 2 3 |
<tr> table row <th> table header <td> table data |
アンカー
アンカーはidで指定できるようになったみたい。
|
1 2 3 |
<p id="top">top</p> ... <a href=#top">Back to top</a> |
フォーム要素
たとえば以下のような入力種別が増えてる。required(必須)を指定すると、未入力だとブラウザが警告を表示。
|
1 2 3 |
Date: <input type="date" required> URL: <input type="url" required> Email: <input type="email" required> |
<input>－HTML5タグリファレンス
http://www.htmq.com/html5/input.shtml
ラベル
ラベルタグで囲むことで、ラベル文字列のクリックでラジオボタンが変化するようにできる。
|
1 2 3 |
<label><input type="radio" value="red">Red</label> <label><input type="radio" value="green">Green</label> <label><input type="radio" value="blue">Blue</label> |
for属性を指定することで、ラジオボタンとラベルを離して配置することもできる。
|
1 2 3 |
<input type="radio" value="yellow" id="yellow"> ... <label for="yellow">Yellow</label> |
リスト
ドロップダウンリスト。
|
1 2 3 4 5 6 7 8 |
<select> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="yellow">Yellow</option> <option value="magenta">Magenta</option> <option value="cyan">Cyan</option> </select> |
窓のサイズを指定したリスト。
|
1 2 3 4 5 6 7 8 |
<select size="5" multiple> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="yellow">Yellow</option> <option value="magenta">Magenta</option> <option value="cyan">Cyan</option> </select> |
スタイリング関連
これはHTML5以前の内容だけど、ざっくり復習。
divとspanの違い。
- div 汎用ブロック要素 (前後が改行される)
- span 汎用インライン要素 (前後が改行されない)
idとclassの違い。
- id 文章中で唯一の要素
- class 文章中で複数存在し得る要素
サンプル
|
1 2 3 4 5 6 |
<div id="note"> <p>おはようございます。</p> <p>今日も元気です。</p> </div> <p><span class="warning">警告</span> 注意してください。</p> |
セマンティックなタグ
HTML5から文章構造を示すタグが追加されている。たとえば以下のような。
- header
- footer
- nav
- article
- aside
- section、など
HTML5対応ブラウザ用にはタグを書く。
|
1 |
<header>ヘッダー</header> |
旧ブラウザ用にはidを指定して書く。
|
1 |
<div id="header">ヘッダー</div> |
HTML5のセマンティックなマークアップを知ろう（文書の構造編） [Skillhub (スキルハブ)]
http://skillhub.jp/courses/1/lessons/45
[HTML5] 新要素まとめ【2014/2/14版勧告候補】 – Qiita
http://qiita.com/maccotsan/items/20c6ea274b0190dc2c05