'Coding has over 700 languages', '67% of programming jobs aren’t in the technology industry', 'Coding is behind almost everything that is powered by electricity'
Last Updated: Sep 20, 2023
Easy

HTML Header Tag

Author Rituraj Seal
0 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

Hey Ninjas! Do you want to learn about HTML? Does building sites on the internet excite you? Do you want to pursue a career in web development? Well, you are in the right place.

HTML Header Tag

Here we will be taking a look at the HTML header tag. Where HTML tags are used and how attributes can modify them based on the needs will be discussed in this article. We will also be writing some code to show how the tags are registered, so get ready as you delve into the world of web development.

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. 

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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>

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

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

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

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.

What is header tag in HTML?

The header tag in HTML is used to define a container for content introduction or a group of navigational links usually placed at the top of a webpage. It helps in structuring the HTML tags.

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.

To learn more about HTML, you can visit the links

Happy Learning!

Previous article
Difference between div and span
Next article
Difference Between Header and Footer
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass