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

[Hugh Miller]

Cheers Will,

I don't think the content I am going to be displaying is really suited 
to the definition list as the published date and byline may be the same 
in more than one element. And to be honest, it is perfectly possible for 
even headlines to be duplicated.

The second example you gave me was pretty much what I had thought about 
because the image is always related to that headline and it has the 
benefit of holding it all together - and the hAtom variant of that 
appears to be pretty much ideal, thanks a lot for that.

H

Will wrote:
> 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
>   

-- 
Hugh Miller
Web Developer
Clyde & Forth Press Ltd

Tel:   +44-01475-726511
Fax:   +44-01475-783734
Email: hmiller at cfpress.co.uk


This e-mail and any attachments are confidential and intended solely for the addressee. If you have received it in error, please inform the sender and delete it immediately. The views or opinions contained within this email may not be those of Clyde & Forth Press Ltd, which accepts no liability for any damage caused by the transmission of any viruses. E-mail traffic is monitored within Clyde & Forth Press Ltd and messages may be viewed.

Clyde & Forth Press Ltd is a company registered in Scotland (SC132609) with its registered office at Pitreavie Business Park, Dunfermline, Fife, KY11 8QS.


-- 
This message has been scanned for viruses and
dangerous content by MailScanner, and is
believed to be clean.