How to use html5 nav tag?

NAV TAG

Introduction of HTML5 <nav> Tag

In this post, you will learn about the HTML <nav> tag which is an html5 element. It creates a section with a collection of website navigation links. html5 <nav> tag is commonly used to organize the links on the webpage or website. 

Read More

How to install Google Fonts on your Blogger Blog?

GOOGLE-FONTS-ON-BLOG

      

         My dear bloggers, today you will learn about how to install Google Web Fonts on your blog or website to improve text format. Google offers a lot of free Web Fonts. You can choose your favorite font.

Read More

How to use section tag in html5?

HTML5-SECTION-TAG

<section> Tag in HTML5

Introduction of <section> tag 

Syntax of <section> tag 

Attributes of <section> tag 

Read More

How to use meter tag in html5?

HTML-METER-TAG

<meter> Tag in HTML5

Introduction of <meter> tag

Syntax of <meter> tag

Attributes of <meter> tag

Example of <meter> tag with attribute

Read More

How to use time tag in html5?

HTML-TIME-TAG

<time> Tag in HTML5

1. Introduction of <time> tag

2. Syntax of <time> tag

3. Attributes & events of <time> tag

4. Example of <time> tag

Read More

How to use header tag in HTML5?

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

<!DOCTYPE html> <html> <head> <style> header { width: 100%; height: 100px; padding-left: 10px; position: absolute; top: 0; left: 0; border: 1px solid #ccc; background-color: #fa4303; color: white; line-height: 20px; } </style> </head> <body> <header> <h1> My Blog Help </h1> <p> This is a Blog for Blogging, SEO, Web Design and Development & Computer Tips </p> </header> </body> </html>

 The above script generates the given output below.

EXAMPLE-OF-HEADER-TAG

Previous:- How to use figure tag in html5?

Next:- How to use time tag in html5?

Read More

How to use figure tag in html5?

HTML5-FIGURE-TAG

<figure> Tag in HTML5

        1. Introduction of <figure> tag

        2. Syntax of <figure> tag 

        3. Attributes of <image> tag 

        4. Example of <figure> tag

Read More

How to use aside tag in html5?

ASIDE-TAG-IN-HTML5

<aside> Tag in HTML5

• Introduction of <aside> tag 
• Syntax of <aside> tag
• Attributes of <aside> tag
• Example of <aside> tag 

Read More