Select Page

The header element in HTML5 – How to use it

The <header> element is a new HTML element and was introduced in HTML5. It can be used as a header for a whole page (the most common usage), but can also be used as the header for an article or any other piece of content on the page


nanadwumor

May 27, 2023
header element

The <header> element is a new HTML element and was introduced in HTML5. It can be used as a header for a whole page (the most common usage), but can also be used as the header for an article or any other piece of content on the page. The header is usually used as a container for content that precedes the primary content of the page. This often contains website branding, navigation elements etc.

<header> element is a container primarily aimed at containing heading (h1, h2, h3, h4, h5, h6) but this is not a requirement. It is no different from the <div> element except that its name adds a semantic meaning. Instead of a general container like <div>, a <header> adds semantic meaning to the kind of container.

This helps search engines to understand the structure of your website’s content. Of course, header of a document comprises the foremost content a d this normally entails at least one heading (h1, h2, h3, h4, h5, h6).


Join other Subscribers on our YouTube channel and enjoy daily pogramming tutorials.


Syntax of <header> element

This tag cannot be placed within a <footer>, <address> or another <header> element.

The <header> and the <head> element

Don’t confuse the <head> element with the <header> element. The two are different. The <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>. That’s, the <head> element contains the title of your document.

The document’s title is what you see on the browser’s title bar or page’s bar. The <head> element contains metadata (data about data) about the web document. The <head> is used once in a document whereas the <header> can be used countless times.

Recommended


Output

Difference between the Head and Header

The <div> and the <header> element

The <div> is a container for other elements. Elements in a <div> are normally referenced in a CSS using a class or id. The <header> element can be seen as a special type of <div> element geared towards containing headers of pages and articles.

Using the <div> element as container for header section

Prior to HTML5, most web developers used a <div> to group header code and give them a class name or id called “header”. However, in HTML5 the <header> element was introduced as a special container for header section of pages or articles.

In other words, <header> can be seen as a special type of <div> for header section. So <header> element does not add any default formatting to the html, just like a div. It only gives semantic meaning to what it contains and this is extremely helpful to search engines.

Output

Using div as a container for a section

Using multiple <header> element in a page


Share this article


You May Also Like…

Selecting a browser for HTML5 development

Selecting a browser for HTML5 development

Google's Chrome browser is simple to use and has the most up-to-date HTML5 features making it easier for developers....

Top 10 HTML5 formatting tags

Top 10 HTML5 formatting tags

HTML offers a range of elements for formatting text. HTML formatting tags include : <b> - Bold text...