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
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
|
1 |
<header>...</header> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
><!DOCTYPE html> <html> <!--This is the head element--> <head> <title>Difference between Head and Header</title> <body> <!--Header element is used as Page header here--> <header> <h1>VillageCoder</h1> <p>HTML Header Tag</p> </header> <article> <!--Header element is used as a section header here--> <header> <h3>The Header Element</h3> <p>The new HTML tag</p> </header> </article> </body> </html> |
Recommended
Difference Between Absolute and Relative References in HTML
A relative reference does not specify the complete path to a web page. It specifies only the name...
Output
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head><title>Using div as container for section header</title></head> <body> <h1>VillageCoder Tutorials</h1> <h3>div with a header id</h3> <!--div tag "header" id begins here--> <div id="header"> <h1>This is the article's heading.</h1> <h4>This is the sub-heading.</h4> <p>some text go in here.</p> </div> <!--div tag "header" id ends here--> </body> </html> |
Output
Using multiple <header> element in a page
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head></head> <body> <article> <header> <h1><a href="#">Chapter One</a></h1> <p>12/04/21</p> </header> <p> This is the Chapter One where we talk about the importance of the new header element. Whereas many call it the new div, its power far transcends that of a div..</p> </article> <article> <header> <h1><a href="#">Chapter Two</a></h1> <p>12/04/21</p> </header> <p>The header element was sampled from some of the most popular class names and id used by developers across the globe..</p> </article> <article> <header> <h1><a href="#">Chapter Three</a></h1> <p>12/04/21</p> </header> <p>Like most of the new HTML5 elements, the header element adds a semantic touch to the html code giving it more meaningful meaning than the generic div.</p> </article> </body> </html></html>[/et_pb_text][et_pb_text _builder_version="4.13.1" _module_preset="default" header_2_font="Quicksand|700|||||||" header_2_font_size="35px" header_2_line_height="1.5em" custom_margin="||0px||false|false" header_2_font_size_tablet="30px" header_2_font_size_phone="25px" header_2_font_size_last_edited="on|phone" global_colors_info="{}"]<h2>Output</h2>[/et_pb_text][et_pb_image src="https://villagecoder.com/wp-content/uploads/2021/10/multiple-header-in-one-document.png" alt="using multiple header in one document" title_text="multiple header in one document" _builder_version="4.13.1" _module_preset="default" global_colors_info="{}"][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.13.1" _module_preset="default" custom_padding="7px|||||" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.13.1" _module_preset="default" global_colors_info="{}"][et_pb_text _builder_version="4.13.1" _module_preset="default" header_2_font="Quicksand|700|||||||" header_2_font_size="35px" header_2_line_height="1.5em" custom_margin="||0px||false|false" header_2_font_size_tablet="30px" header_2_font_size_phone="25px" header_2_font_size_last_edited="on|phone" global_colors_info="{}"]<h2>Global Attributes</h2>[/et_pb_text][et_pb_text _builder_version="4.13.1" _module_preset="default" text_font="Raleway||||||||" text_font_size="25px" text_font_size_tablet="23px" text_font_size_phone="20px" text_font_size_last_edited="on|phone" global_colors_info="{}"]<p><span>The <header> element supports the global attributes in HTML</span></p>[/et_pb_text][et_pb_text _builder_version="4.13.1" _module_preset="default" header_2_font="Quicksand|700|||||||" header_2_font_size="35px" header_2_line_height="1.4em" custom_margin="||0px||false|false" header_2_font_size_tablet="30px" header_2_font_size_phone="25px" header_2_font_size_last_edited="on|phone" global_colors_info="{}"]<h2>Event Attributes</h2>[/et_pb_text][et_pb_text _builder_version="4.13.1" _module_preset="default" text_font="Raleway||||||||" text_font_size="25px" text_line_height="1.4em" text_font_size_tablet="23px" text_font_size_phone="20px" text_font_size_last_edited="on|desktop" global_colors_info="{}"]<p><span>The <header> element supports the event attributes in HTML</span></p>[/et_pb_text][et_pb_text _builder_version="4.13.1" _module_preset="default" header_2_font="Quicksand|700|||||||" header_2_font_size="35px" header_2_line_height="1.4em" custom_margin="||0px||false|false" header_2_font_size_tablet="30px" header_2_font_size_phone="25px" header_2_font_size_last_edited="on|phone" global_colors_info="{}"]<h2>Default CSS Settings</h2>[/et_pb_text][et_pb_text _builder_version="4.13.1" _module_preset="default" text_font="Raleway||||||||" text_font_size="25px" text_font_size_tablet="23px" text_font_size_phone="20px" text_font_size_last_edited="on|desktop" global_colors_info="{}"]<p><span>The default CSS setting in most browsers is as below:</span></p>[/et_pb_text][et_pb_text _builder_version="4.13.1" _module_preset="default" global_colors_info="{}"]<pre lang="css">header { display : block; } |
You May Also Like…
Block And Inline Level Tags in HTML
Block elements start on a new line and end with a carriage return. That's, immediately after ending on a horizontal...
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
HTML offers a range of elements for formatting text. HTML formatting tags include : <b> - Bold text...
Recent Comments