If a header section contains only heading (eg. h1, h2..), and no other information. Should it still be wrapped it in the header tags? Or the header tags should be used if it has more content than just the headings?
For example, should this be used?
<section>
<h2> .... </h2>
<div>
...
</div>
</section>
or this?
<section>
<header>
<h2>...</h2>
</header>
<div>
...
</div>
</section>
Here's that HTML5 doctor article:
Avoiding common HTML5 mistakes
...as linked to by #simoncereska.
To save folks some time, here's the relevant quote:
If your <header> element only contains a single heading element, leave
out the <header>. The <article> (for example) ensures that the heading will be shown
in the document outline, and because the <header> doesn’t contain
multiple elements (as the definition describes), why write code when
you don't need to? Simply use this:
<article>
<h1>My best blog post</h1>
<!-- Article content -->
</article>
The article is definitely worth reading, but if your looking for a quick answer, then see the bold text in the above quote. :)
Related
Forgive me if I misspelled it and please correct it.
I do not know exactly how to use these two elements (Article | Section)
Now I want to launch a site that has completely standard HTML code,
Now, how do you think an article from my site should be structured? And where can I put the site header better?
I am stuck between these two options.
<!-- 1 -->
<section>
<header>
<h1>title of page</h1>
</header>
<article>
<p>some text</p>
</article>
</section>
<!-- 2 -->
<section>
<article>
<header>
<h1>title of page</h1>
</header>
</article>
<p>some text</p>
</section>
If both are incorrect, what do you suggest?
My English is very poor. So I could not use any more questions. But I understand the coding. Please explain to me by writing the code and simple sentences, and do not say that there is an answer to your question.
Read more about the HTML element article of Mozilla:
The HTML element represents a self-contained composition in
a document, page, application, or site, which is intended to be
independently distributable or reusable (e.g., in syndication)... each
post would be contained in an element, possibly with one or
more s within.
Unlike the article element, the section element:
The HTML element represents a generic standalone section of
a document, which doesn't have a more specific semantic element to
represent it.
Thus, the article element can contain section elements. But the section element cannot contain any other semantic elements.
Accordingly, your example can be presented like this:
<header>
<h1>The article News from Valinor of Gandalf</h1>
</header>
<article>
<h2>News from Valinor</h2>
<p>A short introduction to the content of the article.</p>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
...
</article>
<footer>
<h2>Publisher and copyright holder</h2>
<p>Publisher and © 2021 Gandalf</p>
</footer>
How do I make a document outline like this using HTML5 semantic tags, when I need the first two headings in one block?
-MySite
--Books for children
---Book1
---Book2
When I use
<body>
<header class="INeedThisInOneBox">
<h1>MySite</h1>
<h2 class="slogan">Books for children</h2>
</header>
<article>
<h1>Book1</h1>
</article>
<article>
<h1>Book2</h1>
</article>
</body>
the outline goes:
-MySite
--Books for children
--Book1
--Book2
I would like to use semantic tags, but need to have SEO importance granted for the slogan.
You can only get this outline if you stop using sectioning content elements (example A) or if you start using sectioning content elements everytime when it’s appropriate (example B).
Example A: no sectioning content elements
<body>
<header>
<h1>MySite</h1>
<h2>Books for children</h2>
</header>
<div>
<h3>Book1</h3>
</div>
<div>
<h3>Book2</h3>
</div>
</body>
Example B: sectioning content elements everywhere
<body>
<header>
<h1>MySite</h1>
</header>
<section>
<h2>Books for children</h2>
<article>
<h3>Book1</h3>
</article>
<article>
<h3>Book2</h3>
</article>
</section>
</body>
I wouldn’t advise to use example A. Example B is the correct way to mark this up (and I’d challenge your assumption that you would need to do this differently for SEO, but discussing SEO is off-topic on Stack Overflow).
If I put the article title (which is also the main title of the page) outside the <article> tag, the document outline has the main title of the page being the article title. Which seems desirable.
i.e.
<h1>My wonderful article</h1>
<article>
<p>Text of my article</p>
</article>
However the <article> tag specification says
The article element represents a section of content that forms an
independent part of a document or site;
My interpretation of that is to be an "independent part" it needs the article title in it. The title is definitely a dependent part of the article.
However, if you put the article title in the <article> tag, the page is untitled in a document outline.
What is best practice here?
When the document only contains this article, then omit the article element:
<body>
<h1>My wonderful article</h1>
<p>…</p>
</body>
When the document contains also other things (like a site-wide navigation, a sidebar with related articles etc.), then you don’t want the article’s heading to be the document’s heading:
<!-- wrong! -->
<body>
<h1>My wonderful article</h1>
<article></article>
<nav></nav>
</body>
Why? Because the site-wide navigation should not be in scope of a heading which is only about the article. The document heading should describe the whole content of the document, not only its main part. So you need such an additional document heading.
Either provide a document heading explicitly (typically¹, the site name is used) …
<body>
<h1>My wonderful site</h1>
<article><h1>My wonderful article</h1></article>
<nav></nav>
</body>
… or omit it (… if you must; which requires you to use sectioning elements wherever appropriate), essentially creating an unlabeled entry in the outline:
<body>
<article><h1>My wonderful article</h1></article>
<nav></nav>
</body>
(¹ Some of my related answers with more details: 1, 2, 3.)
I know that every <section> must contain an <h1>, but if I put a <section> inside an <article>, what do I have to use inside the <section>? <h1> or <h2>?
In detail, my article is a blog entry, and the section is the "related content of the article", like a video or a set of images (gallery).
Thanks
A section doesn't necessarily contain an <h1>, though they certainly help arrange your content and give it semantic meaning.
If I had the structure you are describing, I would certainly use the normal <h1>-<h6> progression to structure my document:
<article>
<h1>...</h1>
<p>...</p>
<section id="related-content">
<h1>Related Content<h1>
<h2>Video</h2>
<p>...</p>
<h2>Gallery</h2>
<p>...</p>
</section>
<section id="another-section">
<h1>Another amazing section!<h1>
<h2>...</h2>
<p>...</p>
<h2>...</h2>
</section>
</article>
As always, when in doubt, validate your markup: http://validator.w3.org/
Why would your section require a <h1>? It doesn't.
If you put a <section> in an <article>, you can use any flow content in your <section>, i.e. you can use both <h1> and <h2> as you like.
Is the structure below correct or is the section tag not needed?
For SEO, assuming the relevant keywords are the page title not the site title, is the structure bellow the best optomisation? Thanks
<header>
<h1>Site Title</h1>
</header>
<section>
<h1>Page Title</h1>
<p>Page Content Here</p>
</section>
Don't abuse the usage of section and article tags using them for structure, instead keep using divs.
In html5, when using headings and sections, you must check that each section has its own title. You can use the outliner to see how is the structure.
http://gsnedders.html5.org/outliner/
According to your case you'll notice that the Site Title has still more relevancy than the Page Title. That's okay. But better use a div for dividing the header from the content.
// Reply 12/03/01
You can try using some weird position absolute to achieve your goal:
First of all, the section must have a heading, if not it will be null.
<header>
<h1 id="position-me-in-section">Page Title h1</h1>
</header>
<div id="content">
<section>
<h6 id="position-me-in-header">Site Title h6</h6>
<p>Page Content Here</p>
</section>
</div>
This is how I would do it. The <article> tag links the related content together, you can also have multiple articles on one page etc
<header>Site Title</header>
<article>
<header>Page Title</header>
<p>Page Content Here</p>
<footer>Page Footer</footer>
</article>
<footer>Site Footer</footer>
Really depends on how or if you plan to componetize and/or syndicate your content and then it's however it suites you best. There are no "issues" with how you have it now other than you only want to use a single "H1" per document. On the flip side - the "H2", "H3" etc can be used multiple times with no negative SEO.
The html5doctor link about section shared is a good resource but also consider these:
http://html5doctor.com/the-article-element/
http://www.impressivewebs.com/html5-section/
http://webdesign.about.com/od/html5tags/a/when-to-use-section-element.htm