How do I make my weblog code semantically correct?

July 8, 2004 5:00 AM

Semantically correct code in a weblog: what happens when your focus is on posts' titles (rather than on posts' timestamps) with regards to headers (h1, h2) classes? [more inside]

(My first attempt at going with semantically correct code, I don't know if what I'm thinking makes perfect sense.)

Here's my question: a post's timestamp is higher in the hierarchy than a post's title, because the flow goes like: "year,month,day->posts in that day" (am I right on that one?).

So, you would assign h1 to the date, and h2 to the title.

What happens if you want the posts' titles to be of greater visibility than their respective dates (imagine a post title in big bold letters, and the date underneath in small letters)?

Do you still assign h1 to the date, and h2 to the post, and just set h2's font size to be bigger than h1's, or you go the other way (assign h1 to the post title, and h2 to the date)?

Does this question make sense? Am I worrying for nothing?

posted by kchristidis to computers & internet (7 comments total)

Um... it depends.
Do you consider the date to be more important than the title? Then that get's a higher hx. Some consider the timestamp to be more of a metadata issue and give it lower priority. What I often see on well-coded blogs is a hierarchy along these lines:

h1 - site name
h2 - site tagline
h3 - navigation
h4 - post title
h5 - post timestamp
h6 - $foo

Think about how you would like it to be presented if it were plain text; that might get you more clear on the architecture before you tackle the design.
posted by mimi at 5:28 AM on July 8, 2004

h7 - ???
h8 - PROFIT!

I'm sorry - it was just *begging* to be done.
posted by davidmsc at 6:03 AM on July 8, 2004

Ah, the fuzzy world of semantics.

I understand what you're thinking, kchristidis—because the posts are ordered chronologically, the timestamp can be semantically significant, and if so, should be in a higher-order header. Movable Type's default templates work in this way; entries are separated by date, so the headers look like this:

h1: blog title
h2: date
h3: entry title

Now, understand that this is all about interpretation. The wonderful thing about semantic coding is that you can place the importance where you want it. If you want to place more emphasis on the post content, and treat the date more as metadata rather than in the context of content, you're perfectly free to. Semantic design usually relates directly to visual design: if you don't want the post's date in 16pt letters at the top of the page, chances are it's not as significant semantically to you.

For instance, on one of my sites, my headers look like:

h1: blog title
h2: section title (if applicable)
h3: entry title

with the date entered as (pseudo-) metadata at the bottom of each entry (its span wrapper indicates that it's a timestamp). I think this is what you're trying to do, and I say go for it. Just because it's ordered chronologically doesn't mean that the date has to hold a high-ordered semantic specification.
posted by DrJohnEvans at 6:38 AM on July 8, 2004

I avoid the problem by tagging the fields by name in an XML file, then transform them into HTML using XSLT.
posted by smackfu at 6:41 AM on July 8, 2004

I came to post a related question (kinda) but it's close enough maybe I can piggyback on this one.

In terms of structuring a weblog and the correct use of headings I mentioned that using the h tags properly could help with Google. When asked for evidence of this, it dawned on me that I didn't have any. At least any that wasn't anecdotal or buried in the archives of a mailing list or forum someplace. Can anyone point me to a more definitive source?

BTW, I think mimi nailed this one. The headings should be logical and in descending order of importance, it's entirely up to you what you want to give priority to. Myself, I think it's futile to change the relative sizes of the h tags with CSS. If you want h3 bigger than h2 -- your giving more weight to the h3 -- so you may as well use h2 in the first place.
posted by cedar at 8:14 AM on July 8, 2004

I organize my main blog's front page as
h1 = blog title
h2 = date
h3 = entry title.

Though I'm thinking of redoing that as
h1 = blog title
h2 = blog section / sidebar section
h3 = date
h4 = entry title

Single-entry archive pages, where the date is less important, are marked up differently.

I don't consider things like post time, tagline, etc, as header-worthy objects.

You can visually format this stuff however you want. If you want the dates to be tiny, that's fine. But if the entries are organized by date then you should reflect that in your markup, semantically speaking. Write an outline of how you want your blog to be logically organized, and use that as your guide.
posted by adamrice at 9:06 AM on July 8, 2004

Excellent replies, y'all!

I'm gonna use a bigger header for the post titles, and a smaller one for the post dates.

Thank you for your help!
posted by kchristidis at 3:05 PM on July 8, 2004