[HTML5] 新タグなどの予備知識ざっくり – 端くれプログラマの備忘録

最近フロントエンドはあまりやってないけど、いつ何時必要になるかわからないので、自分の古いHTMLの知識をざっくり補っておく。完全な仕様は参考サイトが詳しい。

HTML5リファレンス
http://www.htmq.com/html5/

ページの雛形

HTML5になったら最低限必要な属性はしっかり書かないとね。

<!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>

<!DOCTYPE html>

<head>

<style>

p { color: red; }

</style>

<title>Hello world</title>

</head>

<body>

<p>Hello world</p>

</body>

</html>

テーブル

テーブルをエレメント分けするタグが増えた。

<thead> table header element
<tbody> table body element
<tfoot> table footer elementer

<thead> table header element

<tbody> table body element

<tfoot> table footer elementer

<tbody>－HTML5タグリファレンス
http://www.htmq.com/html5/tbody.shtml

trとかtdって何の略だっけ？と、記憶が怪しいので復習。

<tr> table row
<th> table header
<td> table data

<tr> table row

<th> table header

<td> table data

アンカー

アンカーはidで指定できるようになったみたい。

<p id="top">top</p>
...
<a href=#top">Back to top</a>

...

フォーム要素

たとえば以下のような入力種別が増えてる。required(必須)を指定すると、未入力だとブラウザが警告を表示。

Date: <input type="date" required>
URL: <input type="url" required>
Email: <input type="email" required>

Date: <input type="date" required>

URL: <input type="url" required>

Email: <input type="email" required>

<input>－HTML5タグリファレンス
http://www.htmq.com/html5/input.shtml

ラベル

ラベルタグで囲むことで、ラベル文字列のクリックでラジオボタンが変化するようにできる。

<label><input type="radio" value="red">Red</label>
<label><input type="radio" value="green">Green</label>
<label><input type="radio" value="blue">Blue</label>

<label><input type="radio" value="green">Green</label>

for属性を指定することで、ラジオボタンとラベルを離して配置することもできる。

<input type="radio" value="yellow" id="yellow">
...
<label for="yellow">Yellow</label>

...

<label for="yellow">Yellow</label>

スタイリング関連

これはHTML5以前の内容だけど、ざっくり復習。

divとspanの違い。

div 汎用ブロック要素 (前後が改行される)
span 汎用インライン要素 (前後が改行されない)

idとclassの違い。

id 文章中で唯一の要素
class 文章中で複数存在し得る要素

サンプル

<div id="note">
<p>おはようございます。</p>
<p>今日も元気です。</p>
</div>

<p><span class="warning">警告</span> 注意してください。</p>

<p>おはようございます。</p>

<p>今日も元気です。</p>

</div>

<p><span class="warning">警告</span> 注意してください。</p>

セマンティックなタグ

HTML5から文章構造を示すタグが追加されている。たとえば以下のような。

header
footer
nav
article
aside
section、など

HTML5対応ブラウザ用にはタグを書く。

<header>ヘッダー</header>

1	<header>ヘッダー</header>

旧ブラウザ用にはidを指定して書く。

<div id="header">ヘッダー</div>

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