定義と使い方

<div>タグは
レイアウトを作成したりコンテンツを区分するdiv（division）コンテナーとして使用されるタグです。
<div>タグ自体には特別な意味はありません。

コンテンツをコンテナーのようなブロックで囲み、スタイルや属性、スクリプトのための領域として表す目的で主に使用されます。

特徴

  • <div>は「division（ナヌダ）」を省略した形として使用されています。
  • 多くのHTMLタグにはそれぞれ特別な意味がありますが、<div>タグは純然たるコンテナーであり、本質的にいかなる意味も持ちません。
  • 意味を持つタグ（例えば、<article>や<nav>）を使用できない場合にのみ、<div>タグを使用してください。
  • <div>タグにrole属性を付与することで、構造や意味を持たせることができます。

自体には特別な意味は全くありませんが、単純なテキストやテキストに関連するマークアップなどのフレージングコンテンツにスタイルや属性の範囲を適用する場合は、<span>タグを使用してください。
<div>タグは適切ではありません。

活用例

<div>タグはWebサイトを制作する際に最も多く使用されるタグの一つです。以下は<div>タグの多様な活用例です。

属性を活用するためのコンテナー

<div>タグはclass、lang、titleなどの属性と組み合わせて使用し、関連する部分ごとに区分するために活用できます。

次の例は、lang属性を使用してコンテンツの一部を英語の領域に区分するために<div>タグを活用した例です。

lang属性はHTMLタグに言語情報を提供するために使用されます。
この属性を使用することで、スクリーンリーダーや支援技術を利用するユーザーがコンテンツをより理解しやすくなります。

HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Webデザイントレンド</title>
    </head>
    <body>
        <h1>Webデザイントレンド</h1>
        <article>
            <h2>Webデザイントレンド2023</h2>
            <p>2023年のWebデザイントレンドに関する予測と解釈です。 ...</p>

            <!-- divタグを使用して英語で表示される部分をグループ化し言語を明示 -->
            <div lang="en-US">
                <h2>Web Design Trend 2023</h2>
                <p>Forecast and interpretation of 2023 web design trends.</p>
            </div>
        </article>
    </body>
</html>

上記の例において、<div>タグ自体には特別な意味はありません。
例えば、トピックごとのコンテンツグループを示す場合（この場合は<section>タグを使用すべきです）、
あるいはナビゲーション用のリンクが配置される領域（この場合は<nav>タグを使用すべきです）でもありません。

スタイルを適用するためのコンテナー

<div>タグはスタイルを指定するための領域として活用されます。

Webサイト制作においてスタイルを指定するために<div>タグを活用する例は数えきれないほど存在します。その中からいくつかをご紹介します。

コンテンツのボックススタイル用コンテナー

次は、<div>タグをコンテンツのボックススタイル用コンテナーとして活用した例です。

HTML 
<div class="shadow-box">
    <p>美しいボックススタイルができましたね！</p>
</div>
CSS 
.shadow-box {
    border-radius: 25px;
    padding: 2.5em;
    box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: gold;
}
ブラウザーでの実際の表示例
装飾目的の視覚的スタイル専用コンテナー

次は、<div>タグを視覚的なスタイルのみを目的とした装飾用コンテナーとして活用した例です。

HTML 
<div class="container" aria-hidden="true">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
</div>

コード補足説明
aria-hidden="true"はスクリーンリーダーや支援技術を利用する際に使用され、aria-hidden属性の値がtrueに設定されている場合、その要素と内部のコンテンツはアクセシビリティ技術によって認識されません。上記の例では、<div>タグが視覚的な装飾のためだけに使用されているため、Webアクセシビリティ向上の目的で設定されています。

CSS 
.container {
    position: relative;
    height: 200px;
}
.circle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.circle-1 {
    top: 0;
    background-color: red;
}
.circle-2 {
    top: 80px;
    left: 100px;
    background-color: green;
}
.circle-3 {
    bottom: 0;
    left: 50px;
    background-color: blue;
}
ブラウザーでの実際の表示例

role属性によって<div>タグに構造的な役割や意味を付与

role属性はHTML要素（Element）の拡張的な概念として、より明確な構造や意味をHTML要素に付与する役割を持つ属性です。

<div>タグにはrole属性を使用することで、構造や意味を持たせることができます。

Webページの構成や構造を識別する役割

グローバルヘッダーやグローバルフッター、サイドバー、メニューナビゲーションなどは、Webページの理解と操作を助け、スクリーンリーダーやその他の支援技術を利用するユーザーにページのレイアウトおよび構造を伝えるうえで重要な役割を果たします。HTMLではこれを「ランドマーク（landmark）」と呼びます。

以下は、ランドマークとして機能する一部の要素を抜粋したものです。

ランドマーク要素
<header> Webページ上部にある全体的なグローバルヘッダー部分を示すために使用されます。
<footer> Webページ最下部にある著作権情報やプライバシーポリシーへのリンクなどを含む、グローバルフッター部分を示すために使用されます。
<main> HTML文書の主要な内容（dominant contents）を示します。
<aside> 主にサイドバーとして、または文書内容に関連する追加情報を提供する小さな領域として表されます。
<nav> 他のWebページへ移動したり、現在のWebページ内のコンテンツへ移動するためのナビゲーション（Navigation）用リンク（links）が配置される領域を示します。一般的な例としては、メニュー、目次、索引などがあります。

これらの要素は、<div>タグにrole属性を使用することで同様に活用できます。

注意事項
ブラウザーの互換性問題によりランドマークとして機能する要素を使用できない場合を除き、role属性を付与した<div>タグで構造や意味を持たせることは推奨されません。

次は、<div>タグにrole属性を使用してランドマークの役割を付与する例です。

グローバルヘッダーの役割
HTML 
<header>
    <h1>Webサイトタイトル</h1>
    .... ロゴ、ナビゲーション、検索 ....
</header>

<!-- 以下のように使用できます。-->
<div role="banner">
    <h1>Webサイトタイトル</h1>
    .... ロゴ、ナビゲーション、検索 ....
</div>
グローバルフッターの役割
HTML 
<footer role="contentinfo">
    <address>
        © 2023 Webページ制作者
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</footer>

<!-- 以下のように使用できます。-->
<div role="contentinfo">
    <address>
        © 2023 Webページ制作者
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</div>
メイン（dominant contents）の役割
HTML 
<!DOCTYPE html>
<html>
    <head>
        <title>Webページタイトル</title>
    </head>
    <body>
        <header></header>
        <nav></nav>
        <main>
            <!-- Webページの主要コンテンツ領域 -->
            <h1>主要タイトル</h1>
            <p>主要内容...</p>
            <!-- その他のコンテンツ -->
        </main>
        
        <!-- 以下のように使用できます。-->
        <div role="main">
            <!-- Webページの主要コンテンツ領域 -->
            <h1>主要タイトル</h1>
            <p>主要内容...</p>
            <!-- その他のコンテンツ -->
        </div>
        <footer></footer>
    </body>
</html>
asideの役割
HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>asideタグの例</title>
    </head>
    <body>
        <header></header>
        <main></main>
        <aside>
            <h3>補足情報</h3>
            <p>この領域は主要コンテンツに含まれない、別に分離された補足情報を表示します。</p>
        </aside>
        
        <!-- 以下のように使用できます。-->
        <div role="complementary">
            <h3>補足情報</h3>
            <p>この領域は主要コンテンツに含まれない、別に分離された補足情報を表示します。</p>
        </div>
        <footer></footer>
    </body>
</html>
ナビゲーションの役割
HTML 
<nav>
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社情報</a></li>
        <li><a href="/services">サービス</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
    </ul>
</nav>

<!-- 以下のように使用できます。-->
<div role="navigation">
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社情報</a></li>
        <li><a href="/services">サービス</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
    </ul>
</div>

<div>タグに<button>タグの意味を付与

次は、<div>タグにrole属性を使用して、ボタンを示す<button>タグの意味を付与する例です。

HTML 
<button type="button" id="save">保存</button>

<!-- 以下のように使用できます。-->
<div id="save" tabindex="0" role="button" aria-pressed="false">保存</div>

注意してください!
role="button"は<div>タグをスクリーンリーダーやその他の支援技術に対してボタンとして認識させます。しかし、ユーザーにボタンの操作機能を提供するわけではありません。ボタンの操作機能を追加するには、tabindex属性とJavaScript、CSSを併せて使用する必要があります。

<div>タグにrole属性を使用してタグの意味を付与できる用途は多岐にわたります。しかし、無闇に使用するのではなく、role属性を活用してWebコンテンツのアクセシビリティを向上させることに焦点を当てて使用すべきです。

技術的な文法のまとめ

divタグの技術的な文法まとめ
可能な親要素 文書やアプリケーション本文で使用されるほとんどの要素が、<div>タグをコンテンツとして使用できます。
許可されるコンテンツ
  • 文書やアプリケーション本文で使用されるほとんどの要素が、<div>タグのコンテンツとして使用できます。
  • <div>の親が<dl>の場合、子要素として1つ以上の<dt>および1つ以上の<dd>タグで構成されたグループを0個以上コンテンツとして使用する必要があり、選択的に<script>タグや<template>タグを混在させることが可能です。
暗示的なrole属性値 generic
許可されるrole属性値 すべて（Any）

ブラウザ互換性

divタグのブラウザ互換性
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<div> 1 12 1 1

仕様書

divタグの仕様書
仕様書
<div> HTML Standard
#the-div-element

参考資料

関連項目