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_cont ent}
</div>
<div class="details" >
<div class="posted_b y">
Posted by
<span class="name">{$ entries[i].name}</span>
</div>
<div class="posted_d ate">
on
<span class="time_dat e">{$entries[i].time|date_form at:"%H:%M
%A, %B %e, %Y"}</span>
</div>
<div class="posted_l ocation">
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_entri es 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_cont ent}
</div>
<div class="details" >
<div class="posted_b y">
Posted by
<span class="name">{$ entries[i].name}</span>
</div>
<div class="posted_d ate">
on
<span class="time_dat e">{$entries[i].time|date_form at:"%H:%M
%A, %B %e, %Y"}</span>
</div>
<div class="posted_l ocation">
Location: <span
class="location ">{$entries[i].location}</span>
</div>
</div>
</div>
{/section}
</div>

[Chris Morris]

ge************* **@alphaworks.c o.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_cont ent}
</div>
Presumably processed_conte nt contains <p> markup, etc.
<div class="details" >
<div class="posted_b y">
Posted by
<span class="name">{$ entries[i].name}</span>
</div>
<div class="posted_d ate">
on
<span class="time_dat e">{$entries[i].time|date_form at:"%H:%M
%A, %B %e, %Y"}</span>
</div>
<div class="posted_l ocation">
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