Much more emphasis

Sunday 17th January

More fun playing with semantics.

For some reason, this post has proved infuriatingly tricky to write up. As far as I can tell, the reason for that is merely the simplicity of the point I’m trying to make, so without further-ado, I’ll just get on to the summary:

The em element can be nested

This might not seem like earth-shattering news, but I think it’s worthwhile being aware of for two simple reasons:

  1. You probably weren’t aware of it before, probably because you’re not used to nesting inline elements at all
  2. It raises some interesting semantic questions

Previously, I’d just assumed that nested em elements were invalid. I realised they weren’t whilst thinking about the relationship between strong and em elements. The spec is not exactly detailed in this regard:

How much stronger is strong then em? Who knows. Maybe that’s not even important. But where do you go after strong, when you need just that little bit more emphasis?

I really, really, really want stronger emphasis!

In that example, there’s no element available with which to style the third ‘really’, at least, not in a clean, semantic way. Sure, a span with a meaningful class name could be used but, rather than resorting to that, how about we just use a number of nested ems?

I <em>really</em>, <em><em>really</em></em>,
<em><em><em>really</em></em></em> want stronger emphasis!

OK, so it’s not exactly pretty, but neither are many examples of inline elements currently in use. And a decent syntax-highlighting text-editor will make that much more palatable. And it’s now much easier to style various levels of emphasis:

em          { font-style: italic; }
em em       { font-style: normal; font-weight: bold; }
em em em    { font-style: italic; }

resulting in:

I really, really, really want stronger emphasis!

I genuinely think this is a perfectly valid and acceptable method of indicating emphasis, one that could certainly be required in some circumstances. I’d almost go so far as to wonder why strong was ever deemed necessary in the first place. Almost.

Is this going to set the world on fire? No. Am I suggesting you ditch all your strong elements in favour of nested ems? Hardly. But I think it is worth pointing out that, when it comes to the semantics of markup languages, it often pays to think about things from a different angle. And, if you don’t see that, just wait until HTML5 comes along …

Comments

Leave a comment