HTML Heading Elements

📘 Introduction to HTML Heading Elements

In the previous lesson, we learned what HTML is. Now, let’s start writing our own HTML code and building websites step by step.

🔤 What Is a Heading Element?

One of the first and most important HTML elements is the heading element.

Here’s how a heading element looks:

<h1>Hello World</h1>

• <h1> is the opening tag.

• </h1> is the closing tag.

• The text between them (e.g., "Hello World") is the content.

The slash ( / ) in the closing tag tells the browser that the element is ending.

🧩 What’s the Difference Between a Tag and an Element?

• Tag: Any code between angle brackets like <h1> or </h1>.

• Element: The full structure — opening tag, content, and closing tag.

For example:

<h1>Hello</h1>

This whole line is an element. The tags are <h1> and </h1>.

📚 Why Do We Use Headings?

Headings give structure to your web page — just like a table of contents in a book.

• <h1> is like the book title.

• <h2> is like chapters.

• <h3> is like sections inside chapters, and so on up to <h6>.

HTML supports only six heading levels:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

There is no <h7> in HTML.

Each level shows a different size by default — <h1> is the biggest and <h6> is the smallest.

⚠️ Do’s and Don’ts of Headings

✅ Good Practices:

• Use only one <h1> per page (it’s like your page title).

• Use heading levels in order: <h1>, then <h2>, then <h3>, etc.

❌ Avoid:

• Skipping heading levels (e.g., jumping from <h1> to <h3>).

• Mixing opening and closing tags (e.g., <h1>Text</h6> – this is incorrect).

Even if your website works, following these rules helps organize your content better for users and search engines.