改めて、HTML5 ってなんだを考える。(part2)


## はじめに

こんにちは monpy です。
[改めて、HTML5 ってなんだを考える。(part1)](http://qiita.com/monpy/items/d2a12942254f86f165f4) の続きです。

今回は [MDN | HTML 要素リファレンス](https://developer.mozilla.org/ja/docs/Web/HTML/Element) についてまとめます。


## 参照元

この勉強会では、[MDN](https://developer.mozilla.org/ja/docs/Web/HTML) を参考にしながら進んでいきます。

## HTML 要素リファレンス

### 冒頭

> このページでは、すべての `HTML` 要素を一覧表示しています。 この一覧は、あなたが考えていることを実現するために何が必要かを見つけやすくするよう、機能別にグループ化しています。このガイドは新たにコーディングを始める方向けに記述していますが、誰にでも役に立つリファレンスになるよう配慮しています。

* このページはタグを機能別に分けてくれてます
* ただし、これは本質的な区分けではないので注意
	* タグの根本的な区分けは [コンテンツカテゴリ](https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#Flow_content) に書いてあります。(ここは追々参照していきます)
* `すべて` のタグは書いてないかも。なので `該当タグ` と表記しているのはおそらく網羅性はないと思ってください。


### 基本要素

> 基本要素は、あらゆる HTML ドキュメントの根幹をなすものです。これらの要素はすべての Web ページのソースコードで、ページの最初の行にある doctype 宣言の後に存在します。Web ページのコンテンツを構成する要素は、開始タグ <html> と終了タグ </html> の間に配置します。<html> 要素は、ルート要素としても知られています。

```該当タグ
<html>
```

* 全てはこのタグから始まりますということですね。
* `<body>` はこの中に入らないのだろうか。 

### ドキュメントメタデータ

> メタデータは、ページに関する情報のことです。これはソフトウェア (検索エンジンやブラウザなど) が利用する、およびページの描画を支援するスタイル、スクリプト、データといった情報を含みます。スタイルやスクリプトのメタデータはページ内で、あるいはそれらの情報を持つ別のファイルへのリンクとして定義します。

```該当タグ
<base>
<head>	
<style>
<title>
```
* ページの前提情報といったとこですね。
	* `<base>` なんかは場合によっては使ったりしますね。

### コンテンツセクショニング

> コンテンツセクショニング要素は、ドキュメントのコンテンツを論理的な断片に体系づけます。ページのコンテンツでヘッダーやフッターのナビゲーション、あるいはコンテンツのセクションを識別する見出しなどの、大まかなアウトラインを作成するためにセクショニング要素を使用します。

```該当タグ
<address>
<article>
<footer>
<header>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<hgroup>
<nav>
<section>
```

* `HTML5` から出てきたタグですね。
	* ここら辺は次回から追います。
*  理解してる人も多いかと思いますが、`h1 ~ h6` はセクショニングとして取り扱います。

### テキストコンテンツ

> `HTML` テキストコンテンツ要素は、開始タグ `<body>` と終了タグ `</body>` の間にあるコンテンツでブロックやセクションを編成します。これらの要素はコンテンツの用途や構造を識別するものであり、`アクセシビリティ`や `SEO` のために重要です。

```該当タグ
<div>
<dl>, <dt>, <dd>
<figure>, <figcaption>
<hr>
<ul>, <li>, <ol>
<p>
<pre>
<main>

```

* `<div>` がテキストコンテンツ要素として置かれているのが `HTML5` ですね。
* hr も入るんですね。
* `<div>` も `<p>` も同じ区分けですが、用途は別です。この話も追々

### インラインテキストセマンティクス

> `HTML` インラインテキストセマンティクス要素は、単語、行、あるいは任意のテキスト範囲の意味、構造、スタイルを定義します。

```該当タグ
<abbr>
<b>
<bdi>
<bdo>
<br>
<cite>
<code>
<data>
<dfn>
<em>
<i>
<kbd>
<mark>
<q>
<rp>
<rt>
<rtc>
<ruby>


<samp>
<small>
<span>
<strong>
<sub>
<sup>
<time>
<u>
<var>
<wbr>
```
* ここら辺を適切に使える男になりたいですね。

### 埋め込みコンテンツ

> `HTML` は公式にサポートするマルチメディアコンテンツ以外のさまざまなコンテンツを、容易に対話できるとは限らないものであっても埋め込むことができます。

```該当タグ
<embed>
<object>
<param>
<source>
```

* まぁ順当

### スクリプティング

> 動的なコンテンツや `Web` アプリケーションを作成するために、`HTML` ではスクリプト言語を使用できます。もっとも有名な言語は、`JavaScript` です。いくつかの要素がスクリプト機能をサポートします。

```該当タグ
<canvas>
<noscript>
<script>
```

* スクリプト系はカテゴリとして別なんですね。ドキュメントメタデータ とは違う。

### 編集範囲の特定

> これらの要素は、テキストの特定の範囲が変更されたことを示します。

```該当タグ
<del>
<ins>
```
* 文書言語 としてはカテゴライズされるべきなんでしょうか
* `CMS`  とかでは 気にしたほうが良いのでしょうか。

### テーブルコンテンツ

> 以下の要素は、表形式のデータを作成および制御するために使用します。

```該当タグ
<caption>
<col>
<colgroup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<tr>
```

* `bootstrap` あたりではよく使います
* `css` の `table` を使うのが良いと思っている人間

### フォーム

> `HTML` では、ユーザがデータを記入して `Web` サイトやアプリケーションに送信することを可能にするフォームを作成するために、組み合わせて使用する要素をいくつか提供します。

```該当タグ
<button>
<datalist>
<fieldset>
<form>
<input>
<keygen>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
```

* 熟練の`マークアッパー`ならここら辺は知ってて当然よ・・・
	* `<output>` すげえ。。。`IE` だせえ

### インタラクティブ要素

> `HTML` には、インタラクティブなユーザインターフェイスを作成するための要素があります。

```該当タグ
<details>
<dialog>
<menu>
<menuitem>
<summary>
```

* 知らんだなー
* chrome とかだと動くみたい
	* 実験系だったり企業内のシステム だったり、限定的なシチュエーションなら実装コストが大変安くなるかも

## 振り返りと次回

うーむ。こうして眺めると多いなぁ。大変だ。
マークアップ初心者は

`コンテンツセクショニング` を書いて `テキストコンテンツ` を書いて `インラインテキストセマンティクス` 書く。
みたいな認識で始めるといいかも(辛いね)。

次回は [HTML5 ドキュメントのセクションとアウトライン](https://developer.mozilla.org/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Defining_Sections_in_HTML5) を進めていきたいと思います。