List Markup

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I am displaying Articles and Documents in two different page.

An Article contains a Title, Image, Update Date and Text.
An Document contains a Title and a Updated Date. The title is the link
to the file.

When displaying the list does it make sense to use:

<div class="Articles">
  <div id="Article1" class="Article">
    <h2>Article title<span>Update at 20-10-2009</span></h2>
    <img src="images/Article1.jpg"/>
    Article Content
  <div id="Article2" class="Article">
    <h2>Article title<span>Update at 22-10-2009</span></h2>
    <img src="images/Article2.jpg"/>
    Article Content

Maybe I don't even need the Articles wrapper ... I am not sure yet ...
For documents is similar but having only:

<div class="Documents">
  <div id="Document1" class="Document">
    <h2><a href="/Document1.pdf">Document title<span>Update at

I think in Documents list I might use the following instead:
<div class="Documents">
    <p><a href="/Document1.pdf">Document title<span>Update at

And maybe I should use a list instead of divs?

Anyway, what do you think would be the correct markup for this?

Thank You,

Re: List Markup

writing in news:7d24f25a-d6ac-4c4e-bed7-

Quoted text here. Click to load it

I think you might be able to get rid of the class articles:
<div id="articles">
<h2 id="article1">Article Title ...</h2>
<img src="whatever">
<h2 id="article2">Article Title ...</h2>

Quoted text here. Click to load it

If you are going to be offering pdf's, please make an indication to the
visitor that it is a pdf file.  I hate that when Foxit or Acrobat
suddenly kick into action (especially Acrobat).

Quoted text here. Click to load it

I don't think that list markup would be appropriate here, except for a
menu list, eg:

<li><a href="#article1">Article1</a></li>
<li><a href="#article2">Article2</a></li>
<div id="articles">
<h2 id="article1">Title</h2>

Adrienne Boswell at Home
Arbpen Web Site Design Services
Please respond to the group so others can share

Re: List Markup

Quoted text here. Click to load it

You mean the class Article ...
So I will have only a div wrapping all articles and then style it
something like:

div.Articles h2
div.Articles h2 span
div.Articles img
div.Articles p

Note: you suggest me to remove the span tag from inside the h2 tag
that contains the updated date? Where would you place it? Maybe:

<h2 id=3D"article1">Article Title ...</h2>
<p>Update At ... </p>
<img src=3D"whatever">

Quoted text here. Click to load it

Ok. I had the link for a PDF but in fact it redirects to another page
where the user can see the document online using flash or download it.
I will specify that on the other page, maybe with a PDF icon on the
side of the download link ... I think this is what you meant.

Re: List Markup

writing in news:657801a4-a051-456f-af9e-

Quoted text here. Click to load it

I would probably make articles an id, especially if there is only one
area on the page that is for articles.  It's your choice.

Quoted text here. Click to load it

When I was making the "pretend" markup, notice the ... that was where
your span might go.  I am doing something similar on
[ ].

Quoted text here. Click to load it

Why would you do a redirect?  I especially hate sites that open a new
window/tab for pdf documents.  How about just <p>Here is the <a
href="document.pdf" title="PDF Document" class="pdf">Document</a> in PDF
(size)</p> ?  

Adrienne Boswell at Home
Arbpen Web Site Design Services
Please respond to the group so others can share

Re: List Markup

Quoted text here. Click to load it

Do your own homework, Miguel.


Your professor

Re: List Markup

Quoted text here. Click to load it

Why are you doing this?  Is it purely to display them, or is the
structure of this list going to be processed further mechanically? Is
there the slightest chance of that?

If you're convinced it's the first, then still code in a way to
support the second - you can't predict the future, maybe I'll want to
build a web service in the future that accesses your data and makes
use of it. So code to encourage this, not to make it difficult.

There are several small guidelines that emerge from this decision:

* Use a list element and a series of list-item elements. This makes
access to them _far_ easier, if they're explict as DOM elements,
rather than implicit by grouping. Doing it by plain sequence works for
trivial HTML, but it's ugly for semantic web data access and it's also
awkward for more soophisticated use of CSS (particularly if you wish
to float list items as individuals).

* Use <ul><li> rather than <div><div>  The difference is trivial and
you can and should still apply classes to them. The difference
externally is that "HTML semantics aware" clients can recognise that
you've offered a list of elements, rather than _only_ specific clients
that understand your use of class names being able to do this.

* Avoid <dt><dd>  They rely on sequence for their semantics, not
containment. That's a pain to work with.

* Avoid  markup like this <h2>Article title<span>Update at 20-10-2009</

The problem is that that's "mixed content model" markup -
understanding the semantics of some of this text ("Article title")
requires you to identify it from being _outside_ a particular element
(or sometimes a sibling), rather than purely from the elements that
it's inside. That's a real pain to make use of, but easy to avoid.

Similarly for your main item body content - give it an individual and
distinguishable wrapper.

Use this:
 <h2><span class="title" >Article title</span><span class="date"
Quoted text here. Click to load it

Or even better,
 <h2><div class="title" >Article title</div><div class="date" >Update
at 20-10-2009</div></h2>
 <h2 class="title" >Article title</h2><div class="date" >Update at

Use XHTML markup, not HTML
For a long time, there has been no point in publishing XHTML to the
web, as IE couldn't handle it and it was easier to support IE by
offering it HTML than by offering the Appendix C "XHTML as HTML" hack
that IE does support. This is still true: XHTML is valuable inside
CMS, but more trouble for web publishing.

However the ground rules are now changing, and it's because of the
desire to support web service clients that are looking to retrieve
your content and make intelligent use of it. These are the community
that make it worthwhile to offer XHTML content (as it's easily XML
parseable) rather than HTML.

Note though that XHTML not only should be well-formed XML, but that to
be useful it MUST be well-formed XML.  The old days of careless HTML
coding should be left behind.

You should also start looking at data model and metadata approaches
from tools like RDF, RDFa and Dublin Core.

Site Timeline