HTML Text Formatting Tutorial - Formatting Elements

Understanding HTML Text Formatting

HTML provides several elements that can give text additional meaning or distinguish it from surrounding content. These elements can identify important text, emphasize words, highlight content, show edits, and represent other types of text.

Some formatting elements have semantic meaning, while others identify text that is conventionally displayed differently without adding the same level of importance or emphasis. CSS can then be used to control how these elements look.

Strong and Important Text

The element identifies content with strong importance, seriousness, or urgency. Browsers normally display its text in bold by default.

<p>Remember: <strong>Always save your work.</strong></p>

The bold appearance is only the browser's default presentation. The important part is the meaning provided by the element.

Emphasized Text

The element adds stress emphasis to text. Changing which word is emphasized can change the intended meaning of a sentence.

<p>You should <em>always</em> include alternative text for meaningful images.</p>

Browsers normally display text in italics, but its purpose is to communicate emphasis rather than simply create italic text.

Bold and Italic Text

The and elements identify text that is set apart from surrounding content without expressing the same importance or stress emphasis as and .

<p>The <b>HTML</b> label appears in the menu.</p>

<p>The term <i>responsive design</i> is commonly used in web development.</p>

Browsers usually display text in bold and text in italics. Choose these elements according to the meaning of the content rather than simply because of their default appearance.

Marked and Highlighted Text

The element represents text that is marked or highlighted because it is relevant in the current context. Browsers commonly display marked text with a highlighted background.

<p>Search results for HTML: Learn <mark>HTML</mark> headings and paragraphs.</p>

A common use is highlighting a matching word in search results or drawing attention to a portion of quoted or referenced content.

Small Text

The element represents side comments or small-print information such as copyright notices, legal text, disclaimers, or attribution.

<p><small>Copyright 2026 Example Web. All rights reserved.</small></p>

Browsers normally display content using a smaller font size, but the element should be selected for its meaning rather than simply to make text smaller.

Deleted and Inserted Text

The <del> element represents content that has been removed from a document, while the <ins> element represents content that has been added.

<p>The meeting begins at <del>2:00 PM</del> <ins>3:00 PM</ins>.</p>

Browsers commonly display deleted text with a line through it and inserted text with an underline. These visual styles help show the change, while the HTML elements provide its meaning.

HTML Text Formatting Example

The following example combines several text-formatting elements so you can compare their default appearance and purpose.

<p><strong>Important:</strong> Save your document before closing it.</p>

<p>You should <em>always</em> check your HTML before publishing.</p>

<p>Learn the <b>HTML</b> elements used to structure a webpage.</p>

<p>The term <i>semantic HTML</i> describes markup that communicates meaning.</p>

<p>Search result: <mark>HTML text formatting</mark></p>

<p><small>Example content for tutorial purposes.</small></p>

<p>Updated time: <del>2:00 PM</del> <ins>3:00 PM</ins></p>

Try changing the elements in the editor and compare how the browser displays each type of formatted text.

Play in Editor

HTML Formatting vs CSS

HTML elements should be selected according to the meaning and purpose of the content. CSS should be used when the goal is only to change visual properties such as font weight, font style, color, size, or background color.

.important-text {
  font-weight: 700;
  color: #333333;
}

Changing an element's appearance with CSS does not change its HTML meaning. For example, removing the bold styling from does not remove the strong importance represented by the element.

Text Formatting Best Practices

Choose text-formatting elements according to their meaning, not only their default appearance.
Use for content with strong importance, seriousness, or urgency.
Use when text requires stress emphasis.
Use and only when their semantic purpose fits the content.
Use for text that is relevant or highlighted in the current context.
Use <del> and <ins> when representing changes to content.
Use CSS when you only need to change how text looks.

Summary

HTML text-formatting elements can communicate importance, emphasis, relevance, edits, and other meanings within written content. Choose the element that best describes the purpose of the text, and use CSS when changes are purely visual.