Emphasis with <i> and <em>

  • Author
  • #495897


    I am bit surprised that WordPress 3.0 is still confusing <em> with <i> in its styling toolbar. Am I wrong to think that they should be kept separate? For instance, I do not believe <em>Blade Runner</em> to be the correct markup for citing a movie title.

    I seem to remember Joe Clark or Mark Pilgrim making that point long ago, but am asking today because the team at Web Style Guide seems to say that italics should always be done through semantic emphasis, even for conventional usage like movies and book titles.

    I could not find any information on the support boards, except for the related thread that explains very well why embedded emphasis is not a correct practice—but that does not answer the question above.


    I think that if the WP toolbar included 150 buttons, then it might be nice to have both i and em. But with such a limited toolbar, including both would probably be an unnecessary luxury or complication. I believe it’s a matter of conscious decision rather than “confusion”, because em is generally preferable: it allows you to distinguish emphasis from other tags that might also produce italics (e.g. the cite tag), it allows you to style the text in a different way if you wish (by defining what em should stand for in your CSS), and it renders in speech browsers while i doesn’t.



    Perhaps I was not clear enough in my objection. I do not think WP should add anything to its toolbar. I am more simply puzzled by the fact that clicking the [i] button inserts a piece of [em] HTML code. I believed the distinction to be meaningful, but the WP toolbar seems to imply otherwise.

    As for speech browsers, the reason why [i] is not rendered is because italics do not require any specific intonation when read aloud. In the Blade Runner example, there is no stress on any words; the italicizing is purely conventional, as opposed to semantically significant.

    Finally, I am unsure that [em] is generally preferable. Do you mean that it is so because it applies more often than [i]? I am actually quite sure that I use more conventional italicizing than semantic emphasizing, because I cite a lot of things.


    Everyone is moving away from “i” and “b” because of multiple reasons, but a big part of that shift is due to accessibility.

    Also, few here on wordpress.COM would even know what “em” or “strong” meant if they replaced I and B in the toolbar because they are not familiar with HTML for the most part. It all goes to the fact that that is what people understand and are used to seeing starting back around the time of the first Mac’s and first version of Windows.

    This isn’t unique to wordpress either. Drupal does the same thing, Joomla does the same thing, as do the blog client software packages such as Windows Live Writer, BlogDesk, Ecto, etc. The main online editors used virtually everywhere do the same thing (TinyMCE and FCKEditor).

    It’s the same at blogspot, livejournal and with typepad. If you put em and strong on the toolbar, 90% of the people out there would not have any idea what they meant.



    The visual editor display is not HTML based. It is Word Processor based for accessibility reasons, and as such needs to keep the same buttons or risk confusing those for whom the world of code is a mystery, which is the majority of bloggers nowadays.


    @phnk: Your objection was quite clear. What I meant is that with such a limited toolbar one option for italics is enough, and em is a better choice than i. The i is retained in the button, however, so as not to confuse the average user, as tsp and rain already said.

    You’re right about the Blade Runner example, but your posts aren’t necessarily the norm: in my posts, for instance, italics almost always mean emphasis. Apart from that, your Blade Runner example actually speaks in favor of a cite button, not an i button.


    I expect as the years roll on, you are going to see I and B tags disappear in favor of the em and strong tags since inline CSS is being used more and more for content formatting (likely depreciated in the next iteration of the XHTML standards).

    B and I tags here are automatically converted to em and strong tags as I remember. About the only place that leave them alone is blogger/blogspot and they are so far out of compliance with web standards that they are almost a joke in my opinion.



    The Fjords04 theme, distinguishes between tags
    <i> and <em>
    There is a little trouble with long posts where these tags appear often. :-(

The topic ‘Emphasis with <i> and <em>’ is closed to new replies.