概要

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
  - 画像
  - ...

終わりに

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

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

概要

関連ページ