【HTML】Web制作の基礎を再確認！タグの使い方からSEOまで

2025年4月6日 最終更新日時 : 2025年4月12日 ar
HTML

Webサイトやブログを作りたい！と思ったとき、まず学ぶべき言語の一つが「HTML」です。HTMLは、Webページの見た目を作るCSSや、動きを加えるJavaScriptと共に、Web制作の根幹をなす技術です。

この記事では、Web制作の初心者から、さらに理解を深めたい中級者の方に向けて、HTMLの基礎から応用、そしてSEOとの関わりまで、豊富なサンプルコードと共に徹底的に解説します。

1. HTMLとは？ Webページの骨組みを作ろう

HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。簡単に言うと、Webページに表示されるテキストや画像などのコンテンツに「意味」や「構造」を与えるための言語です。

  • HyperText（ハイパーテキスト）：テキストを超えたテキスト。ページ間を移動できる「リンク」の機能を持つテキストのことです。
  • Markup（マークアップ）：「印付け」という意味。文章の各部分が「見出し」なのか、「段落」なのか、「リスト」なのかといった印（タグ）を付けていく作業です。
  • Language（ランゲージ）：言語。コンピュータと人間が理解できる共通のルール（文法）を持っています。

普段私たちが見ているWebページは、裏側ではHTMLによって「これはタイトル」「これは本文」「これは画像」「これはリンク」といった具合に構造化されています。HTMLは、いわばWebページの骨組みを作る役割を担っているのです。

HTMLを学ぶメリット

  • Web制作の基礎が身につく：CSSやJavaScriptを学ぶ上でも、HTMLの知識は必須です。
  • Webページの仕組みが理解できる：普段見ているサイトがどのように作られているか分かるようになります。
  • 自分でWebサイトやブログをカスタマイズできる：WordPressなどのCMSでも、HTMLを知っていると細かい調整が可能になります。
  • SEO（検索エンジン最適化）に強くなる：適切なHTML構造は、検索エンジンにコンテンツの内容を正しく伝え、検索順位向上につながります。

この記事を通して、HTMLの基本をマスターし、Web制作の第一歩を踏み出しましょう！

2. HTMLの基本構造：すべてのページの始まり

まずは、どんなHTMLファイルにも共通する基本的な構造を見てみましょう。テキストエディタ（VSCode, Sublime Text, Atomなど、またはWindowsのメモ帳、MacのテキストエディットでもOK）を開いて、以下のコードを書いてみてください。ファイル名は index.html など、拡張子を .html にして保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="このページはHTMLの基本構造を学ぶためのサンプルページです。">
  <title>はじめてのHTML</title>
  <link rel="stylesheet" href="style.css"> </head>
<body>

  <h1>こんにちは、HTML!</h1>
  <p>これは最初のWebページです。</p>

</body>
</html>

保存したファイルをダブルクリックすると、Webブラウザ（Chrome, Firefox, Edgeなど）で開かれ、「こんにちは、HTML!」と「これは最初のWebページです。」という文字が表示されるはずです。

それぞれの要素が何を表しているのか、詳しく見ていきましょう。

  • <!DOCTYPE html>
    • 「文書型宣言」と呼ばれ、このファイルがHTML5というバージョンのHTML文書であることをブラウザに伝えます。お決まりの記述として、必ずHTMLファイルの最初に書きます。
  • <html lang="ja">
    • HTML文書全体の始まりと終わりを示す「ルート要素」です。すべてのHTML要素はこの <html> タグの中に書かれます。
    • lang="ja" は、このページの主要な言語が日本語であることを示します。lang="en"なら英語になります。検索エンジンや翻訳機能、読み上げソフトなどが言語を正しく認識するために重要です。
  • <head>
    • この要素の中には、Webページそのものに関する「メタ情報」を記述します。メタ情報とは、ページタイトル、文字コード、外部ファイルの読み込み指定など、ブラウザや検索エンジンに向けた情報で、通常はページ上に直接表示されません。
    • <meta charset="UTF-8">：文字コードを指定します。UTF-8 は世界中の多くの言語を扱える標準的な文字コードで、文字化けを防ぐために必須です。
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">：スマートフォンなど、さまざまなデバイスで表示を最適化するための設定（レスポンシブデザイン対応）です。width=device-width でデバイスの幅に合わせ、initial-scale=1.0 で初期のズーム倍率を1.0にします。
    • <meta name="description" content="...">：ページの簡単な説明文です。検索結果のスニペット（説明文）として表示されることが多く、SEOにおいて重要な要素です。ユーザーがクリックしたくなるような魅力的な説明文を書きましょう。
    • <title>はじめてのHTML</title>：ブラウザのタブやブックマーク、検索結果のタイトルとして表示される、ページのタイトルです。具体的で分かりやすいタイトルをつけましょう。SEOでも非常に重要です。
    • <link rel="stylesheet" href="style.css">：CSS（スタイルシート）ファイルを読み込むための記述です。CSSについては別の記事で詳しく解説しますが、HTMLとセットで使われることが多いです。
  • <body>
    • この要素の中に、実際にブラウザの画面に表示されるコンテンツ（見出し、段落、画像、リンクなど）を記述します。私たちが普段Webページで見ている内容は、すべてこの <body> タグの中に書かれています。

このように、HTMLは <要素名> と </要素名> で囲まれた「要素」を組み合わせて構成されます。開始タグと終了タグでコンテンツを挟むのが基本ですが、中には <meta> や <br>, <img> のように終了タグがない（または省略される）「空要素」もあります。

また、<html lang="ja"> や <meta charset="UTF-8"> のように、開始タグの中に 属性名="値" という形式で追加情報（属性）を指定することができます。

3. よく使うHTMLタグ（要素）：コンテンツを形作ろう

<body> タグの中に記述する、コンテンツを表示するための基本的なHTMLタグを見ていきましょう。

3.1. 見出し（<h1>～<h6>）

文章のタイトルやセクションの区切りを示すために使います。<h1> が最も重要度が高く、<h6> に向かって重要度が下がっていきます。

  • 使い方:
    • <h1> はページのメインタイトルとして、1ページに1つだけ使うのが原則です。SEOにおいても最も重要な見出しです。
    • <h2>, <h3>... と、文章の構造に合わせて階層的に使います。いきなり <h1> の次に <h3> を使うなど、階層を飛ばさないようにしましょう。
    • 見出しタグは、文字の大きさや太さを変えるためだけに使うべきではありません。あくまで文章構造を示すためのものです。見た目の調整はCSSで行います。
<body>
  <h1>HTML入門</h1> <p>HTMLの基本を学びましょう。</p>

  <h2>HTMLの基本構造</h2> <p>まずは基本的なファイルの形を覚えます。</p>

  <h3>head要素</h3> <p>head要素にはメタ情報を記述します。</p>

  <h3>body要素</h3> <p>body要素には表示されるコンテンツを記述します。</p>

  <h2>よく使うHTMLタグ</h2> <p>さまざまなタグの使い方を見ていきます。</p>
</body>

3.2. 段落（<p>）

文章のまとまり（段落）を示すために使います。テキストコンテンツの基本となるタグです。

<body>
  <h1>私の好きなこと</h1>

  <p>私の好きなことは、週末に公園を散歩することです。緑の中を歩くとリラックスできます。</p>

  <p>最近は、新しいカフェを見つけるのも楽しみの一つです。美味しいコーヒーと読書は最高の組み合わせです。</p>
</body>

ブラウザは <p> タグごとに上下に少し余白（マージン）をつけて表示することが多いです。

3.3. リンク（<a>）

他のWebページや、同じページ内の特定の場所にジャンプするためのハイパーリンクを作成します。

  • href 属性 (Hypertext Reference)：リンク先のURLを指定します。（必須）
  • target="_blank" 属性：リンクを新しいタブ（またはウィンドウ）で開くように指定します。これを指定しない場合は、同じタブ内でページが遷移します。外部リンク（自分のサイト以外のページへのリンク）には target="_blank" をつけることが多いです。
  • 内部リンク：同じサイト内の別ページへのリンク。例：<a href="/about.html">会社概要</a>
  • 外部リンク：他のサイトへのリンク。例：<a href="https://www.google.com/" target="_blank">Google</a>
  • ページ内リンク：同じページ内の特定箇所へのリンク。リンク先の要素に id 属性で名前をつけ、href に #id名 を指定します。
<body>
  <h1>リンクの例</h1>

  <h2>外部リンク</h2>
  <p><a href="https://www.google.com/" target="_blank">Googleで検索する</a></p>
  <p><a href="https://ja.wikipedia.org/" target="_blank">Wikipediaで調べる</a> (新しいタブで開きます)</p>

  <h2>内部リンク</h2>
  <p><a href="page2.html">次のページへ</a></p>
  <p><a href="/contact/">お問い合わせページへ</a> (ルートからのパス)</p>

  <h2>ページ内リンク</h2>
  <p><a href="#section2">セクション2へジャンプ</a></p>

  <hr>
  <h2 id="section2">セクション2</h2> <p>ここはセクション2です。</p>
  <p>...</p>
  <p><a href="#">ページのトップへ戻る</a> (#だけでもトップに戻ることが多い)</p>
</body>

3.4. 画像（<img>）

Webページに画像を表示します。<img> タグは終了タグを持たない空要素です。

  • src 属性 （Source）： 表示する画像ファイルのパス（URLまたはファイル名）を指定します。（必須）
  • alt 属性（Alternative Text）：画像が表示されなかった場合（パスが間違っている、読み込みに失敗したなど）に代わりに表示されるテキスト、およびスクリーンリーダー（視覚障碍者向けの読み上げソフト）が画像の内容を読み上げるためのテキストです。SEOとアクセシビリティの両面で非常に重要なので、必ず具体的に記述しましょう。
  • width 属性／height 属性：画像の幅と高さをピクセル単位で指定します。指定しなくても表示されますが、指定しておくと画像読み込み前に表示領域が確保され、レイアウトがガタつく（レイアウトシフト）のを防ぐ効果があります。CSSでサイズを指定するのが一般的ですが、HTMLで指定することも可能です。
<body>
  <h1>かわいい子猫の画像</h1>

  <h2>Web上の画像を表示</h2>
  <img
    src="https://ar-note.com/img/cat.png"
    alt="こちらを見つめる可愛い子猫の画像"
    width="400"
    height="300">

  <h2>ローカルの画像を表示 (同じフォルダにある場合)</h2>
  <img src="cat.jpg" alt="箱に入った子猫">

  <h2>ローカルの画像を表示 (imagesフォルダの中にある場合)</h2>
  <img src="images/dog.png" alt="走っている犬" width="250">
</body>

3.5. リスト

項目を箇条書きで表示したい場合に使います。目的に応じて3種類のリストがあります。

  • <ul>（Unordered List）： 順序のないリスト。各項目は <li> (List Item) タグで囲みます。通常、行頭に「・」（黒丸）などが付きます。
  • <ol>（Ordered List）：順序のあるリスト。各項目は同じく <li> タグで囲みます。通常、行頭に「1. 2. 3...」のような番号が付きます。
    • type属性で番号の種類 (A, a, I, i) を、start属性で開始番号を指定できます（例：<ol type="A" start="3"> は C から始まる）。
  • <dl>（Definition List）：用語とその説明をセットで記述する定義リスト。中級者向けですが、用語集やFAQなどで役立ちます。
    • <dt>（Definition Term）：用語・項目名
    • <dd>（Definition Description）：用語の説明・内容
<body>
  <h1>リストの例</h1>

  <h2>好きな果物 (順序なしリスト)</h2>
  <ul>
    <li>りんご</li>
    <li>バナナ</li>
    <li>いちご</li>
  </ul>

  <h2>作業の手順 (順序付きリスト)</h2>
  <ol>
    <li>手を洗う</li>
    <li>材料を切る</li>
    <li>フライパンで炒める</li>
    <li>盛り付ける</li>
  </ol>

  <h2>HTML用語集 (定義リスト)</h2>
  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Languageの略。Webページの構造を定義する言語。</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheetsの略。Webページの見た目や装飾を指定する言語。</dd>
    <dt>JavaScript</dt>
    <dd>Webページに動きやインタラクションを加えるプログラミング言語。</dd>
  </dl>
</body>

3.6. 強調（<strong>, <em>）

テキストの一部を強調したい場合に使います。

  • <strong>：その部分が重要であることを示します。ブラウザは通常、太字で表示します。
  • <em> （Emphasis）：その部分を強調したい（アクセントを置きたい）ことを示します。ブラウザは通常、斜体（イタリック）で表示します。

<b> と <i> との違い：昔からある <b>（Bold）タグや <i>（Italic）タグも、それぞれ太字・斜体で表示されます。しかし、これらは単に「見た目」を変えるためのタグであり、「意味」を持ちません。一方、<strong> は「重要性」、<em> は「強調」という明確な意味を持ちます。SEOやアクセシビリティの観点からは、意味を持つ <strong> や <em> を使うことが推奨されます。デザイン目的の太字・斜体はCSSで行うべきです。

<body>
  <p>このプロジェクトを成功させるためには、<strong>チームワークが不可欠</strong>です。</p>
  <p>彼女は<em>本当に</em>素晴らしいアイデアを思いついた。</p>

  <p>製品名: <b>SuperWidget</b></p>
  <p>学名: <i>Felis catus</i></p>
</body>

3.7. 改行（<br>）

テキスト中で強制的に改行を入れたい場合に使います。<br> は終了タグを持たない空要素です。

注意点：段落間のスペースを空けたい、といったレイアウト目的で <br> を連続して使うのは避けましょう。それはCSSの margin や padding で調整するべきです。<br> は、詩や住所表記のように、改行そのものに意味がある場合に限定して使うのが適切です。

<body>
  <h1>住所</h1>
  <p>
    〒100-0001<br>
    東京都千代田区<br>
    千代田1-1
  </p>

  <h1>詩</h1>
  <p>
    古い池や<br>
    蛙飛び込む<br>
    水の音
  </p>
</body>

3.8. 水平線（<hr>）

話題の区切りを示すための水平線を表示します。<hr> も空要素です。装飾的な線を引きたい場合は、CSSの border プロパティなどを使う方が適切です。

<body>
  <h2>セクション1</h2>
  <p>ここはセクション1の内容です。</p>

  <hr> <h2>セクション2</h2>
  <p>ここはセクション2の内容です。</p>
</body>

3.9. コメント（<!-- -->）

HTMLコード内に、ブラウザには表示されないメモを残すことができます。コードの説明や、一時的に表示させたくない部分を囲むのに使います。

<body>
  <h1>ページタイトル</h1>
  <p>これは表示される段落です。</p>
  <!-- ここは表示されない。 -->
</body>

4. セマンティックHTML：意味のある構造でWebページをマークアップする

HTMLタグには、それぞれが持つ「意味」があります。例えば、<h1> は「最重要の見出し」、<p> は「段落」という意味を持っています。このように、コンテンツの構造や意味を的確に示すHTML要素を使ってマークアップすることを「セマンティックHTML」と呼びます。

なぜセマンティックHTMLが重要なのか？

  1. SEO（検索エンジン最適化）：Googleなどの検索エンジンは、HTMLの構造を見てページの内容を理解しようとします。セマンティックな要素（後述する <header>, <nav>, <main>, <article>, <aside>, <footer> など）を適切に使うことで、検索エンジンはページのどの部分がヘッダーで、どの部分が主要コンテンツなのかなどを正確に把握でき、結果として検索順位の向上につながる可能性があります。
  2. アクセシビリティ：スクリーンリーダーなどの支援技術は、HTMLの構造を解釈してユーザーに情報を伝えます。セマンティックな要素を使うことで、視覚障碍を持つユーザーなどもコンテンツの構造を理解しやすくなります。例えば、<nav> タグで囲まれた部分はナビゲーションリンクだと認識され、スキップしたりジャンプしたりといった操作が容易になります。
  3. メンテナンス性・可読性：コードを読む人間にとっても、どの部分が何を表しているのかが一目瞭然になり、コードの理解や修正がしやすくなります。<div> タグばかりで構成されたページよりも、構造が明確なページの方がメンテナンスしやすいのは明らかです。

主要なセマンティック要素

HTML5で導入された、ページの主要な領域を示すセマンティック要素を見ていきましょう。

  • <header>：ページやセクションの導入部分（ヘッダー）を示します。サイトのロゴ、タイトル、ナビゲーションなどが含まれることが多いです。<body> 直下だけでなく、<article> や <section> の中にヘッダーとして置くこともできます。
  • <nav>：主要なナビゲーションリンクのグループを示します。サイト全体のグローバルナビゲーションや、ページ内の目次リンクなどに使います。すべてのリンクを <nav> で囲む必要はなく、主要なものだけを対象とします。
  • <main>：ページの主題となる主要なコンテンツを示します。この要素は、1つのページに1つだけ配置します。ヘッダー、フッター、サイドバーなど、繰り返し表示される部分は <main> の外に置きます。
  • <article>：それ自体で完結できる独立したコンテンツの単位を示します。ブログの投稿、フォーラムの投稿、ニュース記事、商品紹介などが該当します。<article> は入れ子にすることも可能です（例: コメント欄）。
  • <section>：文書やアプリケーション内の一般的なセクション（章、節など）を示します。通常、見出し（<h1>～<h6>）を持ちます。<article> よりも汎用的な区切りで、関連性のあるコンテンツをグループ化する際に使います。どのセマンティック要素が適切か迷った場合は <section> を使うことが多いですが、より具体的な要素があればそちらを優先します。
  • <aside>：主要なコンテンツとは直接的な関連性が薄い補足情報や、サイドバーなどを示します。広告、関連リンク、著者のプロフィールなどが該当します。
  • <footer>：ページやセクションのフッター（末尾）を示します。コピーライト情報、著者情報、関連文書へのリンクなどが含まれることが多いです。<header> と同様に、<body> 直下だけでなく <article> や <section> の中に置くこともできます。
  • <figure> と <figcaption>：図版（画像、図表、コード片など）とそのキャプション（説明文）をグループ化します。<figure> で図版全体を囲み、<figcaption> でキャプションを記述します。
  • <time>：日付や時刻をマシンリーダブル（機械が読み取り可能）な形式で表現します。datetime 属性で標準的な形式（例：YYYY-MM-DD）を指定します。検索エンジンが日付を正確に認識したり、カレンダーアプリと連携したりするのに役立ちます。

<div> と <span>：意味を持たない汎用コンテナ

  • <div>（Division）： ブロックレベル要素（通常、前後に改行が入る）の汎用的なコンテナです。それ自体に意味はありませんが、CSSでスタイリングするためや、JavaScriptで操作するために、コンテンツをグループ化する目的で使われます。セマンティックな要素が適切でない場合にのみ使用しましょう。
  • <span>：インライン要素（通常、前後に改行が入らない）の汎用的なコンテナです。<div> と同様に意味はありませんが、文中の特定の単語やフレーズにCSSでスタイルを適用したり、JavaScriptで操作したりするために使います。

使い分けのポイント：まず適切なセマンティック要素がないか検討し、なければ <div> や <span> の使用を考えます。スタイリングやスクリプトのためだけに意味のない要素で囲むのは、できるだけ避けるべきです。

セマンティック要素を使ったレイアウト例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>セマンティックなブログ記事</title>
  <meta name="description" content="セマンティックHTMLを使ったブログ記事の構造サンプルです。">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header> <h1><a href="/">My Awesome Blog</a></h1>
    <nav> <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">このブログについて</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main> <article> <header> <h2>HTMLのセマンティック要素について</h2>
        <p>公開日: <time datetime="2025-04-05">2025年4月5日</time></p>
      </header>

      <section> <h3>セマンティックHTMLとは？</h3>
        <p>コンテンツの意味や構造を明確に示すHTML要素を使うことです。</p>
        <figure>
          <img src="semantic-image.jpg" alt="セマンティック要素の構造図">
          <figcaption>図1: 主要なセマンティック要素の関係</figcaption>
        </figure>
      </section>

      <section> <h3>なぜ重要なのか？</h3>
        <p>SEO、アクセシビリティ、メンテナンス性の向上に繋がります。</p>
        <ul>
          <li>SEO効果</li>
          <li>アクセシビリティ向上</li>
          <li>コードの可読性アップ</li>
        </ul>
      </section>

      <footer> <p>カテゴリ: <a href="/category/html">HTML</a>, <a href="/category/webdev">Web開発</a></p>
      </footer>
    </article>

    <aside> <h3>関連記事</h3>
      <ul>
        <li><a href="/css-basics">CSSの基本</a></li>
        <li><a href="/javascript-intro">JavaScript入門</a></li>
      </ul>
      <h3>筆者プロフィール</h3>
      <p>Web開発が大好きなブロガーです。</p>
    </aside>
  </main>

  <footer> <p><small>© 2025 My Awesome Blog.</small></p>
  </footer>

</body>
</html>

この例のように、適切なセマンティック要素を使うことで、ページの構造が非常に分かりやすくなります。

5. フォーム（<form>）：ユーザーからの入力を受け取る

Webサイトでユーザーから情報（名前、メールアドレス、問い合わせ内容、検索キーワードなど）を受け取るために使うのがフォームです。<form> 要素の中に、様々な入力部品（テキスト欄、チェックボックス、ボタンなど）を配置します。

  • <form> 要素の属性
    • action：フォームの入力データを送信する先のURLを指定します。サーバーサイドのプログラム（PHP, Python, Rubyなど）のパスを指定することが多いです。空の場合は現在のページのURLになります。
    • method：データの送信方法を指定します。
      • GET：データがURLの末尾に付加されて送信されます（例：search.php?keyword=HTML）。主に検索フォームなど、取得系の処理で使われます。送信できるデータ量に制限があり、URLにデータが見えるため機密情報には不向きです。
      • POST：データがHTTPリクエストのボディ部に含まれて送信されます。URLには表示されず、送信できるデータ量にも制限がありません。登録、更新、削除など、サーバー上のデータを変更する可能性のある処理や、機密情報を含む場合に使われます。

主要なフォーム部品

フォーム部品の多くは <input> 要素で作られ、type 属性で種類を指定します。

  • <input type="text">: 1行のテキスト入力欄。名前や検索キーワードなどに。
    • placeholder属性: 入力欄にあらかじめ表示しておくヒントテキスト。
    • maxlength属性: 最大入力文字数。
    • required属性: この項目を必須入力にする。
  • <input type="password">：パスワード入力欄。入力内容は「●」などで表示されます。
  • <input type="email">：メールアドレス入力欄。ブラウザによっては簡単な形式チェックが行われます。
  • <input type="number">：数値入力欄。スピンボタン（上下矢印）が表示されることがあります。
    • min属性, max属性, step属性：最小値、最大値、入力間隔を指定。
  • <input type="checkbox">：チェックボックス。複数選択が可能です。
    • value属性：選択された場合に送信される値。
    • checked属性：最初からチェックされた状態にする。
  • <input type="radio">：ラジオボタン。複数の選択肢から１つだけを選択させます。
    • 同じグループのラジオボタンには、同じ name 属性を指定します。これにより、グループ内で１つしか選択できないようになります。
    • value属性：選択された場合に送信される値。
    • checked属性：最初から選択された状態にする。
  • <input type="submit">：フォームの内容を送信するボタン。value 属性でボタンに表示されるテキストを指定できます（デフォルトは「送信」など）。
  • <input type="reset">：フォームの内容を初期状態に戻すリセットボタン。value 属性でボタンテキストを指定できます。
  • <input type="button">：単なるクリック可能なボタン。通常、JavaScriptと組み合わせて使います。value 属性でボタンテキストを指定できます。
  • <input type="file">：ファイルを選択するためのボタン。「ファイルを選択」ボタンとファイル名表示欄が表示されます。
    • accept属性：受け付けるファイルの種類を指定（例：accept="image/*" で画像ファイルのみ）。
  • <input type="date">：日付選択カレンダーを表示します（ブラウザによる）。
  • <input type="hidden">：画面には表示されない隠しデータを送信します。
  • <textarea>：複数行のテキスト入力欄。問い合わせ内容やコメントなどに使います。
    • rows属性, cols属性：表示する行数と列数（幅）の目安。
    • placeholder, maxlength, required 属性も使えます。
  • <select> と <option>：ドロップダウンリスト（プルダウンメニュー）を作成します。
    • <select> でリスト全体を囲み、<option> で各選択肢を定義します。
    • value属性（<option>）：選択された場合に送信される値。指定しない場合は <option> タグ内のテキストが送信されます。
    • selected属性（<option>）： 最初から選択された状態にする。
    • multiple属性（<select>）：複数選択を可能にする（通常はCtrlキーやShiftキーを押しながら選択）。
    • <optgroup label="...">：選択肢をグループ化して表示する場合に使います。
  • <button>：ボタンを作成します。<input type="button/submit/reset"> と似ていますが、<button> タグは内部にテキストだけでなく画像などのHTML要素を含めることができます。
    • type属性でボタンの挙動を指定します（submit, reset, button。デフォルトは submit）。
  • <label>：フォーム部品と、その説明ラベル（「お名前」「メールアドレス」など）を関連付けるために使います。これはアクセシビリティ上非常に重要です。ラベルをクリックすると、関連付けられたフォーム部品にフォーカスが移動したり、チェックボックスやラジオボタンが選択されたりします。
    • 関連付けの方法１：<label> の for 属性に、関連付けたいフォーム部品の id 属性と同じ値を指定する。
    • 関連付けの方法２：<label> タグでフォーム部品自体を囲む。

簡単な問い合わせフォームのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>お問い合わせフォーム</title>
  <style>
    /* 簡単なスタイル (実際はCSSファイルで行う) */
    label { display: block; margin-bottom: 5px; }
    input[type="text"],
    input[type="email"],
    textarea,
    select { width: 90%; max-width: 400px; margin-bottom: 15px; padding: 8px; border: 1px solid #ccc; }
    button { padding: 10px 20px; }
    .radio-group label,
    .checkbox-group label { display: inline-block; margin-right: 15px; }
    .required-mark { color: red; margin-left: 5px; }
  </style>
</head>
<body>

  <h1>お問い合わせ</h1>

  <form action="submit-form.php" method="post"> <div>
      <label for="name">お名前<span class="required-mark">*</span></label>
      <input type="text" id="name" name="user_name" required placeholder="例: 山田 太郎">
    </div>

    <div>
      <label for="email">メールアドレス<span class="required-mark">*</span></label>
      <input type="email" id="email" name="user_email" required placeholder="例: example@mail.com">
    </div>

    <div>
      <label for="category">お問い合わせの種類</label>
      <select id="category" name="category">
        <option value="">選択してください</option>
        <option value="product">製品について</option>
        <option value="service">サービスについて</option>
        <option value="other">その他</option>
      </select>
    </div>

    <fieldset> <legend>ご連絡方法の希望 (ラジオボタン)</legend>
      <div class="radio-group">
        <label>
          <input type="radio" name="contact_method" value="email" checked> Eメール
        </label>
        <label>
          <input type="radio" name="contact_method" value="phone"> 電話
        </label>
        <label>
          <input type="radio" name="contact_method" value="none"> 希望しない
        </label>
      </div>
    </fieldset>

    <fieldset>
      <legend>興味のある分野 (チェックボックス)</legend>
      <div class="checkbox-group">
        <label>
          <input type="checkbox" name="interests[]" value="web"> Web制作
          </label>
        <label>
          <input type="checkbox" name="interests[]" value="design"> デザイン
        </label>
        <label>
          <input type="checkbox" name="interests[]" value="programming"> プログラミング
        </label>
      </div>
    </fieldset>

    <div>
      <label for="message">お問い合わせ内容<span class="required-mark">*</span></label>
      <textarea id="message" name="message" rows="6" required placeholder="こちらにお問い合わせ内容をご記入ください。"></textarea>
    </div>

    <div>
      <label for="attachment">添付ファイル</label>
      <input type="file" id="attachment" name="attachment">
    </div>

    <div>
      <button type="submit">送信する</button>
      <button type="reset">リセット</button>
    </div>

  </form>

</body>
</html>

このサンプルでは、さまざまなフォーム部品と <label> の使い方、required 属性による必須入力指定、placeholder による入力ヒントなどが含まれています。<fieldset> と <legend> は、関連するフォーム部品（ラジオボタン群やチェックボックス群など）をグループ化し、そのグループにタイトルを付けるために使います。これもアクセシビリティ向上に役立ちます。

6. テーブル（<table>）：表形式のデータを表現する

<table> 要素は、行と列からなる表形式のデータを表現するために使います。

  • <table>：表全体を囲みます。
  • <tr> （Table Row）：表の各行を定義します。
  • <th>（Table Header）：見出しセルを定義します。通常、行や列のタイトルに使われ、デフォルトで太字・中央揃えで表示されることが多いです。scope 属性（col または row）を指定することで、その見出しが列ヘッダーなのか行ヘッダーなのかを明確にし、アクセシビリティを向上させます。
  • <td>（Table Data）：データセルを定義します。表の個々のデータが入ります。
  • <caption>：表全体のタイトル（キャプション）を定義します。<table> タグの直後に配置します。
  • <thead>, <tbody>, <tfoot>：表の内容をヘッダー部分、ボディ（本体）部分、フッター部分に構造化します。
    • <thead>：ヘッダー行（<th> を含む <tr>）をグループ化します。
    • <tbody>：データ行（<td> を含む <tr>）をグループ化します。大きな表の場合、複数の <tbody> を使うこともできます。
    • <tfoot>：フッター行（合計などを表示する <tr>）をグループ化します。
    • これらを使うことで、表の構造が明確になり、CSSでのスタイリングや、長い表のスクロール時にヘッダー／フッターを固定表示するなどの制御がしやすくなります。また、アクセシビリティやSEOの観点からも推奨されます。
  • colspan属性（<th>, <td>）：セルを水平方向（列方向）に結合します。値には結合するセル数を指定します（例：colspan="2"）。
  • rowspan属性（<th>, <td>）：セルを垂直方向（行方向）に結合します。値には結合するセル数を指定します（例：rowspan="3"）。

注意点：かつてはWebページのレイアウト（段組みなど）を作るために <table> が使われていた時代もありましたが、これは現在では非推奨です。レイアウトはCSS（FlexboxやGrid Layout）で行うべきであり、<table> は本来の目的である「表形式データの表示」にのみ使用しましょう。

簡単な表の作成サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テーブルの例</title>
  <style>
    /* 簡単なスタイル */
    table { border-collapse: collapse; /* 隣接するセルのボーダーを結合 */ width: 80%; margin: 20px auto; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
    caption { caption-side: bottom; /* キャプションを表の下に表示 */ margin-top: 10px; font-style: italic; }
    thead { background-color: #eee; }
    tbody tr:nth-child(even) { background-color: #f9f9f9; } /* 偶数行に背景色 */
    tfoot { font-weight: bold; background-color: #eee; }
  </style>
</head>
<body>

  <h1>商品リスト</h1>

  <table>
    <caption>2025年4月時点の商品価格リスト</caption>
    <thead>
      <tr>
        <th scope="col">商品ID</th>
        <th scope="col">商品名</th>
        <th scope="col">カテゴリ</th>
        <th scope="col">価格（税込）</th>
        <th scope="col">在庫</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>A-001</td>
        <td>高性能マウス</td>
        <td>PC周辺機器</td>
        <td>3,500円</td>
        <td>あり</td>
      </tr>
      <tr>
        <td>A-002</td>
        <td>メカニカルキーボード</td>
        <td>PC周辺機器</td>
        <td>12,000円</td>
        <td>あり</td>
      </tr>
      <tr>
        <td>B-101</td>
        <td>USBメモリ 64GB</td>
        <td>ストレージ</td>
        <td>1,800円</td>
        <td>残りわずか</td>
      </tr>
      <tr>
        <td>C-305</td>
        <td>Webカメラ</td>
        <td>PC周辺機器</td>
        <td colspan="2">入荷待ち</td> </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">合計（概算）</td> <td>約17,300円</td>
        <td>-</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

このサンプルでは、<thead>, <tbody>, <tfoot> を使って表を構造化し、<th> に scope 属性を指定、<caption> で表のタイトルを付け、colspan でセルを結合しています。

7. HTMLエンティティ：特殊文字を表示する

HTML文書内で、タグの開始と間違われる可能性のある文字（< や >）や、表示したい特定の記号（&, ", ' など）、連続したスペースなどを表示するには、「HTMLエンティティ」と呼ばれる特別な記述方法を使います。

主なHTMLエンティティ:

  • <：&lt;（Less Than）
  • >：&gt;（Greater Than)
  • &：&amp;（Ampersand)
  • "：&quot;（Quotation Mark)
  • '：&apos;（Apostrophe) - HTML4では定義されていませんでしたが、HTML5やXMLでは有効です。互換性を考えると &#39; を使う方が安全な場合もあります。
  • 半角スペース：&nbsp;（Non-Breaking Space）- 通常、HTMLでは連続した半角スペースは1つにまとめられますが、&nbsp; を使うと強制的にスペースを表示できます。また、このスペースでは単語が改行されません。
  • ©（コピーライト）：&copy;
  • ®（登録商標）：&reg;
  • ¥（円マーク）：&yen;
<body>
  <h1>HTMLエンティティの例</h1>

  <h2>タグを表示したい場合</h2>
  <p>段落は <p> タグを使います。</p>
  <p>終了タグは </p> です。</p>

  <h2>特殊記号</h2>
  <p>社名は Q&A Corporation です。</p>
  <p>彼は言った、"HTMLは楽しい！" と。</p>
  <p>It's a beautiful day.</p> <h2>スペース</h2>
  <p>価格:   1,000円</p> <h2>記号</h2>
  <p>Copyright © 2025 MySite.</p>
  <p>Widget® は登録商標です。</p>
  <p>価格: ¥5,000</p>
</body>

<code> タグを使ってプログラムコードを表示する場合など、< や & が頻繁に現れる場面では特にHTMLエンティティが重要になります。

8. HTMLの検証：コードの品質をチェックしよう

HTMLコードを書いたら、それが文法的に正しいかどうかをチェックすることが重要です。これを「HTMLの検証（バリデーション）」と呼びます。

なぜ検証が必要か？

  • エラーの発見：タグの閉じ忘れ、属性の書き間違いなど、単純なミスを発見できます。
  • ブラウザ間の互換性向上：正しいHTMLは、さまざまなブラウザで意図した通りに表示される可能性が高まります。文法エラーがあると、ブラウザによっては解釈が異なり、表示が崩れる原因になります。
  • SEO効果：検索エンジンは正しく構造化されたHTMLを好みます。エラーが多いと、ページの評価が下がる可能性があります。
  • アクセシビリティ向上：正しい文法は、スクリーンリーダーなどの支援技術がコンテンツを正確に解釈する助けになります。
  • 将来の互換性：標準仕様に準拠したコードは、将来のWeb技術の変化にも対応しやすくなります。

検証ツール

最も有名なのは、W3C（World Wide Web Consortium）が提供している公式の検証サービスです。

このサイトで、以下のいずれかの方法でHTMLを検証できます。

  1. Validate by URI：公開されているWebページのURLを入力する。
  2. Validate by File Upload：ローカルのHTMLファイルをアップロードする。
  3. Validate by Direct Input：HTMLコードを直接テキストエリアに貼り付ける。

検証結果でエラーや警告が表示されたら、その内容を確認し、HTMLコードを修正しましょう。最初はエラーがたくさん出て戸惑うかもしれませんが、エラーメッセージを読む練習にもなります。

9. SEOとHTML：検索エンジンに好かれるページ作り

SEO（Search Engine Optimization: 検索エンジン最適化）とは、Googleなどの検索エンジンで特定のキーワードで検索された際に、自分のWebサイトがより上位に表示されるように行う様々な施策のことです。適切なHTMLを書くことは、技術的なSEOの基本中の基本です。

検索エンジンは、HTMLコードを解析してページの内容や構造を理解しようとします。以下の点に注意してHTMLを記述することで、SEO効果を高めることができます。

  1. 適切なタイトル（<title>）
    • 検索結果で最も目立つ部分であり、クリック率に大きく影響します。
    • ページの内容を正確に反映し、ユーザーが検索しそうなキーワードを自然に含めましょう。
    • 具体的で、他のページと重複しないユニークなタイトルをつけます。
    • 長すぎると途中で省略されるため、全角で30文字程度を目安にします。
    • 例（悪い例）：トップページ
    • 例（良い例）：HTML入門 - Web制作の基礎をタグの使い方から徹底解説 | My Awesome Blog
  2. 適切な見出し構造（<h1>～<h6>）
    • <h1> はページの主題を示す最も重要な見出しです。キーワードを含め、1ページに1つだけ使用します。
    • <h2>, <h3>... を使って、コンテンツの階層構造を論理的に示します。これにより、検索エンジンは記事の構成やトピックを理解しやすくなります。
    • 見出しだけで記事のアウトラインが分かるように意識しましょう。
  3. meta description の設定:
    • <head> 内に記述するページの要約文です。検索結果のスニペットとして表示されることが多く、クリック率に影響します。
    • ページの内容を正確に要約し、ユーザーの興味を引き、クリックを促すような魅力的な文章を書きましょう。
    • キーワードを自然に含めますが、詰め込みすぎは逆効果です。
    • 文字数は120文字程度を目安にします。
    • 例：HTMLの基本からセマンティック要素、フォーム、テーブルの使い方まで、初心者向けにサンプルコード付きで徹底解説。SEOに強いHTMLの書き方も学べます。
  4. セマンティックHTMLの活用:
    • <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> などのセマンティック要素を適切に使うことで、検索エンジンはページの各部分の役割（どこが主要コンテンツで、どこがナビゲーションかなど）を正確に理解できます。
    • <div> ばかりで構成するのではなく、意味的に適切なタグを選びましょう。
  5. 画像の alt 属性:
    • <img> タグの alt 属性には、画像の内容を説明する代替テキストを必ず記述します。
    • 検索エンジンは画像そのものを直接理解できないため、alt テキストを読んで画像の内容を把握します。関連するキーワードを自然に含めることで、画像検索からの流入も期待できます。
    • 装飾目的で意味のない画像の場合は、alt="" のように空に設定します（アクセシビリティのため）。
    • 例（良い例）：<img src="cat.jpg" alt="窓辺で日向ぼっこする三毛猫">
    • 例（悪い例）：<img src="cat.jpg" alt="画像">, <img src="cat.jpg" alt="猫 ネコ ペット かわいい">（キーワードの羅列）
  6. 分かりやすいリンクテキスト
    • <a> タグの中のテキスト（アンカーテキスト）は、リンク先の内容が推測できるように具体的に記述します。
    • 「こちら」「クリック」のような曖昧なテキストは避けましょう。
    • 例（悪い例）：詳細は<a href="service.html">こちら</a>
    • 例（良い例）：<a href="service.html">弊社のサービス詳細について</a>
  7. 構造化データ（Schema.orgなど - 中級者向け）
    • 検索エンジンに対して、コンテンツの意味をより詳細に伝えるためのマークアップ方法です。例えば、「これはレシピである」「これはイベント情報である」「これは商品情報である」といった情報を、決められた語彙（スキーマ）を使ってHTML内に記述します。
    • JSON-LD形式で <script> タグ内に記述するのが一般的です。
    • 適切に実装すると、検索結果でリッチリザルト（評価、価格、レシピ手順などが表示される特別な形式）として表示される可能性があり、クリック率向上に繋がります。

これらの点を意識してHTMLを記述することで、検索エンジンにとっても、ユーザーにとっても分かりやすい、質の高いWebページを作成することができます。

10. HTMLとCSS、JavaScriptの関係：それぞれの役割分担

Web制作を学ぶ上で、HTMLと共によく耳にするのが「CSS」と「JavaScript」です。これらはそれぞれ異なる役割を持ち、協力してWebページを作り上げています。

  • HTML（HyperText Markup Language）
    • 役割：Webページの構造と意味を定義する。
    • 担当：文章の見出し、段落、リスト、画像、リンク、フォームなどの骨組みを作る。セマンティックな要素でコンテンツの意味付けを行う。
    • 例えるなら：建物の骨組み、設計図。
  • CSS（Cascading Style Sheets）
    • 役割：HTMLで定義された構造に対して、見た目や装飾を指定する。
    • 担当：文字の色、大きさ、フォント、背景色、レイアウト（配置）、要素の表示・非表示などを制御する。
    • 例えるなら：建物の内装や外装（壁紙、塗装、家具の配置など）。
  • JavaScript
    • 役割：Webページに動きやインタラクティブな機能を追加する。
    • 担当：ユーザーのアクション（クリック、マウスオーバーなど）に応じて表示内容を変える、アニメーションを実装する、フォームの入力値をチェックする、サーバーと非同期通信を行う（Ajax）など。
    • 例えるなら: 建物の設備（自動ドア、エレベーター、照明のオンオフなど）。

重要なのは、それぞれの役割をきちんと分担させることです。

  • HTMLで見出しの文字を大きくするために <h1> を使うのは正しいですが、「文字を赤くしたい」という理由だけで特別なタグを使うのは間違いです。文字の色はCSSで指定します。
  • CSSで要素を動かすアニメーションは実装できますが、ユーザーの複雑な操作に応じてコンテンツを動的に変更するような場合はJavaScriptの出番です。

HTMLでしっかりとした構造を作り、CSSで見た目を整え、必要に応じてJavaScriptで動きを加える。この三位一体の関係を理解することが、効率的でメンテナンスしやすく、アクセシブルでSEOにも強いWebサイトを作るための鍵となります。

11. まとめ：HTMLはWeb制作の第一歩であり、奥深い世界

この記事では、HTMLの基本構造から、よく使うタグ、セマンティックHTMLの重要性、フォームやテーブルの作り方、さらにはSEOとの関わりまで、幅広く解説してきました。

HTMLは、Web制作の基礎となる言語であり、学ぶことは決して難しくありません。まずは基本的なタグを覚え、実際にコードを書いてブラウザで表示を確認する、という作業を繰り返すことで、自然と身についていくでしょう。

  • 基本をしっかり：DOCTYPE, html, head, body の構造を理解する。
  • よく使うタグをマスター：h1-h6, p, a, img, ul, ol, li は必須。
  • 意味を考える：セマンティックHTML（header, nav, main, article, section, aside, footer）を意識して構造化する。
  • フォームとテーブル：ユーザー入力や表形式データも扱えるようにする。
  • 検証を忘れずに：W3Cバリデーターなどでコードの品質をチェックする。
  • SEOを意識する：title, meta description, 見出し構造, alt属性などを適切に設定する。
  • 役割分担： HTMLは構造、CSSは見た目、JavaScriptは動き、と理解する。

HTMLは単なるマークアップ言語ですが、その記述方法一つで、検索エンジンからの評価、ユーザーの利便性（アクセシビリティ）、そしてコードのメンテナンス性が大きく変わってきます。

今回学んだ知識を土台として、次はぜひCSSの世界に足を踏み入れ、Webページの見た目を自由にデザインする楽しさを体験してみてください。さらにJavaScriptを学べば、よりインタラクティブで魅力的なWebサイトを作ることができるようになります。

HTMLの世界は奥深く、常に新しい技術や考え方が登場していますが、この記事で解説した基本原則は今後も変わらず重要であり続けるでしょう。ぜひ、楽しみながらHTMLの学習を進めていってください！

PR広告


カテゴリー
html
前の記事
【JavaScript】全画面表示（フルスクリーン）のやり方
2025年4月5日
次の記事
【JavaScript】three.jsで立方体にテクスチャを貼る。
2025年4月7日