HTMLの超・基本―構文の書き方・基本ルールについて５分で解説します。
このページの内容を理解すれば、リファレンス（参考資料）を参照しながらHTMLを記述できるレベルまで到達することができます。
実は、HTMLの書き方・ルールは想像以上に簡単です。理解すべき基本原理も非常にシンプルなものですので、本ページでサクッと理解しておきましょう。逆に言えば、このページで解説しているHTMLの書き方やHTMLの基本原理・仕組みを理解しておかないと、実践的な技術を身につけることは困難です。
このページで学べる内容
- HTMLのコーディングルール（基本）
- HTMLの「タグ」（要素）とは？
- HTMLの基本構造（全体像）
そもそもHTMLって？そんな方は、HTMLとは何か？を解説した以下のページをご覧ください。
それでは、早速解説を始めます。
HTML―構文ルール
<開始タグ>～</終了タグ>
HTMLで覚えるべき構文ルールはこれだけです。
開始タグと終了タグで対象を囲むだけです。開始タグと終了タグがないと、どこからどこまでをマークアップすれば良いか？という情報が分からなくなるため、基本的に開始タグと終了タグは２つセットで用います。
はじめのうちは、終了タグの「/」を忘れてしまうことがあるため、注意が必要です。
HTMLの書き方―基本ルール
- マークアップしたい内容を「開始タグと終了タグで囲む」
- 終了タグには「/」（スラッシュ）を付けて終了タグであることを明示する
この基本構文をもとにして、応用的なテクニックを適用させていくだけでHTMLを記述することが可能です。試しに、段落(Paragraph)を示すHTML文を見てみましょう。
<p>Hello World</p>
簡単ですね。”Hello World”という文字列を<p>タグで囲っているだけです。これで、「Hello World」が段落であるということを示すことができます。タグで囲んだ部分に「段落」という特別な意味を与えていることになります。
上記コードをブラウザで表示した結果がこちら。
※<p>については、「タグ」の章で詳しく説明します。ここでは、しっかりと構文ルールを頭にいれておくことが重要です。
要素？タグ？その違いは？
＜＞で囲まれた部分を「タグ」と呼ぶ人や「要素」と呼んだりする人がいます。
実際の現場でこの使い分けを厳密に行う必要はありませんが、正しく知識を理解しておくことは重要ですので、ここで覚えておきたいと思います。
区別はとっても簡単です。タグとテキスト内容を合わせて要素と呼びます。
細かな点ですが、この基本的な用語の呼び方の違いで、プログラマー同士の認識齟齬につながってしまうため、正確に理解することは重要です。
タグの書き方―大文字or小文字？全角or半角？
HTMLのタグを記述する際は、大文字でも小文字でもOKです。もしくは、大小織混ぜてもOKです。
例えば、開始タグだけor終了タグだけを大文字で記述しても問題ありません。
<H1>見出し1</h1> <h2>見出し2</H2>
全角で書こうが半角で書こうがシステム的には同じ意味で解釈されます。
ただし可読性を上げることを目的として、どちらか一方に統一するのが普通です。（大小ごちゃまぜにするのは、プログラマー自身がそのタグに何らかの意味を与える場合を除いてありません。）
HTMLは小文字が基本
上記ルールを踏まえつつ、HTMLは基本的に小文字で記述するのが通例です。大文字で書かれているHTMLはあまり見かけたことがありません。
そのうえで、HTMLではタグに全角を利用することはできないという点に注意が必要です。
<p>これは問題なし</p>
＜p＞かっこが全角なのでNG＜/p＞ <ｐ>Pが全角なのでNG<ｐ>
コーディング全般に共通しますが、全角は基本NGということを押さえておきましょう。
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をより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめかもしれません。独学で、毎回毎回検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルとして身に着けることが可能です。
筆者がおすすめするプログラミングスクールは以下の記事で解説しておりますので、是非ご参考にしてみてください。
