Representation of style – HTML Accessibility

A selection of fashionable hair styles as modeled by the sophisticate fraternity of male accessibility experts.

Represents

Elements in the DOM represent things; that is, they have intrinsic meaning, also known as semantics.

The HTML spec tries hard to give  & , and  &  distinct and intrinsic meaning beyond the meaning that emerges from their visible default styles (and related aural styles):

The `i` element

Represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

The `b` element

Represents a span of 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, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

The `em` element

Represents stress emphasis of its contents.

The level of stress that a particular piece of content has is given by its number of ancestor em elements.

The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.

The `strong` element

Represents strong importance, seriousness, or urgency for its contents.

Importance: the strong element can be used in a heading, caption, or paragraph to distinguish the part that really matters from other parts that might be more detailed, more jovial, or merely boilerplate. (This is distinct from marking up subheadings, for which the hgroup element is appropriate.)

Not helpful

Implementations do nothing to help make the use of these elements distinct and meaningful:

The WordPress WYSIWYG editor has a toolbar which includes the B and I buttons. On hover each has a tooltip “Bold (Ctrl+B)” and “Italic (Ctrl+I)”.

b and i buttons in the Github markdown editor
This UI is common in HTML and Markdown editors, including GitHub Markdown editor.

Examples

B  is useful for drawing attention to product names without indicating importance. For example:

This blog is powered by WordPress

I  can be used, amongst other things, to signify that a word is a ship’s name without emphasizing it. For example:

(Factoid) In 1968 I first traveled from Australia to the UK on a passenger ship named the Ellinis. At the time it was cheaper to travel by boat for 6 weeks, than to fly

a watercolour rendition of the Ellinis Only 2 problems:

Marking up text with the B button results in it being marked as WordPress
Marking up text with the I button results in it being marked as Ellinis

Large scale usage

Search engine results can be a good indicator of how text level semantics are used on a large scale (think millions of page views per hour). And therefore what they are perceived to represent to users.

Search result from duck duck go

Let’s search for “bold The Free Dictionary” on a number of search engines and look at the results and how they use text level semantics:

DuckDuckGo: the word “bold” is marked up like this bold with default browser style overridden.

strong, b {
font-weight: 600;
}

Google: the word “bold” is marked up like this bold with default browser style overridden:

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

Bing: the word “bold” is marked up like this bold with default browser style overridden:

strong {
color: #767676;
font-weight: 700;
}

Baidu: the word “bold” is marked up like this bold with default browser style overridden:

em {
color: #f73131;
font-style: normal;
}

Meaningful Meaninglessness

The conclusion I draw from the specification, usage and implementation examples above is that although the HTML specification attempts to make a distinction between  & , and  & ; the general fuzz and fudge of their specification, historical and current use, UI implementations & style representations, coalesce to make attempts to distinguish them futile:

 =  and  =.