« Previous Next »

Formatting Elements

HTML offers various formatting tags to style content for better readability and emphasis. These tags help make text bold, italic, highlighted, and more, enhancing the user experience.

Common Formatting Tags

Tag Description
<b>Bold text
<strong>Important (semantic bold)
<i>Italic text
<em>Emphasized (semantic italic)
<mark>Marked (highlighted) text
<small>Smaller text
<del>Deleted (strikethrough) text
<ins>Inserted (underlined) text
<sub>Subscript text (e.g., H2O)
<sup>Superscript text (e.g., x2)

VS Code Style Example

<p>
  This is <b>bold</b>, 
  <strong>important</strong>, 
  <i>italic</i>, 
  and <em>emphasized</em> text.


  Also <mark>marked</mark>, 
  <small>small</small>, 
  <del>deleted</del>, 
  and <ins>inserted</ins>.


  Water is H<sub>2</sub>O and math is x<sup>2</sup>.
</p>

Output Preview

This is bold, important, italic, and emphasized text.
Also marked, small, deleted, and inserted.
Water is H2O and math is x2.

<b> and <strong> Elements

Output :

<i> and <em> Elements

Output :

<small> Element

Output :

<mark> Element

Output :

<del> Element

Output :

<ins> Element

Output :

<sub> Element

Output :

<sup> Element

Output :

Practice Exercises

Task 1: How to make text bold or important?

Goal: Practice styling text bold using physical and semantic tags.
💡 Hint: Use <b> for visual bold and <strong> for importance.
💡 Show Solution 
<html>
  <body>
    <p><b>We offer quality IT education for all students.</b></p>
    <p><strong>Your future in technology starts here!</strong></p>
  </body>
</html>
Output :

We offer quality IT education for all students.

Your future in technology starts here!

Explanation: Both tags render text bold, but <strong> adds semantic importance for screen readers and SEO.
Task 2: How to make text italicized or emphasized?

Goal: Learn formatting slanted text for technical terms or emphasis.
💡 Hint: Wrap text in <i> or <em> tags.
💡 Show Solution 
<html>
  <body>
    <p><i>We focus on practical IT education for real-world skills.</i></p>
    <p><em>Your success is our top priority at AIT.</em></p>
  </body>
</html>
Output :

We focus on practical IT education for real-world skills.

Your success is our top priority at AIT.

Explanation: The <i> tag defines italic style, while <em> emphasizes text meaning.
Task 3: How to highlight or shrink text size?

Goal: Practice marking important phrases and writing small side notes.
💡 Hint: Use <mark> for yellow highlight and <small> for smaller font.
💡 Show Solution 
<html>
  <body>
    <p>Complete your <mark>AIT course registration</mark> today.</p>
    <p><small>Empowering students since 2010 with quality IT education.</small></p>
  </body>
</html>
Output :

Complete your AIT course registration today.

Empowering students since 2010 with quality IT education.

Explanation: <mark> adds a yellow background highlight, and <small> reduces font size for copyright or notes.
Task 4: How to write formulas or powers?

Goal: Format chemical formulas and mathematical exponents.
💡 Hint: Use <sub> for lower text (H2O) and <sup> for powers (23).
💡 Show Solution 
<html>
  <body>
    <p>In HTML, H<sub>2</sub>O represents water.</p>
    <p>In programming, 2<sup>3</sup> means 2 raised to power 3.</p>
  </body>
</html>
Output :

In HTML, H2O represents water.

In programming, 23 means 2 raised to power 3.

Explanation: <sub> places characters slightly below the normal line, whereas <sup> places them slightly above.
« Previous Next »