はじめてのWeb開発 HTMLとCSSで自分のページを作ろう
第 2 章

HTML入門
― ページの骨格を作るタグを覚えよう

この章では、HTMLの基本的な書き方と、よく使うタグを学びます。 HTMLはルールが決まっているので、最初は暗記するより 「なんとなく形がわかる」くらいを目標にしましょう。 使いながら自然に覚えていけます。

1. タグとは何か

HTMLは タグ（tag） と呼ばれる目印を使って、 文章の意味や役割を指定します。 タグは < と > で囲んで書きます。

ほとんどのタグは 開始タグ と 終了タグ がセットになっています。

<タグ名>  内容  </タグ名>
   ↑             ↑
開始タグ       終了タグ（スラッシュ / がつく）

実際に見てみましょう。

<h1>こんにちは！</h1>

これは「h1というタグで『こんにちは！』を囲む」という意味で、 ブラウザは「ここは一番大きな見出しだ」と判断して大きく表示します。

終了タグを忘れずに
開始タグを書いたら、対応する終了タグも必ず書きましょう。 忘れると、そこから先の文章がまるごとそのタグの中に 入ってしまったと見なされ、表示が崩れることがあります。

2. 属性（ぞくせい）― タグに情報を追加する

タグには 属性 という追加情報を付けることができます。 属性は開始タグの中に 属性名="値" の形で書きます。 

<a href="https://example.com">リンクのテキスト</a>
      ↑
   属性名="値"

この例では a タグ（リンク）に href という属性で 「どこへのリンクか」を指定しています。 属性の種類はタグごとに決まっています。それぞれ出てきたときに説明します。

3. HTMLページ全体の構造

第1章で書いたコードをもう一度見てみましょう。 すべてのHTMLファイルはこの形が基本になります。 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>

  <!-- ここにページの内容を書く -->

</body>
</html>

それぞれの意味を説明します。

記述 意味
<!DOCTYPE html> 「これはHTMLファイルです」とブラウザに宣言する。必ず1行目に書く。
<html lang="ja"> HTMLファイル全体を囲む。lang="ja" は「このページは日本語」という意味。
<head> … </head> ページの設定情報を書く場所。ブラウザには表示されない。
<meta charset="UTF-8"> 文字コードの指定。これを書かないと日本語が文字化けすることがある。
<title> … </title> ブラウザのタブに表示されるページ名。
<body> … </body> ページに表示される内容をすべてここに書く。
<!-- … --> コメント。ブラウザには表示されないメモ書きができる。
<head> の中はページの「裏方」情報、 <body> の中がページの「表側」の内容です。 これから書く内容はほぼすべて <body> の中に入ります。

4. 見出し ― h1 〜 h6

見出しには h1 から h6 まで6段階あります。 数字が小さいほど大きな見出しです。 

<h1>一番大きな見出し</h1>
<h2>二番目の見出し</h2>
<h3>三番目の見出し</h3>
<h4>四番目の見出し</h4>

ブラウザで表示するとこうなります。

一番大きな見出し（h1）

二番目の見出し（h2）

三番目の見出し（h3）

四番目の見出し（h4）

h1 はページに1つだけ
h1 はそのページで一番重要なタイトルに使います。 1ページに1つだけ使うのが基本です。 章や節の小見出しには h2、h3 を使いましょう。

5. 段落 ― p

文章の段落（かたまり）には p タグを使います。 p タグで囲んだ内容はひとかたまりとして扱われ、 前後に適度な余白が自動でつきます。 

<p>これは1つ目の段落です。文章が長くなっても自動で折り返されます。</p>
<p>これは2つ目の段落です。段落と段落の間には自動で空きがつきます。</p>
Enterキーで改行しても表示は変わりません
HTMLでは、コードの中でEnterキーを押して改行しても、 ブラウザの表示には影響しません。 文章を区切りたいときは <p> タグを使いましょう。 行だけ変えたい（段落を分けない）場合は <br> を使います。

改行 ― br

段落を分けずに行だけ変えたいときは br タグを使います。 br は終了タグが不要な珍しいタグです。 

<p>1行目のテキスト<br>
2行目のテキスト</p>

6. 強調 ― strong / em

文章の中で特定の言葉を目立たせたいときに使います。

<p>ファイルを保存するには <strong>Ctrl + S</strong> を押します。</p>
<p>これは <em>とても大切な</em> ポイントです。</p>

ファイルを保存するには Ctrl + S を押します。

これは とても大切な ポイントです。

タグ 表示 使いどころ
<strong> 太字 重要な言葉・警告・キーワード
<em> 斜体 強調・書名・外来語

7. リスト ― ul / ol / li

箇条書きには2種類あります。 順番に意味がある場合は ol、ない場合は ul を使います。 各項目は li タグで囲みます。

順番なしリスト（ul）

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>
  • りんご
  • みかん
  • ぶどう

順番ありリスト（ol）

<ol>
  <li>フォルダを開く</li>
  <li>ファイルを作る</li>
  <li>コードを書く</li>
</ol>
  1. フォルダを開く
  2. ファイルを作る
  3. コードを書く

8. リンク ― a

クリックできるリンクは a タグで作ります。 href 属性にリンク先のURLやファイルパスを書きます。 

<a href="https://www.google.com">Googleを開く</a>

別タブで開く

リンクを新しいタブで開かせたいときは、target="_blank" という 属性を追加します。 

<a href="https://www.google.com" target="_blank">Googleを別タブで開く</a>

同じサイト内のページへのリンク

同じフォルダ内の別のファイルへリンクするときは、URLではなく ファイル名を書きます。これを相対パスといいます。 

<!-- 同じフォルダ内の profile.html へのリンク -->
<a href="profile.html">プロフィールを見る</a>

<!-- 1つ上のフォルダの index.html へのリンク -->
<a href="../index.html">トップページへ戻る</a>
../ は「1つ上のフォルダ」を意味します。 例えば practice/profile/index.html から practice/index.html へリンクするには href="../index.html" と書きます。

9. 画像 ― img

画像を表示するには img タグを使います。 img は br と同様、終了タグが不要なタグです。 

<img src="photo.jpg" alt="猫の写真">
属性 意味
src="…" 画像ファイルのパス（場所）を指定する。必須。
alt="…" 画像が表示できないときに代わりに表示されるテキスト。目の不自由な方が使う読み上げソフトにも使われる。必ず書く。

画像ファイルはHTMLファイルと同じフォルダか、images という名前のフォルダを作って入れるのが一般的です。 

practice/
├── index.html
└── images/
    └── photo.jpg    ← 画像ファイルをここに置く
<!-- imagesフォルダの中の画像を表示 -->
<img src="images/photo.jpg" alt="猫の写真">

10. この章で学んだタグ一覧

タグ 役割 終了タグ
<h1> 〜 <h6> 見出し（1が最大） 必要
<p> 段落（本文テキスト） 必要
<br> 改行 不要
<strong> 重要な語句（太字） 必要
<em> 強調（斜体） 必要
<ul> <li> 順番なし箇条書き 必要
<ol> <li> 順番あり番号リスト 必要
<a href="…"> リンク 必要
<img src="…" alt="…"> 画像 不要

この章のまとめ

次の章では、今学んだタグを使って実際に自己紹介ページを作ります。 タグを覚えていなくても大丈夫 ―― この章を見ながら書いていきましょう！