[thelist] HTML (!!!) How would you code this?
Will
willthemoor at gmail.com
Mon Dec 8 01:17:27 CST 2008
hi. If you want the content to relate, consider using an html
structure where the relationships are implied. There's a lot of ways
to mark this up but here's a few ideas.
<div id="category">
<h2>Category</h2>
<dl>
<dt>Headline</dt>
<dd><img src="image" alt="Caption" /></dd>
<dd>Published</dd>
<dd>Byline / Comments / Multimedia</dd>
<dd>Teaser paragraph text</dd>
<dt>Headline 2</dt>
<dt>Headline 3</dt>
<dt>(etc.)</dt>
</dl>
</div>
<div id="category">
<h2>Category</h2>
<ol>
<li>
<h3>Headline</h3>
<img src="image" alt="Caption" />
<span>Published</span>
<span>Byline / Comments / Multimedia</p>
<p>Teaser paragraph text</p>
</li>
<li>Headline 2</li>
<li>Headline 3</li>
<li>(etc.)</li>
</ol>
</div>
might as well use a microformat and add a little extra semantic
weight. hAtom fits the bill.
<div id="category">
<h2>Category</h2>
<ol class="hfeed">
<li class="hentry">
<h3 class="entry-title"><a href="link-to-article.html"
rel="bookmark">Headline</a></h3>
<img src="image" alt="Caption" />
<span class="byline">Published</span>
<span class="byline"><span class="author">Byline</span> /
Comments / Multimedia</p>
<p class="entry-content">Teaser paragraph text</p>
</li>
<li class="entry-title"><a href="link-to-article2.html"
rel="bookmark">Headline 2</a></li>
<li class="entry-title"><a href="link-to-article3.html"
rel="bookmark">Headline 3</a></li>
<li>(etc.)</li>
</ol>
</div>
the classing may seem verbose but that's to allow flexibility - you
can apply the microformat to most any html you like. more on hAtom
here: http://microformats.org/wiki/hatom
More information about the thelist
mailing list