Do you think IIT Guwahati certified course can help you in your career?
Introduction
In web development, the structure and hierarchy of content on a page play a crucial role in readability, user experience, and search engine optimization (SEO). One of the primary tools for creating this structure is the HTML Header Tag, an essential element in HTML that helps organize content and inform both users and search engines about the importance of various sections on a page. HTML header tags range from <h1> to <h6>, with each level serving a unique purpose.
What are Header Tags?
First, let’s discuss HTML and HTML tags in general. A webpage’s content is written using HTML or Hyper Text Markup language. HTML has got tags that help to create various sections in a webpage. We can develop paragraphs, change font size, add images or even add hyperlinks to other web pages. We can use HTML tags to wrap pictures or text to apply their properties to the content covered.
The HTML header tag is one of the many tags in HTML. The header tag is used to write a page or webpage section. It is displayed as a “banner” in the accessibility tree when it is a global site header. A few items in the header can include a logo, organization name, search bar, and navigation links. The header tag is generally written at the top of a webpage when declared a global header.
Syntax
The HTML header tag has an opening tag and a closing tag. All the content meant to be in the header is between the tags. The opening tag <header>, and the closing tag </header>.
Attributes
The HTML header tag contains all the global attributes. Some of the attributes which might be very useful are
Class: The class attribute can assign a class name to a tag. CSS and JavaScript can access the properties of the content in the header tag through the class name.
Id: The id tag can assign an identity to a header tag. The id attribute and class are very similar in terms of usage. The only difference is that no 2 HTML tags can have the same id, but many tags can have the same class name.
Style: The style tag alters the CSS properties of the header tag. CSS properties like font size, text color, and background color can be changed using this property in the tag itself.
Many other tags are there in HTML.
HTML Document Structure
The HTML Document Structure is the foundation of any webpage, defining how content and elements are arranged within the HTML file. A well-structured HTML document not only helps browsers display content properly but also aids in improving accessibility and SEO.
The basic structure of an HTML document typically includes several essential components:
<!DOCTYPE html>: This declaration tells the browser that the document is written in HTML5, the latest version of HTML.
<html> Tag: This root tag encloses all the content on the page and indicates the start of the HTML document.
<head> Tag: Located within the <html> tag, the <head> tag contains meta-information about the document, such as the title, character set, links to stylesheets, and metadata for search engines.
<title> Tag: Nested inside the <head> tag, the <title> defines the page's title, which appears on the browser tab and in search engine results.
<body> Tag: This tag contains all the visible content on the page, including text, images, and other HTML elements. The structure within the <body> tag is organized using tags like headers (<h1> to <h6>), paragraphs (<p>), divs (<div>), and sections (<section>).
How To Use Header Tag In HTML?
The following are the steps for using the header tag in HTML:-
Opening Tag
Start with the opening header tag. You can place this tag within the <body> section of your HTML document.
Content
Inside the header element, include the content you want at the top of your webpage, such as a website logo, navigation menu, introductory text, etc.
Closing Tag
Close the header element with a closing </header> tag.
Syntax for using the header tag:-
<header>
<!-- content here -->
</header>
Header Elements for HTML
In HTML, header elements are used to structure content hierarchically, making it easier for users and search engines to understand the importance of each section. Header tags range from <h1> to <h6>, with <h1> being the highest level (usually reserved for the main heading of a page) and <h6> being the lowest level. Each level should be used to create a logical flow of information, where <h2> and subsequent tags serve as subheadings under <h1>, and so on.
Example Structure of Header Elements in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Understanding HTML Headers</title>
</head>
<body>
<h1>Introduction to HTML Headers</h1>
<p>This section introduces the concept of header elements in HTML.</p>
<h2>What is an HTML Header Tag?</h2>
<p>The header tag in HTML is used to define headings of different levels.</p>
<h2>Benefits of Using HTML Header Tags</h2>
<p>Using header tags improves readability and SEO.</p>
<h3>Improved User Experience</h3>
<p>Clear headings help users navigate content easily.</p>
<h3>SEO Optimization</h3>
<p>Header tags provide search engines with content structure, enhancing ranking.</p>
<h2>Best Practices for Header Tags</h2>
<p>Tips for effective use of header tags in web content.</p>
</body>
</html>
Explanation
In this example:
<h1> is used for the main title of the page: "Introduction to HTML Headers".
<h2> tags are used for major sections, such as "What is an HTML Header Tag?" and "Benefits of Using HTML Header Tags".
<h3> tags further divide content under <h2> sections, such as "Improved User Experience" and "SEO Optimization" under "Benefits of Using HTML Header Tags".
Examples Of HTML Header Tags
Below we have examples of the header tags.
1. Page Header
<header>
<h1>Page title</h1>
</header>
In this code, we are displaying the “Page title” in the header section as the header of the webpage.
Output
Page Icon
<header>
<img src="{Link to an image}" alt=" Coding Ninjas"/>
</header>
In the above code, we are attaching a logo to the header section of a webpage.
Output
2. Article Header
<article>
<header>
<h2>Header tags</h2>
<p>
The header tag is one of the many tags in HTML. The header of a page or a section of a webpage is written under the header tag.
</p>
</header>
<p>
The header tag has a lot of uses. It can be used as a global header of the page to wrap navigation links or the logo of an organisation.
</p>
</article>
We are displaying the header of the article in the above example. We display a short description in the header section and then continue to show the rest of the article in the paragraph below.
Output
Frequently Asked Questions
Where can we use the HTML header tag?
The HTML header tag can be used as a section for adding a logo or heading to the page. The HTML header tag can also be used in articles to wrap heading material on a page or to add a logo.
How to add a Header in an HTML Form?
To add a header in an HTML form, use header tags like <h1> to <h6> inside the <form> element. This header can introduce or label the form, enhancing clarity for users.
What is the size of h1 tag in HTML?
In HTML, the default size of the h1 (heading level 1) tag depends on the browser's default styles but it is commonly rendered as larger and bolder text compared to the other regular content.
Conclusion
To conclude, in the above article, we have discussed the HTML header tag that stores the heading of a page or an article, and present logos, organization names, or navigational links on a page. Header tags also have global attributes like most tags in HTML.
24+ registered 
