対象読者

パソコンが一通りいじれる程度の人
これまでHTML 5の文法についてきちんと勉強をしたことがない人、何となくHTMLを使ってきた人

HTMLとは

HTML（HyperText Markup Language）は、以下の機能を持ったマークアップ言語（テキストファイル）のことです。

テキストに文書構造を追加する
ハイパーリンク（別のWebページ等へのリンク）やマルチメディア（画像・音声・動画）を埋め込める
デザイン（レイアウトや文字の色・サイズ等）を定義できる（CSS）
プログラミングを記述できる（JavaScript）

一般にWebサーバーがブラウザに提供し表示させているページが、HTMLです。このページもHTMLで記述されていて、いまあなたのブラウザにこのデザインで表示されています。

HTMLのメインの機能は、1番目の「テキストに文書構造を追加する」です。

デザインやプログラミングは、便利で使いやすいサイト・かっこいいサイトにするためには必要ですが、主の目的ではありません。HTMLを理解するにあたり、まずは、この「文書構造とは何か」について理解すべきと考えます。

文書構造とは

「テキストに文書構造を追加する」とは、言い換えれば「テキストに意味を持たせる」といったところです。

例えば、新聞を思い浮かべてください。

大見出し、中見出し、画像、段落といった具合にそれぞれ人間が理解しやすいように、「構造」を持っています。これが、文書構造です。

新聞のみならず、チラシやパンフレット等、どんな文書でも普通はこういった文書構造を持っています。

これを、「どれが見出しでどういう構成の文書なのか」がコンピューターでも理解できるように、統一した規格として記述するようにしましょう、というのがHTMLです。

実際、検索エンジン（Google等）では、この文書構造から、検索ワードに相応しいページかどうかを総合的に判断しています。

もう少し具体的な説明へ進みます。簡単な例を挙げます。

以下のようなメモを、パソコンでテキストエディタに書いたとします。

お買いものメモ
場所：Aスーパー

買うもの

日用品
・歯磨き粉
・シャンプー

食べ物
・人参
・きゅうり

自分で見返すだけのメモならこれでいいですが、例えばこれをWebページにした場合、コンピューターは「歯磨き粉」が「日用品」の中に含まれていることが理解できません。なぜなら、ただのテキストファイルには文書構造がなく、あくまで書いた人間が見やすいように独自ルールで行間をコントロールしたり記号を入れたりするくらいしかできないからです。

HTMLで上記のメモを書くとすると、以下のようになります。

<h1>お買いものメモ</h1>
<p>場所：Aスーパー</p>

<h2>買うもの</h2>

<h3>日用品</h3>
<ul>
  <li>歯磨き粉</li>
  <li>シャンプー</li>
</ul>

<h3>食べ物</h3>
<ul>
  <li>人参</li>
  <li>きゅうり</li>
</ul>

見慣れない書き方で見にくいかもしれませんが、このようにすることでコンピューターにも大体の構造がわかる文章になります。また、画像を入れたりデザインを変えたりすることができるようになり、読む人間にとってもメリットがあります。

ちなみに、このメモをこの記事に埋め込むと、以下のようになります。

お買いものメモ

場所：Aスーパー

買うもの

日用品

歯磨き粉
シャンプー

食べ物

人参
きゅうり

デザインはこのブログのものです。CSSを勉強すれば、もっと凝ったデザインにすることもできます。

HTMLの文法

HTMLでは、<と>によって囲まれた部分をタグといい、タグに囲まれたひとまとまりを要素（Element）といいます。

タグで囲んで要素を定義するとき、前方のタグを開始タグといい、後方のタグを終了タグといいます。終了タグは、</と>でタグ名を囲みます。

タグ名には、基本的には既に規格で決められたタグだけを利用します。あなたが作った独自のタグを定義することはできません（現状、一般には）。

要素には属性（Attribute）を定義することができます。これは、要素に追加の情報やデザインを適用する場合等に使われるものです。

画像はimgタグで挿入することができますが、属性はその際にその画像のURLを指定するために使ったりもします。

タグによっては、imgタグのように、終了タグが必要ないものも存在します。

要素の親子関係

HTMLでは、要素の中に要素を含むことがあります。

そのとき、その要素を囲っている更に大きな要素を親要素、その要素に含まれる要素を子要素、横に並んでいる要素を兄弟要素と呼んだりします。他にも、親子関係に倣って、孫要素や子孫要素、祖先要素みたいな言い方をしたりもします。

特殊文字のエスケープ

HTMLでは、以下の文字は文法上利用するため、それ自体をテキストとして表示させたい場合は、エスケープ（表示できるように）する必要があります。

表示したい文字	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→ リスト

よく使うグローバル属性

タグ毎に使える属性は異なりますが、全てのタグで共通して使えるグローバル属性というものがあります。

最低限、知っておくべきグローバル属性を挙げます。

主にCSSやJavaScriptで利用されるものですので、ここではひとまずこういうものがあるということを認識しておいてください。

id→ 要素を特定する識別子。文書全体で一意（ユニーク：ひとつだけ）である必要がある。
class→ 要素を選択するための文字列。空白区切りで複数定義可能。
style→ 要素のCSSを直接定義し適用する属性。
data-*→ カスタムデータ属性。「data-」で始まる属性はユーザーが自由に定義・利用できる。主にJavaScriptで利用する。

HTML文書の定義

HTMLで書かれたHTML文書を作成するには、まず以下の文書型宣言を記述します。

<!DOCTYPE html>

HTML文書は、全体で以下のようなレイアウトになったテキストファイルを.htmlという拡張子で保存すれば出来上がりです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="author" href="mailto:mail@example.com">
  <title>メモ</title>
</head>
<body>
<div>
  <h1>お買いものメモ</h1>
  <p>場所：Aスーパー</p>

  <h2>買うもの</h2>

  <h3>日用品</h3>
  <ul>
    <li>歯磨き粉</li>
    <li>シャンプー</li>
  </ul>

  <h3>食べ物</h3>
  <ul>
    <li>人参</li>
    <li>きゅうり</li>
  </ul>
</div>
</body>
</html>

実際に上記のテキストファイルを作成し、開いてみるとブラウザで表示できるかと思います。

html、head、bodyタグは、それぞれHTML文書の定義上利用する、ファイルの中に1つしか出てこないタグです。定義上利用するものなので、このあたりはまずはこういうものだと覚えてしまいましょう。

ブラウザ上に表示される要素は、body要素の中に記述します。ひとまずh1~h6やp要素で見出しや段落を中に入れると、ブラウザで表示されるのが確認できると思います。

なお、HTMLは見やすくするために改行やスペースで見た目を調節するのが慣例です。上記のように開始タグから終了タグまでの間は改行して一定のインデント（スペース）を設けます。

実際のプロジェクトではきちんとルール決めして統一したルールで記述することになるかと思いますので、この書き方での読み書きに慣れておきましょう。

まとめ

ひとまず前編はここまで、HTMLについての導入でした。5分くらいの読み物と想定しています。

後編も5分くらいの読み物です。こちらから後編へお飛びください。

後編では、コンテンツカテゴリー（コンテンツモデル）の概念、よく使うHTMLタグや属性それぞれの具体的な利用方法、HTMLでよくある間違い等を紹介します。後編まで理解すれば、HTMLの最低限の知識はあるといっても、問題ないでしょう。