People don’t read and understand a text by decoding one word at a time but through meaningful totals. One word next to another creates a new meaning; style one word and another meaning appears.
Bold is a structural tool. Italics influence meaning. In HTML, we have even more granularity with emphasis and strong. Understanding the difference between all four is about clear communication. Using the right one can be as important as using the right word; communicating what the words cannot on their own shows that the intended meaning must happen through correct code.
Bold is a pointer
#
Bold draws attention. But it’s not itself that’s important but what comes next. It basically says, “look at me, read the following text, this is what it’s about”. That’s why its use should, strictly speaking, be limited to titles and headings.
Inline bold isn’t just ugly, it also creates a mess for the reader. Using bold to emphasise words in paragraphs disturbs the sentence’s coherency and meaningful total. It’s like watching TV with someone telling us to “watch this” when something’s about to happen. It draws attention from where we are to where we will be in a few moments. When we write like this, we make the impossible claim that among the words we have chosen and placed in a selected order to convey a particular meaning, we think some words should draw attention to themselves before the reader is ready. We are nagging the reader forward, trying to put too much information on them simultaneously; it’s like giving people a new task before they have finished the current one.
Inline bold in prose is a sign that the sentence needs a rewrite. If we spoke in inline bold, it would be like announcing beforehand that in order to get what it’s all about, the listener should pay special attention once we get to a certain few words somewhere in the middle. No one does that; we usually state the topic beforehand, like we do with headings, titles and introductions in text.
strong and b #
Since headings usually come in bold and we don’t use inline bold, we are left with whole paragraphs where we can use the strong element and the b element. The two have distinct use cases.
Using strong adds meaning to the code. Like bold text visually competes with the headers, so will the strong text. Considering that bold paragraphs might be used independently, where titles don’t make sense, for instance, in intros or short commercial messages, strong seems the best fit. It’s not a heading, and it is more important than plain text.
b is just styling, a way to produce the visual effect when we don’t really mean it. The advantage is the native functionality of it. It can also be used to avoid the strong element when we’re not in a position to change it to normal text. People who tend to insist on bold text rarely notice the difference.
Self-referencing italics change the meaning #
We use italics mainly for two different things, for which both the em element and the i element are needed. While humans can discern the difference based on context and orthography, computers need specific code. For emphasis, it’s imperative to use em. For styling titles, names, foreign words and other things that we aren’t emphasising but still need to be in italics, we use the i element.
em can change the entire meaning, i just clarifies.
Nesting #
When we get to nesting, things become more complex, but as long as we write and program as we intend to be understood, we can manage it. It’s helpful to remember that it’s not the italic visual itself that provides meaning but the difference from the surrounding text. It means that inside the italic text, the regular text is the difference, the contrast.
We can nest elements to get the correct semantics in code and typography; only every other level should be italic:
em, i {
font-style: italic;
}
em em,
em i,
i i,
i em {
font-style: normal;
}Should I name the article <i>How <i>Avengers: Endgame</i> made <em>crazy</em> sense</i> or <i>Why <i>Infinity War</i> makes sense <i>en masse</i> after watching <i>Endgame</i></i>?Which renders the following example: Should I name the article How Avengers: Endgame made crazy sense or Why Infinity War makes sense en masse after watching Endgame?
If we write something like this, we should rewrite it, but the example stands, and at some point, there will be an edge case we cannot avoid.
Editors and Markdown are problematic #
Many WYSIWYG editors and Markdown variants don’t seem to support anything but em and strong, converting the other two. All four should be available in editors and languages. There are use cases for all of them. On the other hand, while we who make these things might know the difference, explaining to users why there are two buttons producing italics, and maybe no buttons for bold, is not something I see anyone wanting to deal with regularly.