From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/element%2Fheader.html | 108 +++++++++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 devdocs/html/element%2Fheader.html (limited to 'devdocs/html/element%2Fheader.html') diff --git a/devdocs/html/element%2Fheader.html b/devdocs/html/element%2Fheader.html new file mode 100644 index 00000000..70bbebce --- /dev/null +++ b/devdocs/html/element%2Fheader.html @@ -0,0 +1,108 @@ +

<header>

The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

+

Try it

+
+

Usage notes

+
+

The <header> element has an identical meaning to the site-wide banner landmark role, unless nested within sectioning content. Then, the <header> element is not a landmark.

The <header> element can define a global site header, described as a banner in the accessibility tree. It usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.

Otherwise, it is a section in the accessibility tree, and usually contains the surrounding section's heading (an h1 – h6 element) and optional subheading, but this is not required.

+
+

Historical Usage

+

The <header> element originally existed at the very beginning of HTML for headings. It is seen in the very first website. At some point, headings became <h1> through <h6>, allowing <header> to be free to fill a different role.

+

Attributes

+

This element only includes the global attributes.

+

Examples

+ +

Page Header

+
+
+

html

+
<header>
+  <h1>Main Page Title</h1>
+  <img src="mdn-logo-sm.png" alt="MDN logo" />
+</header>
+
+

Result

+
+ + +
+
+

Article Header

+
+
+

html

+
<article>
+  <header>
+    <h2>The Planet Earth</h2>
+    <p>
+      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
+      Jane Smith
+    </p>
+  </header>
+  <p>
+    We live on a planet that's blue and green, with so many things still unseen.
+  </p>
+  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
+</article>
+
+

Result

+
+ + +
+
+

Accessibility

+

The <header> element defines a banner landmark when its context is the <body> element. The HTML header element is not considered a banner landmark when it is descendant of an <article>, <aside>, <main>, <nav>, or <section> element.

+

Technical summary

+
Content categories Flow content, palpable content.
Permitted content Flow content, but with no <header> or <footer> descendant.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content. Note that a <header> element must not be a descendant of an <address>, <footer> or another <header> element.
Implicit ARIA role banner, or generic if a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region
Permitted ARIA roles group, presentation or none
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-header-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
header5124911.154.418411.14.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header +

+
-- cgit v1.2.3