１ HTML とは

１．１ HTML とは

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

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

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

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

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

HTML の規格の策定には、World Wide Web Consortium (W3C) と Web Hypertext Application Technology Working Group (WHATWG) の２つのグループが行ってきました。そして、WHATWG の規格を取り入れながら、W3C が策定したのが HTML5 です。

HTML5

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

現在使用されているブラウザでは、ほとんどが対応しているようです。

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

HTML5は、明確な文書構造用タグが多数用意されているためコードが読みやすく、ビットマップやベクター形式の図形を描くためのタグが用意されています。

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 要素が廃止されました。そのほかにもいくつかの要素で属性が廃止されています。

しかし、2021年1月28日に W3C は HTML5 を廃止してしまいました。

HTML5 の勧告後も、W3C と WHATWG はそれぞれに規格を策定して独自の要素を付け足すなどしていたため、HTML の仕様が微妙に異なってきてしまいました。そして、などの主要なブラウザが採用したのは WHATWG の仕様でした（W3C を採用していたも、後にに生まれ変わり WHATWG を採用しました）。

これにより、W3C は HTML5 を標準化することを断念し、今後のHTML標準化を WHATWG に委ねたのです。それが、HTML Living Standard です。

HTML Living Standard

WHATWG が、2021年1月29日に勧告したHTMLの仕様です。

これにより、W3C が決めてきた HTML の規格は全部廃止になりました。

といっても、HTML5 と基本的に大きな違いはありません。主な変更としては、hgroup、slot 要素などの追加があります。そのほかにもいくつかの要素で属性が追加されています。

また、rb、rtc 要素などが廃止されました。そのほかにもいくつかの要素で属性が廃止されています。

なお、これ以降 HTML と記述している部分は、特に断りがない限り、ほとんどの場合 HTML Living Standard のことを指しています。

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

Edge	Chrome	FireFox	Opera	Sleipnir	Vivaldi
112.0.1722.58	112.0.5615.13	112.0.2	98.0.4759.6	6.5.0.4	6.0.2979.15

１．２ DOCTYPE宣言

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

<!DOCTYPE html>

１．３ 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>          ← ×間違い

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

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

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

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

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

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

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

図1.3.1 (1)　にはHTMLの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>