Semantic HTML5 as She is Wrote: An Exploration of i, em, b, and strong

Close up of the name "Adonia" on the side of a ship
  • Sumo
This is a guest post from Simon Collinson (@Simon_Collinson), a digital editor at Canelo Digital Publishing, where he corrects all the OCR.

‘If you wish to make apple pie from scratch, you must first create the universe.’ — Carl Sagan

Accessibility is all about the details, and one of the longest-running discussions in the ebook production world is about when to use <i>, <em>, <b>, and <strong>. This is an old chestnut, but one worth revisiting every so often as our tools gradually become more sophisticated and HTML5 becomes more embedded in our work.

As far as the basic definitions go, I can’t do much better than SketchyTech’s overview from a few years ago. He identifies four common situations in which italics bear different semantics:

  1. to identify a book title: use <cite>
  2. to identify a foreign word: use <i>
  3. in place of quotation marks to identify a keyword: use <i>
  4. to identify that the word should be stressed when pronounced: use <em>

to which I would add other typographic practices like setting ships’ names with <i>.

It’s slightly less complex with <b> and <strong>: <b> is reserved for text ‘to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood,’ while <strong> indicates increased ‘importance, seriousness, or urgency.’ The IDPF’s guidance is also useful here.

Although I’ve never actually seen it employed in the wild, the spec definitions for both <em> and <strong> permit nesting for increased emphasis/strength. The fact that this feature is rarely used shows just how much we still think of italics and bolding as presentational rather than semantic, even after accessibility training.

But I’m not here to lecture you on how your markup needs to be 100% semantic, because nobody’s perfect, and I’m more interested in how we can make meaningful improvements with the tools we’re already using – which can involve a surprising amount of reinventing the universe, as Carl Sagan put it. First, however, a detour into the history of italic type, and why it has so many overlapping usages.

The History of Italic Type

Robert Bringhurst’s The Elements of Typographic Style gives a great overview of italic type’s gradual accumulation of semantic meaning:

Italic and roman lived quite separate lives until the middle of the sixteenth century. Before that date, books were set in either roman or italic, but not in both. In the late Renaissance, typographers began to use the two for different features in the same book. Typically, roman was used for the main text and italic for the preface, headnotes, sidenotes and for verse or block quotations. The custom of combining italic and roman in the same line, using italic to emphasize individual words and mark specific classes of information, developed in the sixteenth century and flowered in the seventeenth. Baroque typographers liked the extra activity this mixing of fonts gave to the page, and the convention proved so useful to editors and authors that no subsequent change of typographic taste has ever driven it entirely away. Modulation between roman and italic is now a basic and routine typographic technique, much the same as modulation in music between major and minor keys.

In other words, for hundreds of years italics were just about the only way of conveying semantic information within printed text, so of course they became overburdened.

(By the way: if you don’t yet own a copy of The Elements of Typographic Style, do yourself a favour and go buy one right now.)

Of course, typesetters and ebook developers can now convey meaning in ways our predecessors could never have imagined – but we do it bearing the weight of five hundred years of typographic practice.

In the Wild

So here’s an example of a book I’ve recently set in InDesign – Abandon, by Sangeeta Bandyopadhyay, forthcoming from Tilted Axis Press – which displays three of the four semantic purposes of italics identified above: citations, foreign words, and emphasis.

InDesign’s ‘edit all export tags’ dialog should be familiar to us all (see this EPUB Secrets post on HTML 5, as well). But until I experimented with it for this article, I have to admit that I’d assumed the defaults – <em>, <strong>, and <span> were the only possible options:

"The default InDesign export tag options for character styles

You can type anything in those boxes – there’s no validation whatsoever – which previously led me to assume I couldn’t go beyond the default tags. So here’s what my export tags looked like before I started playing around:

The edit all export tags dialog as it looks for most people, with no custom tags

Taking the advice above in mind, I went back and retagged the text with a few new character styles targeting specific uses of italics:

Export tag options with better semantics

and voila! Here’s what came out when I exported my epub:

…A malevolent, repressive, unpalatable novel. It begins to answer the question, <em class="emphasis">what is the meaning of life?</em> … What answer can I give? I am about to say, <i class="italic">Why did you come away like this with me? All I wanted was a glimpse of you.</i>

Not bad. But what about the foreign words? Well, the HTML5 spec recommends that language attributes be embedded in italics where they identify a foreign word or phrase. Where you define a language at the character style level, the lang attribute is exported correctly by InDesign, using both HTML and XML namespaces:

<p class="normal-indent">‘I have a stove, you can use it,’ said Gourohori, using the informal <i class="bengali" lang="bn-IN" xml:lang="bn-IN">tumi</i> with her for the first time.</p>

Unfortunately, InDesign’s language definition is primarily intended for assisting spell-checking, so the list is limited to those languages for which dictionaries are available – there is no Korean support, for example:

InDesign's language definition options

Regardless of these limitations, if you’re using an InDesign-based workflow, I’d bet you could benefit from spending a few minutes tweaking your character styles to permit greater semantic flexibility.

Beyond InDesign

So what about those lucky souls who live in an InDesign-free world – much like the Markdown-light workflow recently promoted by @bbirdiman, Dave Cramer’s HTML-first system at Hachette, or our Markdown-based workflow at Canelo?

Our code is beautifully clean and simple – no div soup! – but Markdown- and HTML-first processes come with their own set of challenges. Markdown syntax only recognises one style of italic, and it’s universally compiled as <em> rather than <i>. The same is true of bolding. Because I wrote this article in Markdown, I had to embed <cite> tags in the Markdown for the book titles given above – not ideal. Some web developers argue Markdown is a poor choice for writing technical documentation for precisely this reason.

Of course, the entire appeal of Markdown-based workflows is their simplicity: we are something of a masochistic bunch here in the #eprdctn world, but I refuse to believe that anybody wants to write XML by hand or crack open every EPUB they make to manually change a bunch of tags. At Canelo, our brilliant CMS – Atavist – exports clean, semantic EPUBs with minimal human intervention. We need it to be this way, because we produce ten to fifteen books every month: I just don’t have time to assess and tag every single use of italics.

The trick, of course, is negotiating who makes the judgment calls. If, like most publishers, you use freelance proofreaders or copyeditors, you probably face an uphill battle to get everyone using paragraph styles, never mind assessing and tagging deeper semantics. Even more frustrating, there’s really no way to define export tags within Word that makes it easy for authors, editors, copyeditors, or proofreaders: conversion tools like pandoc will strip out all style names and render everything as <em>s. If you export HTML directly from Word, you’ll retain the style names, for possible regex targeting later, but you’ll still get spans rather than real tags – and you’ll still have to strip out all the usual Word cruft:

<p class=MsoNormal>A <span class=bengali><span lang=NL>foreign language phrase</span></span><span
lang=NL> </span></p>

<p class=MsoNormal>An <span class=emphasis>emphasised</span> word</p>

<p class=MsoNormal><span class=Presentationalitalic>A longer passage in italics
for presentational reasons.<o:p></o:p></span></p>

Shudder.

But it’s still worthwhile pushing these editorial judgment calls back up the chain wherever possible, and editors and authors will ultimately appreciate having this extra control over their work. Ultimately.

Conclusions

This has been more of an experiment than a how-to, but hopefully these conclusions/recommendations spur some thinking:

  1. Start using character styles in Word, and if possible, train your copyeditors to identify and tag the different semantics behind italic text.
  2. Rework your InDesign styles so the default export tagging is to <i> and <b> rather than <em> and <strong>. Arguably, presentational italics and bolding are more common in most texts than emphasis and stress, although I know some people prefer to run the risk of over-emphasising than under-emphasising. (Adobe, if you’re listening, please consider switching the defaults!)
  3. Don’t beat yourself up if you can’t decide between <i> and <em> from time to time: sometimes there is no right or wrong answer, and as long as you’re using other accessibility features (like epub:type or ARIA roles) you’re doing better than the vast majority of publishers.

I’d love to hear your thoughts on this subject, and any other info on how you’ve tweaked your workflows to improve accessibility.

 

13 Responses to “Semantic HTML5 as She is Wrote: An Exploration of i, em, b, and strong”

  1. […] Semantic HTML5 as She is Wrote: An Exploration of i, em, b, and strong – EPUBSecrets […]

  2. bowerbird says:

    light-markup is flexible. that’s one of its major strengths.

    markdown lets you use .html coding, so go ahead and use .html itself to tag anything the way you want.

    z.m.l. gives you the power to create your own markers, to which you can assign any tag you like to them.

  3. Hi there friends, good post and nice arguments commented here,I am actually enjoying by
    these.

  4. Good respond in return of this query with genuine arguments and explaining everything regarding that.

  5. papaqq99 says:

    Quality articles is the main to invite the users to pay a quick visit the
    web site, that’s what this web site is providing.

  6. […] emphasis, bold and strong which map them to the correct HTML. If the distinction is confusing, this EPUB Secrets blog post will help […]

  7. apply says:

    If you want to improve your knowledge only keep visiting this site and be updated with the
    newest information posted here.

  8. This paragraph offers clear idea in favor of the new
    viewers of blogging, that really how to do running a blog.

  9. flooring says:

    I do consider all the concepts you’ve introduced
    on your post. They are very convincing and will definitely work.
    Nonetheless, the posts are too quick for beginners.
    Could you please lengthen them a bit from subsequent time?
    Thanks for the post.

  10. Zonaslot.com says:

    wonderful issues altogether, you simply gained a logo new reader.

    What may you suggest in regards to your publish that you simply
    made some days in the past? Any certain?

  11. Jareth says:

    Too much trouble — and for what effect? The HTML format is over-engineered already, no need to indulge it.

  12. Augustus says:

    I do not know whether it’s just me or if everybody else experiencing issues
    with your blog. It appears as if some of the text within your posts are running off the screen. Can somebody else please provide feedback
    and let me know if this is happening to them too?
    This might be a problem with my internet browser because I’ve had this happen before.
    Thanks

  13. For anyone who like to enjoy gambling and if you usually are looking
    for partners in gambling activities, Mabosbet will be the right choice.
    Mabosbetransfer You can contact our customer support and make purchases with us.
    Mabosbet livechat is available 24 hours nonstop and is all set to serve you and help you
    online with wagering.

    Mabosbet. com as a responsible gambling agent,
    we always provide an alternate link to mabosbet to ensure
    members feel comfortable. You no longer require to have trouble
    finding an alternative solution Jababbet link regarding
    access, it is already available for you.

    All of us also always give concern to the safety associated with our members,
    very strict protecting each of the privacy regarding members of Jababbet.

    Trusted Mabosbet From 2010

    Along with good praise, the service from the Headquarters will be no doubt.
    Friendly, fast response, under 3 mins.

    Mabosbet is highly highly valued by gambling bettors through Indonesia because whatever victory you get is going
    to be recognized by mabosvip. We usually want to
    provide the great for members with highest service. The site
    mabosmail. com is additionally very an easy task to access, when you only require internet
    access and alternate links mabosvip, no need to use proxies, newsletters, or troublesome applications.

    Of which is why many individuals join mabosbola and make deposits, then, win typically the match.
    The best in addition to quality alternative mabosbola
    option site.

    Come join mabosbet. com the trusted on the internet gambling agent in Philippines.

    Contact livechat mabosbet now in the lower right corner to get the user ID.
    Welcome to the club.

    MABOSBET will be a Trusted Online Wagering Site that has already been established for more than 9 years with typically the most
    significant amount of online wagering players. This gambling
    internet site also provides the most satisfactory online gambling game with the
    most popular gambling providers in Indonesia. On the internet Gambling Games
    that can be played at MABOSBET are Sportsbook Soccer Betting,
    Live Casino, On-line poker Card Gambling, Online Slot Betting and Online Togel.
    Mabosbet itself has provided a variety of excellent facilities for gambling
    online players in Indonesia ranging from 24-hour Live Chat Support, Bonuses with the easiest conditions, additional wins for True Gambling Players.

    This MABOSBET Gambling Site likewise proves to become very trusted,
    while this Gambling Site can also pay for any winning player with no deductions.
    So you will certainly play gambling comfortably plus safely
    without fear of spending. In addition to a definite
    win at MABOSBET, you will also provide additional bonuses to
    supply a different experience actively playing online gambling.

    JOBI GOLF BALL OFFICIAL SBOBET ONLINE IN INDONESIA
    Online Soccer Betting has become a very popular gambling
    online game inside Indonesia where every sport has a market for betting.
    MABOSBET is becoming an official partner of BOLA TANGKAS Indonesia, where more as compared to
    a decade has provided football gambling games for wagering players in Indonesia.
    This specific SBOBET Soccer Gambling Industry allows a good where gamers will actually be provided the live market from the established match directly.
    Which means you may be very lucky to play SBOBET in this particular MABOSBET.

    RELIABLE ONLINE SLOT SITE SITE WITH MANY PROFITS
    Online slot gambling is currently popular in Indonesia, where
    online slots are incredibly lucrative with huge jackpots and freespins that usually are straightforward to win. Because
    regarding that this MABOSBET first provided Online
    Slot Video games from 2012 for betting players in Indonesia.
    Where Jackpot is provided more than USD $ one, 000, 000 for slot machine players who register
    in MABOSBET. The Slot Game machine at MABOSBET won’t just use your Equilibrium, the
    Slot Game has been designed with the FREESPIN Bonus that comes out there more often, so an individual will be
    Fortunately.

Leave a Reply

Your email address will not be published. Required fields are marked *