Which of the new HTML5 elements should be used instead of div.container and div.content ?
<header>
site header
</header>
<div class="container">
<div class="content">
<article>
content
</article>
<article>
content
</article>
<article>
content
</article>
</div>
<aside>
sidebar
<aside>
</div>
<footer>
site footer
</footer>
div.content can probably be a <section>. div.container should probably remain a div.
None of them are made for that. I'd recommend using ARIA roles however.
<div class="container" role="document">
<div class="content" role="main">
These can then also be used in CSS with selectors like div[role='main']
You can't answer this example in general, it depends on the content of the page.
What matters here is the outline of your page. Therefor, you can ignore all div elements as they don't influence the outline. Only use them if you need them as hooks for CSS or JavaScript.
The first question would be: Is the aside related to the whole page or is it related to the "content area"? If it is related to the whole page, it must not be included in another sectioning element. If it is related to the content area, it has to be included in that sectioning element. Here I assume that it is related to the whole web page.
The second question: Is there a common heading for the three article elements? Examples would be: "My favorite books", "Latest blog posts", or "Products". If so, you should use a sectioning element which groups these three article elements. If there would be no possible heading, you probably don't want a sectioning element here, so could use div or not element at all.
The third question (if the second question was answered positively): Should this sectioning element be an section or an article element? If your choice of using the article element for these three "things" is correct, you probably (but not inevitably!) need a section here. Whether it was correct at all to use article, again, depends on the real content. So it could be possible that you rather want
<article>
<section></section>
<section></section>
<section></section>
</article>
instead of
<section>
<article></article>
<article></article>
<article></article>
</section>
Here I assume that your choice of using article for the three "things" is correct.
So the final version might look like:
<header>
<!-- if this header applies to the whole page -->
</header>
<section>
<!-- a h1 like "Latest blog posts" -->
<article>
content
</article>
<article>
content
</article>
<article>
content
</article>
</section>
<aside>
<!-- if this aside applies to the whole page -->
<aside>
<footer>
<!-- if this footer applies to the whole page -->
</footer>
I highly recommend reading about the differences between article and section over at HTML 5 DOCTOR.
You will then be able to make an informed judgment about which sectioning elements should be used and when, and also when not to use div.
What I have surmised from their blog is that:
article: Used for content which will make sense on its own!
section: for content which is a logical section of either another section or an article (fine to nest these).
div: still used for containers or as hooks for styling, which is something html5 elements should not be used for.
Finally the decision of using html5 sectioning elements can often be decided by the fact that it contains a heading (although this is not a hard and fast rule). There are a couple of useful tools to aid these decisions.
HTML5 Outliner - online
HTML5 Outliner - chrome extension
To consider this question as a constructive question, it needs to be interpreted as asking what the HTML5 drafts say about the matter. Then the answer is section 4.13.1 The main part of the content in the W3C HTML5 draft. To put it briefly, it says that normally you don’t need any specific markup: just put the content there. Obviously, you can wrap it in a div element if you need to treat it as a unit in CSS or in scripting.
And according to that section, it could be marked up as section or article if it constitutes “a section of a larger work, for instance a chapter” or “an independent unit of content that one could imagine syndicating independently”, respectively.
This is a matter of coding style. No general-purpose software (like browser or search engine) cares about your choice here.
Related
I need to migrate a website for an old magazine to HTML5 and I have some semantic problems. I have created the following outline to illustrate the main layout. There's a fiddle here.
<div id="wrapper">
<header>
</header>
<nav>
</nav>
<main>
<p><i>Name of Magazine</i>, 1985, 4, p. 12-14</p>
<article>
<header>
<h1>Heading</h1>
<p>Subheading</p>
</header>
<figure>
<img ...>
<figcaption>
Caption.
</figcaption>
</figure>
<p>First paragraph of article text.</p>
</article>
</main>
</div>
Above the magazine article there should always be a description including the name of the magazine, year, issue, pages, like I have in the paragraph element before the article element.
The first questions would be: Should I put that inside the article header instead? If so, would it be considered redundant to wrap the article element inside main tags? And is there a semantically suitable tag to specify this kind of info that is not really a part of the article but something intimately related to it?
In the original magazine (and on the html4 website) an image belonging to an article is sometimes placed on the same level as the article headings, like this (see fiddle here):
<main>
<p><i>Magazine</i>, 1985, 4, p. 12-14</p>
<article>
<figure>
<img ...>
<figcaption>
Caption.
</figcaption>
</figure>
<header>
<h1>Heading</h1>
<p>Subheading</p>
</header>
<p>...</p>
</article>
</main>
Does it make sense not to have the header at the top inside the article element? More sense than to put the figure inside the header in this case?
That may be possible to fix with CSS instead (although I'd like to keep the floats on the figure elements), but occasionally I even find a variant with a full-width image above the heading: Fiddle No. 3 here If it could be argued that the image illustrates the whole article, maybe it could be part of the header in the same way that a logo is part of the main header of most web pages today? But in other cases, it seems like I have to stick stuff that belongs to the article on top of the header. On the other hand, since it's a semantic element it should be clear that it's a header anyway, even if it's positioned at the bottom.
How would you solve these things?
Should I put that inside the article header instead?
Yes. This is metadata about the article, not about the document, so it should be inside of article. And header is the appropriate element for this (footer might also be appropriate, as their differences aren’t strictly defined; however, I’d go with header in your case).
If so, would it be considered redundant to wrap the article element inside main tags?
No. Without specifying main, consumers could only guess (but wouldn’t know for sure) which is considered to be the main content of the page. Well, if the article is the only sectioning content element of body, the situation is pretty clear (what else could the main content be?), however, there might always be consumers that especially look for main, as well as the main role (which gets implicitly added when using the main element).
And is there a semantically suitable tag to specify this kind of info that is not really a part of the article but something intimately related to it?
If it’s metadata/content about this article (i.e., not the "main" content of that section), header and footer are appropriate.
If it’s content related to this article, the sectioning content element aside could be appropriate (it depends on the kind of relation if it should be used as child of article, which represents the article, or as child of body, which represents the document).
Does it make sense not to have the header at the top inside the article element?
Yes. A header doesn’t have to be at the top and a footer doesn’t have to be at the bottom. You can even have several header/footer elements for the same section.
I'm in the process of improving accessibility in my HTML using HTML5 and WAI-ARIA.
It is OK to have the following set up?
<!-- main content -->
<section id="main" role="main">
<h1>The main content</h1>
<!-- This div needs to be here for styling reasons -->
<div class="the-content">
<p>All the text that goes with the main content</p>
</div>
<!-- the sidebar -->
<aside id="sidebar" role="complementary">
<h2>A title</h2>
<p>Some text</p>
<aside>
</section>
The thing I'm not sure of is if I should have the <aside> element outside of the <section> and the role="main" container. Does that matter?
It does matter yes. Where to put it is defined by how the content in the aside tag relates to the main section.
For example:
If the content in the aside is related to the main article, it should be inside the main section. However if the content inside the sidebar aside tag is different to main I would put it outside of the main section
http://html5doctor.com/aside-revisited/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
Yes, it the <aside> inside the <section> is perfectly valid markup and will pass W3C validation, if that's what you're worried about.
The <section> element allows flow content inside which may include the <aside> element - however if you're only using sections for styling purposes, you should probably be using a div instead.
Aside from that (pun intended) I have my doubts on the role=main part being valid - according to this, the only role attribute values allowed on <section> elements are shown below:
Default ARIA semantics:
role=region.
What Other ARIA roles, states and properties may be used?
alert, alertdialog, application, contentinfo, dialog, document, log,
marquee, search, or status.
Any global aria-* attributes and any aria-* attributes applicable to
the allowed roles.
Which rather notably doesn't include the main role.
The spec (editor's draft that already includes main) doesn't allow to nest the main element inside article, aside, footer, header or nav, but it doesn't say anything about nesting these elements inside main. It also provides two examples that use article and nav (intra-document navigation) inside main. So at least aside, nested in the article or section (and therefore scoped to its level), should be also allowed. I also can imagine the case where some part of content with some supplementary info inside (like in the aside usage examples in the WCAG Wiki) may form together the main content of the page, so I don't think that disallowing it would be reasonable.
On the other hand, the outline algorithm (which now seems to be the primary reason for the existence of all sectioning content, including aside) is still marked as being 'at risk', so the definition of these elements may change and some clarification may be added.
Probably we should ask this question to the HTML5 spec editors?
I will concur with Darren in regards to where you drop the tag. Also, your tagging is a little wacky. Various tags have WAI-ARIA roles natively, while yes you can overwrite native roles, but why would you? This post about WAI-ARIA on the Paciello Group's blog talks about it more. Ex:
Insstead of using
<section id="main" role="main">
you could just use <main>, which means the same thing, and better practice. The <aside> tag has the complementary role added natively, so that is like saying My name is Ryan, really my name is Ryan.
What's the point of header and footer?
Given that they are rendered on the page in the order they are written, as demonstrated here what is the difference between them?
<article>
<footer>This is a footer</footer>
<header>This is a header</header>
</article>
The only definite source is the HTML5 spec. It defines the meaning of these elements.
For the header element:
The header element represents a group of introductory or navigational aids.
For the footer element:
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Both sections give further comments and examples for the intended use.
In my own words:
footer is a place for metadata, like author name, publication date, categories/tags etc.. Each sectioning element (section, article, aside, nav) can have its own footer element(s). If the footer is not part of such a sectioning element, it applies to the whole page. Example:
<body>
<article>
<footer><!-- metadata about the article --></footer>
</article>
<footer><!-- metadata about the whole page --></footer>
</body>
The header element is for introductory content, like headings, summary/abstract, warnings like "NSFW" etc.
Note that the HTML5 spec doesn’t contain the same wording about sectioning elements for the header like it is the case for footer. However, this is already fixed in HTML5.1 (see the relevant bug) and will probably be changed in HTML5, too.
You shouldn’t pay attention to the naming of these elements. A header could also appear at the end and a footer at the beginning of an article.
The overall picture: header and footer (and address) are useful to mark-up the content of a sectioning element (or the whole page) that is not part of the main content of the sectioning element (or the whole page).
A simple example without footer:
<article>
<h1>About me</h1>
<h2>What I love</h2>
<p>I like <cite>The Hitchhiker's Guide to the Galaxy</cite>.</p>
<h2>What I hate</h2>
<p>I hate <cite>Pacman</cite>.</p>
<p>Tags: personal, fandom</p>
</article>
↑ Here the last paragraph (containing the tags for this article) would be in scope of the heading "What I hate". This is of course wrong, as I don’t hate "Tags", "personal", or "fandom". So we should reflect this within the markup, so that this paragraph is not associated with the previous heading:
<article>
<h1>About me</h1>
<h2>What I love</h2>
<p>I like <cite>The Hitchhiker's Guide to the Galaxy</cite>.</p>
<h2>What I hate</h2>
<p>I hate <cite>Pacman</cite>.</p>
<footer>
<p>Tags: personal, fandom</p>
</footer>
</article>
↑ Now that we put the tags in footer, they are no longer in scope of "What I hate". Instead, they now represent the footer (→ the metadata) for the whole article element.
In general in a tag the header can contain the subject of the article and the footer the author and/or time written.
You should read the following links for further explanation
header element
footer element
as mentioned here: http://www.w3schools.com/html/html5_semantic_elements.asp , semantic tags are used to "clearly define different parts of a web site". they are just to tell the browser and maybe others where something is.
its an alternative to <div id="header"> for example
i hope i could help
With the addition of the <main> element in the HTML5 draft spec, which is the more correct page layout?
<body>
<header> ... </header>
<main>
<aside> ... </aside>
</main>
<footer> ... </footer>
</body>
or;
<body>
<header> ... </header>
<section>
<main> ... </main>
<aside> ... </aside>
</section>
<footer> ... </footer>
</body>
The answer as to the correctness of each of the example markup patterns can be found in the normative definition of the main element.
Contexts in which this element can be used:
Where flow content is expected, but with no article, aside, footer,
header or nav element ancestors.
Authors must not include more than one main element in a document.
In this case either example markup is conforming. It is difficult to know which is the most appropriate or practical from a theoretical example alone.
And which spec are the browsers following?
Browsers have implemented the main element as defined in the W3C HTML specification. Conformance checkers such as the W3C HTML validator will implement the conformance requirements of the W3C HTML spec.
Note: The main element will be added to HTML 5.0 in the near future.
Note: The specification of the main element in HTML 5.1 supersedes the extension spec.
As always it depends on the content.
For me, if the contents of the header and footer are generic to all pages, then leave them outside of the main element whose content should be specific to that page. If, however, the header and/or footer are relevant to the main contents of that page only, then put them inside the main.
The same logic applies to the aside element.
Plus read what Steve Faulkner says on this page. He knows everything!
Update!
Due to this particular question, I have posted an article with further examples on how the main element might be used.
In the second example, you have placed <main> within a <section>.
Since <body> is implicitly a "section" and the <section> belongs to it, the <section> is - in fact - a subsection.
This causes a problem.
Why?
As Steve points out, you can only use <main> once per page. In this example, you have chosen to use the one element that defines the main part of the page within a subsection of that page.
The "main" part of something surely cannot belong to a subset of that thing. This simply doesn't make sense, regardless of what you are "allowed" to do according to the current specification. Your deployment of <main>, in this example, is at odds with the structural intent described by your use of sectioning content.
In structural terms, the first example is - therefore - slightly superior, although your semantic choice of <aside> is suboptimal. You've essentially said, "here is the most important part of my page's content and in it is some tangential, loosely related stuff". Tangential to what?
Unless...
you are intending to put some flow content directly within the <main> region, adjacent to the <aside>. This content would belong directly to main, which belongs directly to <body>. The <aside> remains a subsection of <body> and is actually an "aside" to some main content.
This would be totally sound.
I have this website I am designing and I want to make it to the newest HTML5 standards.
The general layout is pretty simple as you can see in the image.
So, since the content of #main is not always a blog article (more often it's a "static" page) which tag should I use?
Any other recommendations?
Thanks!
You should use <section>.
Those tags aren't limited to this usage.
You can, for example, have this kind of tree :
<header />
<section>
<article>
<header />
<footer />
</article>
</section>
<footer/>
<section> is here to help search engines to identify the most important divs, so show this one is important.
Take a look at these two articles from html5doctor.com:
Designing a blog with html5
The section element
In particular, the "designing a blog post" article describes a page layout almost exactly like the layout in your question. Two pertinent quotes regarding the main content area are:
The section element represents a generic document or application section... The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
and
Rules of thumb for using section:
Don't use it just as hook for styling or scripting; that's a div
Don't use it if article, aside or nav is more appropriate
Don't use it unless there is naturally a heading at the start of the section
I suggest using an article for the main content. If you have multiple items in the main content and they thematically related and can be grouped under a common title then use a section; otherwise use a div.