HTML <header> tag
➔ The <header> element usually represents a section for the primary introductory content, including a set of navigational links.
➔ It may contain also a logo, a search form, entity name, and other elements.
➔ The <header> element should not be a descendant of a <address>, <footer> or other <header> element.
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<header>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">jQuery</a> |
<a href="#">SQL</a>
</header>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example (using CSS)
<!DOCTYPE html>
<html>
<head>
<title>HTML header tag Example</title>
<style>
header a {
width: 150px;
height: 50px;
background-color: #405050;
font-size: 14pt;
color: white;
border-radius: 2px;
text-decoration: none;
padding: 20px;
margin: 2px;
}
header a:hover {
background-color: #556565;
color: white;
}
</style>
</head>
<body>
<h2>HTML header tag Example</h2>
<header>
<a href="#">
HTML</a>
<a href="#">
CSS</a>
<a href="#">
JavaScript</a>
<a href="#">
jQuery</a>
<a href="#">
SQL</a>
</header>
</body>
</html>
Click on the "Try it Now" button to see how it works.