Skip to content

HTML Formatting Tags Tutorial for Beginners

HTML formatting tags are used to change the meaning, appearance, and importance of text. In this lesson, you will learn common HTML text formatting tags, examples, best practices, SEO benefits, accessibility tips, and mistakes beginners should avoid.

What Is HTML Formatting?

HTML formatting means using special tags to highlight, emphasize, style, or structure text content on a web page. Formatting tags help browsers, search engines, and assistive technologies understand the meaning and importance of specific words or phrases. 

<p>This is <strong>important text</strong> in a paragraph.</p>

Top 10 HTML Formatting Tags

The following table shows the most commonly used HTML formatting tags beginners should know.

# Tag Purpose Example Output Meaning
1 <strong> Marks important text. <strong>Important</strong> Important text with semantic meaning.
2 <b> Makes text bold without adding importance. <b>Bold text</b> Bold visual text.
3 <em> Emphasizes text semantically. <em>Please note</em> Emphasized text.
4 <i> Displays text in italic style. <i>Technical term</i> Italic visual text.
5 <mark> Highlights relevant text. <mark>Highlighted</mark> Marked or highlighted text.
6 <small> Shows side comments or small print. <small>Terms apply</small> Small supporting text.
7 <del> Represents deleted text. <del>$99</del> Deleted or removed content.
8 <ins> Represents inserted text. <ins>New update</ins> Added content.
9 <sub> Creates subscript text. H<sub>2</sub>O Scientific or formula text.
10 <sup> Creates superscript text. 10<sup>2</sup> Power, footnote, or ordinal text.

Bold and Important Text in HTML

HTML provides two common tags for bold-looking text: <b> and <strong>. They may look similar in the browser, but they have different meanings. 

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

<p>This is <strong>important text</strong>.</p>

Use <strong> when the text is important. Use <b> when you only need visual bold styling without extra meaning.

Italic and Emphasized Text in HTML

HTML also provides two common tags for italic-looking text: <i> and <em>. 

<p>The word <i>HTML</i> is a technical term.</p>

<p>You should <em>always close your tags</em> properly.</p>

Use <em> when the text needs emphasis. Use <i> for technical terms, names, thoughts, or text with alternate voice.

Highlighted Text Using mark Tag

The <mark> tag highlights text that is relevant in a specific context, such as search results, important notes, or key terms. 

<p>Learn <mark>HTML formatting tags</mark> with examples.</p>

Deleted and Inserted Text

The <del> tag shows deleted content, and the <ins> tag shows inserted or added content. 

<p>Old Price: <del>$99</del></p>
<p>New Price: <ins>$79</ins></p>

Subscript and Superscript Text

Use <sub> for subscript text and <sup> for superscript text. These tags are useful for formulas, math, chemistry, footnotes, and ordinal numbers. 

<p>Water formula: H<sub>2</sub>O</p>

<p>Math example: 10<sup>2</sup> = 100</p>

Code and Preformatted Text

The <code> tag is used for inline code, and the <pre> tag preserves spacing and line breaks. 

<p>Use the <code>&lt;p&gt;</code> tag to create paragraphs.</p>

<pre>
Line one
  Line two with spacing
Line three
</pre>

Semantic Formatting vs Visual Formatting

Some formatting tags add meaning, while others mainly affect appearance. For SEO and accessibility, semantic tags are usually better when the content has importance.

Semantic Tag Visual Tag Recommended Use
<strong> <b> Use <strong> for important text.
<em> <i> Use <em> for emphasized text.
<mark> CSS highlight Use <mark> when text is contextually relevant.

HTML Formatting Tags for SEO and Accessibility

HTML formatting tags can help search engines and screen readers understand which parts of your content are important, emphasized, deleted, inserted, highlighted, or code-related.

  • Use <strong> for important phrases, not only for styling.
  • Use <em> to add meaningful emphasis.
  • Use <mark> for highlighted or context-relevant text.
  • Use <code> for inline programming examples.
  • Avoid using formatting tags only to force visual design. Use CSS for design.

Common HTML Formatting Mistakes

  • Using <b> when the text is actually important.
  • Using <i> when semantic emphasis is needed.
  • Using too many formatting tags inside one paragraph.
  • Using formatting tags instead of CSS for layout and design.
  • Forgetting that <strong> and <em> add meaning.

Key Takeaways

  • HTML formatting tags change the meaning or appearance of text.
  • <strong> and <em> are semantic formatting tags.
  • <b> and <i> are mostly visual formatting tags.
  • <mark>, <del>, <ins>, <sub>, and <sup> help represent special text meaning.
  • Use CSS for design and HTML formatting tags for meaningful text structure.

Pro Tip

Use <strong> and <em> when the text has real meaning. Use CSS when you only want to change the visual style.

You now understand HTML formatting tags, semantic text meaning, visual text styling, and best practices. Next, learn how HTML links connect web pages together.