HTML Text Formatting

Headings in HTML

Headings define the structure and hierarchy of your content. They're crucial for both user experience and SEO.

Key Points:

There are 6 levels: <h1> (largest/most important) to <h6> (smallest/least important)
Search engines use headings to understand page structure
Screen readers use headings for navigation
Always use headings in logical order (don't skip levels)

Heading Hierarchy

<h1>This is Heading 1 (Main Title)</h1>
<h2>This is Heading 2 (Major Section)</h2>
<h3>This is Heading 3 (Subsection)</h3>
<h4>This is Heading 4 (Sub-subsection)</h4>
<h5>This is Heading 5 (Minor Heading)</h5>
<h6>This is Heading 6 (Smallest Heading)</h6>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8">
  <title>HTML Headings Example</title> 
</head>
<body>
  <h1>Complete Guide to Web Development</h1>
  
  <h2>Chapter 1: HTML Basics</h2>
  <h3>Section 1.1: Introduction to HTML</h3>
  <h4>1.1.1: What is HTML?</h4>
  <h4>1.1.2: HTML History</h4>
  
  <h3>Section 1.2: HTML Elements</h3>
  <h4>1.2.1: Tags and Attributes</h4>
  
  <h2>Chapter 2: CSS Styling</h2>
  <h3>Section 2.1: CSS Basics</h3>
</body>
</html>

Best Practices

One h1 per page - Use only one <h1> for the main title (important for SEO)
Logical order - Don't skip levels (h1 → h2 → h3, not h1 → h3)
Descriptive text - Make headings clear and meaningful
Not for styling - Don't use headings just to make text big (use CSS instead)
Keywords first - Put important keywords at the beginning of headings

❌ Bad Example (Wrong Hierarchy):

<h1>My Website</h1>
<h3>About Me</h3>  <!-- Skipped h2 -->
<h1>Contact</h1>      <!-- Multiple h1s -->

✅ Good Example (Correct Hierarchy):

<h1>My Website</h1>
<h2>About Me</h2>
<h2>Contact</h2>

Quick Quiz — Headings

Q1. How many heading levels are available in HTML?

Q2. Which heading should be used only once per page for SEO?

Q3. What's wrong with this structure: h1 → h3 → h2?

Paragraphs in HTML

The <p> tag defines paragraphs - blocks of text separated by space. Browsers automatically add margin before and after each paragraph.

Basic Syntax

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8">
  <title>HTML Paragraph Example</title> 
</head>
<body>
  <h1>About Me</h1>
  
  <p>My name is Aman Raj. I am a passionate web developer learning HTML, CSS, and JavaScript.</p>
  
  <p>I love creating beautiful and functional websites. My goal is to become a full-stack developer.</p>
  
  <p>In my free time, I enjoy coding, playing games, and exploring new technologies like AI and machine learning.</p>
</body>
</html>

Line Breaks with <br>

The <br> tag creates a line break within text without starting a new paragraph:

<p>
  First line of text.<br>
  Second line (same paragraph).<br>
  Third line (still same paragraph).
</p>

When to Use <br>:

Postal addresses
Poems or song lyrics
Signatures in letters

❌ Don't Use <br> For:

Creating space between paragraphs (use CSS margin instead)
Controlling layout (use CSS for that)

Horizontal Rule <hr>

Creates a horizontal line to separate content:

<h2>Section 1</h2>
<p>Content here...</p>

<hr>

<h2>Section 2</h2>
<p>Different content...</p>

Preformatted Text with <pre>

Preserves spaces and line breaks exactly as written in the code:

<pre>
Line 1
   Line 2 (indented with spaces)
      Line 3 (more indented)
Line 4
</pre>

Use Cases for <pre>:

Displaying code snippets
ASCII art
Text where spacing matters

Quick Quiz — Paragraphs

Q1. Which tag defines a paragraph in HTML?

Q2. Which tag inserts a line break?

Q3. Which tag preserves spaces and line breaks?

Text Formatting in HTML

Formatting tags add style and emphasis to text. HTML provides both physical tags (just styling) and semantic tags (styling + meaning).

Physical vs Semantic Tags

Physical tags - Only change appearance: <b>, <i>, <u>
Semantic tags - Add meaning + appearance: <strong>, <em>, <mark>
Best practice - Use semantic tags for better accessibility and SEO

Common Formatting Tags

Tag	Description	When to Use
<strong>	Important text (semantic, bold)	Warnings, key points
<b>	Bold text (physical only)	Keywords, product names
<em>	Emphasized text (semantic, italic)	Stress, alternative voice
<i>	Italic text (physical only)	Technical terms, foreign words
<mark>	Highlighted text (yellow background)	Search results, important info
<small>	Smaller text	Fine print, disclaimers
<del>	Deleted text (strikethrough)	Removed content, old prices
<ins>	Inserted text (underlined)	Added content, new prices
<sub>	Subscript	Chemical formulas (H₂O)
<sup>	Superscript	Math exponents (x²), footnotes
<code>	Inline code	Programming code snippets
<kbd>	Keyboard input	Shortcuts (Ctrl+C)
<abbr>	Abbreviation with tooltip	HTML, CSS, API

Complete Example

<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8">
  <title>HTML Formatting Example</title> 
</head>
<body>
  <h1>Text Formatting Demo</h1>
  
  <!-- Semantic tags (preferred) -->
  <p><strong>This is important information!</strong></p>
  <p><em>This text is emphasized.</em></p>
  
  <!-- Physical tags -->
  <p><b>This is bold text</b> (just styling)</p>
  <p><i>This is italic text</i> (just styling)</p>
  
  <!-- Highlighting and marking -->
  <p>Search result: <mark>HTML tutorial</mark></p>
  
  <!-- Insertions and deletions -->
  <p>Price: <del>$50</del> <ins>$35</ins> (on sale!)</p>
  
  <!-- Scientific notation -->
  <p>Math: E = mc<sup>2</sup></p>
  <p>Chemistry: H<sub>2</sub>O (water)</p>
  
  <!-- Code and keyboard -->
  <p>Use <code>console.log()</code> for debugging.</p>
  <p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
  
  <!-- Abbreviations -->
  <p><abbr title="HyperText Markup Language">HTML</abbr> is awesome!</p>
  
  <!-- Small text -->
  <p><small>© 2025 All rights reserved</small></p>
</body>
</html>

Quotations

<!-- Block quote (long quote) -->
<blockquote>
  <p>This is a blockquote. It is used to indicate a section that is quoted from another source.</p>
  <cite>-- by Aman</cite>
</blockquote>

<!-- Inline quote (short quote) -->
<p>Einstein said <q>Imagination is more important than knowledge.</q></p>

Quick Quiz — Formatting

Q1. Which tag is used for highlighting text?

Q2. How do you correctly write H₂O using subscript?

Q3. Which is the semantic (meaningful) version of bold?

Q4. Which tag shows keyboard shortcuts?

Practice Tasks

Create a Resume Page:
- <h1> — Your Name
- <h2> — Education, Experience, Skills
- <h3> — Specific schools, jobs, skill categories
- Use <p> for descriptions
- Use <strong> for job titles
- Use <em> for company names
Create a Recipe Page:
- Recipe name in <h1>
- Sections: Ingredients, Instructions in <h2>
- Use <mark> to highlight key ingredients
- Use <kbd> for oven temperatures
Create a Science Page:
- Write chemical formulas: CO<sub>2</sub>, H<sub>2</sub>SO<sub>4</sub>
- Write equations: E = mc<sup>2</sup>, x<sup>2</sup> + y<sup>2</sup>
- Use <abbr> for DNA, RNA, ATP
- Use <code> for programming examples
E-commerce Product Page:
- Show old price with <del>
- Show new price with <ins>
- Highlight "Limited Time Offer" with <mark>
- Add fine print with <small>

Lesson Summary

Key Takeaways:

Headings (h1-h6) create document structure - use one h1 per page and maintain logical hierarchy
Paragraphs (<p>) group related text - browsers add automatic spacing
Line breaks (<br>) for addresses and poetry - not for spacing
Semantic tags (<strong>, <em>) add meaning - better for accessibility and SEO
Physical tags (<b>, <i>) just change appearance - use sparingly
Special formatting - subscript, superscript, code, keyboard, abbreviations
Best practice - Always prefer semantic HTML over purely visual tags

Proper text formatting makes content readable, accessible, and SEO-friendly. Always choose tags based on meaning, not just appearance!