HTML

Beyond Plain Text: Your First Steps in HTML Formatting

Wednesday June 11, 2025

HTML text formatting allows us to make certain words stand out or appear differently.

We can add emphasis, structure content, and make our webpages much more readable and engaging for visitors.

Understanding how to style text is fundamental for a web developer.

The most basic text formatting elements

HTML offers a variety of elements for text formatting, each with its own purpose. Let’s walk through the most basic text formatting elements.

The <strong> and <b> HTML tags. When should one be used over the other?

They appear almost identical since they both default to bold styling. However, their meanings are different.

The <strong> tag isn’t just about making text visually bold; it also semantically indicates that the enclosed text has strong importance.

For denoting emphasis, use <strong> instead of <b>.

The important part of the sentence is bolded using the Strong element.

(click on the image to open in a new tab)

On the other hand, <b> (for “bring attention to”) is commonly used for highlighting keywords within summaries and product names. The focus here, is on the visual aspect, not the meaning.

The ‘bring attention to’ element is used here to highlight the name of the language.

(click on the image to open in a new tab)

The empasis element and the idiomatic text element

Using emphasis <em> makes a word appear in italics. So does the <i> tag, but the former also carries semantic weight, indicating that the text has emphasis.

The emphasis here is on the personal pronoun ‘you’.

(click on the image to open in a new tab)

The <i> tag is better used in cases where we want to use idiomatic terms, or terms from another language, or even thoughts. In these cases, the text is distinct but not necessarily important.

Here, the Greek text is distinct, so italicized, but not emphasized, although it could be.

(click on the image to open in a new tab)

The Unarticulated Annotation (Underline) element

While you can use the <u> for underlining, it is generally discouraged in modern web development, because underlined text often signifies a hyperlink on the web, and using it for mere emphasis can confuse users. In HTML5, it is usually used for highlighting spelling mistakes.

This element is usually used for highlighting spelling mistakes.

When used it should be combined with CSS styles.

Underlined text often signifies a hyperlink on the web so combining the Underline element with CSS styles is considered good practice.

(click on the image to open in a new tab)

The <code> element for representing computer code in HTML

The code eleme wraps inline code snippets in a monospace font. It is ideal when explaining syntax.

The code element should only show one line of code

The code element is ideal for explaining code syntax.

(click on the image to open in a new tab)

Result:

Code element shows one line of code.

To display multiple lines of code, enclose a code element within a preformatted text element.

With the preformatted text element we can display multiple lines of code.

(click on the image to open in a new tab)

Result:

Thanks to preformated element, the result is a lot more realistic.

Superscript and subscript elements

When we need to display chemical formulas or mathematical expressions, the sub (subscript) tag creates subscript text (like in H₂O), and the sup (superscript) tag makes superscript text (like X²).

Simple examples of using the Superscript and the Subscript elements.

(click on the image to open in a new tab)

The mark element

The <mark> tag in HTML shows marked-up text. It’s used to emphasize a section of text within a paragraph.

With the mark element we can highlight a word.

(click on the image to open in a new tab)

Wrapping Up

If you care about clean code and clear communication, learning how to format text well is essential.

As you build out pages, keep asking: “What’s the point of this text?” That question alone will guide you toward better formated and more semantic HTML, thus more accessible web.

Although my blog doesn’t support comments, feel free to reply via email or X.