---
title: "セマンティックHTMLとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "セマンティックHTMLを初めて意識するAI生成サイト制作者やデザイナーに向け、divとセマンティックタグの違い・共有前の確認方法・よくある誤解を実例で解説した記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-semantic-html-html-share"
markdown: "https://giga-site.com/articles/what-is-semantic-html-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# セマンティックHTMLとは？HTML共有・AI生成サイトでの意味をやさしく解説

HTMLタグには「見た目」だけでなく「意味（セマンティクス）」があります。AIが生成したHTMLがdivタグだけで構成されていると、スクリーンリーダーや検索エンジンは内容を正確に解釈できません。URL共有でレビューに出す前に把握しておきたいセマンティックHTMLの基本を解説します。

> Source HTML: https://giga-site.com/articles/what-is-semantic-html-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

セマンティックHTMLとは、コンテンツの「意味」を表すタグを適切に使ったHTMLのことです。たとえば見出しには`<h1>〜<h6>`、ナビゲーションには`<nav>`、記事本文には`<article>`、補足情報には`<aside>`を使います。これらのタグはブラウザ・スクリーンリーダー・検索エンジンが構造を理解するための手がかりになります。

対比として「div地獄」と呼ばれる状態があります。すべてのレイアウトを`<div class="wrapper">`のようなdivだけで組んでいる場合、見た目は同じでも機械的な解析ができず、アクセシビリティとSEOの両面で評価が下がります。AIが生成したHTMLはこの状態に陥りやすいです。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

プレビューURLでHTMLを共有するとき、スクリーンリーダー利用者がページに到達した場合、`<nav>`や`<main>`タグが存在するとランドマークジャンプ機能でページ内を素早く移動できます。divだけのページでは全コンテンツを順番に聞かなければならず、目的の情報に到達するまでに非常な時間がかかります。

検索エンジンへのインデックスが将来的に必要になる場合も、セマンティックHTMLの有無は重要です。`<h1>`が複数あったり、見出し階層がh1→h4とジャンプしていたりすると、クローラーがページ構造を誤解し、検索表示の品質が下がります。

## よくある誤解

「CSSクラス名に意味のある名前を付ければセマンティックHTMLと同等だ」は誤りです。`class="header"`を付けたdivは人間が読めるだけで、ブラウザやスクリーンリーダーはクラス名から構造を推測しません。`<header>`タグを使って初めてランドマークとして認識されます。

「AIはセマンティックHTMLを自動的に出力してくれる」と期待されがちですが、実際はプロンプトで明示的に指示しないと、divベースのHTML構造が出てくることが多いです。生成後に見出し・ナビゲーション・フッターのタグを確認する習慣が必要です。

## 安全に使うための注意点

共有前のセマンティクスチェックとして、Chrome拡張「Headings Map」を使うと見出し（h1〜h6）の階層構造がツリー表示されます。h1が複数あったり、h2の次にh4が来ていたりするような「飛び」が見つかれば修正が必要です。正しい階層は目次として成立する構造です。

ランドマークの確認にはaxe DevToolsの「Structure」タブが便利です。`<header>` `<nav>` `<main>` `<footer>`が適切に配置されているかが一覧で確認できます。もし`<main>`が存在しない場合は、ページのメインコンテンツを囲むタグを追加するだけで、スクリーンリーダーユーザーの体験が大幅に改善されます。

## よくある質問

### h1タグはページに1つだけであるべきですか？

HTML5の仕様上は複数のh1を許容していますが、アクセシビリティと実用面ではページに1つのh1（ページの主題）を推奨します。複数のh1があるとスクリーンリーダーユーザーが「どこから読み始めればよいか」迷います。SEOの観点でも主要なキーワードを1つのh1に集中させる方が評価されやすいです。

### AI生成HTMLを受け取ったとき、セマンティクスを確認する最速の方法は何ですか？

Chrome DevToolsのElements→Accessibilityタブで「Accessibility Tree」を表示するか、Ctrl+Shift+Iで開発者ツールを起動して「landmark」でページ内検索するのが速いです。mainやnav、headerが存在しない場合はdivで代替されているサインです。

### articleタグとsectionタグはどう使い分ければよいですか？

articleはそれ単独でコンテキストなしに意味が成立する独立したコンテンツ（ブログ記事・ニュース記事・製品カード）に使います。sectionはページ内のテーマでまとまった区切りに使い、通常は見出しを持ちます。articleの中にsectionを入れることは有効なパターンです。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "セマンティックHTMLとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "セマンティックHTMLを初めて意識するAI生成サイト制作者やデザイナーに向け、divとセマンティックタグの違い・共有前の確認方法・よくある誤解を実例で解説した記事です。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-semantic-html-html-share",
  "url": "https://giga-site.com/articles/what-is-semantic-html-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "h1タグはページに1つだけであるべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTML5の仕様上は複数のh1を許容していますが、アクセシビリティと実用面ではページに1つのh1（ページの主題）を推奨します。複数のh1があるとスクリーンリーダーユーザーが「どこから読み始めればよいか」迷います。SEOの観点でも主要なキーワードを1つのh1に集中させる方が評価されやすいです。"
      }
    },
    {
      "@type": "Question",
      "name": "AI生成HTMLを受け取ったとき、セマンティクスを確認する最速の方法は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Chrome DevToolsのElements→Accessibilityタブで「Accessibility Tree」を表示するか、Ctrl+Shift+Iで開発者ツールを起動して「landmark」でページ内検索するのが速いです。mainやnav、headerが存在しない場合はdivで代替されているサインです。"
      }
    },
    {
      "@type": "Question",
      "name": "articleタグとsectionタグはどう使い分ければよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "articleはそれ単独でコンテキストなしに意味が成立する独立したコンテンツ（ブログ記事・ニュース記事・製品カード）に使います。sectionはページ内のテーマでまとまった区切りに使い、通常は見出しを持ちます。articleの中にsectionを入れることは有効なパターンです。"
      }
    }
  ]
}
```