[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">
	    <dd><img src="image" alt="Caption" /></dd>
	    <dd>Byline / Comments / Multimedia</dd>
	    <dd>Teaser paragraph text</dd>
	  <dt>Headline 2</dt>
	  <dt>Headline 3</dt>

<div id="category">
            <img src="image" alt="Caption" />
            <span>Byline / Comments / Multimedia</p>
            <p>Teaser paragraph text</p>
       <li>Headline 2</li>
       <li>Headline 3</li>

might as well use a microformat and add a little extra semantic
weight.  hAtom fits the bill.

<div id="category">
    <ol class="hfeed">
        <li class="hentry">
            <h3 class="entry-title"><a href="link-to-article.html"
            <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 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>

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