I wonder what content is appropriate in the header element.
The header element cannot be directly included inside the main element, but I heard that it is possible to use the header inside the section element, and it is not necessary to use it. In some cases, the header element is used in the section element that has the main as the parent, and if used, what content would be appropriate,
Please tell me how to use the header element properly.
fast-frontend html html5 header semantic
Hello, Mr. Truth. I'm YAMOO.
I answer your question.
The HTML 5.2 standard document describes the header element as follows.
The interpretation of the description is as follows.
The <header> element is used when the nearest parent element (for example, <main> or section elements: <body>, <section>, and are introduced. In general, the <header> element contains introduction or navigation aids.
If the <header> element is used as a direct child of the <body> element (if not included in the <main> or other section element), the header is scoped into the body of the document and represents the document introduction.
Assistance technologies (such as screen readers) can communicate to users the meaning of <header> elements set in the document.The information set in the header can provide hints about the type of content.
For example, for headers set to the banner role (<header role="banner">), you can provide information to the screen reader when you use header navigation that is scoped with the <body> element.
User agents (such as browsers) can also provide a way to navigate through header navigation that is scoped with the <body> element.
What you're curious about is being told by NOTE.
Use the <header> element to include the section title (h1 to h6. But it's not mandatory. This means that you can use header elements when you include a title, but it does not force you to do so.
The <header> element can include the section's table of contents (TOC), search forms, logos, and more.
All of the examples listed below are described in the W3C standard document.
"Game Voidwrs Intro" Structured
<header>
<p>Welcome...</p>
<h1>Voidwars!</h1>
</header>
"SVG 1.2 Standard Document Header" Structured
<header>
<h1>Scalable Vector Graphics (SVG) 1.2</h1>
<p>W3C Draft, October 27, 2004</p>
<dl>
<dt>Current version:</dt>
<dd><a href="https://www.w3.org/TR/2004/WD-SVG12-20041027/">https://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
<dt>Previous versions:</dt>
<dd><a href="https://www.w3.org/TR/2004/WD-SVG12-20040510/">https://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
<dt>SVG 1.2 Final Version:</dt>
<dd><a href="https://www.w3.org/TR/SVG12/">https://www.w3.org/TR/SVG12/</a></dd>
<dt>Final SVG Standards:</dt>
<dd><a href="https://www.w3.org/TR/SVG/">https://www.w3.org/TR/SVG/</a></dd>
<dt>Editor:</dt>
<dd>Dean Jackson, W3C, <a href="mailto:[email protected]">[email protected]</a></dd>
<dt>Author:</dt>
<dd><a href="#authors"> Author List</a> Note</dd>
</dl>
<p class="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notic ...">...</a></p>
</header>
In the example below, <header> is included inside <header>, which seems to be a problem, but it is not a problem because <header> inside is not an element. Nested <header> is not an issue because <header> is not a parent.
<article>
<header>
<h1>Flexbox: Perfect Guide</h1>
<aside>
<header>
<h2>Author: Wes McSilly</h2>
<p><a href="./wes-mcsilly/">Let's get in touch with him.</a></p>
</header>
<p>In addition to Flexbox, you are an expert of many talents.</p>
</aside>
</header>
<p><ins> Turns out Wes wasn't a Flexbox expert.</ins></p>
</article>
Note that <main> can be used as a child element inside the <main> element.
The <header> element is used to wrap content that introduces the nearest section element. It usually includes a title, but it is not required. It can be used to wrap the logo, search form, table of contents, etc.
https://www.w3schools.com/html/html5_semantic_elements.asp https://robots.thoughtbot.com/writing-semantic-markup https://www.vikingcodeschool.com/html5-and-css3/html5-semantic-tags
Just look at the picture on the three links.
The layout depends on how you configure the layout
What tags should be used to make each section meaningful markup within a single document?It's an answer to , so it doesn't matter as long as the location and function are correct.
It's just for search engines, accessibility-related readers, and programs that recognize specific semantic markups meaningfully. The characteristics of the element are no different from <div>. If you use html5 markups such as main, section, header, aside, main, footer, and nav to write <div>, the browser renders it without any problems.
Back to the question,
If there is no content related to the header, that is, the header phrase or title, in the section element, do not write it.
© 2024 OneMinuteCode. All rights reserved.