【初心者向け】５分でわかるHTMLの基本―書き方・ルール【入門編】

HTMLの超・基本―構文の書き方・基本ルールについて５分で解説します。

このページの内容を理解すれば、リファレンス（参考資料）を参照しながらHTMLを記述できるようになります。

HTMLの書き方・ルールは想像以上に簡単です。理解すべき基本原理も非常にシンプルなものですので、本ページでサクッと理解しておきましょう。逆に言えば、このページで解説しているHTMLの書き方やHTMLの基本原理・仕組みを理解しておかないと、実践的な技術を身につけることは困難です。

そもそもHTMLって？そんな方は、HTMLとは何か？を解説した以下のページをご覧ください。

HTMLとは？マークアップの概念からわかりやすく説明【３分で解説】

1 HTML―構文ルール
- 1.1 タグの書き方―大文字or小文字？全角or半角？
  - 1.1.1 HTMLは小文字が基本
- 1.2 HTML―コメント行挿入
2 HTML―タグとは？
- 2.1 HTML―タグを入れ子にする
3 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>タグの中に、<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」ファイルであることを認識しない場合があり（基本的にはいい感じで認識してくれる・・・。）意図しない挙動になる可能性があります。

<!DOCTYPE html>　は、HTMLのバージョン５を示すドキュメントタイプ宣言です。バージョンごとにドキュメントタイプ宣言は異なりますが、ここでは現在の主流であるHTML5を例に取り上げています。

※バージョンごとのドキュメントタイプ宣言が知りたいからはこちらからどうぞ。

htmlタグ

<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p>ここは段落です。</p>
  </body>
</html>

ドキュメントタイプ宣言の後に、htmlタグを置き、コード全体をhtmlタグで囲みます。

このタグに囲まれた部分が、HTMLであることを示します。このHTMLの中に、この後説明する「headタグ」「bodyタグ」を１つずつネストして利用する必要があります。

headタグ

<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p>ここは段落です。</p>
  </body>
</html>

htmlタグの中に、headタグを１つ記述します。

headタグで囲んだスペースには、「Webページに関する情報」を記述します。わかりやすく言うとブラウザのタブに表示される名称が一例です。

headタグには、あくまでも画面に表示される情報ではなくWebページに関しての情報を記載します。

タブに表示されるページ名称の他にも、そのページの作者情報・検索エンジン向けの情報などを記述することになります。

bodyタグ

<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p>ここは段落です。</p>
  </body>
</html>

bodyタグの中には、実際にWebページに表示される文章を記述していきます。上記サンプルコードを参照していただければわかるように<p>タグや<h1>タグなど、実際の文章の構造を定義していることが分かります。

画面から読み取ることができる内容は、ほぼすべてがこの<body>タグに記述されていることになります。