Review HTML for ease of use with CSS

[Geoff Soper]

I've just written some HTML to be used with CSS and would like some
opinions on if it's any good. I was aiming for the content to be
easily accessible from CSS, bearing in mind the HTML will have
multiple stylesheets applied to it by other people. I want the HTML to
allow the style to be as flexible as possible. It's meant to show
journal entries in a blog style. The code inside the braces is
template engine (Smarty) code and will be processed before serving, I
left it in to make it clearer (I hope!). I'm not too confident on my
choice of divs and spans.

Thanks,
Geoff

HTML:

<div class="journal_entries">
{section name=i loop=$entries}
<div class="journal_entry">
<div class="title">
{$entries[i].title}
</div>
<div class="content">
{$entries[i].processed_content}
</div>
<div class="details">
<div class="posted_by">
Posted by
<span class="name">{$entries[i].name}</span>
</div>
<div class="posted_date">
on
<span class="time_date">{$entries[i].time|date_format:"%H:%M
%A, %B %e, %Y"}</span>
</div>
<div class="posted_location">
Location: <span
class="location">{$entries[i].location}</span>
</div>
</div>
</div>
{/section}
</div>

[Neal]

On 16 Jul 2004 07:11:42 -0700, Geoff Soper
<ge***************@alphaworks.co.uk> wrote:

I've just written some HTML to be used with CSS and would like some
opinions on if it's any good. I was aiming for the content to be
easily accessible from CSS, bearing in mind the HTML will have
multiple stylesheets applied to it by other people. I want the HTML to
allow the style to be as flexible as possible. It's meant to show
journal entries in a blog style. The code inside the braces is
template engine (Smarty) code and will be processed before serving, I
left it in to make it clearer (I hope!). I'm not too confident on my
choice of divs and spans.

Thanks,
Geoff
Why not change

<div class="title">{$entries[i].title}</div>

to

<h3>{$entries[i].title}</h3>

? (or whatever level of heading applies within the context of the page)

The selector in the CSS for the above would be

..journal_entries h3 {}

as it's going to be the only h3 within that div, right?
HTML:

<div class="journal_entries">
{section name=i loop=$entries}
<div class="journal_entry">
<div class="title">
{$entries[i].title}
</div>
<div class="content">
{$entries[i].processed_content}
</div>
<div class="details">
<div class="posted_by">
Posted by
<span class="name">{$entries[i].name}</span>
</div>
<div class="posted_date">
on
<span class="time_date">{$entries[i].time|date_format:"%H:%M
%A, %B %e, %Y"}</span>
</div>
<div class="posted_location">
Location: <span
class="location">{$entries[i].location}</span>
</div>
</div>
</div>
{/section}
</div>

[Chris Morris]

ge***************@alphaworks.co.uk (Geoff Soper) writes:

I've just written some HTML to be used with CSS and would like some
opinions on if it's any good. I was aiming for the content to be

HTML:

<div class="title">
{$entries[i].title}
</div>
This should probably be a <hX> element. X is between 2 and 6
inclusive, depending on the page it's been put on.
<div class="content">
{$entries[i].processed_content}
</div>
Presumably processed_content contains <p> markup, etc.
<div class="details">
<div class="posted_by">
Posted by
<span class="name">{$entries[i].name}</span>
</div>
<div class="posted_date">
on
<span class="time_date">{$entries[i].time|date_format:"%H:%M
%A, %B %e, %Y"}</span>
</div>
<div class="posted_location">
Location: <span
class="location">{$entries[i].location}</span>
</div>
</div>

Probably all of posted_by, posted_date and posted_location should be
span, not div. People can set display:block; on them in the
stylesheet, if they want.

--
Chris