【HTML5 セマンティック】HTMLマークアップに意味を持たせる

HTML5 セマンティック html

HTML5 セマンティックとは

HTML5セマンティックとは、HTMLコード内で使用されるタグが、デザインやレイアウトのためのものではなく、コンテンツの意味や構造を明確に示すこと。

従来の<div>や<span>のようなコンテンツを囲む汎用的なタグではなく、<header>、<footer>、<article>、<section>などのセマンティック（意味付け）なタグを適切に使用する。

HTML5 セマンティックの利点

  1. アクセシビリティの向上：スクリーンリーダーなどの支援技術が、ページの構造や内容をより適切に解釈できるようになるため、視覚障害者なども含め、ユーザーがウェブサイトを利用しやすくなる。
  2. SEOの向上：検索エンジンがページ内容をより正確に理解できるため、検索結果でのランキングが向上する可能性がある。
  3. コードの可読性の向上：コードが説明的になり、他の開発者や将来の自分がコードを読み解きやすくなる。

HTML5 セマンティックの例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 セマンティック サンプル</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>

<header>
    <!-- ヘッダー -->
    <h1>h1見出し</h1>
    <nav>
        <!-- ナビゲーションメニュー -->
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">サービス</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>
</header>

<main>
    <!-- 主なコンテンツ -->
    <section>
        <h2>イントロダクション</h2>
        <p>イントロダクションの内容</p>
    </section>

    <section>
        <h2>最新の記事</h2>
        <article>
            <!-- 記事コンテンツ -->
            <h3>記事タイトル1</h3>
            <p>記事タイトル1の記事の内容</p>
            <figure>
                <!-- 画像や図表 -->
                <img src="example.jpg" alt="サンプル画像">
                <figcaption>サンプル画像のキャプション</figcaption>
            </figure>
        </article>
        <article>
            <h3>記事タイトル2</h3>
            <p>記事タイトル2の内容</p>
        </article>
    </section>

    <section>
        <h2>音声と動画</h2>
        <audio controls>
            <!-- 音声ファイル -->
            <source src="sample.mp3" type="audio/mpeg">
            お使いのブラウザは audio 要素をサポートしていません。
        </audio>
        <video controls>
            <!-- 動画ファイル -->
            <source src="sample.mp4" type="video/mp4">
            お使いのブラウザは video 要素をサポートしていません。
        </video>
    </section>

    <section>
        <h2>フォームとインタラクション</h2>
        <form>
            <!-- フォームとインタラクション -->
            <label for="example">例:</label>
            <input id="example" type="text" list="examples">
            <datalist id="examples">
                <!-- 入力候補 -->
                <option value="選択肢 1">
                <option value="選択肢 2">
                <option value="選択肢 3">
            </datalist>
            <button type="submit">送信</button>
        </form>
        <details>
            <!-- 詳細情報 -->
            <summary>詳細情報</summary>
            <p>ここに詳細な情報が表示される</p>
        </details>
        <meter value="0.7">70%</meter>
        <progress value="50" max="100">50%</progress>
        <output for="example" name="result">結果がここに表示される</output>
    </section>

    <section>
        <h2>補足情報と注釈</h2>
        <aside>
            <!-- 補足情報 -->
            <p>ここに補足的な情報が表示される</p>
        </aside>
        <ruby>
            <!-- ルビ（ふりがな） -->
            漢字<rt>かんじ</rt>
        </ruby>
        <p>重要な部分は<mark>強調表示</mark>される</p>
        <wbr> <!-- 改行ポイント -->
    </section>

</main>

<footer>
    <!-- サイトのフッター -->
    <p>© 2024 会社名. All rights reserved.</p>
</footer>

<!-- Canvasのサンプル -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    Canvasはお使いのブラウザではサポートされません。
</canvas>

<!-- JavaScriptでCanvasに描画するサンプル -->
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(10, 10, 150, 75);
</script>

</body>
</html>

よく使うセマンティックタグ一覧

タグ説明
<article>独立したコンテンツを示す。ブログ記事やニュース記事など、独立して意味を持つコンテンツに使う。
<aside>主なコンテンツから外れた補足的なコンテンツを示す。サイドバーや補足情報などに使う。
<audio>音声を再生する。<source> タグと組み合わせて複数の音声ソースを指定できる。
<canvas>JavaScript で図形やグラフィックを描画するための領域を提供する。
<command>操作メニューの各コマンドを指定する。非推奨で、<button> や <a> の使用が推奨される。
<datalist><input> 要素のための入力候補のリストを提供する。
<details>詳細情報や操作手段を示す。<summary> タグと一緒に使い、クリックすることで内容を表示または非表示にできる。
<embed>外部プラグインやコンテンツを埋め込む。音声や動画など、埋め込み型コンテンツに使う。
<figcaption><figure> 内の図表や画像にキャプションを追加する。
<figure>図表や画像、コードブロックなどの独立したコンテンツを示す。主要なコンテンツから独立しているため、取り除かれても他のコンテンツに影響を与えない。
<footer>文書やセクションのフッターを定義する。著作権情報や連絡先などが含まれることが多い。
<header>文書やセクションのヘッダーを定義する。通常、ロゴやナビゲーションなどが含まれる。
<hgroup>セクションの見出しをグループ化する。<h1> ～ <h6> の見出しをまとめて使う。ただし、現在は非推奨。
<keygen>フォーム送信時にキーを生成する。セキュリティ上の理由から、現在は非推奨。
<mark>文書内のテキストを強調表示する。検索結果の一致部分や特に重要なテキストを目立たせるのに使う。
<menu>操作メニューを作成する。<menuitem> タグとともに使用することができるが、現在は非推奨。
<meter>規定範囲内の測定値を示す。進行状況や評価値などを表示するのに使う。
<nav>ナビゲーションリンクのセクションを定義する。サイト内のリンクメニューなどに使う。
<output>フォームやスクリプトの結果を表示する。
<progress>タスクの進行状況を示す。進捗バーや進行状況を視覚的に表示するのに使う。
<section>文書のセクションを定義する。関連するコンテンツをグループ化し、見出しを持つことが推奨される。
<source><audio> や <video> 要素のソースを指定する。異なる形式やURLを指定して、ブラウザが適切なソースを選択する。
<summary><details> の内容の要約を表示する。<details> が閉じているときに表示され、クリックすると詳細が開く。
<time>日付や時刻を正確に示す。datetime 属性でISO 8601形式の日付や時刻を指定する。
<video>動画を再生する。<source> タグと組み合わせて複数の動画ソースを指定できる。
<rp>ルビ（ふりがな）を囲む記号を指定する。ルビの前後に表示される記号を指定するために使う。
<rt>ルビ（ふりがな）のテキストを指定する。<ruby> タグ内でルビを表示するために使う。
<ruby>ルビ（ふりがな）を示す。漢字や他の文字にふりがなを追加するために使う。
<wbr>改行しても良い位置を示す。長い単語やURLなどの自動改行ポイントを指定する。
HTML5 セマンティックタグ

コメント

タイトルとURLをコピーしました