List Markup

[shapper]

Hello,

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>
<div id="Article2" class="Article">
<h2>Article title<span>Update at 22-10-2009</span></h2>
<img src="images/Article2.jpg"/>
Article Content
</div>
</div>

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
20-10-2009</span></a></h2>
</div>
...
</div>

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

And maybe I should use a list instead of divs?

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

Thank You,
Miguel

 

[Adrienne Boswell]

Gazing into my crystal ball I observed shapper <[email protected]>
writing in (e-mail address removed):

Hello,

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>
<div id="Article2" class="Article">
<h2>Article title<span>Update at 22-10-2009</span></h2>
<img src="images/Article2.jpg"/>
Article Content
</div>
</div>

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">
<p>...</p>
<h2 id="article2">Article Title ...</h2>
.....

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
20-10-2009</span></a></h2>
</div>
...
</div>

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).

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

And maybe I should use a list instead of divs?

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

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

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

 

[shapper]

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">
<p>...</p>
<h2 id="article2">Article Title ...</h2>
....

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="article1">Article Title ...</h2>
<p>Update At ... </p>

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

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.

 

[Doug Miller]

Hello,

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.

Do your own homework, Miguel.

<signed>

Your professor

 

[Adrienne Boswell]

Gazing into my crystal ball I observed shapper <[email protected]>
writing in (e-mail address removed):

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 {...}

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.

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:

When I was making the "pretend" markup, notice the ... that was where
your span might go. I am doing something similar on
[http://silverlakereservoirs.org/news.php].

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.

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> ?

 

[Andy Dingley]

Hello,

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.

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</
span></h2>

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:

Update at 20-10-2009</span></h2>

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


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.