セマンティック

HTML

意味のあるHTMLタグ

セマンティックタグ一覧

意味のあるHTMLタグを使用する

ページ構造のセマンティクス

<header>
    <nav>
        <ul>
            <li><a href="/">ホーム</a></li>
            <li><a href="/about">私たちについて</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h1>記事タイトル</h1>
        <time datetime="2025-10-24">2025年10月24日</time>
        <p>記事の内容がここに入ります...</p>
    </article>

    <aside>
        <h2>関連情報</h2>
        <ul>
            <li><a href="#">関連記事1</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>&copy; 2025 会社名</p>
</footer>

テキストのセマンティクス

テキストレベルのセマンティックタグ

強調・引用・コード

<!-- 強調 -->
<strong>重要なテキスト</strong>   <!-- 意味的な強調 -->
<em>強調されたテキスト</em>       <!-- アクセントの強調 -->
<mark>ハイライト</mark>           <!-- 参照・強調表示 -->
<small>補足情報</small>           <!-- 免責・著作権など -->

<!-- 引用 -->
<blockquote cite="https://example.com">
    <p>長い引用文はblockquoteを使います。</p>
</blockquote>
<q>短いインライン引用</q>

<!-- コード -->
<code>console.log('hello')</code>    <!-- インラインコード -->
<pre><code>function greet() {
    return 'hello';
}</code></pre>                       <!-- コードブロック -->
<kbd>Ctrl + C</kbd>                 <!-- キーボード入力 -->
<var>x</var> = <var>y</var> + 1    <!-- 変数 -->
<samp>Output: Hello World</samp>    <!-- サンプル出力 -->

その他のテキストタグ

<!-- 日付・時刻 -->
<time datetime="2025-10-24T14:00">2025年10月24日 14:00</time>

<!-- 略語 -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- 上付き・下付き文字 -->
<p>H<sub>2</sub>O  E = mc<sup>2</sup></p>

<!-- 削除・挿入 -->
<del>削除されたテキスト</del>
<ins>追加されたテキスト</ins>

<!-- ルビ（ふりがな） -->
<ruby>漢字<rt>かんじ</rt></ruby>

<!-- 双方向テキスト -->
<bdi>unknown_user_name</bdi>   <!-- 方向が不明なテキストを分離 -->
<bdo dir="rtl">Right to left</bdo>

メディア要素

audio、video、picture タグ

video / audio

<!-- 動画 -->
<video controls width="640" height="360" poster="thumbnail.jpg">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4"  type="video/mp4">
    <p>お使いのブラウザは動画をサポートしていません。</p>
</video>

<!-- 音声 -->
<audio controls>
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.mp3" type="audio/mpeg">
    お使いのブラウザは音声をサポートしていません。
</audio>

picture（レスポンシブ画像）

<!-- 解像度・フォーマット切り替え -->
<picture>
    <source media="(min-width: 1024px)" srcset="hero-lg.webp" type="image/webp">
    <source media="(min-width: 1024px)" srcset="hero-lg.jpg">
    <source media="(min-width: 768px)"  srcset="hero-md.webp" type="image/webp">
    <source media="(min-width: 768px)"  srcset="hero-md.jpg">
    <img src="hero-sm.jpg" alt="ヒーロー画像" loading="lazy" decoding="async">
</picture>

<!-- srcset と sizes -->
<img
    src="image-800.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
    alt="レスポンシブ画像"
    loading="lazy">

インタラクティブ要素

details、dialog、datalist など

details / summary / dialog

<!-- アコーディオン -->
<details>
    <summary>クリックして詳細を表示</summary>
    <p>詳細な内容がここに入ります。JavaScriptなしで動作します。</p>
</details>

<!-- ダイアログ（モーダル） -->
<dialog id="myDialog">
    <h2>ダイアログタイトル</h2>
    <p>内容</p>
    <button onclick="this.closest('dialog').close()">閉じる</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">開く</button>

<!-- データリスト（オートコンプリート） -->
<input list="fruits" placeholder="フルーツを選択...">
<datalist id="fruits">
    <option value="りんご">
    <option value="バナナ">
    <option value="さくらんぼ">
</datalist>

アクセシビリティ

WAI-ARIA とアクセシブルなHTML

ARIA属性

<!-- ランドマーク -->
<nav aria-label="メインナビゲーション">...</nav>
<nav aria-label="パンくずリスト">...</nav>

<!-- ボタンとコントロール -->
<button aria-expanded="false" aria-controls="menu">メニュー</button>
<ul id="menu" aria-hidden="true">...</ul>

<!-- フォームのアクセシビリティ -->
<label for="email">メールアドレス</label>
<input
    type="email"
    id="email"
    aria-required="true"
    aria-describedby="email-hint"
    aria-invalid="false">
<p id="email-hint" class="hint">例: user@example.com</p>

<!-- ライブリージョン -->
<div role="status" aria-live="polite" aria-atomic="true">
    <!-- 動的に更新される通知 -->
</div>

スキップリンクとフォーカス管理

<!-- スキップリンク（キーボードユーザー向け） -->
<a href="#main-content" class="skip-link">メインコンテンツへスキップ</a>

<!-- tabindex -->
<div tabindex="0" role="button" onkeydown="handleKey(event)">
    カスタムボタン
</div>

<!-- フォーカスを受け取らない要素 -->
<div tabindex="-1" id="programmatic-focus-target">
    プログラムでフォーカスを当てる要素
</div>

<style>
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
}
.skip-link:focus {
    top: 0; /* フォーカス時に表示 */
}
</style>

Grid

Tables