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