In addition to the more complex elements available, basic typographic details are also supported. With prose, the markdown option is usuall best, but as the markdown ultimately creates the basic HTML elements, those are supported as well.

Highlighting (mark)

Phrases can be highlighted inline with Markdown’s ==mark== syntax. (HTML <mark> is also supported for contexts where Markdown isn’t processed.)

From the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark:

The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage’s relevance in the enclosing context.

Insertions (ins) & Deletions (del)

Sometimes, it’s worth drawing attention to things like corrections or other content where a value may have been changed to changes in the syntax or API’s after it was published. In some cases, it may make sense to simply update the content, but in other cases, it can be helpful to clarify where an article previously stated one thing as well as what the value was changed to.

For that, we have ins and del which do not have native markdown support. However, given their relative simplicity and infrequent usage, they’re a good example where the HTML elements work well enough to not need either a Markdown or ERb option.

From the MDN documentation on ins and del:

The <ins> HTML element represents a range of text that has been added to a document. You can use the <del> element to similarly represent a range of text that has been deleted from the document.

The <del> HTML element represents a range of text that has been deleted from a document. This can be used when rendering “track changes” or source code diff information, for example. The <ins> element can be used for the opposite purpose: to indicate text that has been added to the document.

Unarticulated Annotation (Underline)

While <u> represented an underline in older versions of HTML, the modern definition represents a way to notation an annotation. For instance, one could set text-decoration-line to wavy and text-decoration-color to red, and you’d have a way to highlight spelling mistakes.

For Markdown, _underline_ does the trick, and using the HTML <u> directly should generally be avoided.

From the MDN documentation on u:

The <u> HTML element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.

Strikethrough

<s> or ~~strikethrough~~

From the MDN documentation on s:

The <s> HTML element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate.

Emphasis

Sometimes, things need to be emphasized, and in the vast majority of cases, the Markdown options are the best bet for simplicity, but liek the other elements, using the markup directly is always an option.

Wrapping text in a * will italicize something, and using a ** to wrap the text will make it bold. That keeps it nice and simple since a little more nuance is introduced when reaching for the HTML equivalents. Unlike some of the other elements, there are some suppoted markup scenarios where the Markdown options are not flexible enough.

“Italics”

While the i element was historically for italics, it’s been given a more semantic meaning to represent “idiomatic text” in recent years since purely presentational elements aren’t as relevant with modern CSS. As a result, it should be used for its semantics rather than purely for italics.

From the MDN documentation on i

The <i> HTML element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the <i> naming of this element.

The em element, on the other hand, represents the more traditional use of italics to emphasize a passage, and they can technically be nested to represent greater degrees of emphasis.

From the MDN documentation on em

The <em>HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

“Bold”

While the b element was historically for bolding text, it’s been given a more semantic meaning to represent “bring attention to”11It’s fascinating to see how these elements have been redefined in a way that the semantic meaning uses convoluted phrases so that it matches the letter used. in recent years since purely presentational elements aren’t as relevant with modern CSS. As a result, it should be used for its semantics rather than purely for bold effects.

From the MDN documentation on b

The <b> HTML element is used to draw the reader’s attention to the element’s contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <b> for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the <strong> element.

The strong element, on the other hand, represents the more traditional use of italics to emphasize a passage, and they can technically be nested to represent greater degrees of emphasis.

From the MDN documentation on strong

The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.

Small

The small element comes in handy for footers, footnotes, or other parenthetical text.

From the MDN documentation on small:

The <small> HTML element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.

Super & Sub Scripts

The most common uses for sup and sub elements should be handled automatically via the other helps for most cases, but if there’s a case where they’re needed, they can be used.

The Markdown options are supported where wrapping text with a ^ will create a superscript element and wrapping text in ~ will create a subscript element.

From the MDN documentation on sup and del:

The <sup> HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.

The <sub> HTML element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.

Like most of the available tools, with any of these typographic details, lean towards the Markdown approach by default if possible, but don’t be afraid to use standard markup if there’s a good case for it.