Geek Answers Handbook

What is the semantically correct way to create an accordion widget?

Given the semantic web and HTML5, what is the semantically correct way to create an accordion widget?

Example:

jQueryUI offers the following example:

<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>

now, if it’s clear that we need a list with a title and content, now this is what we need:

definition list?

<dl>
    <dt>
       Title
    </dt>
    <dd>
       Content
    </dd>
</dl>
+5
source share
1 answer

Semantics is based on content .

not style,
not interaction.

Because of this, there will not be only one way to layout the accordion widget semantically. As an accordion widget, this is an interaction.

dl name, 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>

, , , .

+7

More articles:


All Articles