はじめに

「HTMLって何から始めればいいの？」「どのタグを覚えるべき？」このような疑問を持つ方は多いのではないでしょうか。Webサイト制作の基本となるHTMLは、初心者にとって覚えることが多く、混乱しがちです。

しかし、安心してください。実は日常的に使うHTMLタグはそこまで多くありません。この記事では、Webサイト制作に欠かせないHTMLの基本タグとその使い方を徹底解説します。この記事を読めば、HTMLの基礎を効率的に習得でき、自信を持ってWebサイト制作に取り組めるようになるでしょう。

それでは、HTMLの基本から応用まで順番に見ていきましょう！

HTMLとは？基本的な構造を理解しよう

HTMLとは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webページを作るための言語です。文書の構造や意味を定義するために使われます。

HTMLの基本構造

HTML文書は、以下の基本構造を持っています。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
<body>
    ここに本文を書きます
</body>
</html>

この構造は必ず覚えておきましょう。各部分の役割は以下の通りです：

  • <!DOCTYPE html>: HTML5文書であることを宣言するためのもの
  • <html>: HTML文書の始まりと終わりを示す
  • <head>: メタ情報（タイトルやCSSの読み込みなど）を記述する場所
  • <body>: 実際にブラウザに表示される内容を記述する場所

これがHTMLの「骨組み」となります。この基本構造の中に、様々なタグを追加していくことでWebページが作られます。

HTML基本タグ：文書構造を作るタグ

まずは、文書の基本構造を作るためのタグから見ていきましょう。

&lt;h1&gt;〜&lt;h6&gt;: 見出しタグ

見出しタグは、文書の階層構造を作るために使われる重要なタグです。

<h1>最も重要な見出し</h1>
<h2>次に重要な見出し</h2>
<h3>さらに次に重要な見出し</h3>
<h4>重要度4の見出し</h4>
<h5>重要度5の見出し</h5>
<h6>最も小さい見出し</h6>

見出しタグの使い方と注意点

  • <h1>は1ページにつき1つだけ使用するのが基本（SEO的に重要）
  • 見出しは階層的に使用する（h1の後にh3を使うのではなく、h2を使う）
  • 見出しタグはデザインのためではなく、文書構造のために使用する

見出しタグは検索エンジンがページの構造を理解するための重要な手がかりとなるため、SEOの観点からも適切に使用することが大切です。

&lt;p&gt;: 段落タグ

テキストの段落を表すためのタグです。

<p>これは段落です。文章のかたまりを表現するのに使います。</p>
<p>これは別の段落です。</p>

<p>タグを使うと、段落間に自動的に余白が追加され、文書が読みやすくなります。

&lt;div&gt;: 区分けタグ

コンテンツをグループ化するための汎用的なタグです。

<div>
    <h2>セクションタイトル</h2>
    <p>このセクションの内容です。</p>
</div>

<div>自体には特別な意味はなく、CSS適用やJavaScript操作のための要素のグループ化に使われます。

&lt;span&gt;: インラインの区分けタグ

テキストの一部分だけをグループ化したい場合に使います。

<p>この文の<span style="color: red;">一部分</span>だけ赤くしたい場合。</p>

<div>がブロックレベル要素であるのに対し、<span>はインライン要素です。テキストの流れを壊さずに一部分だけをスタイリングしたい場合に便利です。

テキスト装飾のためのHTMLタグ

次に、テキストの見た目を整えるためのタグを見ていきましょう。

&lt;strong&gt;: 重要なテキスト

テキストの重要性を示すためのタグです。通常は太字で表示されます。

<p>この部分は<strong>特に重要</strong>です。</p>

&lt;em&gt;: 強調テキスト

テキストを強調するためのタグです。通常は斜体で表示されます。

<p>これは<em>強調された</em>テキストです。</p>

&lt;b&gt;: 太字テキスト

純粋に視覚的な太字表現のためのタグです。意味的な重要性はありません。

<p>この部分を<b>太字</b>にします。</p>

&lt;i&gt;: 斜体テキスト

純粋に視覚的な斜体表現のためのタグです。

<p>この部分を<i>斜体</i>にします。</p>

&lt;u&gt;: 下線テキスト

テキストに下線を引くためのタグです。

<p>この部分に<u>下線</u>を引きます。</p>

テキスト装飾タグの使い分け

  • <strong>と<em>は意味的な強調を表す（セマンティック）
  • <b>、<i>、<u>は純粋な見た目の装飾のため
  • SEOやアクセシビリティの観点からは、可能な限り意味を持つタグ（<strong>や<em>）を使用するのが望ましい

リストを作るためのHTMLタグ

情報を整理して表示するためのリスト関連タグを見ていきましょう。

&lt;ul&gt;: 番号なしリスト（箇条書き）

順序を持たない項目のリストを作ります。

<ul>
    <li>リンゴ</li>
    <li>バナナ</li>
    <li>オレンジ</li>
</ul>

表示結果：

  • リンゴ
  • バナナ
  • オレンジ

&lt;ol&gt;: 番号付きリスト

順序を持つ項目のリストを作ります。

<ol>
    <li>最初のステップ</li>
    <li>次のステップ</li>
    <li>最後のステップ</li>
</ol>

表示結果：

  1. 最初のステップ
  2. 次のステップ
  3. 最後のステップ

&lt;li&gt;: リスト項目

リストの各項目を表すタグです。必ず<ul>または<ol>の中で使います。

&lt;dl&gt;, &lt;dt&gt;, &lt;dd&gt;: 定義リスト

用語とその説明をリスト化するためのタグです。

<dl>
    <dt>HTML</dt>
    <dd>Webページの構造を定義するマークアップ言語です。</dd>
    
    <dt>CSS</dt>
    <dd>Webページのスタイルを指定するためのスタイルシート言語です。</dd>
</dl>

表示結果： HTML : Webページの構造を定義するマークアップ言語です。

CSS : Webページのスタイルを指定するためのスタイルシート言語です。

リンクと画像を挿入するHTMLタグ

Webサイトに欠かせないリンクと画像の挿入方法を見ていきましょう。

&lt;a&gt;: アンカータグ（リンク）

他のページや同じページの特定部分へのリンクを作成します。

<a href="https://example.com">外部サイトへのリンク</a>
<a href="contact.html">問い合わせページへのリンク</a>
<a href="#section1">ページ内の特定セクションへのリンク</a>

リンクタグの主な属性

  • href: リンク先のURLや場所を指定
  • target="_blank": 新しいタブでリンクを開く
  • title: マウスオーバー時に表示されるツールチップテキスト

例えば、新しいタブで開くリンクは次のように書きます：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">新しいタブで開くリンク</a>

&lt;img&gt;: 画像タグ

Webページに画像を挿入するためのタグです。

<img src="image.jpg" alt="画像の説明文">

画像タグの主な属性

  • src: 画像ファイルのパスやURL
  • alt: 画像が表示できない場合や、スクリーンリーダーのための代替テキスト（SEOにも重要）
  • width, height: 画像のサイズ指定（ピクセル単位）

例えば、サイズを指定した画像は次のように書きます：

<img src="logo.png" alt="会社ロゴ" width="300" height="100">

テーブル（表）を作るHTMLタグ

データを表形式で表示するためのテーブル関連タグを見ていきましょう。

テーブルの基本構造

<table>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
    </tr>
    <tr>
        <td>データ1-1</td>
        <td>データ1-2</td>
    </tr>
    <tr>
        <td>データ2-1</td>
        <td>データ2-2</td>
    </tr>
</table>

テーブル関連の主なタグ

  • <table>: テーブル全体を囲むタグ
  • <tr>: テーブルの行（Table Row）
  • <th>: 見出しセル（Table Header）
  • <td>: データセル（Table Data）

より構造化されたテーブル

より意味的に構造化されたテーブルを作るには、以下のタグも使用します：

<table>
    <caption>四半期売上実績</caption>
    <thead>
        <tr>
            <th>部門</th>
            <th>第1四半期</th>
            <th>第2四半期</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>営業部</td>
            <td>1,200万円</td>
            <td>1,450万円</td>
        </tr>
        <tr>
            <td>企画部</td>
            <td>850万円</td>
            <td>930万円</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>2,050万円</td>
            <td>2,380万円</td>
        </tr>
    </tfoot>
</table>

テーブル関連の追加タグ

  • <caption>: テーブルのキャプション（タイトル）
  • <thead>: テーブルヘッダー部分をグループ化
  • <tbody>: テーブル本体部分をグループ化
  • <tfoot>: テーブルフッター部分をグループ化
  • <colgroup>と<col>: 列のグループ化と列への一括スタイル適用

フォームを作るHTMLタグ

ユーザーからの入力を受け付けるためのフォーム関連タグを見ていきましょう。

フォームの基本構造

<form action="/submit" method="post">
    <!-- フォーム要素がここに入る -->
    <input type="submit" value="送信">
</form>

&lt;input&gt;: 入力フィールド

様々なタイプの入力フィールドを作成できます。

<!-- テキスト入力 -->
<input type="text" name="username" placeholder="ユーザー名">

<!-- パスワード入力 -->
<input type="password" name="password" placeholder="パスワード">

<!-- チェックボックス -->
<input type="checkbox" name="agree" id="agree">
<label for="agree">利用規約に同意する</label>

<!-- ラジオボタン -->
<input type="radio" name="gender" id="male" value="male">
<label for="male">男性</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">女性</label>

<!-- 送信ボタン -->
<input type="submit" value="送信">

その他の主なフォーム要素

<!-- テキストエリア（複数行テキスト） -->
<textarea name="message" rows="4" cols="50" placeholder="メッセージを入力してください"></textarea>

<!-- ドロップダウンリスト -->
<select name="country">
    <option value="">国を選択してください</option>
    <option value="jp">日本</option>
    <option value="us">アメリカ</option>
    <option value="uk">イギリス</option>
</select>

<!-- ファイルアップロード -->
<input type="file" name="document">

<!-- 日付選択 -->
<input type="date" name="birthdate">

<!-- 数値入力 -->
<input type="number" name="quantity" min="1" max="10">

&lt;label&gt;: フォーム要素のラベル

アクセシビリティのために重要なラベルタグです。

<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">

for属性はラベルが関連付けられる入力要素のID値と一致させます。これにより、ラベルをクリックしても関連する入力フィールドが選択され、使いやすさが向上します。

セマンティックHTML：意味を持つHTMLタグ

HTML5で追加された、コンテンツに意味を持たせるセマンティックタグを見ていきましょう。SEOやアクセシビリティの観点で非常に重要です。

主なセマンティックタグ

  • <header>: ページやセクションのヘッダー部分
  • <nav>: ナビゲーションリンクを含む部分
  • <main>: ページのメインコンテンツ部分
  • <article>: 独立して配信可能なコンテンツ（ブログ記事など）
  • <section>: 関連するコンテンツのセクション
  • <aside>: メインコンテンツに間接的に関連するコンテンツ（サイドバーなど）
  • <footer>: ページやセクションのフッター部分
  • <figure>と<figcaption>: 図表とそのキャプション

セマンティックタグを使用した例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>セマンティックHTMLの例</title>
</head>
<body>
    <header>
        <h1>ブログサイト</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>記事タイトル</h2>
                <p>投稿日: 2023年6月15日</p>
            </header>

            <section>
                <h3>はじめに</h3>
                <p>この記事では...</p>
            </section>

            <section>
                <h3>本文</h3>
                <p>詳細な内容を説明します...</p>
                
                <figure>
                    <img src="example.jpg" alt="説明画像">
                    <figcaption>図1: 説明文</figcaption>
                </figure>
            </section>

            <footer>
                <p>著者: 山田太郎</p>
            </footer>
        </article>

        <aside>
            <h3>関連記事</h3>
            <ul>
                <li><a href="#">関連記事1</a></li>
                <li><a href="#">関連記事2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2023 ブログサイト. All rights reserved.</p>
    </footer>
</body>
</html>

セマンティックタグを適切に使用すると、以下のメリットがあります：

  1. 検索エンジンがコンテンツの構造を理解しやすくなり、SEO効果が向上
  2. スクリーンリーダーなどの支援技術でページが適切に解釈され、アクセシビリティが向上
  3. コードの可読性と保守性が向上
  4. レスポンシブデザインの実装が容易になる

メタ情報タグ：SEOに重要なHTMLタグ

Webページの背後にある情報を定義するメタタグは、SEOに非常に重要です。

主なメタタグ

<!-- 文字エンコーディングの指定 -->
<meta charset="UTF-8">

<!-- レスポンシブデザイン対応のためのビューポート設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ページの説明 -->
<meta name="description" content="HTMLの基本タグについて学べる初心者向けガイド">

<!-- 検索エンジン向けのキーワード（現在はあまり重視されていない） -->
<meta name="keywords" content="HTML, タグ, 初心者, ウェブ開発">

<!-- 検索ロボットへの指示 -->
<meta name="robots" content="index, follow">

<!-- SNSシェア時のプレビュー情報（OGPタグ） -->
<meta property="og:title" content="HTMLの基本タグまとめ">
<meta property="og:description" content="初心者でも分かるHTMLタグの使い方ガイド">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/html-guide">
<meta property="og:type" content="article">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@サイト名">

これらのメタタグは<head>セクション内に配置します。SEO対策として特に重要なのは、適切なdescriptionとviewportの設定、そしてSNSシェア用のOGPタグです。

HTML特殊文字と実体参照

HTMLでは、一部の文字は特別な意味を持つため、直接入力できません。そのような文字を表示したい場合は、実体参照（エンティティ参照）を使用します。

よく使われる実体参照

  • &lt; → < （小なり記号）
  • &gt; → > （大なり記号）
  • &amp; → & （アンパサンド）
  • &quot; → " （ダブルクォーテーション）
  • &apos; → ' （シングルクォーテーション）
  • &nbsp; → 改行されない半角スペース
  • &copy; → © （著作権記号）
  • &reg; → ® （登録商標記号）
  • &trade; → ™ （商標記号）

例えば、HTMLコードを表示したい場合：

<p>HTMLの段落タグは &lt;p&gt; です。</p>

表示結果： HTMLの段落タグは <p> です。

コメントの書き方

HTMLにコメントを追加する方法は以下の通りです：

<!-- これはHTMLのコメントです。ブラウザには表示されません。 -->

コメントは開発者向けのメモやコードの説明のために使用され、ブラウザでは表示されません。コードの管理や複数人での開発時に便利です。

まとめ：覚えておきたいHTMLタグの優先順位

HTMLタグは数多くありますが、すべてを一度に覚える必要はありません。以下に優先順位をつけて覚えていくことをおすすめします。

最優先で覚えるべきタグ（基本中の基本）

  • 文書構造: <!DOCTYPE>, <html>, <head>, <body>, <title>
  • 見出し・段落: <h1>〜<h6>, <p>
  • リンク・画像: <a>, <img>
  • リスト: <ul>, <ol>, <li>
  • 区分け: <div>, <span>

次に覚えるべきタグ（よく使うもの）

  • テキスト装飾: <strong>, <em>, <b>, <i>
  • テーブル: <table>, <tr>, <th>, <td>
  • フォーム: <form>, <input>, <textarea>, <select>, <label>
  • セマンティック: <header>, <nav>, <main>, <article>, <section>, <footer>
  • メタ情報: <meta>

応用的なタグ（必要に応じて）

  • 定義リスト: <dl>, <dt>, <dd>
  • 引用: <blockquote>, <q>, <cite>
  • コード: <code>, <pre>
  • メディア: <audio>, <video>, <iframe>
  • インタラクティブ: <button>, <details>, <summary>

HTMLタグマスターへの道：練習のコツ

HTMLタグを効果的に覚えるためのコツをいくつか紹介します。

  1. 実際に手を動かす: 読むだけでなく、実際にコードを書いて動作を確認しましょう。
  2. 小さなプロジェクトから始める: 自己紹介ページや趣味のブログなど、小さなプロジェクトから始めましょう。
  3. 既存のWebサイトを分析する: 気になるWebサイトの構造を検証ツールで確認し、学びましょう。
  4. バリデーションツールを使う: W3C Markup Validation ServiceなどでHTMLの正しさを確認しましょう。
  5. 段階的に学ぶ: 基本タグをマスターしてから、より複雑なタグや属性に進みましょう。

おわりに

HTMLの基本タグについて解説してきました。最初は覚えることが多く感じるかもしれませんが、実際に頻繁に使うタグはそれほど多くありません。この記事で紹介したタグを中心に、実際にコードを書きながら少しずつ覚えていくことをおすすめします。

Webサイト制作の世界は奥深く、HTMLだけでなくCSS、JavaScriptなど学べることがたくさんあります。しかし、どんなWebサイトも基本はHTMLです。この基礎をしっかり固めることで、より高度なWebサイト制作にも自信を持って取り組めるようになるでしょう。

まずは小さなWebページを作ってみることから始めてみてください。実践を通じて、HTMLタグの使い方がどんどん身についていくはずです。Webサイト制作の楽しさを発見してください！