[thelist] HTML (!!!) How would you code this?

[Will]

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