HTML headings are used to give titles to a webpage and to divide its content into meaningful sections. HTML provides six heading elements, from <h1> to <h6>.
The important point is that heading elements describe the structure and importance of content; they should not be selected simply because one heading looks larger than another. CSS can be used when the visual size needs to be changed.
An HTML heading is an element used to introduce a topic or subsection of a webpage. The six heading levels allow information to be arranged from the main topic down to more specific subsections.
<h1>Main Page Title</h1>
<h1>Introduction to Computer Networks</h1> <h2>What is a Computer Network?</h2> <h3>Types of Networks</h3>
Here, the h1 represents the main topic, h2 introduces a major section, and h3 represents a subsection within that section.
HTML defines six heading elements. They represent different levels in the document's heading structure.
| Element | Typical Role |
|---|---|
| <h1> | Main heading or primary topic of the page. |
| <h2> | Major section under the main topic. |
| <h3> | Subsection belonging to an h2 section. |
| <h4> | More detailed subsection under an h3 section. |
| <h5> | Lower-level subsection when additional structure is genuinely needed. |
| <h6> | Lowest heading level provided by HTML. |
The visual appearance of these headings is controlled by the browser's default stylesheet and can be changed with CSS.
The <h1> element identifies the primary subject of the page. Its text should clearly communicate what the page is about.
<h1>HTML Headings</h1>
For a typical article or tutorial page, the page title is commonly represented by one h1. The important principle is that the page should have a clear primary heading rather than using h1 merely for its large default appearance.
The <h2> element is used for major sections of the page. A page can contain several h2 headings when it has multiple main sections.
<h1>HTML Tutorial</h1> <h2>HTML Basics</h2> <h2>HTML Attributes</h2> <h2>HTML Forms</h2>
Each h2 represents a separate major section related to the main h1 topic.
The <h3> element is useful for dividing an h2 section into smaller topics.
<h2>Programming Languages</h2> <h3>Python</h3> <h3>Java</h3> <h3>C++</h3>
Here, Python, Java, and C++ are subsections of the Programming Languages section.
The <h4>, <h5>, and <h6> elements provide deeper levels of organization. They are useful when a document contains genuinely nested information.
<h2>Database Management System</h2> <h3>Database Models</h3> <h4>Relational Model</h4> <h5>Tables and Relationships</h5> <h6>Primary Key Example</h6>
Do not use these elements simply to make text smaller. If the content is not actually a subsection, a normal paragraph or another suitable element is usually more appropriate.
Heading hierarchy describes the relationship between the main topic, sections, and subsections. A logical hierarchy makes long pages easier to scan and understand.
<h1>Computer Networks</h1> <h2>Introduction to Computer Networks</h2> <h2>Types of Networks</h2> <h3>LAN</h3> <h3>MAN</h3> <h3>WAN</h3> <h2>Network Devices</h2> <h3>Router</h3> <h3>Switch</h3>
The h1 identifies the overall topic. The h2 elements introduce major sections, while the h3 elements provide subsections within a particular h2 section.
Consider an educational article about Python programming. Its heading structure could be organized like this:
<h1>Python Programming Tutorial</h1> <h2>What is Python?</h2> <p>Python is a high-level programming language...</p> <h2>Features of Python</h2> <h3>Easy Syntax</h3> <p>Python uses a readable syntax...</p> <h3>Object-Oriented Programming</h3> <p>Python supports object-oriented programming...</p> <h2>Applications of Python</h2> <h3>Web Development</h3> <h3>Data Science</h3>
This arrangement makes the relationship between the main topic, major sections, and individual subsections clear.
A common beginner mistake is choosing an h1, h2, or h3 element only because its default text size looks suitable. Heading elements have a structural purpose, while CSS controls presentation.
<h4>HTML Tutorial</h4>
Using h4 only because it visually matches the desired font size is not a good reason.
<h1>HTML Tutorial</h1>
If the main title needs to appear smaller, change its appearance with CSS rather than changing the semantic heading level.
Well-written headings help communicate the organization and subject matter of a webpage. They can also make content easier for search engines and users to interpret.
Headings should therefore describe the actual content that follows them rather than being filled with unrelated keywords.
<h1>HTML Attributes</h1> <h2>What Are HTML Attributes?</h2> <h2>Global Attributes</h2> <h2>Common Attribute Examples</h2>
The headings naturally describe the page topic and its sections without unnecessary keyword repetition.
Headings are particularly useful for people who navigate webpages with assistive technologies. A clear heading structure allows users to understand the organization of a page and move between sections more efficiently.
For accessibility, heading text should be descriptive and the heading levels should reflect the logical organization of the content.
<h1>Operating System</h1> <h2>Process Management</h2> <h3>Process Scheduling</h3> <h3>Process States</h3> <h2>Memory Management</h2>
Do not choose h2, h3, or h4 simply because its default size looks attractive. Use the level that matches the content structure and use CSS for visual design.
A heading such as "Click Here" or "More" gives little information about the section. Prefer descriptive wording that tells readers what they will find.
Not every small piece of text needs to become a heading. Use headings when they introduce a meaningful section or subsection.
Avoid adding several identical headings when they do not represent separate sections.
The following example demonstrates a simple educational page using a clear heading hierarchy.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Computer Science Subjects</title>
</head>
<body>
<h1>Computer Science Subjects</h1>
<p>
Explore important subjects studied in computer science.
</p>
<h2>Programming</h2>
<h3>C Programming</h3>
<p>
C is widely used for learning programming fundamentals.
</p>
<h3>Java Programming</h3>
<p>
Java is an object-oriented programming language.
</p>
<h2>Database Systems</h2>
<h3>DBMS</h3>
<p>
DBMS provides a systematic way to store and manage data.
</p>
</body>
</html>
HTML provides six heading elements: h1, h2, h3, h4, h5, and h6.
The h1 element identifies the primary topic or title of a webpage. Its content should clearly describe what the page is about.
Yes. Multiple h2 elements are commonly used to divide a page into several major sections.
No. Heading elements should represent content hierarchy. CSS should be used to control font size, color, spacing, and other visual properties.
Yes. A meaningful heading hierarchy can make page navigation easier for users of assistive technologies.