【6日でできるPHP入門】HTMLの基本構造

　HTMLはWebページを作成するための最も基本的な言語です。HTMLファイルは、特定のタグで囲むことで文書構造を定義し、見出しや本文、画像などの内容を表現します。本記事では、「HTMLの基本構造」について、サンプルファイルをもとに実際の記述例とその出力結果を確認しながら、主要なタグや属性について表や例を用いて分かりやすく解説します。
これからHTMLの世界への第一歩を踏み出す方に向け、基礎をしっかり押さえましょう。

1．HTMLの基本構造とは

1.1. HTMLファイルの全体構成

HTMLファイルは必ず以下の基本的な構成を持ちます。

部分	説明
文書型宣言	HTML文書であることを宣言する最初の1行
htmlタグ	HTML文書の開始と終了を示すタグ
headタグ	ページ情報（タイトルや文字コードなど）をまとめる部分
bodyタグ	実際にWebページ上に表示される本文を記述する部分

ファイル名： lesson11_1.html

<!DOCTYPE html>
<html>
  <head>
    <title>私の趣味について</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>こんにちは、HTMLの世界へ！</h1>
    <p>このページでは、私の趣味について紹介します。</p>
  </body>
</html>

1.2. 出力例

上記サンプルをブラウザで表示すると、次のようになります。

表示結果

２．HTMLタグの役割と使い方

2.1. タグの基本

　HTMLは「タグ」と呼ばれる記号で囲んで要素を表現します。タグには「開始タグ」と「終了タグ」があり、<タグ名>内容</タグ名>の形で使います。

用語	説明	例
開始タグ	要素の開始を示す	<p>
終了タグ	要素の終わりを示す	</p>
要素	タグで囲まれた内容全体	<h1>見出し</h1>
属性	タグに追加情報を与える項目	<meta charset="UTF-8">

2.2. 主要なHTMLタグの解説

タグ	役割	使用例
<!DOCTYPE>	文書型宣言	<!DOCTYPE html>
<html>	HTML文書全体を囲む	<html> ... </html>
<head>	ページ情報（メタデータ）をまとめる	<head> ... </head>
<title>	ブラウザのタブに表示するタイトル	<title>ページのタイトル</title>
<meta>	文字コードなどのメタ情報	<meta charset="UTF-8">
<body>	ページの本文	<body> ... </body>
<h1>	見出し	<h1>最重要な見出し</h1>
<p>	段落（文章）	<p>これは本文です。</p>

3．タグと属性の詳細解説

3.1. タグと属性の使い分け

タグには属性を付けて、追加情報を伝えることができます。
例：

<meta charset="UTF-8">

この例では、charsetが属性名、UTF-8がその値です。

タグ	属性名	属性値	解説
<meta>	charset	UTF-8	文字エンコーディングを指定
<a>	href	URL	リンク先のURLを指定
<img>	src	画像ファイル名	表示する画像ファイルを指定

3.2. よく使うタグの実例

例：画像とリンクのタグ

<a href="https://example.com">サンプルサイト</a>
<img src="photo.jpg" alt="風景写真">

<a>はリンク先を指定（href属性）。
<img>は画像ファイルを指定（src属性）と、画像が表示できない場合の説明（alt属性）。

４．インデントと入れ子構造

　HTMLはタグの中にさらにタグを入れる「入れ子」構造が基本です。入れ子になるたびにインデントを入れることで、コードが見やすくなります。

例：

<body>
  <h2>好きなスポーツ</h2>
  <ul>
    <li>サッカー</li>
    <li>バスケットボール</li>
    <li>テニス</li>
  </ul>
</body>

まとめ

HTMLの基本構造を押さえることは、Webページ作成の第一歩です。
各タグの役割や属性の使い方、そして正しいインデントで見やすく整理することが大切です。
実際にサンプルHTMLを自分で書いて、ブラウザで表示しながら学習を進めていきましょう。

参考：本記事で使用したHTMLタグ一覧

タグ	役割・説明
`<!DOCTYPE>`	HTML5文書であることを宣言
`<html>`	HTML文書全体を囲む
`<head>`	ページに関する情報（タイトル、メタデータなど）
`<title>`	ブラウザのタブに表示するタイトル
`<meta>`	ページのメタ情報（文字コードなど）
`<body>`	Webページの本文を記述する
`<h1>`-`<h2>`	見出し（数字が小さいほど重要）
`<p>`	段落（文章）
`<ul>`	箇条書きリスト
`<li>`	リストの項目
`<a>`	ハイパーリンク
`<img>`	画像表示