HTML入門｜基本タグとセマンティックHTML

HTMLはWebページの骨組みをつくる言語です。見た目を整えるCSSや、動きをつけるJavaScriptも、まずHTMLという土台があってはじめて成り立ちます。

この記事では、フロントエンドエンジニアの学習ロードマップの2番目にあたるHTMLについて、基本構造からセマンティックHTML、フォームの検証、アクセシビリティ、SEOとの関係までをまとめます。

HTMLの基礎

HTML（ハイパーテキスト・マークアップ・ランゲージ）はウェブページの根幹を成す言語で、オンラインで表示されるコンテンツの構造を規定します。HTML構造のスタイル設定にはCSSを、インタラクティブ性を持たせるにはJavaScriptを使用します。

HTML文書の基本構造は以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ブログ記事タイトル</title>
</head>
<body>
  <h1>見出しタイトル</h1>
  <p>ここに本文を書きます。</p>
</body>
</html>

主なHTMLタグ

セマンティックHTML

セマンティックHTMLとは、タグの意味を正しく使って構造を表すHTMLのことです。これにより、検索エンジンやスクリーンリーダーが内容を理解しやすくなります。

意味を持たない要素として <div>（ボックス要素）と <span>（インライン要素）があります。これらは見た目の調整用で、構造の意味は伝えません。

フォームとバリデーション

フォームからサーバーへデータを送信する前に、すべての必須項目が正しく入力されているかを確認することが重要です。これはクライアントサイドフォーム検証と呼ばれ、データの品質とユーザー体験の向上につながります。

HTML5では、JavaScriptを使わなくても属性を書くだけで簡単な検証ができます。

<form action="send.php" method="post">
  <!-- 名前：必須、文字数制限 -->
  <label for="name">名前（3〜20文字）：</label>
  <input type="text" id="name" name="name" required minlength="3" maxlength="20">

  <!-- メールアドレス：必須、形式チェック -->
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email" required>

  <!-- パスワード：必須、正規表現（英数字8文字以上） -->
  <label for="password">パスワード（英数字8文字以上）：</label>
  <input type="password" id="password" name="password" required pattern="[A-Za-z0-9]{8,}">

  <!-- 年齢：数値、範囲指定 -->
  <label for="age">年齢（18〜99歳）：</label>
  <input type="number" id="age" name="age" required min="18" max="99">

  <!-- 身長：小数対応、ステップ指定 -->
  <label for="height">身長（cm、0.1刻み）：</label>
  <input type="number" id="height" name="height" required min="100" max="250" step="0.1">

  <!-- 郵便番号：正規表現（日本の郵便番号形式） -->
  <label for="postal">郵便番号（例: 123-4567）：</label>
  <input type="text" id="postal" name="postal" required pattern="\d{3}-\d{4}">

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

検証に使う属性

アクセシビリティ

ウェブサイトのアクセシビリティとは、障がいのある方を含め、誰もがサイトを利用できるようにすることです。画像の代わりになるテキスト、キーボード操作、適切な色のコントラスト、キャプションなどが含まれます。

アクセシビリティのルールに従うことは、障がいのある方だけでなくすべてのユーザーにとって有益であり、法令遵守やより多くの人へのリーチにも役立ちます。

見出しの階層を飛ばさないことは、読み上げソフトの利用者がページの構造を把握する手がかりになります。見た目の大きさで見出しレベルを選ばず、文書の構造として正しい順番になっているかで選んでください。

SEOとHTML

SEO（検索エンジン最適化）は、ウェブサイトを検索結果の上位に表示させるのに役立ちます。適切なキーワードの使用、質の高いコンテンツ、サイトの高速化とモバイル対応、信頼できるサイトからのリンク獲得などが挙げられます。サイトマップやHTTPS化といった技術的な要素も重要です。

HTMLの側で特に効いてくるのは次の要素です。

お役立ちツール

• Search Console
• Google Trends
• Google Analytics
• Googleキーワードプランナー
• ラッコキーワード

最新のHTML仕様

2026年現在、HTMLの仕様は HTML Living Standard です。

https://html.spec.whatwg.org

HTML Living Standardは、HTMLの仕様を常に最新の状態で維持し続けるための標準です。W3C（World Wide Web Consortium）ではなく、Apple・Mozilla・Operaの開発者によって設立されたWHATWGという組織が策定しています。

これまでのHTMLは、HTML4、XHTML 1.0、HTML5（2014年に勧告）のようにバージョンごとに固定された仕様でした。Living Standardでは「HTML5.1」「HTML5.2」のようにバージョンを区切らず、常に更新され続ける1つの仕様として扱われます。

「HTML5を勉強する」という言い方を見かけることがありますが、現在はバージョンという区切り自体が存在しない、と理解しておくとよいと思います。

よくある質問

最後に

HTMLは一度覚えれば終わりというものではありません。毎年のように仕様がアップデートされ、新しいタグや属性が追加されたり、古い書き方が非推奨になったりします。特にHTML5以降は、レスポンシブ対応やアクセシビリティ向上など、時代に合わせた改良が続いています。

つまり、今の知識はゴールではなくスタート地点です。最新の仕様やベストプラクティスを学び続けることで、ユーザーにも検索エンジンにも評価されるコードが書けるようになります。学びを止めず、HTMLをあなたの武器として進化させていきましょう。

次はCSSへ進んで、この骨組みに見た目をつけていきましょう。

あわせて読みたい

• CSS入門｜ロードマップに沿ったCSS解説
• インターネット入門｜仕組みを図解で解説
• フロントエンドエンジニアの学習ロードマップ