HTML Headings


🔹 What are HTML Headings?

HTML headings are used to define titles or subtitles in a web page. They help organize content, improve readability, and play an important role in SEO (Search Engine Optimization).

There are six levels of headings in HTML:

<h1> to <h6>
  • <h1> is the largest and most important heading.

  • <h6> is the smallest and least important heading.


🔹 Example: All 6 Headings
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
🔹 Output:

The text will appear in decreasing size from <h1> to <h6>.


🔹 Semantic Importance

Search engines use headings to index the structure and content of web pages.

  • <h1> is usually the main heading of a page (used only once)

  • <h2> to <h6> are used for subheadings


🔹 Example: Page Layout with Headings
<!DOCTYPE html>
<html>
<head>
  <title>Headings Example</title>
</head>
<body>

  <h1>Welcome to My Website</h1>
  <h2>About Us</h2>
  <p>We are a team of developers...</p>

  <h2>Services</h2>
  <h3>Web Development</h3>
  <h3>SEO Optimization</h3>

  <h2>Contact</h2>
  <p>Email us at support@example.com</p>

</body>
</html>

🔹 Tips for Using Headings

  • Use only one <h1> per page

  • Do not skip levels (e.g., don’t go from <h1> to <h4> directly)

  • Use headings to structure content, not just for font size


Practice Questions

Q1. Create an HTML page that includes all six heading tags.

Q2. Write a web page with one <h1> and two <h2> subheadings.

Q3. Add <h3> and <h4> headings under a service section.

Q4. Create a heading that says "My Blog" using <h1>.

Q5. Use <h5> to display a small subheading.

Q6. Nest a paragraph under an <h2> heading labeled "About Me".

Q7. Show a company name using <h1> and team roles using <h3>.

Q8. Make a simple portfolio layout using only heading tags.

Q9. Create a recipe structure using <h2> for steps and <h3> for details.

Q10. Use <h6> in a webpage footer for copyright.


HTML Headings Quiz

Q1: How many heading levels are available in HTML?

A. 4
B. 5
C. 6
D. 7

Q2: Which tag is used for the main heading of a page?

A. <h6>
B. <h3>
C. <h1>
D. <title>

Q3: What does <h4> represent?

A. Fourth line
B. Fourth-level heading
C. Font size 4
D. HTML version 4

Q4: Which of the following is correct syntax for a heading?

A. <h1>This is heading</h1>
B. <heading>This</heading>
C. <h>This is heading</h>
D. <h7>Title</h7>

Q5: What is the smallest HTML heading?

A. <h1>
B. <h6>
C. <h3>
D. <head>

Q6: Can you use multiple <h1> tags on the same page?

A. Yes, always
B. No, never
C. Only in the footer
D. It is allowed but not recommended

Q7: Why are heading tags important for SEO?

A. They increase loading speed
B. They define styles
C. They help search engines understand content
D. They remove broken links

Q8: What happens if you skip heading levels (e.g., from <h1> to <h4>)

A. Page crashes
B. It’s invalid HTML
C. It still works, but affects structure
D. Browser won't display it

Q9: Which heading tag gives the largest font size by default?

A. <h6>
B. <h3>
C. <h1>
D. <p>

Q10: Can you style headings using CSS?

A. No
B. Only <h1>
C. Yes, all heading tags
D. Only inline

Go Back Top