Web開発未経験エンジニア向けのハンズオン2 - HTML

# 概要

HTMLの講習カリュキュラムとなります。

# 関連ページ

* [Web開発未経験エンジニア向けのハンズオン1 - はじめに](http://qiita.com/naomichi-y/items/ad802167a6ef14a691b7)
* [Web開発未経験エンジニア向けのハンズオン2 - HTML](http://qiita.com/naomichi-y/items/3544d75328f54950bdc9)
* [Web開発未経験エンジニア向けのハンズオン3 - CSS](http://qiita.com/naomichi-y/items/fb25ab8d4b111069c647)

# 覚えること

* タグを用いて文書構造をマークアップする

# 基礎

## HTMLとは

* Webページを構成する言語の1つ
* 文書構造を定義する
* 仕様はW3Cが制定。現在 (2016年) の最新バージョンはHTML5

## タグの構成

```
<タグ 属性名="属性値">コンテンツ</タグ> 
```

* 要素
  * タグ (body、title、meta...)
  * 属性
      * 属性名 (src、href、width...)
      * 属性値 (image.png、index.html、10px...)
* 閉じタグ
  * ほぼ全てのタグには閉じタグが必要
  * データを含まないタグは閉じタグが無い (`<br>`、`<hr>`、`<img>`...)
* ファイル拡張子は一般的に `.html` を用いる

## コメントの書き方

```html
<!--
ここに書いた内容は表示されない。
ただし、ブラウザ上でソースコードを表示すると内容を確認することができる。
-->
```

# HTMLテンプレート

HTMLを構成する上で最低限必要な要素を含めたテンプレートです。ブラウザで表示を確認してみましょう。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Greeting</title>
  </head>

  <body>
    <p>Hello world</p>
  </body>
</html>
 ```

* `<!DOCTYPE html>` はページがHTML5であることを宣言。細かいことは気にせず毎回書く
* HTMLは `head` と `body` 要素から構成される
* `head` 要素の内容は `title` 要素を除いて画面上に出力されない
* `meta` 要素はページの付加情報。何のために必要か?
  * charset: ブラウザがページのエンコーディングを理解するため (初めにcharsetを書かず、マルチバイト文字列が文字化けすることを確認)
  * description: 検索エンジンのクローラーがページランクを判断するための指標
  * og:*: OGP。SNSでページをシェアされた際に表示するリッチコンテンツ
* 画面上に表示したいコンテンツは `body` 要素に記述する

# 覚えておきたいタグ

Webアプリケーションを開発する上で、覚えておかなければならないタグは意外と多くありません。ここでは下表にまとめたタグをマークアップして、実際にブラウザでどのように出力されるかを確認していきます。

| タグ | 正称 | 代表的な属性 | 解説 | 補足 |
|:-- | :-- | :-- | :-- | :-- |
| body | body | | 画面に表示したいデータ | |
| head | heading | | ページの付加情報 | |
| title | title | | ブラウザのタイトルバーに表示する文字列 | |
| h1〜h6 | heading | | 見出し | 数値は見出しレベルを示す |
| p | paragraph | | 文章の段落 | |
| div | division | | 文書として意味を持たないグループ | フロー・コンテンツを内包 (後述) |
| ul | unordered list | | 順序を持たないリスト | |
| ol | ordered list | | 順序を持つリスト | |
| a | anchor | href | 別ページヘのリンク | 相対パスと絶対パスの違い |
| img | image | src | 画像を表示 | 相対パスと絶対パスの違い |
| span | span | | 文書として意味を持たないグループ | フレージング・コンテンツを内包 (後述) |

* タグ名は英語の略称となっているため、元となる単語を分かっていれば理解しやすい
* フォームやテーブルタグは少し複雑なため、必要となった際に別途学習する

# コンテンツモデル

HTML5では、要素ごとにどのようなコンテンツを内包できるかルールを定義しています。

## 要素カテゴリ

ほとんどの要素は次のカテゴリのいずれかに1つ以上属します。

| カテゴリ名 | 説明 | タグの例 |
| :-- | :-- | :-- |
| フロー・コンテンツ | 画面上に表示するコンテンツ | a、h1〜h6、div |
| フレージング・コンテンツ | テキストを構成する要素 | a、img、span |
| セクショニング・コンテンツ | セクションを構成する要素 | article、nav、section |
| ヘディング・コンテンツ | 見出しを構成する要素 | h1〜h6、hgroup |
| エンベデッド・コンテンツ | 画像や動画を表示する要素 | canvas、img、video |
| インタラクティブ・コンテンツ | ユーザが操作可能な要素 | a、input、textarea |
| メタデータ・コンテンツ | ページ情報を定義する要素 | meta、title、script |

* [参考モデル図](https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#kinds-of-content) (W3C)

## 配置ルール

### 間違ったマークアップの例

```html
<!-- フレージング・コンテンツにはヘディング・コンテンツを内包できない -->
<span>
  <h1>Content</h1>
</span>

<!-- ヘディング・コンテンツにはセクショニング・コンテンツを内包できない　-->
<h1>
  <article>Content</article>
</h1>

<!-- インタラクティブ・コンテンツにはメタデータ・コンテンツを内包できない -->
<a href="">
  <title>Content</title>
</a>
```

### 正しいマークアップの例

```html
<!-- フロー・コンテンツにはフロー・コンテンツを内包できる　-->
<div>
  <p>Content</p>
</div>

<!-- フロー・コンテンツにはインタラクティブ・コンテンツを内包できる　-->
<p>
  <a href="">Content</a>
</p>


<!-- フレージング・コンテンツにはエンベデッド・コンテンツを内包できる　-->
<span>
  <img src="">
</span>
```

# Webページの解析

Chromeが提供するDeveloper toolsを用いてページを解析してみます。

* Elementsタブ
  * タグの構造を理解する
  * インスペクターを用いてタグや属性を変更してみる
      * ブラウザをリロードすると変更点は元に戻る
* Networkタブ
  * Webページを読み込み、どのようなリクエストが発生しているのか確認する
      * HTML
      * JavaScript
      * CSS
      * 画像
      * ...

# 終わりに

* HTMLはブラウザによって表示が異なる
* HTML検証サービスの紹介 ([Markup Validation Service](https://validator.w3.org/) 等)
* ブラウザのバージョンによってサポートされるタグは異なる
    * タグの互換性チェックは [caniuse.com](http://caniuse.com/) が便利