Videos
We surely can have nested ul and ol, but I am not sure if we can have nested dls.
I need to display information about someone's balance with different currencies. Say, we have following data:
User's balance:
1,234.56 USD
1,234.56 EUR
1,234.56 JPY
And according to design I would display this data in following markup:
<dl>
<dt>Balance</dt>
<dd>
<dt class="visuallyhidden">USD balance</dt>
<dd>1,234.56 USD</dd>
<dt> class="visuallyhidden">EUR balance</dt>
<dd>1,234.56 EUR</dd>
<dt> class="visuallyhidden">JPY balance</dt>
<dd>1,234.56 JPY</dd>
</dd>
</dl>Would this be accessible layout? Or should I consider other markup, for example with unordered lists and titles inside them?
Balance
- $1,234.56 USD …
If you are using HTML 4.01, you shouldn't use dl as it's defined as "definition list" (and your example does not consist of terms and their definitions). If you are using HTML5, the use of dl is fine, because the definition of dl changed.
Using headings inside of li might be a bit problematic regarding the document outline. The scope of a heading would include the start of the next li: <li><!--scope start--><h3>title</h3><p>description</p></li><li><!--scope end--><h3>…. By using section (resp. article), this could be avoided.
So, for HTML5, I think the following ways are possible:
dl
<dl>
<dt>Title1</dt>
<dd>Description1</dd>
<dt>Title2</dt>
<dd>Description2</dd>
</dl>
That would be my favorite, if you only want to provide title and description for each show (if not, see the last example).
ul + section
<ul>
<li>
<section>
<h1>Title1</h1>
<p>Description1</p>
</section>
</li>
<li>
<section>
<h1>Title2</h1>
<p>Description2</p>
</section>
</li>
</ul>
I don't like that very much. The list isn't adding much here, so why not omit it? (see next example)
headings only
<section>
<h1>Title1</h1>
<p>Description1</p>
</section>
<section>
<h1>Title2</h1>
<p>Description2</p>
</section>
Instead of section the article element might be possible, too.
You could also omit section (or article) and use headings only (in the case of section it wouldn't change the meaning); in that case you'd need to apply the correct heading level.
headings + dl
If you want to provide additional metadata (maybe in the future), I'd go with the following markup:
<section>
<h1>Title1</h1>
<dl>
<dt>Description</dt>
<dd>…</dd>
<dt>Rating</dt>
<dd>…</dd>
<dt>Time</dt>
<dd>…</dd>
<dt>Length</dt>
<dd>…</dd>
</dl>
</section>
I prefer the former. First, it seems to make more sense to me just based on the content.
But that's me. I think the markup should reflect the document structure, and since (as you say) the CSS can style it either way, why not make the markup reflect the content? A list containing items that contain a header for a title, followed by a description seems a bit of overkill to me.
But, hey. You know what they say about opinions.