いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【HTML/CSS】HTMLの基本の書き方を学ぼう

Webページの骨格を作るHTMLの基本的な書き方を解説します。見出しや段落などを表現する「タグ」の基本ルール、画像やリンクの設置方法、そしてWebページ作成に必須となる文書全体のテンプレート構造まで、初心者向けにわかりやすく紹介します。

作成日: 更新日:

HTMLの基本文法

  • HTML（HyperText Markup Language） は、Webページの構造、つまり骨格を定義するための言語です。
  • Webページに表示したい文章や画像、他のページへのリンクといった各情報が、ページのどの部分にあたるのか（例えば「見出し」なのか「段落」なのか）を、「タグ」という特別な目印を使ってコンピューターに指示します。

タグの基本構造

タグは、< と > という半角の記号で囲んで記述するのが基本ルールです。 多くの場合、以下のように開始タグと終了タグで情報を挟み込む形式をとります。

<タグ名>内容</タグ名>

情報を囲む最初のタグを 開始タグ（opening tag） と呼び、「ここから始まります」という合図になります。 そして、情報の終わりを示すのが 終了タグ（closing tag） です。終了タグは、タグ名の直前に「/（スラッシュ）」を付けるという特徴があります。 この「開始タグ」、「終了タグ」、そしてその間に挟まれた「内容」の全体を一つのまとまりとして、要素（element） と呼びます。Webページは、この要素を組み合わせて作られていきます。

タグの書き方の例：

1<p>こんにちは！</p>

タグの種類

HTMLを構成する部品である「タグ」には、その役割によって大きく分けて コンテンツタグ と 空要素タグ の2種類が存在します。

コンテンツタグ

コンテンツタグは、<p>のような開始タグと、</p>のような終了タグがセットで一つの要素を作ります。この開始タグと終了タグの間に、ウェブページに**表示したい内容（コンテンツ）**を記述します。

例えば、<h1>は見出しを、<p>は段落を表すタグです。これらは「ここからここまでが見出しです」「ここからここまでが段落です」というように、文章の範囲を指定する役割を持ちます。

1<h1>見出し</h1>
2<p>段落の文章</p>

空要素タグ

空要素タグは、コンテンツタグと違い開始タグだけで使用します。終了タグはなく、タグの間に内容を記述することもありません。

これは、タグ自体が「改行する」や「画像を表示する」といった、特定の機能や命令を単体で果たすためです。

1<br>
2<img src="photo.jpg" alt="画像">

タグの入れ子（ネスト構造）

HTMLでは、タグの中に別のタグを入れて要素を重ねることができます。このような構造を「入れ子（ネスト）」と呼びます。

例えば、段落（<p>）の中にある特定の単語だけを強調（<strong>）したい場合などに使います。

1<p><strong>重要</strong>な文章です。</p>

入れ子構造にすることで、文書の構造をより詳細に表現したり、部分的にデザインを変えたりすることが可能になります。

ただし、入れ子にする際はタグの開始と終了の順番に注意が必要です。ルールは**「後から開始したタグを先に閉じる」**です。

正しい例： <p><strong>文章</strong></p>

間違い例： <p><strong>文章</p></strong>

属性（タグに情報を追加する）

属性（attribute） とは、開始タグの中に記述することで、その要素に追加の情報や設定を付与するものです。

例えば、<img>タグでどの画像を表示するか、大きさはどうするか、といった詳細な情報を指定するために使用します。

1<img src="dog.jpg" alt="犬の写真" width="300">

属性は、属性名="値"という形式で開始タグの中に記述します。複数の属性を指定したい場合は、半角スペースで区切って並べます。

上のコードでは、<img>タグに以下の3つの属性が設定されています。

  • src：表示したい画像ファイルの場所（パス）を指定します。
  • alt：何らかの理由で画像が表示されなかった場合に、代わりに表示されるテキストを指定します。
  • width：画像の表示幅をピクセル単位で指定します。

属性は、どのタグにでも自由に付けられるわけではなく、タグごとに使用できる属性が決まっています。また、属性の値は、基本的にダブルクオーテーション（"）で囲むようにしてください。

よく使う基本的なタグ

HTMLでWebページを作成する際によく使われる、基本的なタグを紹介します。これらのタグは、Webページの骨格を作る上で欠かせない要素です。

  • 見出しタグ（<h1>〜<h6>）
  • 段落タグ（<p>）
  • 改行タグ（<br>）
  • リストタグ（<ul>, <ol>, <li>）
  • 画像タグ（<img>）
  • リンクタグ（<a>）

見出しタグ（<h1>〜<h6>）

Webページに「見出し」を作成するためのタグです。見出しを使うことで、文章の構造が明確になり、ユーザーが内容を理解しやすくなります。

1<h1>タイトル</h1>
2<h2>小見出し</h2>
3<h3>小見出し</h3>
4<h4>小見出し</h4>
5<h5>小見出し</h5>
6<h6>小見出し</h6>
  • <h1>から<h6>までの6段階のレベルがあります。数字が小さいほど大きな見出し（大見出し）、数字が大きいほど小さな見出し（小見出し）を意味します。
  • 最も重要な大見出しである<h1>は、通常1つのページに1回だけ使用します。
  • 検索エンジン（Googleなど）がページの内容を理解したり、目の不自由な方が利用する読み上げソフトが文書構造を把握したりするためにも、この見出しは重要な役割を果たします。そのため、<h1>、<h2>、<h3>といった順番を正しく守って使用することが非常に重要です。

段落タグ（<p>）・改行タグ（<br>）

文章のまとまりである「段落」を作成したり、文章の途中で「改行」を入れたりする際に使用します。

1<p>これは段落です。</p>
2<br>
  • <p>：文章のひとつのまとまり（段落）を作るためのタグです。このタグで囲まれたテキストは、一つの段落として扱われます。
  • <br>：文章の途中で強制的に改行を入れたい場合に使用するタグです。<p>タグとは異なり、段落を分けるのではなく、単に改行する目的で使われます。

リストタグ（<ul>, <ol>, <li>）

複数の項目を一覧で表示する「リスト（箇条書き）」を作成する際に使用するタグです。

1<ul>
2  <li>りんご</li>
3  <li>バナナ</li>
4</ul>
5
6<ol>
7  <li>朝ごはん</li>
8  <li>昼ごはん</li>
9</ol>
  • <ul>：順序が関係ないリスト（Unordered List）を作成します。ブラウザでは通常、各項目の先頭に点（・）が表示されます。
  • <ol>：順序が重要なリスト（Ordered List）を作成します。ブラウザでは通常、各項目の先頭に「1, 2, 3...」といった番号が自動的に振られます。
  • <li>：<ul>や<ol>の中で、個々のリスト項目（List Item）を定義するために使用します。

画像とリンク（<img>, <a>）

Webページ内に画像を表示させたり、他のページへのリンクを設置したりするためのタグです。

1<img src="image.jpg" alt="説明文">
2<a href="https://example.com">リンク</a>
  • <img>：画像を表示するためのタグです。このタグには終了タグ（例: </p>）が必要ありません。
    • src属性：表示したい画像ファイルがどこにあるかを示す「パス（場所）」を指定します。
    • alt属性：何らかの理由で画像が表示されなかった場合に、代わりに表示されるテキスト（代替テキスト）を指定します。このテキストは、検索エンジンや音声読み上げソフトにとっても重要な情報となります。
  • <a>：他のWebページや、ページ内の特定の場所へのリンク（ハイパーリンク）を作成するためのタグです。
    • href属性：リンク先のURLを指定します。

HTMLの構造テンプレート

HTML文書を作成する際には、必ず記述しなければならない基本的な構造が存在します。これは、Webブラウザがページの内容を正しく解釈し、画面に表示するための設計図の役割を果たします。以下に示すのは、Webページを作成する上で最低限必要となる要素で構成されたテンプレートです。

1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>タイトル</title>
7</head>
8
9<body>
10  <h1>見出し</h1>
11  <p>本文</p>
12</body>
13
14</html>

各要素の解説

  • <!DOCTYPE html> この文書がHTML5という規格で作成されていることを、ブラウザに宣言するための記述です。すべてのHTMLファイルの最初に必ず記述します。

  • <html lang="ja"> ここからHTML文書が始まることを示すタグです。文書全体の終わりは</html>で示します。lang="ja"という属性は、このページが日本語で書かれていることを示しており、検索エンジンや音声読み上げソフトが正しく言語を認識するために重要です。

  • <head> このタグで囲まれた部分は、Webページのタイトルや文字コードなど、ページそのものには表示されない設定情報を記述する場所です。ブラウザや検索エンジンがページを理解するために必要な情報を入れます。

  • <meta charset="UTF-8"> ページの文字コードを指定する重要な設定です。UTF-8は世界中の多くの言語に対応できる標準的な文字コードで、これを指定することで日本語などが正しく表示され、文字化けを防ぐことができます。

  • <title> ブラウザのタブや、お気に入り（ブックマーク）に登録した際に表示されるページのタイトルを定義します。検索エンジンの検索結果にも表示されるため、非常に重要な要素です。

  • <body> このタグで囲まれた部分が、実際にユーザーのブラウザ画面に表示されるコンテンツです。見出し、文章、画像、リンクなど、Webページで表示したい内容はすべてこの中に記述します。

HTMLを書くときのポイント

  • タグは正しく閉じる（例：<p>文章</p>）

    • HTMLの要素は、<p>のような「開始タグ」と</p>のような「終了タグ」で構成されます。これらをセットで使うことで、どこからどこまでがひとつの要素なのかをコンピュータに正しく伝えます。タグを閉じ忘れると、Webページのレイアウトが崩れる原因になるため、必ず正しく閉じましょう。

  • 半角英数字で書く（全角だとエラーになることがあります）

    • HTMLのタグや属性など、コードを構成する部分はすべて半角英数字で記述するのがルールです。もし全角スペースや全角文字がコードの中に混ざってしまうと、ブラウザが正しく解釈できず、エラーになったり、意図通りに表示されなかったりすることがあります。文章として表示させたい部分以外は、必ず半角で書くように注意してください。

  • インデント（字下げ）でコードを整理する

    • インデントとは、行の先頭にスペースなどを入れて、文章の段落始めのように字下げすることです。HTMLでは、タグの親子関係（入れ子構造）を視覚的に分かりやすくするためにインデントを使います。インデントを適切に使うことで、コード全体の構造が一目で把握しやすくなり、後からの修正や確認が容易になります。

また、コメントを書くと、後で見返したときに内容を理解しやすくなります。 コメントは、ブラウザの表示には影響を与えずに、コードの中にメモを残すための機能です。 コメントは、<!-- と --> で囲んで記述します。

1<!-- これはコメントです -->

システム開発はチームで行うことが多いため、コードは 自分以外の人が読んでも分かりやすいように 書くのが大切です。これまで説明したポイントは、読みやすく、間違いの少ないコードを書くための基本的なルールです。

おわりに

HTMLは<p>などの「タグ」を使い、見出しや段落といったWebページの骨格を定義する言語です。画像を表示する<img>タグやリンクを作る<a>タグなど、様々な要素を<!DOCTYPE html>から始まるテンプレートの中に記述することでページは構成されます。タグは半角英数字で書き、正しく閉じるという基本的なルールを守ることが、読みやすく間違いのないコードを書くための第一歩です。

【HTML/CSS】HTMLの基本の書き方を学ぼう | いっしー@Webエンジニア