HTMLの超・基本―構文の書き方・基本ルールについて５分で解説します。
このページの内容を理解すれば、リファレンス（参考資料）を参照しながらHTMLを記述できるレベルまで到達することができるでしょう。
HTMLの書き方（構文ルール）は想像しているよりも簡単です。理解すべき基本原理も非常にシンプルなものですので、本ページでサクッと理解しておきましょう。
ITに関わる全ての職業で、知らないと恥ずかしい基本知識中の基本知識です。是非最後までご覧ください。
【前提】HTMLとは？
HTML (HyperText Markup Language) は、Web ページを作成するためのマークアップ言語です。
HTMLファイルは、標準テキストエディター (例: Notepad・TextEdit) を使用して作成できます。通常は .html または .htm の拡張子で保存します。
マークアップ言語とは、データや文書に構造を与えるために使われる言語のことを指します。
マークアップ言語では、特殊なタグや記号を使用して、データや文書の中で、見出しや段落、リンクや画像などの構造を記述します。
上記の<h1>とか<p>が、タグと呼ばれるもので、このタグの使い方・意味を学ぶのがHTMLの勉強になります。
そもそもHTMLって？そんな方は、HTMLとは何か？を解説した以下のページをご覧ください。
さっそく、HTMLの構文ルールを学習していきましょう。
HTML―構文ルール
HTMLの基本的なルールはたった１つ。覚えるべき構文ルールはこれだけです。
<開始タグ>～</終了タグ>
開始タグと終了タグで対象を囲むだけ。
開始タグと終了タグがないと、どこからどこまでをマークアップすれば良いか？という情報が分からなくなるため、開始タグと終了タグは２つセットで用います。
はじめのうちは、終了タグの「/」を忘れてしまうことがあるため、注意が必要です。
この基本ルールを頭に入れておくだけでHTMLを記述することが可能です。試しに、段落(Paragraph)を示すHTML文を見てみましょう。
<p>Hello World</p>
簡単ですね。”Hello World”という文字列を<p>タグで囲っているだけです。これで、「Hello World」が段落であるということを示すことができます。
言い換えると、タグで囲んだ部分に「段落」という特別な意味を与えていることになります。
HTMLのタグと要素
ここでHTMLの基本用語―。タグと要素について説明しておきます。
ざっくり図で説明するとこんな感じです。
タグは上記でも説明した通り、<>で囲まれた部分を指します。そして、開始タグと終了タグで囲まれた部分全体を要素と呼びます。
HTML：タグの書き方（大文字・小文字）
タグは大文字でも小文字でもOKです。もしくは、大小織混ぜてもOKです。
例えば、開始タグだけor終了タグだけを大文字で記述しても問題ありません。
<H1>見出し1</h1> <h2>見出し2</H2>
全角で書こうが半角で書こうがシステム的には同じ意味で解釈されます。
ただし通常は小文字を用いるので、小文字で記載するようにしておくと良いでしょう。
そのうえで、HTMLではタグに全角を利用することはできないという点には注意が必要です。
<p>これは問題なし</p>
＜p＞かっこが全角なのでNG＜/p＞ <ｐ>Pが全角なのでNG<ｐ>
たまに、HTML初心者の方が間違えるところです。
HTML―コメント行挿入
HTMLではコメントを挿入することができます。コメントとは、コード中に挿入するメモ書きのようなものです。
<h1>見出し1</h1> <!-- このコメントは表示されない --> <p>段落の開始</p>
↑コメントはブラウザでは表示されません。コメントはあくまでもプログラマーがソースコードをデバッグした際に見るメモ書きです。
コードを見ただけでは何をしているのかわからない部分にコメントを挿入しておくと便利です。
HTML―タグ
さて、ここからはHTMLにおける「タグ」についてさらに詳しく説明します。「タグ」とは一言で言えば「役割を示すもの」です。
初心者が最初につまずくのが「タグ」という概念ですので、ここは丁寧に解説します。
実際のソースコードから逆引きでタグのイメージをつかみましょう。
<h1>これは見出しです</h1>
<p>ここが段落です。</p>
<p>段落が変わるときは、また新しくpタグを指定する必要があります。</p>
<h2>見出しです</h2>
<p>見出しは、h1・h2・h3と指定すれば、大見出し・中見出し・小見出しを作ることができます。</p>このソースコードをブラウザで表示した結果がこちら。
イメージが掴めるでしょうか？ただの文字列が、それぞれ「見出し」「段落」として別の役割を果たしていることが分かります。HTMLにおける「タグ」とは、「その文字列（情報）が何者なのか？」「Web上でどんな役割を担っているのか？」を示すものであり、これがタグの本質です。
逆に言えば、HTMLは構文ルール（コーディング）はそこまで難しくはないので、このタグの使い方や応用方法が重要です。タグを知っていて、冒頭で説明したHTMLの基本を知っていれば、HTMLを自在に操れるようになります。
※<h1>~<h6>タグ、<p>タグはブロックレベル要素と呼ばれるタグだるため、自動的に改行されます。詳しく知りたいかたは「【HTML】３分でわかる！インライン要素とブロック要素の違い」をご覧ください。
HTML―タグを入れ子にする
HTMLでは、タグを「入れ子」構造で利用するケースが多く存在します。「入れ子」とは、言葉の通りタグの中にタグを入れることです。
言葉で説明されるとイマイチわかりづらいですが、基本的には以下のようなイメージです。
<html>タグの中に、<head>タグと<body>タグが入れ子されているイメージが掴めるかと思います。今は、なぜこの「入れ子」構造が必要なのか？というのは置いておいて、タグは入れ子にして利用することができる、ということを理解しておきましょう。
実際に、入れ子構造を用いてHTMLを書いた結果がこちらです。
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>ここは段落です。</p>
</body>
</html>このサンプルコードでは、<html>タグの中に、<head>タグと<body>タグが入れ子されており、さらに、<head>タグには<title>タグが、<body>タグには<h1>タグと<p>タグが入れ子になっていることが分かります。
「入れ子」は別の言葉で「ネスト」とも呼ばれます。「ネスト」よりも「入れ子」という言葉を利用することのほうが多いようなので、１つの用語としてここで覚えておきましょう。
※おそらく「ネスト」が他の分野の他の意味でも多用されるためです。
HTMLの基本構造（フォーマット）
ここまでで、HTMLの構文ルールとタグについて理解することができたかと思います。最後に最も重要なHTMLファイルの全体構造について解説します。
HTMLは決まった形のテンプレート（基本構造・枠組み）が存在します。そのテンプレート（基本構造）を基にアレンジ・コーディングをしていく形でHTMLは編集されます。ここでは、以下のサンプルコードを基にHTMLの基本構造を説明していきます。
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>ここは段落です。</p>
</body>
</html><!DOCTYPE html> ―ドキュメントタイプ宣言
最初の行では必ずドキュメントタイプ宣言を行います。
<!DOCTYPE html>
ドキュメントタイプ 宣言とは、このファイルが「HTMLであること」を宣言し、「HTMLのバージョン」を明示する役割を持ちます。おまじないのつもりで必ず毎回明示しておきましょう。
ドキュメントタイプの役割
- HTMLファイルであることを示す
- HTMLのバージョンを示す
この宣言を行わない場合、ブラウザが「HTML」ファイルであることを認識しない場合があり（基本的にはいい感じで認識してくれる・・・。）意図しない挙動になる可能性があります。
<!DOCTYPE html> は、HTMLのバージョン５を示すドキュメントタイプ宣言です。バージョンごとにドキュメントタイプ宣言は異なりますが、ここでは現在の主流であるHTML5を例に取り上げています。
※バージョンごとのドキュメントタイプ宣言が知りたいからはこちらからどうぞ。
htmlタグ
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>ここは段落です。</p>
</body>
</html>ドキュメントタイプ宣言の後に、htmlタグを置き、コード全体をhtmlタグで囲みます。htmlタグはページ全体の要素を囲むため、ページ内で１回しか利用しません。極論、HTMLファイルはhtmlタグに始まり、htmlタグに終わります。
このhtmlタグの中に、この後説明する「headタグ」「bodyタグ」を１つずつネストして利用していく形になります。
HTMLタグに入れ子にするタグ
- headタグ・・・Webページ全体の情報
- bodyタグ・・・Webページの具体的な中身（記事）
headタグ
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>ここは段落です。</p>
</body>
</html>htmlタグの中に、headタグを１つ記述します。
headタグで囲んだスペースには、主に「Webページに関する情報」を記述していきます。例えば、わかりやすく言うとブラウザのタブに表示される名称の定義などが該当します。
headタグには、あくまでも画面に表示される情報ではなくWebページに関しての情報を記載することが目的です。言い換えれば、headタグの中には「情報として持っておくべきであるが、ユーザには見せる必要がない情報」を書き込んでいきます。
タブに表示されるページ名称の他にも、 文字コードの指定やスタイル（CSS）などを記述したり、 そのページの作者情報・検索エンジン向けの情報などを記述したりすることもできます。
headタグについては、こちらのページでさらに詳しく解説しておりますので、合わせてご覧ください。
bodyタグ
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>ここは段落です。</p>
</body>
</html>bodyタグの中には、実際にWebページに表示される文章を記述していきます。上記サンプルコードを参照していただければわかるように<p>タグや<h1>タグなど、実際の文章の構造を定義していることが分かります。
画面から読み取ることができる内容は、ほぼすべてがこの<body>タグに記述されていることになります。実際に、ご覧になっているこの文章も「bodyタグ」の中に記述されています。
HTMLを１から学びたい方は
HTMLをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめかもしれません。独学で、毎回毎回検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルとして身に着けることが可能です。
筆者がおすすめするプログラミングスクールは以下の記事で解説しておりますので、是非ご参考にしてみてください。
