ホームページ基礎講座　誰もが迷うarticle要素の使いどころ

2020年4月3日2024年12月30日

URLをコピーしました！

Webページを作成する際、マークアップは見た目を整えるだけでなく、ページの意味や構造を明確にする重要な作業です。その中でも、header, main, footer, article, section, aside,nav,timeといったセマンティックな要素は、検索エンジンやアクセシビリティツールが内容を正確に理解するための鍵となります。今回は、これらの要素の役割や、日本語特有の文章の流れに応じた使い分けについて練習しましょう。

セマンティック要素とは？HTMLにおける特定の意味や役割を持つタグのことです。これらの要素を使うことで、コードをより意味のあるものにし、検索エンジンや支援技術（スクリーンリーダーなど）にとって理解しやすくなります。

`<h1>`は全体のタイトル（ページ全体を示す見出し）場合

こちらのコードは、<h1>は全体のタイトル（ページ全体を示す見出し）として使用されています。また<nav>要素や、<time>要素、<article>要素も前回のコードに追加しています。

header,footer,main,sectionに関しては，下記のページをご参照ください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>エコロジーと環境問題</title>
</head>

<body>
    <header>
        <h1>ECOLOGY【エコロジー】</h1>
        <nav>
            <ul>
                <li><a href="#policy">基本ポリシー</a></li>
                <li><a href="#efforts">エコロジーへの取り組み</a></li>
                <li><a href="#products">商品のラインナップ</a></li>
                <li><a href="#news">ニュース</a></li>
            </ul>
        </nav>
    </header>
    <figure>
        <img src="green.jpg" alt="自然と緑 ECOLOGY【エコロジー】">
        <figcaption>自然と緑 ECOLOGY【エコロジー】</figcaption>
    </figure>
    <main>
        <article id="policy">
            <header>
                <h2>基本ポリシー</h2>
                <time datetime="2024-12-24">2024年12月24日</time>
            </header>
            <section>
                <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology
                    Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。環境保全に尽くすだけでなく、その成果や実績を地域に還元することもポリシーとしています。</p>
            </section>
        </article>
        <article id="efforts">
            <header>
                <h2>エコロジーへの取り組み</h2>
                <time datetime="2024-11-15">2024年11月15日</time>
            </header>
            <section>
                <p>Computer Technology
                    Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
                </p>
            </section>
        </article>
        <article id="products">
            <header>
                <h2>商品のラインナップ</h2>
                <time datetime="2024-10-01">2024年10月1日</time>
            </header>
            <section>
                <p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
                </p>
            </section>
        </article>
    </main>
    <aside id="news">
        <h2>最新ニュース</h2>
        <p>エコロジーに関する最新情報は、ニュースページをご覧ください。</p>
    </aside>
    <footer>
        <p><small>Copyright © Computer Technology Groups. All rights reserved.</small></p>
    </footer>
</body>

</html>

`<nav>`要素

<header>内にサイト全体のナビゲーションバーを追加しました。
各セクションへのリンクを設置し、訪問者がすぐに該当セクションに移動できるようにしました。

<nav>
    <ul>
        <li><a href="#policy">基本ポリシー</a></li>
        <li><a href="#efforts">エコロジーへの取り組み</a></li>
        <li><a href="#products">商品のラインナップ</a></li>
        <li><a href="#news">ニュース</a></li>
    </ul>
</nav>

`<time>`要素

各<article>の中に関連する日付を示す<time>を追加しました。
属性datetimeにISO 8601形式の日時を指定しており、ブラウザや検索エンジンが理解しやすくなっています。

<time datetime="2024-12-24">2024年12月24日</time>

ID属性の追加

<article>と<aside>にIDを追加して、<nav>内のリンクからジャンプできるようにしました。

`<article>`要素が必要な場合

独立した意味を持つ場合

コンテンツが独立しており、他の文脈に移しても成立する内容なら、<article>を使うのが適切です。例: ブログ記事、ニュース記事、商品情報、フォーラムの投稿など。

他の要素と区別したい場合

同じ種類のコンテンツ（例: 複数のブログ記事やニュース記事）を分割し、それぞれが独立していることを示すときに役立ちます。

メタデータを含む場合

そのセクションにタイトルや日付などの付属情報を含めたい場合、<article>を使うとセマンティックに整理されます。

`<article>`要素が不要な場合

コンテンツが独立していない場合

コンテンツが単にページ全体の一部であり、文脈に依存する場合は、<article>でなくても構いません。たとえば、短い説明文や1つの段落だけで構成される場合は、<section>や直接<div>を使う方が適切です。

視覚的または構造的なグループ化が不要な場合

コンテンツの区別が明確で、追加の意味付けが不要な場合は、<section>や<div>を使うだけで十分です。

セマンティック要素を使うことで、コードの可読性と検索エンジンの理解が向上します。使う目的を明確にすることが大事です。例えば、単にレイアウトのために <div> を多用するのではなく、意味を持った要素を選ぶ。セマンティック要素はブラウザにとっても、アクセシビリティ向上に役立ちます。

各記事のタイトルがそれぞれの`<h1>`として設定される場合

下記のコードは、各記事のタイトルがそれぞれの<h1>として設定されており、記事ごとに独立性を強調しています。以下は、<article> 内の <h2> を <h1> に変更した場合の構造を考慮した別例です。

<h1> は通常ページの最上位見出しに使われ、SEOやアクセシビリティに影響します。そのため、全ての <article> に <h1> を使う場合、文脈上それぞれの記事が独立した内容である必要があります。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>ニュースポータルサイト</title>
</head>

<body>
    <header>
        <h1>NEWS PORTAL</h1>
    </header>
    <main>
        <article>
            <header>
                <h1>世界の気候変動問題</h1>
            </header>
            <section>
                <p>近年、地球規模での気候変動が問題視されています。気温の上昇や異常気象が頻発しており、多くの国が対策を模索しています。</p>
            </section>
        </article>
        <article>
            <header>
                <h1>国内のリサイクル率向上計画</h1>
            </header>
            <section>
                <p>政府は新たなリサイクル法案を提案しました。この計画は、国内のリサイクル率を大幅に引き上げることを目的としています。</p>
            </section>
        </article>
        <article>
            <header>
                <h1>再生可能エネルギーの最新技術</h1>
            </header>
            <section>
                <p>風力発電や太陽光発電など、再生可能エネルギー技術の進歩が著しいです。これにより、化石燃料への依存を減らすことが期待されています。</p>
            </section>
        </article>
    </main>
    <aside>
        <p>最新のニュースは、公式SNSでも配信しています。</p>
    </aside>
    <footer>
        <p><small>Copyright © News Portal. All rights reserved.</small></p>
    </footer>
</body>

</html>