CodesJava

Easy learning with example program codes

Header HTML

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, logo or icons or author’s information. There can be more than one <header> tag in an HTML document. It is however restricted to place 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>

Output:

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>

Output:

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.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status