Headings and Text

Headings and Text

Headings and text elements are the core of any web page. Let's learn how to use them properly.

HTML Headings (h1 to h6)

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important):

<h1>Heading 1 — Main Title</h1>
<h2>Heading 2 — Section Title</h2>
<h3>Heading 3 — Subsection</h3>
<h4>Heading 4 — Sub-subsection</h4>
<h5>Heading 5 — Minor heading</h5>
<h6>Heading 6 — Smallest heading</h6>

Heading Sizes

Tag	Default Size	Usage
<h1>	~32px (2em)	Main page title — use only once per page
<h2>	~24px (1.5em)	Major sections
<h3>	~19px (1.17em)	Subsections within h2
<h4>	~16px (1em)	Sub-subsections
<h5>	~13px (0.83em)	Fine detail headings
<h6>	~11px (0.67em)	Rarely used

Paragraphs

The <p> tag defines a paragraph. Browsers automatically add space before and after each paragraph:

<p>This is the first paragraph.</p>
<p>This is the second paragraph. It starts on a new line with spacing above.</p>

Text Formatting

Tag	Effect	Example
<strong>	Bold (with semantic importance)	<strong>Important</strong>
<em>	Italic (with emphasis)	<em>Emphasis</em>
<b>	Bold (visual only)	<b>Bold text</b>
<i>	Italic (visual only)	<i>Italic text</i>
<u>	Underline	<u>Underlined</u>
<mark>	Highlighted text	<mark>Highlighted</mark>
<small>	Smaller text	<small>Fine print</small>
<del>	Strikethrough	<del>Deleted</del>
<sub>	Subscript	H<sub>2</sub>O
<sup>	Superscript	x<sup>2</sup>

<strong> vs <b> and <em> vs <i>

• <strong> means "this text is important" — screen readers emphasize it
• <b> just makes text bold visually — no semantic meaning
• <em> means "this text has emphasis" — screen readers change tone
• <i> just makes text italic visually — no semantic meaning

Best practice: use <strong> and <em> for better accessibility and SEO.

Key Takeaways

• Use <h1> through <h6> for headings — <h1> only once per page
• Use <p> for paragraphs
• Prefer <strong> over <b> and <em> over <i> for better semantics
• Use formatting tags to structure and emphasize text content