Right usage of the <header> tag in HTML5
Question
I have read that the tag is the header of a section. It could be used more then 1 time in the document.
Should I use the <header> tag in the section:
<section>
<header>
</header>
</section>
or above the <section> like:
<header>
</header>
<section>
</section>
Is it possible to have this sctucture for heading information and the sections:
<section id="main">
<header id="results">
<h1>My Results</h1>
</header>
<section id="results">
<section id="result1">
<h2>Title</h2>
<div class="body"></div>
</section>
<section id="result2">
<h2>Title</h2>
<div class="body"></div>
</section>
.
.
.
</section>
</section>
do you thing this example is a good one for semantic usage oh the HTML5 tags header and section?
Or should I use instead of the <section id="main"> , the <main> tag?
2 answers
solution1
1 2014-04-17 14:03:42
Your two cases have a different meaning:
Here the section has a header :
<section>
<header>
</header>
</section>
Here the parent section (*) has a header and a child section (which has no header ):
<header>
</header>
<section>
</section>
(* Could be a sectioning element like article / section / nav / aside , or a sectioning root like body /etc.)
Both cases are possible, it depends on the meaning of your content.
See my answer to a related question, which contains an example document with different header elements.
solution2
0 2014-04-17 11:57:56
Don't use section as a wrapper for styling. correct way is
<body>
<header>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</header>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
This is the first article.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
This is the second article.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
</aside>
<footer>Footer</footer>
</body>
About section and header click here and for html5 possible mistakes here
Your html should be
<body>
<header>
<h1>Search Form</h1>
</header>
<section id="content">
<h1>Search Result Title</h1>
<ul id="sponsored_ads">
<li></li>
<li></li>
</ul>
<ul id="organic_ads">
<li></li>
<li></li>
</ul>
<article id="left_menu_1">
<ul>
<li></li>
<li></li>
</ul>
</article>
<article id="left_menu_2>
<ul>
<li></li>
<li></li>
</ul>
</article>
</section>
<footer></footer>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.