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).
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>
This question already has answers here:
Semantic mark-up and WAI-ARIA for Tabbed Section?
(2 answers)
Closed 6 years ago.
I've read up a lot on the usage of <article> and <section>. I think I get the <article> part. But with <section> there is still confusion. I've read this post on HTML5doctor, but I still have questions.
Consider an easy example: I have a webpage where you can play a game. You have a navigation menu at the top with "Dashboard", "Other games", "About". Each page begins with a headline and contains lower level headlines.
For instance, on Dashboard you could have "Singleplay", "Multiplayer", "Statistics", "Instructions" with a bit of text under each and a link to the respective HTML page.
On html5doctor:
The section element represents a generic document or application section
I'm guessing each "page" could be considered as such? But are the sub headlines ALSO sections in this case or not?. It feels like whenever there is a new headline with content, a <section> could be argued suitable. But that can get out of hand, no..?
The <section> element is used to represent a group of related content. This is similar to the purpose of an <article> element with the main difference being that the content within a <section> element doesn’t necessarily need to make sense out of the context of the page. A section is just how it sounds a section of a website. I think the most common use is that you can assign it an id. So it is it's own entity so to speak. You can assign it an <section id="examples"> and have it go to that section of a website from anywhere and the page you want.
It’s advisable to use a heading element (<h1> – <h6>) to define the topic for the section.
Using this blog post as an example, you could have <section> elements that represent each of the individual parts within the post.
<article>
<h1>How to use HTML5 Sectioning Elements</h1>
<p>...</p>
<section>
<h2>The <main> Element</h2>
<p>...</p>
</section>
<section>
<h2>The <article> Element</h2>
<p>...</p>
</section>
<section>
<h2>The <section> Element</h2>
<p>...</p>
</section>
...
</article>
Here's an example that might help:
<html>
<head>
</head>
<body>
<header>
</header>
<main>
<section id='first'>
</section>
<section id='second>
</section>
<main>
<footer>
</footer>
</body>
I have a rather complex website which is in need for redesign.
Using html5 features I started with a structure like this:
<body>
<header>...</header>
<main>
<section>...</section>
<section>...</section>
</main>
<footer>...</footer>
</body>
now starting to put some more content in the <header> like:
<header>
<section id="hCart">
<header>...</header>
</section>
</header>
The validator starts to complain: "The element header must not appear as a descendant of the header element." Same goes for the <footer>.
So is it generally a bad idea to structure the <body> with <header> & <footer> sections? Or am I doing something wrong?
EDIT:
To make more sense:
My website contains some <section>s in the page's <header> (one of them beeing a shopping cart)
The spec allows for <section> in <header> but not to give them a <header> by their own.
The second <header> is used for defining one of these <section>' heads.
I know that I can't use <header> as descendant of <header> according to the spec. What I want to know is how am I supposed to do this in another way semantically correct?
The problem is even bigger in the page's <footer> where I wannted to put multiple sections like <section><header><img/><h1>external links</h1></header> ... </section> and so on.
I would like to recommend you to take a look at html5 doctor site and w3 link.
as the doc says "An important point to note is that you are not restricted to using one element per site. You can use multiple headers, each of which will then become the for that section of the document. You could therefore have.".
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<article>
<header>
<h1>Title of this article</h1>
<p>By Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
For more information visit the site of html5doctor.
According to your edit
<footer>
<section class="external-links">
<img src="dummy.jpg">
<h1>External Links</h1>
</section>
</footer>
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. :)
Lets talk about the section element. I'm still confused when to use it, and it seems like no one can pin point when to use it properly?
I have been told, and I have read that it should not be used as a generic wrapper for content. So I am still using divs for this purpose, and I am rarely using sections, only article. But then I came across http://dev.opera.com/, which are using it in that way? So then they are using it wrong? But that is exactly how I would like to use it... To divide the page into a "main" section where the content goes.
Here is an example how I would like to layout my pages:
<html>
<head>
</head>
<body>
<header>
</header>
<section id="main">
generic content
</section>
<footer>
</footer>
</body>
</html>
The "section" tag is used to group general content and can be used with a generic title (h1, h2 or other).
There are some rules to use "section" tag, those are the most important:
Don't use it for template structure - use other tags (header, footer, div) instead
Don't use it if you can use the "article" tag - so your articles can be used in other sites
You can use a "section" in an "article" and, of course, an "article" in a "section".
Generally you can use it in order to structure the page by grouping related content: for example in a blog you can define two sections, one for the last entry and another for the oldest.
You can also have a "section" in a "section": you can have as many section (generic contents) as you need.
<section>
<h1>Last post</h1>
<article>
[My post...]
<section>
[Comments...]
</section>
</article>
</section>
<section>
<h2>Oldest post</h2>
<article>
[First post...]
</article>
<article>
[Second post...]
</article>
<article>
[Third post...]
</article>
</section>
Reading your code I think you can improve your structure using this:
<html>
<head>
</head>
<body>
<header>
</header>
<div id="main">
<section>
Generic content
</section>
</div>
<footer>
</footer>
</body>
</html>