１ HTML とは

１．１ HTML とは

HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語です。現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。

ハイパーテキスト（HyperText）とは、ハイパーリンクを埋め込むことができる高機能なテキストです。ハイパーリンクというのは、ウェブページで下線の付いたテキストなどをクリックすると別ページへ移動するリンクのことです。ハイパーテキストでは、ウェブページから別のウェブページにリンクをはったり、ウェブページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。 HTMLには、このハイパーリンク機能で関連する情報同士を結びつけて、情報を整理するという特徴があります。

また、目印をつける（Markup）というのは、文書の各部分が、どのような役割を持っているのかを示すということです。例えば、見出し・段落・表・画像など、文書の中で各部分が果たしている役割が分かるように目印をつけます。こうした見出し・段落・表・画像などの文書内の各部分を要素（element）と呼びます。

文書内の各部分に目印をつけて、その部分がどんな要素なのかを明確にすることで、コンピュータがその文書の構造を理解できるようになります。具体的には、検索エンジンがウェブページの構造を把握して解析したり、ブラウザがウェブページ内の各要素の意味を理解して閲覧しやすいように表示することなどが可能になります。

このようにコンピュータに理解できるように文書の構造を定義することこそが、HTMLの最も重要な役割と言えるでしょう。このとき、目印をつけるための記号として使用されるのがタグです。

HTMLには、現在次のような２つのバージョンが存在して、DOCTYPE宣言やタグなどで違いがあります。

HTML4

W3Cが、1997年12月18日に勧告したHTMLの仕様です。

対応していない現役ブラウザはほぼ存在しておらず、HTML4の機能で充分ならばHTML4で記述しても問題はありません。しかし、今後はHTML5に対応したブラウザだけになっていくでしょうから、これから作成するWebサイトはHTML5で記述する方がよいでしょう。

スタイルシートの指定などで <div> タグを多用することも多く、コードが読みづらくなることもあります。また、グラフィックを描くためのタグは皆無で、グラフや矢印などの図形が必要なときは <img> タグを使用し"絵"を貼り付けることになります。

HTML5

W3Cが、2014年10月28日に勧告したHTMLの仕様です。

比較的新しい仕様なので、現在使用されているブラウザでも、HTML5に対応していないものが存在します。Internet Explorer 8、Chrome3.0、Firefox3.1、Opera9.6、Safari3.0 などとそれ以前のバージョンです。また、スマートフォンでは、ほとんどのブラウザは対応しているようです。

ただし、対応しているといっても、要素によってはサポートされていなかったり、機能の一部しか実現されていなかったりするものもありますので、実際にブラウザで表示してみて確認する必要があります。

HTML5は、明確な文書構造用タグが多数用意されているためコードが読みやすく、全体にHTML4より簡略化されています。ビットマップやベクター形式の図形を描くためのタグが用意されています。ただし、ブラウザのバージョンによってサポート度合いは異なるようです。また、一応、完全ではありませんが、HTML4と互換性があります。

HTML 5.1

HTML5 の改版版。2016年11月1日に初版が勧告され、2017年10月3日に 2nd Edition が勧告されています。

主な変更としては、picture、details、summary、menu、menuitem 要素が追加されました。そのほかにもいくつかの要素で属性が追加・廃止されています。

HTML 5.2

HTML 5.1 の改版版。2017年12月14日に勧告されています。

主な変更としては、dialog 要素が追加されました。そのほかにもいくつかの要素で属性が追加されています。

また、keygen、menu、menuitem 要素が廃止されました。そのほかにもいくつかの要素で属性が廃止されています。

今後は当然のことながら、HTML5が主流となっていくでしょうから、ここではHTML5について説明していきます。

なお、これ以降 HTML と記述している部分は、ほとんどの場合 HTML5 のことを指しています。

また、ここで使用したブラウザのバージョンは次の通りです。

Internet Explorer	Edge	Chromium Edge	Chrome	FireFox	Opera	Sleipnir	Safari
11.836.18362.0	44.18362.449.0	111.0.1661.62	111.0.5563.147	111.0.1	97.0.4719.43	6.4.22.4000	5.1.7

１．２ DOCTYPE宣言

「DOCTYPE宣言」とは、その文書がどのバージョンのHTMLで、どの仕様に従って作られているのかをブラウザに伝えるためのものです。HTMLファイルの最上部に書く必要があります。

<!DOCTYPE html>

HTML4では、3種類のDTDのどれを参照するのかを記述する必要があったので、「DOCTYPE宣言」は長かったのですが、HTML5では上記のように書くだけです。

１．３ HTML の基本構造

図1.3 (1)　HTML の基本構造

<!DOCTYPE html>
<html>
  <head>
    <title>～</title>
    ～
  </head>
  <body>
    <h1>～</h1>
    <div>
      <p>～<span>～</span>～<span>～</span></p>
      <p>～<span>～</span>～<span>～</span></p>
      ～
    </div>
    ～
  </body>
</html>

HTMLの文書は、タグというものを使って書いていきます。 < と > で囲まれたものをタグと言います。<タグ名> のようにタグを書きます。タグ名は、半角であれば大文字でも小文字でも（混ざっていても）構いませんが、小文字で記述しておくほうが良いでしょう。

タグは基本的に開始タグ（始まりのタグ）と終了タグ（終わりのタグ）に分かれています。開始のタグは <タグ名> のように書き、終了タグは </タグ名> のように書きます。

<タグ名>           ← 開始タグ
～
</タグ名>          ← 終了タグ

そして、開始タグと終了タグでひとつのセットで、要素（element）となります（図1.3 (1) のそれぞれの枠が要素に当たります）。

HTML文書の内容は、開始タグと終了タグの間（～の部分）に書いていきます。改行はあってもなくても構いません。ブラウザでは同じように表示されます。

ただし、タグによっては終了タグのないものもあります。こういったタグの場合は、開始タグ自体の意味や内容がHTML文書に反映されます。

同じ内容でも囲むタグを変えることによって、HTML文書中のどの要素にするのか、またどのように表示するのかを変えることができるようになります。

ただし、要素の重なり合いは包含関係(どちらかがどちらかを完全に含む)でなくてはなりません。

<div><p>～</p></div>          ← ○正しい
<div><p>～</div></p>          ← ×間違い

こうした包含関係で、ある要素の内部の要素を「子」、そして「子」の「子」さらにその「子」などを含めて「子孫」と表すことがあります。また、逆にある要素を含む要素を「親」といいます。このテキストでもそういった表現をしている個所があります。

子、子孫: ある要素の内部に存在する要素
親: ある要素を含む要素

１．３．１ HTML5要素のカテゴリー

HTML4 の時は、タグは「ブロック要素」「インライン要素」というように区分され、「インライン要素の中にブロック要素は置けない」などのルールがありましたが、HTML5ではこういった考え方が無くなり、もう少し詳しく分類されます。

HTML要素のカテゴリーは7つあります。

カテゴリー	説明
メタデータ・コンテンツ	HTMLの情報、外部ファイル読み込み、CSSやスクリプトを指定するなど、ベースを整える役割をするもの
フロー・コンテンツ	子孫にテキストなどを持つもの。たいがいの要素はコレに分類される。
ヘディング・コンテンツ	「見出し (ヘディング) 」と、それをまとめるもの
セクショニング・コンテンツ	「見出し+その内容」(セクション) をまとめるもの
フレージング・コンテンツ	テキスト（フレーズ）に関わるもの
エンベッディド・コンテンツ	画像、音、ビデオ、他のHTML など外部リソースを読み込むためもの
インタラクティブ・コンテンツ	クリックやキーボード操作などユーザーによる操作に対応するもの

各カテゴリーの関係と、それに属する要素は図1.3.1 (1) のようになります。

赤字の要素は、重複して他のカテゴリーにも含まれる要素です。（）内には、そのカテゴリーに含まれる場合の条件を示しています。

図1.3.1 (1)　にはHTML5の7つのカテゴリーには含まれないものや、7つのカテゴリーとは別の分類もありますのでそれを説明します。

どのカテゴリーにも属さない要素

どのカテゴリーにも属さない要素は、<html><head><body>などHTMLの骨格となる要素か、<li> <dt> <dd> <tr> <td> <rt> など「ある要素の子要素」になる要素です。

セクショニング・ルート

これはHTML5の7つのカテゴリーではなく、別な分類で、「セクションのルート（第１階層、始まり）になれる特別な要素」です。

このカテゴリーに属する要素は、その内部に独自の階層構造を持つことができます。つまり、セクショニング・ルート要素内の見出しとセクションは、その外側の階層構造には影響を及ぼさない（または影響されない）ということになります。

<body> <blockquote> <details> <fieldset> <figure> <td>の6個だけが含まれます。

１．３．２コンテンツ・モデル

HTML5の各要素には、「要素内に置くことができる要素」が決まっています。これを「コンテンツ・モデル」といいます。

コンテンツ・モデル	説明
決まったカテゴリーの要素が入る	中に入れていい要素が、7つのカテゴリーのうちのどれかであると決まってるもの
空（何も入れない）	終了タグが無いがない要素のように、中に何も入れてはいけない（入れられない）もの
特定の要素が入る	カテゴリーに関係なく、中に入る要素が決まっているもの
子孫まで制限される	すぐ中に入る要素だけではなく、中の中の要素にも制限があるもの
トランスペアレント	親（自分を含む要素）のコンテンツ・モデルを継承しているもの

「決まったカテゴリーの要素が入る」コンテンツ・モデル

ほとんどの要素は、コンテンツ・モデルに、「7つのカテゴリー」のうちのどれが入るか決められています。1つだけのもありますし、複数のカテゴリーが許されるものもあります。

例えば、<section>要素のコンテンツ・モデルは「フロー・コンテンツ」と決められています。

<section>
  <h1>見出し</h1>           　← ○正しい（h1 はフロー・コンテンツ かつ ヘッディング・コンテンツ）
  <p>文章</p>             　　← ○正しい（p はフロー・コンテンツ）
  <title>サンプル</title>     ← ×間違い（title はメタデータ・コンテンツ）
</section>

「空（何もいれない）」コンテンツ・モデル

コンテンツ・モデルが「空（から）」とされているものは、終了タグがありません。つまり、その要素の中に何もコンテンツを入れることはできません。

<br>                 　　　　　← ○正しい
<br>正しくない</br>            ← ×間違い（要素は空でなければならない）

「特定の要素が入る」コンテンツ・モデル

カテゴリーに関係なく、中に入る要素が決まっています。定められた要素以外を入れることはできません。

<table>
  <tr><td>内容</td></tr>       ← ○正しい
</table>
<table>
  <td>内容</td>                ← ×間違い（table の子は tr）
</table>

「子孫まで制限される」コンテンツ・モデル

子要素だけでなく、子の中に入る子孫の要素も制限します。

例えば <footer> 要素のコンテンツ・モデルは「フロー・コンテンツを含むことができる」ので、<div> を含むことはできますが、その中に <header> や <footer> を含むことはできません。

<footer><div>内容</div></footer>                    ← ○正しい
<div><header>内容</header></div>                    ← ○正しい
<footer><div><header>内容</header></div></footer>   ← ×間違い（footer は header を含むことができない）

「トランスペアレント」コンテンツ・モデル

親要素のコンテンツ・モデルを受け継ぎます。

例えば <del> は「トランスペアレント」なので、親要素のコンテンツ・モデルを受け継ぎます。親要素が <div> ならばフロー・コンテンツでもある <h1> を含むことはできますが、<em> では <h1> を含むことはできません。

<div><del><h1>内容</h1></del></div>  ← ○正しい（div は h1 を含むことができる）
<em><del><h1>内容</h1></del></em>    ← ×間違い（em は h1 を含むことができない）

参考：各要素のカテゴリーとコンテンツ・モデル一覧

要素名	カテゴリー	コンテンツ・モデル

１．４特殊文字

タグは、<タグ名> のように記述しますので、例えば数式の不等号として < や > を書くとタグと混同されてします。そこで、こうした特殊文字が必要なときなどは、& と ; を使用して次のようにして表現することになっています。

&lt;     → <
&gt;     → >

また、& 自身も特殊文字を表す特殊文字として使われていますので、& を文字として表示したいときにはやはり次のように表します。

&amp;    → &

その他にも次のような特殊文字が用意されています。

&quot;   → "
&nbsp;   →  （半角の空白）

さらに次のような特殊文字もあります。&#文字番号; という形式でも指定できます。

アルファベット	矢印	記号など	数学記号

カッコ	制御コード	囲み英数字

まだまだ、これ以外にもあります。

適当な10進数を入力してください。該当する文字があれば表示されます。

１．５コメント

で囲まれた部分はコメントとして扱われ、ブラウザには表示されません。コメントは1行でも複数行でも構いませんが、コメントの中にコメントを記述することはできません。

<html>
  <head>
  <title>コメントの例</title>
  </head>
  <body>
    <!-- コメント -->
    <!--
      ここもコメント
    -->
  </body>
</html>