アコーディオンウィジェットを作成する意味的に正しい方法は何ですか？

Question

セマンティックウェブとHTML5を取り入れて、意味的にはとなりますアコーディオンウィジェットを作成する方法は？

例：

jQueryUIは、次の例を提案している：それは、我々はタイトルと内容を持つリストが必要であることは明らかである場合

<div id="accordion"> 
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div> 

は今、今では私たちは、その後必要になるかです：

定義のリスト？

<dl> 
    <dt> 
     Title 
    </dt> 
    <dd> 
     Content 
    </dd> 
</dl> 

Answer 1

セマンティクスはコンテンツに基づいています。

スタイルではなく、
の相互作用ではありません。

このため、アコーディオンウィジェットを意味的にマークアップする1つの方法ではありません。アコーディオンウィジェットはの対話であるです。

のために使用する必要があります。「用語と定義、メタデータのトピックと値、質問と回答、または他のグループがある場合は、アコーディオンウィジェットでdlを使用する意味があります。名前と値のデータ」：

<dl id="definitions"> 
    <dt>...</dt> 
    <dd>...</dd> 
    <dt>...</dt> 
    <dd>...</dd> 
    ... 
</dl> 

アーカイブに記事の束を持っていれば、それを使うのは、セマンティックが考えられます。

<h1>Archive</h1> 
<div id="articles"> 
    <h2>...</h2> 
    <article>...</article> 
    <h2>...</h2> 
    <article>...</article> 
    ... 
</div> 

コンテンツが何をすべきかを心配する前に、あなたのコンテンツを把握するはです。