HTML基本構文とは？タグの書き方を基礎からわかりやすく解説
生徒
「HTMLの構文って、どういう意味ですか？難しそうで不安です…」
先生
「構文というのは、HTMLを書くときのルールのことです。文法と言い換えてもいいですね。実は、とてもシンプルなルールなんですよ。」
生徒
「タグって聞いたことがあるんですが、それも構文の一部なんですか？」
先生
「その通りです！タグは、HTMLの基本中の基本です。まずは、タグの書き方からしっかり学んでいきましょう。」
1. HTML基本構文とは？初心者が知るべき書き方のルール
HTML基本構文とは、HTMLを書くときに守るべきルールのことです。日本語に文法があるように、HTMLにも正しい書き方のルールがあります。この構文を理解することで、ブラウザが正しくWebページを表示できるようになります。HTMLの構文は、プログラミング言語に比べてとてもシンプルで、基本的なルールさえ覚えれば、誰でも書けるようになります。構文を守らないと、ブラウザが正しく表示できなかったり、検索エンジンに認識されなかったりする可能性があるため、最初から正しい書き方を身につけることが大切です。
2. タグとは？HTMLの基本要素を理解しよう
タグとは、HTMLで文章や要素に意味を与えるための記号です。タグは、山括弧（<と>）で囲まれた形をしており、文章を挟むように使用します。例えば、本にしおりを挟むように、文章に「ここは見出しです」「ここは段落です」という印をつけるのがタグの役割です。タグには、開始タグと終了タグがあり、これらで内容を囲むことで、その部分に意味を持たせることができます。開始タグは「<タグ名>」、終了タグは「</タグ名>」という形で書きます。終了タグには、スラッシュ（/）が付くのが特徴です。
<p>これは段落です</p>
<h1>これは見出しです</h1>
<a href="page.html">これはリンクです</a>
このように、開始タグと終了タグで文章を囲むことで、ブラウザはその部分をどのように表示すればよいかを理解します。pタグで囲めば段落として、h1タグで囲めば大きな見出しとして表示されます。
3. タグの正しい書き方｜開始タグと終了タグの基本ルール
HTMLのタグを書くときには、いくつかの重要なルールがあります。まず、タグ名は半角英字で書き、大文字と小文字を区別しません。ただし、現代のHTML（HTML5）では、小文字で書くことが推奨されています。次に、開始タグと終了タグは必ずペアで使用します。開始タグで始めたら、必ず終了タグで閉じる必要があります。例外として、imgタグやbrタグなど、終了タグが不要なタグもありますが、これらは「空要素」と呼ばれる特殊なタグです。また、タグは正しい順番で閉じる必要があります。入れ子構造になっている場合、内側のタグから先に閉じていきます。
<!-- 正しい書き方 -->
<p>この文章は<strong>太字</strong>を含んでいます。</p>
<!-- 間違った書き方（タグの閉じる順番が逆）-->
<p>この文章は<strong>太字</p></strong>を含んでいます。
<!-- 空要素の例（終了タグ不要）-->
<img src="/img/sample150-100.jpg" alt="サンプル画像">
<br>
タグを正しい順番で閉じることは、HTMLの基本ルールです。strongタグで囲んだ部分は、pタグの中に入っているため、strongタグを先に閉じてから、pタグを閉じる必要があります。
4. 属性とは？タグに追加情報を与える方法
属性とは、タグに追加の情報を与えるための仕組みです。属性は、開始タグの中にスペースを空けて書き、「属性名="値"」という形式で記述します。例えば、リンクを作るaタグには、リンク先のURLを指定するhref属性が必要です。また、画像を表示するimgタグには、画像のファイルパスを指定するsrc属性や、画像の説明文を指定するalt属性があります。属性を使うことで、同じタグでも異なる動作や表示を実現できます。属性の値は、必ずダブルクォーテーション（"）またはシングルクォーテーション（'）で囲みます。HTMLでは、ダブルクォーテーションを使うことが一般的です。
<!-- リンクの例：href属性でリンク先を指定 -->
<a href="https://example.com">サンプルサイトへ</a>
<!-- 画像の例：src属性とalt属性を使用 -->
<img src="/img/sample120-120.jpg" alt="正方形のサンプル画像">
<!-- 複数の属性を持つ例 -->
<a href="contact.html" target="_blank" title="お問い合わせページ">お問い合わせ</a>
このように、属性を使うことでタグの機能を拡張できます。複数の属性を指定する場合は、スペースで区切って書きます。target属性は、リンクを新しいウィンドウで開くかどうかを指定し、title属性は、マウスを乗せたときに表示されるツールチップ（説明文）を指定します。
5. HTMLの基本構造｜必須タグを理解しよう
HTMLファイルには、基本的な構造があります。すべてのHTMLファイルは、決まった形式で書き始める必要があります。まず、ファイルの先頭には「<!DOCTYPE html>」という宣言を書きます。これは、このファイルがHTML5で書かれていることをブラウザに伝えるための宣言です。次に、htmlタグで全体を囲み、その中にheadタグとbodyタグを配置します。headタグには、ページのタイトルや文字コードなど、ページの設定情報を書きます。bodyタグには、実際にブラウザに表示される内容を書きます。この基本構造は、どのHTMLファイルでも共通です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトル</title>
</head>
<body>
<h1>Webページの見出し</h1>
<p>ここに本文を書きます。</p>
</body>
</html>
lang属性は、ページの言語を指定します。日本語のページでは「ja」と指定します。meta charsetは、文字コードを指定するタグで、UTF-8が現在の標準です。viewportは、スマートフォンなどで適切に表示されるようにするための設定です。titleタグには、ブラウザのタブに表示されるページのタイトルを書きます。
6. インデント（字下げ）とコードの読みやすさ
HTMLを書くときは、インデント（字下げ）を使ってコードを読みやすくすることが重要です。インデントとは、タグの階層構造を視覚的に分かりやすくするために、行の先頭にスペースやタブを入れることです。入れ子になっているタグは、内側に行くほどインデントを深くします。これにより、どのタグがどのタグの中に入っているのかが一目で分かるようになります。インデントは、プログラムの動作には影響しませんが、コードを書いた本人や他の人が後で見たときに理解しやすくするための大切な習慣です。プロのWeb制作者は、必ずインデントを使ってコードを整理しています。
7. コメントの書き方｜メモを残す技術
HTMLには、コメントという機能があります。コメントとは、ブラウザには表示されないメモのことで、コードの説明や覚え書きを書くために使用します。コメントは「<!--」で始まり、「-->」で終わります。この間に書いた内容は、ブラウザには表示されませんが、HTMLファイルを開けば見ることができます。コメントは、後で自分がコードを見返したときに理解しやすくするためや、複雑なコードの説明を残すために使用します。また、一時的にコードを無効にしたいときにも、削除せずにコメントアウトすることで、後で簡単に復活させることができます。
8. 初心者がよく間違えるタグの書き方と注意点
初心者の方がHTMLを書くとき、よくある間違いがいくつかあります。一つ目は、終了タグを書き忘れることです。開始タグを書いたら、必ず終了タグも書く習慣をつけましょう。二つ目は、タグの綴りを間違えることです。例えば、pタグを「<pr>」と書いてしまうような間違いです。タグ名は正確に覚える必要があります。三つ目は、全角文字を使ってしまうことです。HTMLのタグや属性は、必ず半角英数字で書く必要があります。全角の「＜」や「＞」を使ってしまうと、ブラウザは正しく認識できません。四つ目は、属性の値を囲むクォーテーションを忘れることです。属性の値は、必ず「"」または「'」で囲む必要があります。これらの基本ルールを守ることで、正しく動作するHTMLを書くことができます。
