HTML <header> tag

Updated: 05/08/2017 by Computer Hope

HTML header tagWhen writing in HTML, the <header> tag is a block element used as a container for navigational or introductory items. It is useful for holding content like a website's logo and main section links, as well as a search box and <heading> elements. The following sections contain information about the <header> tag, including an example of it in use, as well as related attributes and browser compatibility.

Note: A <header> tag cannot be used inside an <address>, <footer>, or parent <header> element.

Example code

<article>
<header class="cf"><a href="https://www.computerhope.com/">
<img src="https://www.computerhope.com/cdn/computer-hope.jpg"
width="412" height="82" alt="Computer Hope" style="float:left; display:block; margin-right:20px;"/></a>
<h3>Hi, I'm heading style 3.</h3>
</header>
</article>

Example result

Computer Hope

Hi, I'm heading style 3.


The header in the example has had both external and inline CSS added to improve its appearance.

Attributes

Within an HTML tag, an attribute dictates certain aspects of an HTML element. Attributes are made up of a name and value pair. While the <header> tag does not have any unique attributes, it does utilize all of the standard attributes.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
9.0+ 4.0+ 5.0+ 11.1+ 6.0+

Browser, Compatibility, Hyperlink, Logo, Search box