What Are Heading Tags?
In HTML, heading tags are used to organize the structure and hierarchy of your content. There are six levels of headings, from <h1> to <h6>, each showing a different level of importance. The smaller the number, the more important the heading — and the larger the text appears. For example, <h1> is usually the main title, while <h6> is used for the smallest subheadings.
What Does <hn> Mean?
You might sometimes see people mention <hn> tags, but here’s something important to know: isn’t an actual HTML tag. The n simply stands for “number,” and it’s a general way programmers refer to all heading tags — from <h1> to <h6>. In real HTML code, though, you need to use one of the specific tags: <h1>, <h2>, and so on, up to <h6>. Each one helps structure your content clearly and meaningfully.
The Role and Meaning of <h1> to <h6> Tags
| Tag | Purpose | Features |
|---|---|---|
| <h1> | Main title of the document | Displayed the largest. Recommended to use only one per page. |
| <h2> | Section headings | Slightly smaller than <h1>, but still important. Great for main sections. |
| <h3> to <h6> | Subheadings and details | The larger the number, the smaller the text and the less important it becomes. Used for finer structure. |
Heading tags from <h1> to <h6> play an important role in both the visual and structural organization of your webpage. Web browsers apply default styles to these tags, making the hierarchy clear at a glance — with <h1> appearing largest and most prominent, and <h6> the smallest. But their job isn’t just visual. Screen readers also use these headings to help users navigate the content logically, which is especially important for accessibility. And here’s a bonus: including relevant keywords in your headings can improve your SEO (Search Engine Optimization), helping your content show up more easily in search results.
Basic Usage Example
Introduction to Web Development
What is HTML?
Types of Tags
What is CSS?
How to Apply Styles
When you structure your headings from <h1> to <h6> in a clear, logical order, your content becomes easier to understand — both for people and for machines.
Thanks to this well-organized hierarchy:
- Readers can easily follow the flow of your content at a glance.
- Search engines can better understand and index your page.
- Screen reader users can navigate the document more smoothly and confidently.
Taking a little time to organize your headings thoughtfully can make a big difference in accessibility and visibility.
Incorrect Usage Example
Headings should always follow a clear, logical order.
Here’s an example of what not to do:
When heading levels are mixed up like this, it can confuse search engines and screen readers. They may have trouble understanding the structure of your content, making it harder for users to navigate your page. To keep your content clear and accessible, always follow a consistent heading hierarchy — like going from <h1> to <h2> to <h3>, and so on.
<h> Is Not a Valid Tag
In HTML, there’s no such thing as a heading tag without a number — like <h>. Valid heading tags must include a number, such as <h1> through <h6>. Since <h> is not a recognized tag, the browser doesn’t know what to do with it. As a result, it simply ignores the tag or treats the text like normal plain text.
What Happens If You Use <h>:
- The text won’t appear larger — it looks like regular text.
- Any CSS styles targeting headings won’t apply.
- You’ll get an error in HTML validation tools.
Tips for Using Heading Tags the Right Way
HTML heading tags aren’t just about making text look big or bold — they’re essential tools for building the structure of your web page. By thinking carefully about the meaning and flow of your content, you can create pages that are both more professional and easier to read.
If you’d like to dive a bit deeper into how heading tags work, feel free to check out the official MDN documentation below: