{"id":822,"date":"2023-02-19T16:28:17","date_gmt":"2023-02-19T16:28:17","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=822"},"modified":"2023-02-20T21:40:16","modified_gmt":"2023-02-20T21:40:16","slug":"representation-of-style","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2023\/02\/19\/representation-of-style\/","title":{"rendered":"Representation of style"},"content":{"rendered":"

\"A<\/p>\n

Represents<\/a><\/h3>\n

Elements in the DOM represent<\/dfn> things; that is, they have intrinsic meaning<\/em>, also known as semantics.<\/p><\/blockquote>\n

The HTML spec tries hard to give <b><\/code> & <strong><\/code>, and <i><\/code> & <em><\/code> distinct and intrinsic meaning beyond the meaning that emerges from their visible default styles (and related aural styles):<\/p>\n

The i<\/code><\/a> element<\/h3>\n

Represents<\/strong> 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.<\/p><\/blockquote>\n

The b<\/code><\/a> element<\/h3>\n

Represents<\/strong> 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.<\/p><\/blockquote>\n

The em<\/code><\/a> element<\/h3>\n

Represents<\/strong> stress emphasis of its contents.<\/p>\n

The level of stress that a particular piece of content has is given by its number of ancestor em<\/code><\/a> elements.<\/p>\n

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.<\/p><\/blockquote>\n

The strong<\/code><\/a> element<\/h3>\n

Represents<\/strong> strong importance, seriousness, or urgency for its contents.<\/p>\n

Importance<\/strong>: the strong<\/code><\/a> 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<\/code><\/a> element is appropriate.)<\/p><\/blockquote>\n

Not helpful<\/h2>\n

Implementations do nothing to help make the use of these elements distinct and meaningful:<\/p>\n

\"b<\/p>\n

The WordPress WYSIWYG editor has a toolbar which includes the B<\/strong> and I<\/em> buttons. On hover each has a tooltip “Bold (Ctrl+B)” and “Italic (Ctrl+I)”.<\/p>\n

\"b
\nThis UI is common in HTML and Markdown editors, including GitHub Markdown editor.<\/p>\n

Examples<\/h3>\n

B<\/strong> <b><\/code> is useful for drawing attention to product names without indicating importance<\/strong>. For example:<\/p>\n

This blog is powered by WordPress<\/strong><\/p><\/blockquote>\n

I<\/em> <i><\/code> can be used, amongst other things, to signify that a word is a ship’s name without emphasizing<\/em> it. For example:<\/p>\n

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

\"aOnly 2 problems:<\/strong><\/p>\n

    \n
  1. Marking up text with the B <\/strong>button results in it being marked as <strong>WordPress<\/strong><\/code><\/li>\n
  2. Marking up text with the I<\/em> button results in it being marked as <em>Ellinis<\/em><\/code><\/li>\n<\/ol>\n

    Large scale usage<\/h2>\n

    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.<\/p>\n

    \"https:\/\/www.thefreedictionary.com
    Search result from duck duck go<\/figcaption><\/figure>\n

    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:<\/p>\n

    DuckDuckGo<\/a>: the word “bold” is marked up like this <b>bold<\/b><\/code> with default browser style overridden.<\/p>\n

    strong, b {\r\nfont-weight: 600;\r\n}<\/pre>\n
    Google<\/a>: the word “bold” is marked up like this <em>bold<\/em><\/code> with default browser style overridden:<\/p>\n
    em {\r\nfont-weight: bold;\r\nfont-style: normal;\r\n}<\/pre>\n
    Bing<\/a>: the word “bold” is marked up like this <strong>bold<\/strong><\/code> with default browser style overridden:<\/p>\n
    strong {\r\ncolor: #767676;\r\nfont-weight: 700;\r\n}<\/pre>\n
    Baidu<\/a>: the word “bold” is marked up like this <em>bold<\/em><\/code> with default browser style overridden:<\/p>\n
    em {\r\ncolor: #f73131;\r\nfont-style: normal;\r\n}\r\n<\/pre>\n
    Meaningful Meaninglessness<\/h2>\n
    The conclusion I draw from the specification, usage and implementation examples above is that although the HTML specification attempts to make a distinction between <b><\/code> & <strong><\/code>, and <i><\/code> & <em><\/code>; the general fuzz and fudge of their specification, historical and current use, UI implementations & style representations,\u00a0 coalesce to make attempts to distinguish them futile:<\/p>\n
    <b><\/code> = <strong><\/code> and <i><\/code> =<em><\/code>.<\/p>\n
    Addendum<\/h2>\n
    A discussion on Mastodon with Charles Roper prompted me to take a quick look at how scientific names are marked up on the web:<\/p>\n