MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • AFFILIATE MARKETING
    • LeadsArk
  • MORE
    • MAKE MONEY
      • ONLINE BUSINESS
      • ADSENSE
      • AFFILIATE MARKETING
    • BLOGGING
      • SEO
      • BlogSpot
      • WORPRESS
      • GOOGLE
      • COMPUTER TIPS
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DEVELOPMENT
      • PHP
      • WORDPRESS
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Saturday, December 22, 2018

How to use header tag in HTML5?

 MyBlogHelp     December 22, 2018     html     No comments   



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





 The above script generates the given output below.


Example-of-header-tag-html5
EXAMPLE-OF-HEADER-TAG

Previous:- How to use figure tag in html5?

Next:- How to use time tag in html5?


  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Thank you for reading this post. Please do not enter any spam link in the comment box.

Followers

Blog Archive

  • ►  2020 (4)
    • ►  October (1)
    • ►  September (1)
    • ►  August (2)
  • ►  2019 (52)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  August (1)
    • ►  July (1)
    • ►  May (11)
    • ►  April (10)
    • ►  March (6)
    • ►  February (3)
    • ►  January (16)
  • ▼  2018 (54)
    • ▼  December (27)
      • How to use html5 nav tag?
      • How to install Google Fonts on your Blogger Blog?
      • How to use section tag in html5?
      • How to use meter tag in html5?
      • How to use time tag in html5?
      • How to use header tag in HTML5?
      • How to use figure tag in html5?
      • How to use aside tag in html5?
      • How to use details Tag in HTML5?
      • How to use wbr tag in html5?
      • How to use article tag in HTML 5 ?
      • How to use menu tag in html?
      • How to use base tag in HTML?
      • How to use HTML hr and br Tag?
      • How to use HTML address tag?
      • How to use HTML Meta Tags?
      • How to use HTML script & noscript Tag?
      • How to use DOCTYPE declaration in HTML?
      • How to use Form Tag in HTML?
      • How to use Block and Inline Tags in HTML?
      • How to use Lists in HTML?
      • How to use Image Tag in HTML?
      • How to use Table Tag in HTML?
      • How to use anchor Tag in HTML?
      • How to Format & Style in HTML?
      • How to use Heading in HTML?
      • What is Attribute in HTML?
    • ►  November (5)
    • ►  May (5)
    • ►  April (4)
    • ►  February (3)
    • ►  January (10)
  • ►  2017 (17)
    • ►  December (9)
    • ►  November (8)

Popular Posts

  • How to use the main tag in html5?
  • How to use keygen tag in html5?
  • How to use html5 mark tag to highlight text?
  • How to start Online Business without money from home?
  • What is a search engine?

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.

Featured Post

LeadArk - Affiliate Marketing | Qualified Organic Lead Generation | LeadsArk Review

Copyright © MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
Design by Md. Abdussamad | MyBlogHelp.com