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>

On 16 Jul 2004 07:11:42 -0700, Geoff Soper
<geoff.google.news@alphaworks.co.uk> wrote:
[color=blue]
> 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[/color]

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?
[color=blue]
> 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>[/color]

geoff.google.news@alphaworks.co.uk (Geoff Soper) writes:[color=blue]
> 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>[/color]

This should probably be a <hX> element. X is between 2 and 6
inclusive, depending on the page it's been put on.
[color=blue]
> <div class="content">
> {$entries[i].processed_content}
> </div>[/color]

Presumably processed_content contains <p> markup, etc.
[color=blue]
> <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>[/color]

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