【初心者向け】HTMLとは？タグの書き方から基本構造までわかりやすく解説！

「プログラミングを始めたいけど、何から手をつければいい？」
「Webサイトって、どうやって作られているの？」

Web制作の世界への第一歩を踏み出そうとするとき、誰もが最初に出会う、最も基本的で、最も重要な言語。それが**「HTML（エイチ・ティー・エム・エル）」**です。

一言でいうと、HTMLとは**「Webページの『骨格』や『構造』を作るための、コンピューターに対する『マークアップ言語』」**のことです。

この記事では、プログラミング知識ゼロの初心者の方でも、HTMLの本質がスッキリと理解できるように、**「家づくり」**に例えながら、わかりやすく徹底的に解説していきます。

すべてのWebページの素となっている、このシンプルな言語の世界をマスターしましょう。

HTMLの役割と、プログラミング言語との違い
HTMLの基本要素「タグ」の書き方
Webページの基本的な構造
相棒である「CSS」と「JavaScript」との関係

1 HTMLの正体：Webページの「骨格」を作る言語
- 1.1 「マークアップ言語」って何？プログラミング言語との違いは？
2 HTMLの基本文法：「タグ」で囲んで、意味を与える
- 2.1 よく使う、基本的なHTMLタグ
- 2.2 タグに「属性」を追加して、情報を与える
3 Webページの基本的な構造：すべてのHTMLに共通する「お作法」
4 相棒の登場：CSSとJavaScriptとの関係
5 まとめ

HTMLの正体：Webページの「骨格」を作る言語

まず、HTMLはHyperText Markup Languageの略です。

これを理解するために、家づくりを想像してみてください。

家を建てるには、まず柱を立て、梁を渡し、壁や床、屋根といった**「骨格」**を作りますよね。

Webページも同じです。私たちが普段見ているWebページは、

「これは、一番大事な大見出しです」
「ここは、普通の**文章（段落）**です」
「ここに画像を配置します」
「このテキストは、他のページへのリンクです」

といった、様々な「部品」の集まりでできています。

HTMLの役割は、これらの部品が、ページの中で**「構造上、どんな意味を持つのか」を、コンピューター（Webブラウザ）に正確に伝えることです。

HTMLは、Webページの見た目を飾るのではなく、その「意味」と「構造」を定義する**、まさに**「骨格」**を作るための言語なのです。

「マークアップ言語」って何？プログラミング言語との違いは？

ここで重要なポイントがあります。HTMLは、厳密には「プログラミング言語」ではありません。**「マークアップ言語」**に分類されます。

プログラミング言語（例：JavaScript, Python）
- 役割：条件分岐（もしAならBする）や、繰り返しといった「ロジック（論理）」を組み立て、コンピューターに複雑な「処理」を命令する。
- 例えるなら：家に設置する、エアコンや自動ドアといった「動く機械」を作るための言語。
マークアップ言語（例：HTML）
- 役割：文章や画像などのコンテンツに、「これは見出し」「これは段落」といった**「意味（印）」をマークアップ（目印づけ）**していく。
- 例えるなら：家の「柱」「壁」「ドア」といった、動かない**「構造物」**を作るための言語。

HTMLには、プログラミング言語のような複雑なロジックはありません。非常にシンプルで、覚えるべきルールも少ないため、プログラミング初心者にとって、最初の一歩として学ぶのに最適な言語と言えます。

HTMLの基本文法：「タグ」で囲んで、意味を与える

では、どうやってHTMLは「意味」を定義していくのでしょうか。そのために使われるのが**「タグ（Tag）」**です。

タグとは、**< >（小なり、大なり）**の記号で囲まれた、キーワードのことです。

基本的に、開始タグ () と 終了タグ () のペアで、コンテンツを囲みます。

【例：段落を作る タグ】

<p>こんにちは、世界！</p>

：ここからが段落（Paragraph）の始まりですよ、という開始タグ。
こんにちは、世界！：タグで囲まれる、実際のコンテンツ。
：ここで段落が終わりですよ、という終了タグ。（スラッシュ/が目印）

この一連の塊こんにちは、世界！を**「要素（Element）」**と呼びます。

よく使う、基本的なHTMLタグ

タグ	意味	表示例
<h1> ～ <h6>	見出し (h1が一番大きい)	見出し1
<p>	段落	これは段落です。
<a>	リンク	Googleへのリンク
<img>	画像	（画像が表示される）
<ul>, <li>	箇条書きリスト	・りんご<br>・ばなな
<strong>	太字（重要性を強調）	重要なテキスト

タグに「属性」を追加して、情報を与える

タグには**「属性（Attribute）」を追加することで、さらに詳細な情報を与えることができます。属性は、属性名=”値”** の形式で、開始タグの中に記述します。

【例：リンク先を指定する href 属性】

<a href="https://www.google.com/">Googleへのリンク</a>

<a>タグだけでは、どこへのリンクか分かりません。
href=”https://www.google.com/”という属性を追加することで、「このリンクは、https://www.google.com/に飛びますよ」という情報を与えています。hrefは、リンク先を指定するための属性名です。

【例：画像の場所を指定する src 属性】

<img src="inu.jpg" alt="かわいい犬の画像">

<img>タグは、珍しく終了タグが必要ありません。
src=”inu.jpg”：表示する画像の場所（ソース/Source）を指定しています。
alt=”かわいい犬の画像”：画像が表示されなかった場合に代わりに表示されるテキスト（代替テキスト）です。SEOやアクセシビリティの観点から非常に重要です。

Webページの基本的な構造：すべてのHTMLに共通する「お作法」

個別のタグを覚えるのと同じくらい重要なのが、HTMLファイル全体の**「基本的な構造」**を理解することです。

これは、どんなWebページでも共通する、お決まりの型のようなものです。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF--8">
  <title>ページのタイトル</title>
</head>

<body>
  <!-- ここに、実際にブラウザに表示される内容を書く -->
  <h1>こんにちは！</h1>
  <p>これは私の最初のWebページです。</p>
  <img src="photo.jpg" alt="写真">
</body>

</html>