HTML
📌 What Are HTML Headings?
In HTML, headings are used to define titles and subtitles on a web page. They help organize content and make the structure of the page clear and easy to understand.
Headings are defined using tags from <h1> to <h6>:
-
<h1>represents the most important heading -
<h6>represents the least important heading
For example:
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Features and Usage of Headings
1. Automatic Spacing (Margin)
Browsers automatically add space above and below heading elements. This creates a clear visual separation between headings and other content.
2. Hierarchy and Importance
Headings should be used in a logical order:
-
<h1>is the main heading of the page (usually used once) -
<h2>is used for main sections -
<h3>and lower levels are used for sub-sections
This hierarchical structure helps both users and browsers understand the organization of the content.
3. Importance for SEO and Readability
Headings play an important role in:
- Helping search engines understand the structure and key topics of a page
- Allowing users to quickly scan and navigate the content
A well-structured heading system improves both SEO and user experience.
4. Styling Headings with CSS
Headings come with default sizes, but you can customize them using CSS:
HTML
<h1 style="font-size:60px;">Heading 1</h1>
Summary
- Headings define the structure of a web page
-
<h1>is the most important,<h6>is the least important - They should be used in order (hierarchically)
- They are important for SEO and readability
- Use them for structure, not just for styling
