概要
HTMLの講習カリュキュラムとなります。
関連ページ
覚えること
- タグを用いて文書構造をマークアップする
基礎
HTMLとは
- Webページを構成する言語の1つ
- 文書構造を定義する
- 仕様はW3Cが制定。現在 (2016年) の最新バージョンはHTML5
タグの構成
<タグ 属性名="属性値">コンテンツ</タグ>
- 要素
- タグ (body、title、meta...)
- 属性
- 属性名 (src、href、width...)
- 属性値 (image.png、index.html、10px...)
- 閉じタグ
- ほぼ全てのタグには閉じタグが必要
- データを含まないタグは閉じタグが無い (
<br>、<hr>、<img>...)
- ファイル拡張子は一般的に
.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 |
- 参考モデル図 (W3C)
配置ルール
間違ったマークアップの例
<!-- フレージング・コンテンツにはヘディング・コンテンツを内包できない -->
<span>
<h1>Content</h1>
</span>
<!-- ヘディング・コンテンツにはセクショニング・コンテンツを内包できない -->
<h1>
<article>Content</article>
</h1>
<!-- インタラクティブ・コンテンツにはメタデータ・コンテンツを内包できない -->
<a href="">
<title>Content</title>
</a>
正しいマークアップの例
<!-- フロー・コンテンツにはフロー・コンテンツを内包できる -->
<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
- 画像
- ...
- Webページを読み込み、どのようなリクエストが発生しているのか確認する
終わりに
- HTMLはブラウザによって表示が異なる
- HTML検証サービスの紹介 (Markup Validation Service 等)
- ブラウザのバージョンによってサポートされるタグは異なる
- タグの互換性チェックは caniuse.com が便利