HTML（ハイパーテキスト・マークアップ・ランゲージ）とは？Webページの骨組みを作る言語

HTMLとは

HTML（HyperText Markup Language）は、1989年にティム・バーナーズ=リーによって開発されたWebページを作成するための言語です。「プログラミング言語」ではなく「マークアップ言語」に分類され、文書の構造や意味を定義します。

HTMLの3つの要素

1. HyperText（ハイパーテキスト）

通常のテキストを超えた（Hyper）テキスト、つまり他のページへのリンクを含むテキストを意味します。これによりWeb上の情報が網の目のようにつながります。

2. Markup（マークアップ）

文書に「印」をつけること。HTMLタグを使って「ここは見出し」「ここは段落」といった意味づけを行います。

3. Language（言語）

一定のルール（文法）に従って記述する体系的な言語です。

💡 HTMLの役割
HTMLは「何を表示するか」「それぞれの要素がどんな意味を持つか」を定義します。「どのように表示するか（色、サイズ、配置など）」はCSSの役割です。この役割分担により、内容とデザインを分離して管理できます。

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
<body>
    <h1>大見出し</h1>
    <p>これは段落です。</p>
</body>
</html>

各部分の意味：

<!DOCTYPE html> - HTML5文書であることを宣言
<html> - HTML文書全体を囲む最上位要素
<head> - ページの情報（メタデータ）を記述
<body> - ブラウザに表示される本文部分

HTMLタグの基本

タグの書き方

HTMLタグは、< と > で囲んだ記号で、通常は開始タグと終了タグのペアで使用します。

<開始タグ>内容</終了タグ>

例：

これは段落です。

表示結果：
これは段落です。

空要素タグ

一部のタグは内容を持たず、終了タグが不要です。

<br>  改行
<img src="image.jpg" alt="説明">  画像
<hr>  水平線
<meta charset="UTF-8">  メタ情報

属性

タグに追加情報を付加するのが属性です。開始タグの中に記述します。

<a href="https://example.com" target="_blank">リンク</a>

href - リンク先URL（属性名）
"https://example.com" - 属性値
target="_blank" - 新しいタブで開く指定

主要なHTMLタグ

見出しタグ

<h1>最も重要な見出し</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
<h5>より小さい見出し</h5>
<h6>最も小さい見出し</h6>

h1が最も重要で、h6が最も重要度が低い見出しです。1ページにh1は1つだけが推奨されます。

段落・テキスト関連

<p>段落</p>
<br>  改行
<strong>重要なテキスト（太字）</strong>
<em>強調テキスト（斜体）</em>
<span>インライン要素</span>

リンク

<a href="URL">リンクテキスト</a>
<a href="mailto:email@example.com">メールアドレス</a>
<a href="#section">ページ内リンク</a>

リスト

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

<!-- 順序付きリスト -->
<ol>
    <li>第一項目</li>
    <li>第二項目</li>
</ol>

画像

<img src="image.jpg" alt="画像の説明" width="300" height="200">

src属性に画像のパス、alt属性に代替テキストを指定します（SEOとアクセシビリティに重要）。

テーブル（表）

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

フォーム

<form action="submit.php" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">メール:</label>
    <input type="email" id="email" name="email">
    
    <textarea name="message"></textarea>
    
    <button type="submit">送信</button>
</form>

セマンティック要素（HTML5）

<header>ヘッダー</header>
<nav>ナビゲーション</nav>
<main>メインコンテンツ</main>
<article>記事</article>
<section>セクション</section>
<aside>サイドバー</aside>
<footer>フッター</footer>

これらのタグは、ページの構造をより明確に示し、SEOとアクセシビリティを向上させます。

HTML5の特徴

HTML5は、2014年に勧告された現在の標準規格です。従来のHTML4から大幅に進化しました。

HTML5の主な新機能

1. セマンティックタグ

header、nav、article、sectionなど、意味的に明確なタグが追加されました。

2. マルチメディア対応

<!-- 動画 -->
<video controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<!-- 音声 -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

3. Canvasとグラフィックス

<canvas id="myCanvas" width="200" height="100"></canvas>

JavaScriptと組み合わせて、グラフや図形を描画できます。

4. 新しいフォーム要素

<input type="email">  メールアドレス
<input type="date">  日付選択
<input type="range">  スライダー
<input type="color">  色選択

5. ローカルストレージ

ブラウザにデータを保存する機能（LocalStorage、SessionStorage）が追加されました。

6. 廃止されたタグ

以下のタグはHTML5で廃止されました：

- 文字の装飾（CSSで代替）
<center> - 中央揃え（CSSで代替）
<frame>, <frameset> - フレーム
<marquee> - スクロールテキスト

⚠️ 注意
廃止されたタグを使用すると、ブラウザによっては正しく表示されない場合があります。常に最新のHTML5タグとCSSを使用しましょう。

WordPressとHTML

WordPressでHTMLはどう使われるか

WordPressは、管理画面で入力した内容を自動的にHTMLに変換してブラウザに表示します。

💡 WordPressの仕組み
1. 投稿画面で文章を書く
2. WordPressがPHPでHTMLを生成
3. テーマのテンプレートと組み合わせる
4. ブラウザにHTMLとして送信
5. ブラウザがHTMLを解釈して表示

WordPressでHTMLを直接書く方法

1. カスタムHTMLブロック

ブロックエディタ（Gutenberg）で「カスタムHTML」ブロックを追加すると、HTMLを直接記述できます。

2. クラシックエディタ

「テキスト」タブに切り替えると、HTMLコードを直接編集できます。

3. テーマファイルの編集

外観 → テーマファイルエディターから、テーマのHTMLテンプレートを直接編集できます（上級者向け）。

⚠️ テーマファイル編集の注意
テーマファイルを直接編集すると、間違えた場合にサイトが表示されなくなる可能性があります。必ず子テーマを使用し、バックアップを取ってから作業してください。

WordPressで自動生成されるHTML

WordPressは、投稿内容を適切なHTMLタグで囲みます。

入力：

これは太字の文章です。

生成されるHTML：

これは太字の文章です。

HTMLの学習方法

1. 基本タグから始める

まずは以下の基本タグを使いこなせるようになりましょう：

h1〜h6（見出し）
p（段落）
a（リンク）
img（画像）
ul, ol, li（リスト）
strong, em（強調）

2. ブラウザの開発者ツールで学ぶ

F12キーで開発者ツールを開き、実際のWebページのHTMLコードを見てみましょう。「要素」タブでHTMLの構造を確認できます。

3. 実際に書いてみる

テキストエディタ（メモ帳、VS Codeなど）でHTMLファイルを作成し、ブラウザで開いて確認します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私の初めてのHTML</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これは私が作った最初のHTMLページです。</p>
</body>
</html>

このコードを「index.html」として保存し、ブラウザで開くと表示されます。

4. オンライン学習サービスを活用

MDN Web Docs - Mozilla提供の包括的なドキュメント
Progate - インタラクティブな日本語学習サービス
ドットインストール - 動画で学べる日本語サービス
W3Schools - 豊富な例とリファレンス（英語）

5. バリデーターでコードをチェック

W3CのHTML Validatorを使用して、HTMLコードが正しいかチェックできます。

よくある質問（FAQ）

Q1. HTMLはプログラミング言語ですか？

いいえ、HTMLは「マークアップ言語」です。プログラミング言語のように計算や条件分岐はできません。文書の構造を定義するための言語です。動的な処理が必要な場合は、JavaScriptやPHPなどのプログラミング言語と組み合わせます。

Q2. HTMLを学ぶのにどのくらい時間がかかりますか？

基本的なタグと構造は1〜2週間で習得できます。ただし、セマンティックHTML、アクセシビリティ、SEOを意識した適切なマークアップを身につけるには、実践を通じて数ヶ月かかります。

Q3. HTMLだけでWebサイトは作れますか？

はい、HTMLだけでも簡単なWebサイトは作れます。ただし、デザイン性の高いサイトを作るにはCSS、動的な機能を実装するにはJavaScriptが必要です。現代のWebサイトは通常、HTML、CSS、JavaScriptを組み合わせて作られます。

Q4. WordPressを使うならHTMLは不要ですか？

基本的な使い方ならHTMLの知識は不要です。しかし、カスタマイズや細かい調整をしたい場合、HTMLの基礎知識があると非常に便利です。特にトラブルシューティングや、思い通りのレイアウトを実現する際に役立ちます。

Q5. HTML4とHTML5の主な違いは？

HTML5では、セマンティックタグ（header、nav、articleなど）の追加、動画・音声の埋め込みが簡単に、Canvas要素によるグラフィックス描画、新しいフォーム要素、一部のタグの廃止などが主な変更点です。現在、すべてのモダンブラウザがHTML5をサポートしているため、HTML5を使用すべきです。

Q6. セマンティックHTMLとは何ですか？

セマンティック（意味的な）HTMLとは、タグの見た目ではなく「意味」を重視したHTML記述のことです。例えば、divやspanだけで構成するのではなく、header、nav、article、asideなど、それぞれの役割を明確に示すタグを使用します。これにより、SEO、アクセシビリティ、コードの保守性が向上します。

まとめ

HTMLは、すべてのWebページの基礎となる言語です。見出し、段落、リンク、画像などの要素をタグで囲むことで、ブラウザに表示内容を指示します。

WordPressを使う場合、通常はHTMLを直接書く必要はありませんが、基礎知識があると以下のメリットがあります：

✅ HTMLを学ぶメリット

細かいカスタマイズができる
エラーの原因を理解しやすくなる
テーマのカスタマイズが可能になる
SEOを意識した構造を作れる
他のWeb技術（CSS、JavaScript）の理解が深まる

HTMLの基本タグと構造を理解することで、WordPressをより効果的に活用し、思い通りのWebサイトを作成できるようになります。

HTML（ハイパーテキスト・マークアップ・ランゲージ）