Markup Missive
In a previous post on heading levels, I used some of meyerweb’s markup as an example. In that markup, an apparently useless <b> element appeared. Here’s the markup:
<h4 class="title"><a href="…” title="…">entry title</a></h4> <h5 class="meta"><b>entry date</b></h5>
In that post, I also said:
And yes, there are b elements in my markup, and I’m doing that on purpose. I’ll talk about it some other time.
So now it’s time.
The boldface element is actually a holdover from the previous designs of meyerweb. You can still mess with them on the theme example page, if you like. The original idea was to provide an inline element as a hook on which I could hang some styles. For example, if I wanted to put the date in a box that exactly surrounded the date’s text, but no more than that, I’d need an inline box. Therefore, I could either style the <h5> element to generate an inline box, or I could have an inline element there for styling purposes.
In the first case (inlining the h5), I’d lose the block box that the element generates by default, thanks to the browser’s built-in HTML styling. That might be okay in some cases, but more often than not it would be a problem. Inline boxes accept a limited set of properties, and putting an inline box between two block boxes is generally a recipe for funkiness. So that left me with the second case, that of adding an inline element. As an added bonus, doing so gave me two elements (h5 and b) to style, if I wanted them both.
Here’s the CSS that applies to the date headings and their boldface elements:
#thoughts h5 {font-size: 1em; line-height: 1em;
margin: 0 0 0.5em; padding: 0; color: #CCC;}
#thoughts h5 b {font-weight: normal; font-size: 0.9em;}
Although I’m not doing much with the b element, style-wise, what I’m doing is useful. First, there’s making sure the font weight is normal, and not bold. All right, that’s not really useful. Second, the boldface element is used to reduce the size of the date’s font by a small amount. I use the b element to reduce the size of the font because that leaves the element box of the h5 alone. In other words, its text box is not reduced, which means it’s consistent with the text around it. If I ever go back to a design where the date and title are “on the same line” and lined up with each other, as was the case in many of the old designs, I won’t have to do weird fractional math just to make it happen.
Of course, in the current design, that isn’t an issue. So in a sense, the b element is sort of a vestige from an earlier stage in the site’s evolution, like a markup appendix. The only difference here is that the b element might become useful again, whereas I don’t think the appendix has much chance of a comeback.
The other expected question is why, if all I wanted was an inline element as a styling hook, I used a b instead of a span. Simple: the element name is three letters shorter, so for every hook, I’m saving six characters. If there are, say, twenty such hooks on a page, that saves me 120 characters. It’s a small consideration, but by such incremental savings are document weights reduced. “What about semantic purity?” you may ask. In my view, b and span have the same semantic value, which is to say basically none. They’re both purely presentational elements, with the difference that span doesn’t have any expected presentational effects in HTML. So I used the presentational hook that made the most sense to me: b.
If my goal was to emphasize the date, then I’d have used em or strong, but it wasn’t. I just needed a hook, at least once upon a time, and that was the element I chose as my hook.
And now you have the rest of the story.
