綺麗に死ぬITエンジニア

10分でわかるHTMLの最小限（後編）

2019-02-12

対象読者

よく使うHTMLタグ（要素）

前編で、よく使うHTMLタグ（要素）として、以下を紹介しました。

  • html, head, body, meta, title→ HTML定義上の必要なタグ、メタデータ
  • link, style, script→ スタイルシート（CSS）やスクリプト（JavaScript）
  • div→ フローコンテンツ用汎用コンテナ
  • span→ フレージングコンテンツ用汎用コンテナ
  • h1, h2, h3, h4, h5, h6, p→ 見出し1 ~ 6、段落
  • a→ ハイパーリンク
  • em, strong, mark, b, small→ 強調、ハイライト、キーワード、注釈
  • img, audio, video→ マルチメディア（画像・音声・動画）
  • br, hr→ 改行・区切り
  • table, tr, th, td→ 表
  • ul, ol, li→ リスト

これらの具体的な使い方を解説する前に、コンテンツカテゴリーの概念について理解しておく必要がありますので、先に解説します。

コンテンツカテゴリー（コンテンツモデル）

コンテンツカテゴリーは、それぞれの要素が所属する分類のことです。1つだけのカテゴリーに属する要素もあれば、複数のカテゴリーに属する要素もありますし、どのカテゴリーにも属さない要素もあります。

主要なコンテンツカテゴリーとして、以下の7つがあります。

メタデータコンテンツ
表示方法や他の文書へのリンク、本文外の情報等のメタデータを扱う要素
フローコンテンツ
テキストやコンテンツを含む要素
セクショニングコンテンツ
文書のアウトラインを作り、見出し（ヘディングコンテンツ）の範囲を定義する要素
ヘディングコンテンツ
見出しとなる要素
フレージングコンテンツ
テキストやテキストと同様に扱われる要素
エンベディッドコンテンツ
マルチメディア（画像・音声・動画）等の他のリソース（資源）を埋め込む要素
インタラクティブコンテンツ
ユーザーが操作できる要素

それぞれの要素は、それ自身がこれらのカテゴリーのどれかもしくは複数に分類されます。

また、ほとんどの要素は子要素にできる要素のカテゴリーが決まっています。例えば、p要素はフレージングコンテンツに所属する要素しか子要素にできません。

つまり、これらのコンテンツカテゴリーによって、HTMLを記述する上での細かいルールや制約が決まっています。よって、正しいHTMLを記述するためには、ある程度主要なコンテンツカテゴリーについて、特性やルールを覚えておく必要があります。

まずは、主要なカテゴリーが7つあって、それぞれの要素でカテゴリーを使った制約がある、ということを覚えておきましょう。

よく使うHTMLタグ（要素）の解説・使い方

では、よく使うHTMLタグについて端的に解説していきます。

なお、この解説では主要な場合における解説をしています。一部例外がある場合がありますが、全パターンを網羅すると記事が長くなってしまうので、重要な・覚えておくべき働きやカテゴリーについて解説していきます。

結構個数が多いので、初めは「大体こんなものがあるのね」程度の流し読みで大丈夫です。

また、CSSとJavaScriptについての記述もありますが、ひとまず「デザイン（CSS）やプログラミング（JavaScript）で利用するのね」程度の流し読みで大丈夫です。

HTML定義上の必要な要素

html

HTMLの基点となる要素です。他の全ての要素は、この要素の子孫として配置する必要があります。

コンテンツカテゴリー
なし
子要素
1つのheadと1つのbodyのみ
その他の制約
文書のルート（一番外側の要素）として配置する。

head

文書の表示されない情報（メタデータ）を扱う要素を内包する要素です。

コンテンツカテゴリー
なし
子要素
1つ以上のメタデータコンテンツ
その他の制約
htmlの子要素としてしか配置できない。文書内で1つしか配置してはいけない。

body

文書の表示されるコンテンツを内包する要素です。

コンテンツカテゴリー
なし
子要素
フローコンテンツ
その他の制約
htmlの子要素としてしか配置できない。文書内で1つしか配置してはいけない。

メタデータコンテンツ

title

文書のタイトルを表す要素です。ブラウザのタイトルバー等に表示されるテキストです。

コンテンツカテゴリー
メタデータコンテンツ
子要素
テキスト
その他の制約
文書内で1つしか配置してはいけない。

link

文書と外部のリソースとの関係を示す要素です。

最もよく利用される用途として、外部スタイルシート（CSS）の読み込みに利用します（rel属性にstylesheetを指定し、href属性に参照するCSSのURLを指定することで、CSSを読み込みます）。

コンテンツカテゴリー
メタデータコンテンツ
フローコンテンツ（条件付き）
子要素
なし
その他の制約
なし

style

文書のスタイル情報を記載する要素です。デフォルトではCSSとして解釈されます。

主に、文書の内部でCSSでスタイルの定義をする際に利用します。

コンテンツカテゴリー
メタデータコンテンツ
フローコンテンツ（条件付き）
子要素
テキスト（デフォルトではtext/css）
その他の制約
なし

script

文書の実行可能なスクリプトを記載する要素です。

スクリプトを直接記述するか、外部参照するスクリプトを指定します。外部参照する場合、src属性に参照するJavaScriptのURLを指定することで、読み込みます。

コンテンツカテゴリー
メタデータコンテンツ
フローコンテンツ
フレージングコンテンツ
子要素
テキスト（デフォルトではtext/javascript）
その他の制約
なし

meta

他のメタデータコンテンツで表すことができない任意のメタデータ情報を記載する要素です。

charset属性で文書全体の文字コードを指定します。name属性およびcontent属性を指定することで、その他のメタデータを定義できます。

コンテンツカテゴリー
メタデータコンテンツ
子要素
なし
その他の制約
なし

汎用コンテナ

div

フローコンテンツ用の汎用コンテナです。

主に、スタイルシートやスクリプトを利用する上で、要素のグループ化等が必要な場合に用います。

コンテンツカテゴリー
フローコンテンツ
子要素
フローコンテンツ
その他の制約
なし

span

フレージングコンテンツ用の汎用コンテナです。

主に、スタイルシートやスクリプトを利用する上で、要素のグループ化等が必要な場合に用います。

コンテンツカテゴリー
フローコンテンツ
フレージングコンテンツ
子要素
フレージングコンテンツ
その他の制約
なし

タイポグラフィ・テキスト

h1 ~ h6

文書中の見出しを示す要素です。

コンテンツカテゴリー
フローコンテンツ
ヘディングコンテンツ
子要素
フレージングコンテンツ
その他の制約
なし

p

段落（パラグラフ）を示す要素です。

コンテンツカテゴリー
フローコンテンツ
子要素
フレージングコンテンツ
その他の制約
なし

a

ハイパーリンクを定義する要素です。

href属性にリンク先のURLを指定することで、そのURLへ飛ぶハイパーリンクを定義します。

コンテンツカテゴリー
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
子要素
親要素の条件を引き継ぐ
その他の制約
子孫にインタラクティブコンテンツを配置できない

使用例

ここまでのテキストに関するタグを利用すると、以下のようなHTMLを記述できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
<div>
  <h1>h1タグ</h1>
  <p>pタグ。</p>
  <h2>h2タグ</h2>
  <p>これはpタグのテストテキストです。<a href="https://www.example.com/">ここだけaタグです。</a></p>
  <p>また、これもpタグのテストテキストです。</p>
</div>
</body>
</html>

html06

よくある間違い

以下のように、pタグの中にdivタグやその他のフレージングコンテンツではないものを入れてしまうのは誤りです。

pタグは子要素にフレージングコンテンツしか含むことができません。

<p>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</p>

以下のように、aタグの子孫要素にインタラクティブコンテンツ（操作できる要素）を含むことはできません。

<a href="https://www.example.com">
  <button type="button">ボタン</button>
</a>

buttonタグはこの記事では紹介しませんが、ボタンを表示するインタラクティブコンテンツです。

em

強調されたテキストを示す要素です。

コンテンツカテゴリー
フローコンテンツ
フレージングコンテンツ
子要素
フレージングコンテンツ
その他の制約
なし

strong

より強調されたテキストを示す要素です。

コンテンツカテゴリー
フローコンテンツ
フレージングコンテンツ
子要素
フレージングコンテンツ
その他の制約
なし

mark

目印やハイライトされたテキストを示す要素です。

コンテンツカテゴリー
フローコンテンツ
フレージングコンテンツ
子要素
フレージングコンテンツ
その他の制約
なし

b

注意を引きたいテキストを示す要素です。なお、特定の重要性を示すものではありません。

コンテンツカテゴリー
フローコンテンツ
フレージングコンテンツ
子要素
フレージングコンテンツ
その他の制約
なし

small

注釈テキストを示す要素です。

コンテンツカテゴリー
フローコンテンツ
フレージングコンテンツ
子要素
フレージングコンテンツ
その他の制約
なし

使用例

ここまでのテキストに関するタグを利用すると、以下のようなHTMLを記述できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
<div>
  <h1>h1タグ</h1>
  <p>HTMLには、<em>emタグ</em>というものや、<strong>strongタグ</strong>、<mark>markタグ</mark>、そして<b>bタグ</b>というのがあるようです。<small>中には、smallタグという注釈に使われるものもあるよう。</small></p>
</div>
</body>
</html>

html07

マルチメディア

img

画像を表示する要素です。

src属性に表示する画像のURLを指定することで、画像が表示されます。

コンテンツカテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
インタラクティブコンテンツ（条件付き）
子要素
なし
その他の制約
なし

使用例

画像は色々な部分に埋め込むことができ、デザインの要として使われたりもしますが、文章中に埋め込むこともできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
<div>
  <h1>h1タグ</h1>
  <p>以前撮った写真が、<img src="https://www.node-link.com/image.jpg" width="100">です。</p>
</div>
</body>
</html>

html08

audio

音声コンテンツを表示・再生する要素です。

コンテンツカテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
インタラクティブコンテンツ（条件付き）
子要素
親要素の条件を引き継ぐ
その他の制約
子孫にaudio、videoを配置できない。

video

動画コンテンツを表示・再生する要素です。

コンテンツカテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
インタラクティブコンテンツ（条件付き）
子要素
親要素の条件を引き継ぐ
その他の制約
子孫にaudio、videoを配置できない。

改行・区切り

br

文中（段落中）の改行を表す要素です。

コンテンツカテゴリー
フローコンテンツ
フレージングコンテンツ
子要素
なし
その他の制約
なし

hr

段落間の区切りを表す要素です。

コンテンツカテゴリー
フローコンテンツ
子要素
なし
その他の制約
なし

使用例

改行や区切りは次のように利用されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
<div>
  <h2>集合場所</h2>
  <p>当日は以下の場所に集合願います。</p>
  <p>〒100-8111<br>東京都<br>千代田区千代田１−１</p>
  <hr>
  <h2>注意点</h2>
  <p>交通費は自費でお願いいたします。</p>
</div>
</body>
</html>

html09

よくある間違い

以下のように、brタグを乱用して見た目を調整するのは、本来のHTMLの目的からは逸れる誤った利用方法です。

<div>
  今日は○○をしました。<br>
  <br>
  今日で3回目の○○ですが、少しずつ慣れてきました。<br>
  <br>
  明日は××をする予定です。楽しみです。
</div>

以下のように、文のまとまりごとに段落を定義するようにして、デザインは極力CSSに任せましょう。

<div>
  <p>今日は○○をしました。</p>
  <p>今日で3回目の○○ですが、少しずつ慣れてきました。</p>
  <p>明日は××をする予定です。楽しみです。</p>
</div>

表

table

表を表示するための大元の要素です。

コンテンツカテゴリー
フローコンテンツ
子要素
caption、colgroup、thead、tfoot、tbody、trのみ
その他の制約
なし

tr

表の行を表す要素です。

コンテンツカテゴリー
なし
子要素
td、thのみ
その他の制約
なし

th

表のヘッダーであるセルを表す要素です。

コンテンツカテゴリー
なし
子要素
フローコンテンツ
その他の制約
子孫にheader、footer、セクショニングコンテンツ、ヘディングコンテンツを配置できない

td

表のデータであるセルを表す要素です。

コンテンツカテゴリー
なし
子要素
フローコンテンツ
その他の制約
なし

使用例

表は次のように利用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
<div>
  <h2>tableタグのサンプル</h2>
  <table>
    <tr>
      <th>姓</th>
      <th>名</th>
      <th>Eメール</th>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>太郎</td>
      <td>sato@example.com</td>
    </tr>
    <tr><td>田中</td><td>花子</td><td>tanaka@example.com</td></tr>
    <tr><td>高橋</td><td>一郎</td><td>takahashi@example.com</td></tr>
  </table>
</div>
</body>
</html>

html10

上記の例ではデザインが全く入っていないので区切りが見た目上曖昧ですが、CSSを利用して好きな位置に罫線を引くことも可能です。

リスト

ul

配置順に意味を持たないリストを表示するための大元の要素です。

コンテンツカテゴリー
フローコンテンツ
子要素
liのみ
その他の制約
なし

ol

順序付きリストを表示するための大元の要素です。

コンテンツカテゴリー
フローコンテンツ
子要素
liのみ
その他の制約
なし

li

リストの項目を表す要素です。

コンテンツカテゴリー
なし
子要素
フローコンテンツ
その他の制約
なし

使用例

リストは次のように利用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
<div>
  <h2>ul, olタグのサンプル</h2>
  <ul>
    <li>佐藤</li>
    <li>田中</li>
    <li>高橋</li>
  </ul>
  <ol>
    <li>佐藤</li>
    <li>高橋</li>
    <li>田中</li>
  </ol>
</div>
</body>
</html>

html11

まとめ

以上で終了です、お疲れ様でした。

大体、HTMLにおいて上記の要素を理解していれば、記述する上での最低限の知識はあると言って問題ないと思います。

他によく使う要素としてformやinput、buttonなどの「入力コントロール」がありますが、主にサーバーサイドとの通信に使われる比較的難易度の高い部分になってきますので、「最低限」からは外しました。

HTMLの最低限を理解した次のステップとしては、やはりCSSになってくるかと思います。

その解説記事もゆくゆくは作成できればと思っていますので、よろしくお願いします。