 |
| HEADER-TAG-IN-HTML5 |
<header> Tag in HTML5
1. Introduction of <header> tag
2. Syntax of <header> tag
3. Attributes of <header> tag
4. Example of header tag
Introduction to HTML5 <header> Tag
Before HTML5, any header of the webpage was defined by the DIV element. The id was given to separate the DIV section of the header from the other div section. As this has been given below.
<div id = "header">
// header text and image content here
</div>
Similar to the header, the other div elements also defined the id. Thus it was difficult to manage the different ids of each div.
HTML5 provides a dedicated tag to define every important section of the website making them easy to manage and apply styles on these. One of the tags is the <header> tag.
<header> tag of HTML5 is used to define a webpage or a header of a section. The header is an important part of any website. Header displays information about a website. Such as the name of the website and logo etc.
HTML5 <header> tag creates a container in which you can display any type of introductory content or navigational links. Mainly the information given below is displayed in the <header> tag.
1. Heading Tags.
2. Logo or Icon.
3. Any information about the content(Description).
The <header> tag can be easily managed by CSS. You will learn in next CSS course.
Syntax of HTML5 <header> Tag
The syntax for <header> tag is being given below.
<header>
// Header text and image content
</header>
Inside the <header> tag, you define the headline of the website from the heading tag and the headline of the website from the paragraph tag. For example, in the case of MyBlogHelp Tutorials, the <header> element will be defined as
<header>
<h1> MyBlogHelp Tutorials </h1>
<p> Blogging, SEO, Design & Development </p>
</ header>
As I've told you earlier, the <header> element is not only used for the webpage but also to define a header of a section. So you can use more than one header tags in a single document. You can define a <section> header like this.
<section>
<header>
<h1> Heading Section </h1>
</header>
// Other section elements
</section>
One important thing to be noted that you can’t define a <header> tag in <footer>, <address> or any other <header> tag.
Attributes of HTML5 <header> Tag
There is no specific attributes of the <header> tag are available. These tags support all HTML global attributes such as id, class, etc. If you are using <header> tag more than once in your webpage, these attributes can differentiate. The syntax is given below.
<header id = "WebsiteHeader">
// content here
</ header>
<header> id = "sectionHeader">
// content here
</ header>
Styling HTML5 <header> Tag
Like any other tag, CSS rules can be applied to the <header> tag as well. The syntax is given below.
header
{
// CSS rules here
}
Events related to HTML5 <header> Tag
<header> tag supports all global event attributes. By using Event attributes, you can handle events that are generated on the <header> element. The syntax is below.
<header onmouseover = "script-here">
// content here
</header>
The onmouseover attribute has been used in the above syntax. Similarly, other events can also be handled.
Example of HTML5 <header> tag
The above script generates the given output below.
 |
| EXAMPLE-OF-HEADER-TAG |
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.