I’ve been musing on how to markup blog post updates more semantically since back when Jason added the following note to one of his posts:

That was the first time I recall seeing CSS used to differentiate an update from the body of the post, aside from Boing Boing‘s unsemantic and deprecated (though effective) use of:

<font color="red">Update:</font>

However, I can’t say that I do much better. I simply precede my updates with:

<strong>Update</strong>:

As an aside: I’ve always been meaning to ask, should the colon after “Update” be inside the </strong> end tag or outside? I feel like semantically, I’m only strengthening the word “Update”, while the colon is just syntactic decoration. But, stylistically, I imagine a typographer might tell me the colon should be emboldened. Any typographers in da house?

Jason used a technique that I liked much better. He marked up his updated paragraph with <p class="alert"> because his WordPress theme, K2, came with the alert class already defined and styled as:

.alert {
    background: #FFF6BF;
    border-top: 2px solid #FFD324;
    border-bottom: 2px solid #FFD324;
    text-align: center;
    margin: 10px auto;
    padding: 5px 20px;
}

Meanwhile I’ve been playing with the <del> tag, the semantic equivalent to the deprecated <s> and <strike> tags. Well <del>‘s underused analog is <ins>, intended for marking up inserted text. Sounds like the perfect tag to surround an update—except there’s one problem. <ins> is an inline tag, which means you can’t put block-level elements (like a paragraph or two) inside it. It’s really intended for small insertions of text within another block-level paragraph. But unlike the never-used <q> tag’s famous block-level sibling, the <blockquote>, <ins> has no such block-level brutha. Which is probably why the folks behind K2 created an alert class—one that could be used in both block-level and inline elements…

But wait, we’ve still got a semantic inline element dedicated to the task! So I decided to name my class ins (for use with block-level elements) and thus defined my CSS accordingly:

/* give them both something in common, 
in this case a yellowish background color */
.ins, ins {
    background-color:#edee98;
}

/* give the class a little bit of padding */
.ins {
    padding:1px 4px;
}

/* override the browser default 
to underline <ins>erted text */
ins {
    text-decoration:none; 
}

Here’s an example:

Update: This is actually not an update.

And here’s an inline example.

The only catch is that in WordPress it means you have to manually markup your updated paragraph, e.g.

<p class="ins"><strong>Update:</strong> This is actually not an update.</p>

Future possibilities: setting up The Fade Anything Technique to melt away the background color.