HTML <h1> to <h6> Tags
Our topic in this post is HTML Tag Hn examples. In hopes that it would provide learners with what they need to learn.
In HTML, heading tags are used to define headings or titles for different sections of a web page. There are six levels of heading tags in HTML, from <h1> to <h6>, with <h1> being the most important and <h6> being the least important. Here’s an overview of how heading tags work in HTML:
- <h1> is used for the main heading of a web page, which is usually the title of the page.
- <h2> is used for the subheading of a page, which is a secondary heading that describes the main topic of the page.
- <h3> to <h6> are used for further subheadings and subsections of a page, with each level indicating a decreasing level of importance.
The given code explains the working of different heading tags in html:
Example:
Headings background and text colors can be set by applying CSS:
Example:
The following CSS code can be used to align headings:
Example:
Here is an example of using H1-H6 tags in an HTML document to structure a webpage about a fictional book:
Example:
Tag Hn Usage
Headings in HTML are defined by the Tag Hn <h1> through <h6>.
The headings with the <h1> tag are considered the most important, whereas the heading with the <h6> tag is the least prominent.
Additionally, ensure not to skip heading levels – start with <h1>, then <h2>, etc.
Attributes
Global
Tag Hn from <h1> to <h6> are compatible with HTML’s Global Attributes.
Event
Tag Hn from <h1> to <h6> are compatible with HTML’s Event Attributes.
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <h1> – <h6> | Yes | Yes | Yes | Yes | Yes |
Predefined CSS
When it comes to Tag Hn, a lot of browsers will render the <h1> element with the following default values:
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}The majority of browsers will render the <h2> element with the following default values:
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}The majority of browsers will render the <h3> element with the following default values:
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}The majority of browsers will render the <h4> element with the following default values:
h4 {
display: block;
font-size:
1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}The majority of browsers will render the <h5> element with the following default values:
h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}The majority of browsers will render the <h6> element with the following default values:
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}HTML Hn Tag Importance
Here are some reasons why heading tags are important:
- Heading tags create a visual hierarchy on a web page, making it easier for users to understand the structure of the content and navigate the page. They also help users to quickly scan the page and identify the most important sections.
- Screen readers and other assistive technologies rely on heading tags to navigate a web page and provide context to visually impaired users. Properly structured heading tags can significantly improve the accessibility of a web page.
- Heading tags provide valuable information to search engines about the structure and content of a web page. Search engines use heading tags to determine the main topic of the page and the importance of each section. Proper use of heading tags can improve a page’s visibility and ranking in search results.
- Heading tags help to structure the content of a web page and make it easier to read and understand. They also make it easier to maintain consistency across multiple pages of a website.
- Proper use of heading tags can help to organize the content of a web page and improve its readability. By breaking up the content into sections with meaningful headings, users can quickly find the information they need without being overwhelmed by a large block of text.
