Default CategoryMar 07, 2016

Emphasis Versus Italics and Other HTML Tag Battles

Jeph Kryzak

I’ve been writing HTML for approximately 19 years. This means a few things: 1) I’m getting old. 2) I’m well versed in it. And 3) I’m still learning. Compared to other technologies such as CSS, HTML hasn’t changed that drastically. Some tags have been added to accommodate broader features, and a few tags are generally no longer supported (RIP <blink>). In my tenure of using this “language” I have come across some quirks that leave me with one major question:

If the output of HTML tags are visually identical, does it matter which one I use?

Short answer: Yes. Tags (and classes for that matter) aren’t about what content looks like; they’re about what it is.

Emphasis versus Italics ­ <em> vs <i>

If words are emphasized, as if being pronounced with emphasis, use <em>.

I am really hungry.

Italics are predominantly used with titles such as books, magazines, newspapers (dependent upon your style guide).

Ponyboy from The Outsiders knew what it meant to stay gold…

You could create specific classes for books, magazines, and newspapers, then prescribe the {font-style: italic} declaration to said classes. But I feel like that’s using stylesheets for formatting, and I’m a strong believer in stylesheets being used exclusively for design/style and layout only—not for formatting. HTML is for markup, CSS is for design. Unless you’re addressing a CSS reset, the only time the font-style property should be used is if it’s a design decision to italicize specific text.

Strong versus Bold – <strong> vs <b>

Use strong. I haven’t discovered where <b> is entirely all that beneficial, and it’s seldom used these days. One could make the argument it’s less bytes, but how often is <strong> repeatedly used that it’s a burden on a page’s weight compared to <b>? The W3C states <b> is used for “stylistically offset” text, which to me sounds like the work of a span plus a class combo. Strong makes sense in virtually all cases, as it’s used to show stronger emphasis on text.

If ever you wish to convey great anger, don’t use ALL CAPS; use <strong><em>strong emphasis</em></strong>. It’s the technically accurate way to be angry.

Link versus button – <a> vs <button>

Links are good for text, buttons are good for functions within forms.

If it’s just text, use a link. If the purpose is to link to a URL, also use a link. If the URL is linking to a function rather than a URL, consider a button, though a link is still acceptable. When deciding between either the link or the button when either will suffice, I lean toward links. Links are easier to style, whereas buttons tend to require un-styling. Also, different browsers have various defaults on how they present a button, so addressing those inconsistencies makes using a button more labor intensive.

If the purpose is a form submission, use a button or an input with a type of “submit”. One of the benefits of this is that it allows you to hit enter without having to focus on the submit button, thus saving the user time and/or mouse clicks/keystrokes.

While these examples may seem obvious, they are things I would have found useful when I was a budding web designer/developer. And even some seasoned professionals are unable to delineate the differences noted here. Knowing why these elements exist makes us better writers of HTML, which leads to building better sites.

Have a Question?

Please complete the Captcha