サイト内検索

aside 要素を理解しよう

この記事は、html5doctor に掲載されている記事「Understanding aside」を日本語訳したものです。この記事では、aside 要素について、正しい使い方を解説しています。HTML5 仕様の aside 要素の説明はとても抽象的で分かりにくく、誤解を招きやすい要素の一つといえるでしょう。この記事では、aside 要素をどこに使うべきかが分かりやすく解析しています。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

aside 要素を理解しよう

この投稿が書かれてから aside は再定義されたため、アップデート版の記事を読んでほしい。

HTML5 は、記事を補強することができる付加情報をマークアップする新要素を用意している。だが、それは、その記事を理解するにのに、無くてはならないものとは限らない。しかし、<aside> の解釈においては、それをどのように使うかという点に関して不明瞭な点がある。そして、その理解を強化し誤解を取り除いてほしいという要望が Doctor に来ている。この記事では、<aside> が何のために用意されたのかを見ていこう。この利用例や、この便利で誤解がある要素を使うべきではない例をお見せする。

まず最初に、HTML5 仕様が <aside> をどのように定義しているのかを見てみよう:

aside 要素は、その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表し、コンテンツから分離されたものとして見なすことができます。このようなセクションは、印刷慣例では、よく補足記事として表されるものです。

この仕様を読んで悩みやすいのは、"補足記事(sidebar)"という単語が使われているという点だ。この記事の後半では、これについて深く突っ込んでみよう。まず、あなたは、ここで言われていることが、あなたの第一印象とかなり違うかもしれないということに気づかなければいけない。<aside> の中のコンテンツは、コンテキスト内の記事に関係するような単独の情報であるべきだ。もし、あなたの <aside> のコンテンツがこの要件を満たしているなら、あなたは、そのコンテンツにセマンティックを与えられるだけでなく、CSS スタイルのフックになる便利な要素を持つことになる。

この関係性とは、どれくらい厳密なのだろうか? <aside> のコンテンツの良い例としては、記事から抜粋したリード文、用語解説、関連リンクなどがある。

利用例

仕様で提案されているように、記事から抜粋したリード文というのは、主要な記事本文から分離されるものの、関連性があるようなコンテンツの例としては、完璧だ。重要な箇所を太字にしておいた。

<article>
    <header>
        <h1>Lorem Ipsum Dolor Sit Amets</h1>
    </header>
    <p>Aliquam erat volutpat. Vestibulum eleifend pellentesque urna, at
    sodales est faucibus sit amet. Praesent in mi dui. <q>Aliquam sed
    bibendum nisl. Mauris pharetra enim sit amet ipsum dictum placerat. Sed
    lacinia pulvinar iaculis. Nam sit amet hendrerit purus.</q> Sed a urna
    laoreet lorem pulvinar fermentum. Aenean vel luctus libero. Ut tincidunt
    metus sagittis ante viverra feugiat.</p>
    <aside>
        <q>Mauris pharetra enim sit amet ipsum dictum placerat.</q>
    </aside>
    <p>Nulla quis lacus non quam luctus vestibulum. Pellentesque imperdiet
    risus gravida ante consectetur fermentum. Vivamus et est nec risus volutpat
    elementum. Ut faucibus, lectus consectetur volutpat dapibus, quam diam
    luctus enim, vitae mollis enim purus non ante.</p>
</article>

<header> 要素に関しての詳細は、Richard の記事 The <header> Element を見てほしい。

スタイルされたウェブページ、もっと一般的なものとして、印刷された記事では、これは、主要な記事のサイドにハイライトされた引用として、ビジュアルに表されるだろう。この <aside> は、コンテンツに関連したものだが、記事本文の一部となる必要はない。この記事本文は、付加的な情報がなくても理解できるものだからだ。または、この場合には、二重引用がないからだ。

次の例は、記事の中で使われている用語集だ:

<article>
    <header>
        <h1>ウェブ・テクノロジー</h1>
    </header>
    <p>Curabitur dignissim lorem a CSS diam posuere tempor. Nam hendrerit,
    eros vel condimentum tempor, ipsum justo cursus justo, quis vestibulum
    turpis turpis sit amet tellus. Quisque quis PHP magna eget ipsum faucibus
    bibendum at non diam. Sed sapien est, cursus ac ullamcorper id, egestas vel
    urna JavaScript. Nullam aliquam dolor vitae quam pharetra auctor.</p>
    <aside>
        <dl>
            <dt>CSS</dt>
            <dd>ワールド・ワイド・ウェブで提供されているドキュメントのスタイリングの標準。</dd>
            <dt>PHP</dt>
            <dd>ウェブ用の動的 HTML ドキュメント生成に適したサーバー・サイドのスクリプティング言語。</dd>
            <dt>JavaScript</dt>
            <dd>ブラウザーの中で HTML ドキュメントを操作するために使われるクライアント・サイドのスクリプティング言語。</dd>
        </dl>
    </aside>
</article>

<aside> の誤用

この要素は何に対して使うのかという点については誤解しやすいようだ。前述の通り、<aside> の定義は、ディベロッパーを少々悩ませる。この要素がどのように使われるべきかについて、多くが共通して誤認することは、標準的な補足記事に対してだ。通常、補足記事コンテンツと記事の中にあるコンテンツの関連性には度合いがあるが、<aside> が適しているかどうかを検討するには不十分だ。ナビゲーション、広告、検索ボックス、ブログロールなどは、その記事には直接的には関連がない。そのため、<aside> の利用は適さないのだ。

<aside> 要素の定義では、例えば、雑誌やリーフレットといった印刷メディアであれば、それは補足記事を参照することになるという点に注意すると言うことが大事だ。雑誌の "補足記事" には、文脈の中で、その記事に関する補注が入れられる。これを HTML5 に置き換えると、これが <aside> になるだろう。もし、PHP の印刷記事に、補足記事として “高性能で低価格なウェブホスティング” 向けの広告があれば、これは <aside> としては分類されないだろう。このような場合は、よりセマンティックなマークアップとして、別の要素を考えてほしい。

最後にひとこと

どの HTML 要素でも言えることだが、<aside> 要素は、正しく使えば、ページのコンテンツをセマンティックにマークアップするには、とても役に立つはずだ。<aside> は、記事を補足情報で補うために使うことができる。また、読者が興味を引くと思われる部分をハイライトするのにも使うことができる。aside は、単独で独立しているもので、記事の一部としては不可欠なものではない。しかし、正しく使えば、あなたのコンテンツに対して、追加レベルの情報となるはずだ。コンテンツを無理に <aside> に入れないでほしい。もし、それが、その記事に関連しながらも本筋からそれるようなものに該当しないのであれば、それはそこにあるべきではない。HTML5 は、ウェブページをマークアップする多くの新要素を用意している。これらを上手に使ってほしい。