HTML Formatting

The <b> element makes the text bold without adding any particular importance. Typical use cases include keywords in a summary or product names in a review — whenever you need to make certain words noticeable.

At the dawn of web design, the <b> tag was the only way to make text bold. Nowadays, when bold text is a style choice, the best practice is to use the CSS property font-weight. As a rule of thumb, if you need to make a block of text bold, you will most likely need CSS; if it's about making a keyword look prominent, the <b> tag is the right choice.^[1]

In HTML, the <strong> tag indicates that the content carries more importance, seriousness, or urgency. Visually, most browsers display content in the <strong> tag identically to the content inside the <b> tag — bold. If they look the same, in which cases should you use the <strong> tag? This is one of the most common reasons for confusion among new developers, so let us walk you through a metaphor.

The <b> tag makes the marked text stand out in a way that a cowboy in a white hat would stand out from a group of cowboys in black hats — by being more noticeable without the different color adding more importance. Adding the <strong> tag is like giving a cowboy a sheriff's badge, thus denoting their higher rank. Use the <strong> element to mark content that is more important than the surrounding text — for example, warnings.

The <i> tag makes the text inside it look italic. In the early days of HTML, it was the only way to make the text look italic. Nowadays, we use this tag for words and phrases that differ from the regular text for some reason — titles, terms, idioms, words in other languages, characters' thoughts in stories, etc. For example, in the Matrix franchise, a glitch is a mistake in the system that results in deja vu.

Similarly to the <b> tag, the <i> tag is not for styling text. Use the CSS font-style property instead if needed for style purposes.

The <em> element marks words with a stressed emphasis compared to the surrounding text. The <em> element makes the text inside it look italic — visually identical to any text inside the <i> element. So what's the difference?

The difference is in the semantics — it's not about how the text looks, but what it means. See? We use the <em> element to mark the words that we would put more emphasis on while speaking to slightly change the meaning of the sentence. The <i> element's use is for text that differs from "normal" — terms, titles, foreign words, etc.

To make the text look highlighted, use the <mark> tag.^[2]The most common use of the <mark> element is to indicate a portion of the document's content that is likely to be relevant to users' current activity. A classic example is words that match the search query.

A more meta example of when to use the <mark> tag would be inside a quotation. Let's say there's a piece of information inside the quote that you found interesting, but the author of the source material didn't emphasize it. Go ahead and highlight it with the <mark> tag to draw users' attention to it!

The <small> tag makes the content inside it look smaller without any particular styled presentation. This tag is used for what people call "small print," like copyright, legal text, and other side comments. Lately, the <small> tag is being used less and less frequently because CSS styles allow you to achieve the same or often richer effects and give you more control over how the font looks.

HTML allows you to indicate the parts of the text that have been altered.^[3] The <del> element marks deleted text and the <ins> element does the same for added text. Browsers apply a strike-through style to the content inside the <del> tag. This element is useful for tracking changes made to the text or source code as it allows you to see exactly what was changed.

The <ins> tag, alongside the <del> tag, is one of the two elements that show a particular part of the text has been altered. Use it in situations when it's important to track changes in the document — for example, when editing copy of source code. Browsers will usually underline the inserted text.

The <sub> tag specifies subscript text with characters set slightly below the normal line of type and usually smaller than the rest of the text. Use it for typographical reasons only — for example, when writing formulas or specifications of chemical compounds like H2O (the irony of us not being able to use subscript on here is not lost on us). As you probably know, CSS styles are the right choice for setting text's presentation or appearance.

The <sup> tag is used to define superscript text. It appears smaller than the rest of the text and slightly above the normal line of type. Similar to subscript text, we recommend using it only for typographical reasons — for example, footnotes or mathematical expressions like the squared symbol. For styling purposes, use CSS styles.

The <var> tag represents the name of a variable in a mathematical equation or computer program. As you probably remember from math classes, variables are symbols used in formulas as placeholders for quantities that change depending on the context. For example, the formula P = a + b + c used to calculate the perimeter of a triangle contains variables a, b, and c as placeholders for the triangle's sides' length and P as their sum.

As with other formatting tags, the <var> tag's purpose is not to style the content — although it's certainly a part of it — but to code it semantically. This means that what's inside the tag is logically different from the surrounding content and helps with search optimization.

The <span> tag on its own doesn't represent anything or give the content inside it any special meaning. This element is a generic inline container — you can use it to separate parts of text from others and modify it using various attributes.

For example, if you want to make a part of the text blue without adding any particular meaning, use the <span> tag with the attribute style and set the color to blue, like in the example above. But it's more than just about style. Another example of the tag's versatility would be to use the attribute lang to set a different language to a part of the text and ensure that words written in a language other than the default are displayed correctly.

The <q> tag indicates that the text enclosed in it is a quotation. Visually, it means that most modern browsers will add quotation marks around the content that you put inside the tag. However, for older browsers, you might need to set a style rule with CSS.

Use the <q> element for short quotations that don't require line breaks. For longer quotes, there's a special <blockquote> element that comes with line breaks before and after.

Use the <em> tag to mark text that has stress emphasis. This element can be nested, with each level of nesting indicating a greater degree of emphasis. However, the difference is barely visible in most browsers as they display all text inside the outer <em> tag in italic.

The <mark> tag is used to highlight text. Use it for content that has a higher degree of relevance to users at the moment — for example, to highlight searched keywords. To indicate that content has a higher level of importance, apply the <strong> tag instead.

To mark inserted text, use the <ins> tag, and browsers will underline the content inside it. Make sure to use this tag only when needed — for example, to add suggestions to a document. The same goes for the deleted text tag <del> — there are some accessibility concerns with these two.

By default, assistive technologies like screen readers don't announce the presence of the <ins> and <del> tags to avoid verbosity. This can result in some confusion. For example, it's a common selling technique to show the sale price next to the original price, which is stricken. Using the <del> tag in this situation, New Price $<del>30</del>20 will cause a screen reader to read it as New Price $3020. While there's a way to circumvent this by using the CSS content property to force screen readers to read it aloud, we recommend avoiding unnecessary use of the <ins> and <del> tags.

The <sub> tag specifies the inline text that should be displayed as subscript for solely typographical reasons — that is, to change the text's position to comply with typographical conventions or standards, like in chemical or mathematical formulas.

If you need to use text with an altered baseline for stylistic purposes — for example, to style a company's name — use the CSS vertical-align property instead.