HTML Tutorial Part 3: HTML Text Formatting and Headings

HTML Tutorial Part 3

Mastering Text Formatting and Headings

Understanding HTML Headings

HTML provides six levels of headings from <h1> to <h6>. They create a hierarchy of importance on your page.

<h1>Main Page Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Minor Heading</h4>
<h5>Small Heading</h5>
<h6>Smallest Heading</h6>

Text Formatting Tags

Tag	Purpose	Example
<b>	Bold text	Bold
<strong>	Important text (bold)	Strong
<i>	Italic text	Italic
<em>	Emphasized text (italic)	Emphasized
<u>	Underlined text	Underlined
<mark>	Highlighted text	Highlighted
<small>	Smaller text	Small text
<del>	Deleted text	Deleted
<ins>	Inserted text	Inserted
<sub>	Subscript	H2O
<sup>	Superscript	X2

Practical Examples

<p>This is <strong>very important</strong> information.</p>
<p>The formula is H₂O.</p>
<p>E=mc²</p>
<p>Price: <del>$100</del> <ins>$75</ins></p>

Demo Output

This is H1

This is H2

This is H3

This is very important information.

The formula is H₂O.

E=mc²

Price: $100 $75

Best Practices

• Use only one <h1> per page for the main title
• Follow heading hierarchy (don't skip from h1 to h4)
• Use <strong> and <em> for semantic meaning
• Use <b> and <i> only for styling
• Avoid overusing formatting tags

Excellent Work!

You've completed Part 3 of the HTML Tutorial!
Next up: HTML Links and Images