HTML <header> Tag
To act as a container of introductory content or navigation links, the HTML <header> tag is used. It can contain multiple heading elements, logos or icons, or author’s information. There can be more than one <header> tag in an HTML document. It is however restricted to placing an HTML <header> tag within a <footer>, <address>, or another <header> element.
Example 1:
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>Motivational Quote:</h1>
<h3>By: Winston Churchill</h3>
</header>
<p>The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees Opportunity In Every Difficulty.</p>
</article>
<article>
<header>
<h1>Motivational Quote:</h1>
<h3>By: Steve Jobs</h3>
</header>
<p>If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.</p>
</article>
</body>
</html>
Explanation:
In the above example, we have used the HTML <header> tag as a container of the introductory content.
Example 2: Using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
header{
border: 5px solid black;
background-color:crimson;
padding:10px;
color: white;
text-align: center;
}
p{
border: 5px solid crimson;
background-color:black;
padding:10px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<article>
<header>
<h1>Motivational Quote:</h1>
<h3>By: Winston Churchill</h3>
</header>
<p>The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees Opportunity In Every Difficulty.</p>
</article>
<article>
<header>
<h1>Motivational Quote:</h1>
<h3>By: Steve Jobs</h3>
</header>
<p>If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.</p>
</article>
</body>
</html>
Explanation:
In the above example, we have used CSS style properties with the HTML <header> tag, which is used as a container of the introductory content.
Global Attributes:
The HTML GLobal attributes are supported by the HTML <header> tag.
Event Attributes:
The HTML Event attributes are supported by the HTML <header> tag.
Supporting Browsers:
Chrome, IE, Firefox, Opera, and Safari.