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>
Related
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>
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).
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>
I've found a lot of conflicting information on HTML5 best practices, and am wondering if my article structure is correct. In general, the pages on this site will consist of a header with nav, article, and footer.
Here's my basic structure:
<body>
<header>Header content
<nav>Navigation</nav>
</header>
<article>
<header>
<h1>Beans, beans</h1> <!--Main title for article-->
<h2>Good for your heart?</h2> <!--Subtitle for article-->
</header>
<section>
<header>
<h3>Legume-based Flatulence</h3> <!--Section title-->
</header>
<p>Lorem ipsum beans beans beans.</p>
</section>
<section>
<header>
<h3>Gas and Good Feelings</h3>
</header>
<p>Correlation does not imply causation.</p>
<footer> <!--Section footer for sources or...?-->
Source: Phenomenological Farts, a Study in Siena
</footer>
</section>
<section>
<header>
<h3>Beans for Every Meal?</h3>
</header>
<p>This is probably a terrible idea.</p>
</section>
<footer> <!--Article footer for additional downloads, etc-->
Download this article!
</footer>
</article>
<footer>
Footer content.
</footer>
</body>
Does this make sense? Is it acceptable to use headers and footers within sections within articles?
When you're unsure about what tags are allowed inside others, simply check the spec at w3.org. Or run your code through a validator.
The spec states that section, header and article tags can be used inside any container that allows flow elements. So what you have so far is valid.
I was going to recomend <hgroup> for grouping headers, but it is no more: http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/. Perhaps use header in its place. More info and suggestions from W3C: http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head
I would also then change your other h3s to h2s as they are the section header.
Finaly a header soley consisting of an hx is kind of redundant.
More on Headers and Footers
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. :)