HTML（Hyper Text Markup Language）とは？基本構造・主要なタグなど

デザイン

はじめに

HTMLは、Webページの構造を定義するマークアップ言語であり、Webサイトを作成する上で不可欠な要素です。HTMLを理解することは、Webデザイナーやフロントエンド開発者にとって必須のスキルと言えるでしょう。HTMLの知識は、Webサイトの制作やコンテンツの最適化に役立つだけでなく、Webの仕組みを理解する上でも重要な役割を果たします。本記事では、HTMLの基本概念から、タグや属性の使い方、文書構造の作成方法まで、HTMLについて網羅的に解説します。

HTMLとは

HTMLの定義

HTML（Hyper Text Markup Language）は、Webページの構造と内容を定義するためのマークアップ言語です。マークアップ言語とは、文書の構造や意味を記述するための言語で、タグと呼ばれる特殊な記号を使用して文書を構成します。HTMLでは、タグを使ってテキスト、画像、動画などの要素を配置し、それらの関係性を示すことでWebページを構築します。HTMLは、World Wide Web（WWW）の基盤となる言語であり、ほとんどすべてのWebサイトで使用されています。

HTMLの役割

HTMLの主な役割は、Webページの構造と意味を定義することです。HTMLを使用することで、見出しや段落、リスト、表などの文書構造を作成し、コンテンツの階層を明確にすることができます。これにより、検索エンジンはWebページの内容を理解しやすくなり、適切なインデックス化が可能になります。また、HTMLはアクセシビリティの面でも重要な役割を果たします。適切なHTMLタグを使用することで、スクリーンリーダーなどの支援技術を使用するユーザーにも、Webページの内容を正しく伝えることができます。HTMLは、Webの世界で情報を構造化し、アクセシブルにするための基盤となる言語なのです。

HTMLの基本構造

タグ

<html>タグは、HTMLドキュメントのルート要素であり、Webページ全体を囲むタグです。<html>タグは、<head>タグと<body>タグの2つの主要な要素を含みます。<html>タグには、言語属性（lang）を指定することができ、ドキュメントの言語を示すことができます。以下は、<html>タグの基本的な構造です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- ヘッド要素の内容 -->
  </head>
  <body>
    <!-- ボディ要素の内容 -->
  </body>
</html>

<head>タグ

<head>タグは、HTMLドキュメントのメタデータ（ページに関する情報）を含む要素です。<head>タグ内には、以下のような要素が含まれます。

  • <title>タグ：Webページのタイトルを定義します。
  • <meta>タグ：文字コードや説明文、キーワードなどのメタ情報を指定します。
  • <link>タグ：外部のCSSファイルや、ファビコンなどのリソースとの関連を定義します。
  • <script>タグ：JavaScriptファイルの参照や、インラインのJavaScriptコードを記述します。

以下は、<head>タグの例です。

<head>
  <meta charset="UTF-8">
  <title>HTMLの基本構造</title>
  <meta name="description" content="HTMLの基本構造について解説するページです。">
  <link rel="stylesheet" href="style.css">
</head>

<body>タグ

<body>タグは、Webページの本文コンテンツを含む要素です。<body>タグ内には、見出し、段落、リスト、画像、表など、ページ上に表示されるすべての要素が含まれます。以下は、<body>タグの例です。

<body>
  <h1>HTMLの基本構造</h1>
  <p>HTMLドキュメントは、<code>&lt;html&gt;</code>、<code>&lt;head&gt;</code>、<code>&lt;body&gt;</code>の3つの主要な要素で構成されます。</p>
  <ul>
    <li><code>&lt;html&gt;</code>：HTMLドキュメント全体を囲むルート要素</li>
    <li><code>&lt;head&gt;</code>：ページのメタデータを含む要素</li>
    <li><code>&lt;body&gt;</code>：ページの本文コンテンツを含む要素</li>
  </ul>
</body>

HTMLの主要なタグ

見出しタグ（h1〜h6）

見出しタグは、Webページ内の見出しを定義するために使用されます。<h1>から<h6>までの6つのレベルがあり、数字が小さいほど重要度が高い見出しを表します。見出しタグを適切に使用することで、ページの構造を明確にし、読みやすさを向上させることができます。以下は、見出しタグの例です。

<h1>HTMLの主要なタグ</h1>
<h2>見出しタグ</h2>
<p>見出しタグは、Webページ内の見出しを定義するために使用されます。</p>

段落タグ（p）

<p>タグは、文章の段落を定義するために使用されます。<p>タグで囲まれたテキストは、前後に改行が挿入され、段落として表示されます。以下は、段落タグの例です。

<p>HTMLは、Webページの構造を定義するマークアップ言語です。タグを使って文書の構造や意味を記述することで、Webブラウザに正しく表示させることができます。</p>

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

リストタグは、順序なしリスト（<ul>）と順序付きリスト（<ol>）を定義するために使用されます。リストの各項目は、<li>タグを使用して記述します。以下は、リストタグの例です。

<ul>
  <li>順序なしリストの項目1</li>
  <li>順序なしリストの項目2</li>
  <li>順序なしリストの項目3</li>
</ul>

<ol>
  <li>順序付きリストの項目1</li>
  <li>順序付きリストの項目2</li>
  <li>順序付きリストの項目3</li>
</ol>

リンクタグ（a）

<a>タグは、ハイパーリンクを定義するために使用されます。href属性にリンク先のURLを指定することで、クリック可能なリンクを作成できます。以下は、リンクタグの例です。

<a href="https://www.example.com">リンクテキスト</a>

画像タグ（img）

<img>タグは、Webページに画像を挿入するために使用されます。src属性に画像のURLを指定し、alt属性に画像の代替テキストを記述します。以下は、画像タグの例です。

<img src="image.jpg" alt="代替テキスト">

テーブルタグ（table, tr, th, td）

テーブルタグは、表形式のデータを表示するために使用されます。<table>タグでテーブル全体を囲み、<tr>タグで行を定義します。<th>タグはテーブルのヘッダーセルを、<td>タグはデータセルを表します。以下は、テーブルタグの例です。

<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>

フォームタグ（form, input, select, textarea）

フォームタグは、ユーザーからの入力を受け付けるためのタグです。<form>タグでフォーム全体を囲み、<input>タグでテキスト入力欄やチェックボックス、ラジオボタンなどの入力要素を定義します。<select>タグはドロップダウンリストを、<textarea>タグは複数行のテキスト入力欄を表します。以下は、フォームタグの例です。

<form>
  <label for="name">名前：</label>
  <input type="text" id="name" name="name"><br>

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

  <label for="message">メッセージ：</label>
  <textarea id="message" name="message"></textarea><br>

  <input type="submit" value="送信">
</form>

タグの属性

id属性

id属性は、HTML要素に固有の識別子を割り当てるために使用されます。id属性の値は、ドキュメント内で一意でなければなりません。id属性は、CSSでのスタイル定義やJavaScriptでの要素の操作に使用されます。以下は、id属性の例です。

<div id="header">
  <h1>タグの属性</h1>
</div>

class属性

class属性は、HTML要素をグループ化するために使用されます。複数の要素に同じclass属性を指定することで、共通のスタイルを適用したり、JavaScriptで一括して操作したりすることができます。以下は、class属性の例です。

<p class="highlight">このパラグラフにはハイライトクラスが適用されています。</p>
<p class="highlight">このパラグラフにも同じクラスが適用されています。</p>

style属性

style属性は、HTML要素にインラインでCSSスタイルを指定するために使用されます。ただし、style属性を多用すると、コードの可読性が低下し、メンテナンス性が悪くなるため、できる限り外部CSSファイルやスタイル要素を使用することが推奨されます。以下は、style属性の例です。

<p style="color: red; font-size: 18px;">このパラグラフにはインラインスタイルが適用されています。</p>

src属性

src属性は、外部リソース（画像、動画、音声など）のURLを指定するために使用されます。<img>タグや<video>タグ、<audio>タグなどで使用されます。以下は、src属性の例です。

<img src="image.jpg" alt="代替テキスト">
<video src="video.mp4" controls></video>

alt属性

alt属性は、画像の代替テキストを指定するために使用されます。画像が表示されない場合や、スクリーンリーダーを使用しているユーザーのために、画像の内容を説明するテキストを提供します。以下は、alt属性の例です。

<img src="logo.png" alt="企業ロゴ">

href属性

href属性は、<a>タグでリンク先のURLを指定するために使用されます。以下は、href属性の例です。

<a href="https://www.example.com">リンクテキスト</a>

セマンティックHTML

セマンティックHTMLの意味

セマンティックHTMLとは、要素の意味を考慮してマークアップを行う手法です。適切なHTMLタグを使用することで、文書の構造や内容の意味を明確に伝えることができます。セマンティックHTMLは、検索エンジン最適化（SEO）やアクセシビリティの向上に役立ちます。

セマンティックタグの種類

HTML5では、セマンティックな要素が多数導入されました。以下は、主要なセマンティックタグの一覧です。

<header>タグ

<header>タグは、ページやセクションのヘッダー部分を表します。通常、ロゴ、サイト名、ナビゲーションなどが含まれます。

<header>
  <h1>サイト名</h1>
  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">製品</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

<nav>タグ

<nav>タグは、ナビゲーションリンクを表します。主要なページへのリンクを含むことが一般的です。

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">製品</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

<main>タグ

<main>タグは、ページの主要なコンテンツを表します。一般的に、ページ内で一度だけ使用されます。

<main>
  <h1>ページのタイトル</h1>
  <p>ページの主要なコンテンツ</p>
</main>

<article>タグ

<article>タグは、独立した記事やブログ投稿などを表します。

<article>
  <h2>記事のタイトル</h2>
  <p>記事の本文</p>
</article>

<section>タグ

<section>タグは、関連するコンテンツをグループ化するために使用されます。

<section>
  <h2>セクションのタイトル</h2>
  <p>セクションの内容</p>
</section>

<aside>タグ

<aside>タグは、メインコンテンツとは関連性が低い補足情報を表します。サイドバーなどに使用されます。

<aside>
  <h3>関連リンク</h3>
  <ul>
    <li><a href="#">リンク1</a></li>
    <li><a href="#">リンク2</a></li>
  </ul>
</aside>

<footer>タグ

<footer>タグは、ページやセクションのフッター部分を表します。著作権情報や連絡先などが含まれることが一般的です。

<footer>
  <p>&copy; 2023 サイト名. All rights reserved.</p>
</footer>

セマンティックHTMLの利点

セマンティックHTMLを使用することで、以下のような利点があります。

  1. 検索エンジン最適化（SEO）：検索エンジンは、セマンティックタグを手がかりにコンテンツの意味を理解しやすくなります。適切なタグを使用することで、検索結果での表示順位が向上する可能性があります。
  2. アクセシビリティの向上：スクリーンリーダーなどの支援技術は、セマンティックタグを使用してページの構造を理解します。適切なタグを使用することで、すべてのユーザーにとってアクセシブルなWebサイトを作成できます。
  3. コードの可読性と保守性の向上：セマンティックなマークアップを行うことで、コードの意図が明確になり、他の開発者にとって理解しやすくなります。これにより、コードの可読性と保守性が向上します。

HTMLとSEO

HTMLとSEOの関係

HTMLは、検索エンジン最適化（SEO）に大きな影響を与えます。適切なHTMLマークアップを使用することで、検索エンジンがWebページの内容を正しく理解し、適切にインデックス化することができます。以下は、HTMLとSEOの関係における重要な点です。

  1. セマンティックなマークアップ：前述のように、セマンティックHTMLタグを使用することで、検索エンジンはページの構造や内容の意味を理解しやすくなります。
  2. タイトルタグとメタディスクリプション：<title>タグと<meta name="description">タグは、検索結果ページ（SERP）に表示されるため、魅力的で関連性の高い内容を記述することが重要です。
  3. 見出しタグの階層構造：見出しタグ（<h1>〜<h6>）を適切に使用し、論理的な階層構造を作ることで、検索エンジンはページの内容を把握しやすくなります。
  4. 画像の最適化：<img>タグのalt属性に適切な代替テキストを指定することで、画像の内容を検索エンジンに伝えることができます。

SEOに重要なHTMLタグ

以下は、SEOにとって重要なHTMLタグの一覧です。

  • <title>：ページのタイトルを定義し、検索結果ページに表示されます。
  • <meta name="description">：ページの説明文を指定し、検索結果ページに表示されることがあります。
  • <h1>〜<h6>：ページ内の見出しを定義し、コンテンツの階層構造を示します。
  • <img>のalt属性：画像の代替テキストを指定し、画像の内容を検索エンジンに伝えます。
  • <a>：内部リンクや外部リンクを作成し、サイト内の関連ページへの導線を提供します。

SEOに適した文書構造

SEOに適したHTML文書の構造は、以下のような特徴を持ちます。

  1. 適切な見出しの使用：<h1>タグをページごとに1つ使用し、<h2>〜<h6>タグを論理的な階層構造で使用します。
  2. コンテンツの明確な区切り：<section>や<article>タグを使用して、関連するコンテンツをグループ化します。
  3. ナビゲーションの最適化：<nav>タグを使用して、主要なページへのリンクを提供します。
  4. 画像の適切な使用：画像に適切なalt属性を指定し、ファイルサイズを最適化して読み込み速度を向上させます。
  5. 内部リンクの活用：関連するページ同士をリンクで結ぶことで、サイト内の導線を改善し、検索エンジンにコンテンツの関連性を伝えます。

HTMLのバリデーション

HTMLバリデーションの重要性

HTMLバリデーションとは、HTMLコードが正しく記述されているかどうかを検証するプロセスです。バリデーションを行うことで、以下のような利点があります。

  1. ブラウザ間の互換性の向上：バリデーションにより、コードの誤りを発見し修正することで、様々なブラウザで一貫した表示を実現できます。
  2. 検索エンジンの理解度の向上：正しいHTMLコードは、検索エンジンがページの内容を正確に解釈するのに役立ちます。
  3. アクセシビリティの向上：適切なHTMLコードを使用することで、支援技術を使用するユーザーにもコンテンツを提供しやすくなります。

HTMLバリデーションツール

以下は、HTMLのバリデーションに役立つツールの一覧です。

  1. W3C Markup Validation Service：W3Cが提供する公式のHTMLバリデーションツールです。ページのURLまたはHTMLコードを入力することで、コードの検証を行えます。
  2. HTMLHint：HTMLコードの品質をチェックするためのツールです。コードエディタと連携することで、リアルタイムにコードの問題を発見できます。
  3. Nu HTML Checker：W3Cが提供するもう一つのHTMLバリデーションツールです。ページのURLまたはHTMLコードを入力して検証できます。
  4. Validity：Chrome拡張機能の一つで、開発者ツールから簡単にページのHTMLバリデーションを行えます。

これらのツールを活用して、定期的にHTMLコードのバリデーションを行うことが推奨されます。

まとめ

HTMLは、Webページの構造を定義するマークアップ言語であり、Webサイト制作に欠かせない要素です。タグや属性の使い方、セマンティックHTMLの概念、SEOとの関連など、HTMLに関する幅広い知識を身につけることで、より良いWebサイトを作成することができます。