Formatting Elements

In previous article we talked about text elements, now we will look at how to format text elements.

Bold & Strong (<b>, <strong>)

Both <b> and <strong> are used to make text bold, but they have different semantic meanings, despite the visual similarity.

<b> (Bold)

Represents text that should be stylistically different from normal text, without conveying extra importance.Just on purely visual level.

<p>This is a <b>bold</b> element text.</p>

<strong>

Represents text that has strong importance, seriousness, or urgency. It has semantic meaning and is used to indicate that the text is more important more than the stylistic or visual appearance change.

<p>
  <strong>Warning:</strong> Make sure to use strong represent seriousness rather
  than for style
</p>

<strong> conveys importance, while <b> is just for visual styling. Screen readers may emphasize <strong> content but typically won’t treat <b> differently.

Italic & Emphasis (<i>, <em>)

Similar to bold, there are two elements for italicizing text, each with different semantic meanings:

<i> (Italic)

Represents text that is set off from the normal prose, such as a foreign word, or a technical term, primarily acting as a stylistic element.

<p>The Latin phrase <i>carpe diem</i> means "seize the day".</p>

<em> (Emphasis)

Represents emphasized text, indicating stress emphasis that changes the meaning of the sentence.It has semantic meaning, indicating that the text is more important or should be stressed when read.

<p>I <em>really</em> need you to do try this out by your own.</p>

<em> indicates emphasis, while <i> is for text that is somehow different from surrounding text. Screen readers may change tone or pitch for <em> content.

Underline (<u>)

The <u> element is used to render text with an underline.

<p>This is <u>underlined</u> text.</p>

<u> is historically used for underlining, but this can be confused with hyperlinks; hence for general underlining, it’s better to use CSS, as below.

<span style="text-decoration: underline;">This is underlined using CSS</span>

Superscript & Subscript (<sup>, <sub>)

These elements are used for formatting text as superscript or subscript

<sup> (Superscript)

Renders text slightly above the baseline and in a smaller font. Commonly used for footnotes, exponents, ordinal numbers or math formulas.

<p>The 1<sup>st</sup> of January</p>
<p>E = mc<sup>2</sup></p>

<sub> (Subscript)

Renders text slightly below the baseline and in a smaller font, Often used in chemical formulas and mathematical notations.

<p>The chemical formula for Sulphuric acid is H<sub>2</sub>SO<sub>4</sub></p>

Things to keep in mind adding formatting to the website.

1. Use semantic elements (<strong>, <em>) when the formatting carries meaning.
2. Use non-semantic elements (<b>, <i>) only for purely stylistic purposes.
3. Consider using CSS for styling when possible, especially for underlining.
4. Overuse of formatting can make content harder to read or understand for some users.
5. Use <sup> and <sub> with enough thought, as they can affect line height and readability if overused.