How to Use Heading Tags in HTML
Working with Text
This lesson will teach you everything you need to learn to use heading tags effectively and improve the readability and organization of your web pages.
What is Heading Tag in HTML
In HTML, heading tags are used to add headings or titles to web page content. Headings are used to organize the page's content and make it more readable and easy to understand for users.
There are six different levels of heading tags in HTML, and they are:
- <h1> </h1>
- <h2> </h2>
- <h3> </h3>
- <h4> </h4>
- <h5> </h5>
- <h6> </h6>
Here's an example of how to use heading tags in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Heading Tags Example</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
<h3>Subheading A of Subheading 2</h3>
<h3>Subheading B of Subheading 2</h3>
<h4>Subheading X of Subheading B</h4>
<h4>Subheading Y of Subheading B</h4>
<h5>Subheading M of Subheading Y</h5>
<h5>Subheading N of Subheading Y</h5>
<h6>Subheading K of Subheading N</h6>
</body>
</html>The output of the above code, when opened in a web browser, will look as shown in the image given below.
In the above example, the page has a main heading represented by an h1 tag. The main heading has further subheadings 1 and 2 represented by an h2 tag. Subheading 2 has subheadings A and B, represented by an h3 tag. Subheading B has further subheadings X and Y, represented by an h4 tag. Subheading Y has further subheadings M and N, represented by an h5 tag. Subheading N has further subheading K represented by an h6 tag.
Note: There should be only one h1 tag present in an HTML document according to the SEO (Search Engine Optimization) rules. Other subheading tags like h2, h3, h4, h5, and h6 should be used in proper order as per the content of a web page.
Attributes of Heading Tag
Here are the attributes we can use with the heading tag:
- id
- class
- style
- title
- align
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the heading tag and use it to apply a specific style to that particular tag.
Example
<h2 id="portfolio">About My Portfolio</h2>In the above example, we assign an id attribute to the h2 tag with a value portfolio. In CSS and JavaScript, we can use the name portfolio to access the specific h2 tag whose id value is set to the name portfolio.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the heading tags and use it to apply a specific style to all the heading tags that belong to a particular class.
Example
<h2 class="info">About HTML Heading Tags</h2>
<h2 class="info">About Heading Tag Attributes</h2>In the above example, both h2 tags have the same class name info. If any CSS style is applied to the class name info, it will be applied on both h2 tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the heading tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<h2 style="color: red">About HTML Heading Tags</h2>The style="color: red" will change the color of the h2 heading tag to red color.
title
The title attribute can be used to add a tooltip or additional information to the heading tag, which will only appear when the user places the mouse cursor on the heading.
Example
<h2 title="About HTML Heading Tags">About HTML Tags</h2>align
The align attribute can be used to align a heading horizontally left, right and center on the webpage.
Example
<h2 align="left">Heading Align to Left</h2>
<h2 align="right">Heading Align to Right</h2>
<h2 align="center">Heading Align to Center</h2>