HTML <header> tag

Updated: 11/13/2018 by Computer Hope
HTML header tag

When writing in HTML (hypertext markup language), 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, and a search box and <heading> elements. The following sections contain information about the <header> tag, including an example of it in use, and related attributes and browser compatibility.

Note

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

Example of <header> 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

All HTML tags support standard attributes that define the settings of an HTML element. Unlike other HTML tags, the <header> tag has no unique attributes.

Compatibility

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

Browser, Compatibility, Container tag, Hyperlink, Logo, Search box, Web design terms