Proper usage of HTML5 elements & structure - html

I need to convert a PSD to HTML5/CSS. I'm having problems finding a definitive answer on what elements to use. My layout consists of a header, content/sidebar and footer. The template structure is below.
I understand you can use multiple header / footer elements with HTML5, I've got the main header/footer tags. The main problem I'm having is with the structure of the content.
I've got a main content area, and then a sidebar, the sidebar content doesn't really relate to the content. Within the sidebar I need to have multiple content boxes.
The content area has various sections, mainly a featured image with text on, and then the rest is just the page text.
From what I understand, using the <section> tag to define the content / sidebar isn't semantic as it's not content related, it's page structure / layout. Does my markup below look correct for the structure I'm trying to achieve?
<header>
</header>
<div class="wrapper">
<div class="main">
<section id="featured-content">
<img />
<p>Featured text</p>
</section>
<section id="main">
<header><h2>Title</h2></header>
<p>The rest of content goes here</p>
</section>
</div>
<aside class="sidebar">
<section class="content-box">
<header>Box title</header>
<p>Box content</p>
</section>
<section class="content-box">
<header>Box title</header>
<p>Box content</p>
</section>
</aside>
</div>
<footer>
</footer>`

In general: If the header only contains a heading, you could omit it.
If the main content of the page could stand on its own (e.g. like a blog post or similar), then you could use article instead of section.
As the #featured-content is some kind of abstract/summary of the main content, it should be part of the article. It makes sense to include it in the header:
<article>
<header>
<h2>(article title)</h2>
<img src="" alt="(article teaser image)">
<p>(article teaser text)</p>
</header>
<p>(article content)</p>
</article>
(Only if the teaser is really complex (e.g. containing headings itself), it could get its own section.)
Using aside for the sidebar is correct, because its content is "tangentially related" to the whole page (!) and not only to the main content (in that case, it should be include in the article, too).
If all content blocks in that aside are somewhat related, using section inside of that aside for each block is correct (but, depending on the actual content, article could be appropriate, also). However, if the blocks inside of that aside have no relation (easy test: do you find a heading for the whole aside?), you could consider using a separate aside for each of it:
<div class="sidebar">
<aside>
<h2>…</h2>
</aside>
<aside>
<h2>…</h2>
</aside>
</div>
So the structure could look like:
<body>
<h1>…</h1> <!-- maybe with header -->
<article>
<h2>…</h2>
</article>
<aside>
<h2>…</h2> <!-- omit it or hide it visually -->
<section> <!-- or article -->
<h3>…</h3>
</section>
<section> <!-- or article -->
<h3>…</h3>
</section>
</aside> <!-- resp. use 1 aside for each block -->
<footer></footer>
</body>

Related

How to use basic HTML5 sections properly for a clean document outline?

I've been trying for a while now to figure out how to use semantic elements to get a clean document outline for a web page of any kind. There are still some uncertainties that keep me busy.
In the attempt, I essentially used section elements that should be found in many contemporary websites. For testing I used the HTML5 Outliner.
What confuses me most is the <footer> element, which stubbornly subordinates itself to the main content:
<header>
<img src="[logo-image]">
<h2 class="screen-reader">Name of website</h2>
<nav>
<h2 class="screen-reader">Navigation</h2>
<ul>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</nav>
</header>
<main>
<header>
<h1>Page title</h1>
</header>
<section>
<h2>Section I</h2>
<section>
<h3>Subsection a</h3>
</section>
</section>
<section>
<h2>Section II</h2>
<section>
<h3>Subsection a</h3>
</section>
</section>
</main>
<footer>
<h3>Footer</h3>
</footer>
The document outline then looks like this:
Name of website
Navigation
Page title
Section I
Subsection a
Section II
Subsection a
Footer
I solved the problem by wrapping the content in <main> with <article> and the content in <footer> with <section>:
<main>
<article>
<header>
<h1>Page title</h1>
</header>
<section>
<h2>Section I</h2>
<section>
<h3>Subsection a</h3>
</section>
</section>
<section>
<h2>Section II</h2>
<section>
<h3>Subsection a</h3>
</section>
</section>
</article>
</main>
<footer>
<section>
<h3>Footer</h3>
</section>
</footer>
The document outline then looks like this, as expected:
Name of website
Navigation
Page title
Section I
Subsection a
Section II
Subsection a
Footer
To get to my question:
Is it necessary to add the elements <article> and <section> to get a clear outline regarding the <footer> element? I think there should be other solutions that make more sense. Because I'm still not sure if the use of <article> is also appropriate for web pages that do not contain articles in the sense of a blog or magazine.
I also wonder if it makes sense to exclude certain sections like <nav> only from the outline algorithm. As far as I understand, a document outline should only encompass the main content of a web page.
The header, footer, and main elements were not categorized as "Sectioning content" and thus have no special effect on the document outline as it was initially intended in HTML5. That's why the HTML5 outliner (as well as the "Structural outline" tool in the Nu HTML Checker, ex-Validator) actually shows "Name of website" and "Page title" in your first example as the same level headings (top level): the scope of the first header is body, and the scope of the last footer is the implied section created by the h1 heading.
However, this can be not as important as it seems because, unfortunately, no browser or assistive technology has implemented the HTML5 document outline algorithm (in any aspect except default styling of h1 headings) and the whole document outline concept is now being largely reconsidered. So the most practical approach is currently to think of header, footer, nav, and main as of native way to express the corresponding ARIA landmark roles rather than something related to heading structure, and build the document outline with heading levels, just like it was before HTML5. The Nu HTML Checker displays this structure as "Heading-level outline".

Where to add ARIA role="main", and how to correctly mark up subsections?

I want to add the ARIA role "main" to my homepage.
I have three sections for the main content of the page:
Page Intro (video & page title)
Service summmary A
Service summary B
Where should I add the "main" role?
Should I add a containing <div role="main"> around the three sections purely for the sake of adding the role to the whole group? This seems like excess markup to me!
Or should I add the role to the first section of the main content?
Alternatively, should I be grouping the three sections into one <section role="main">, and making the three sections act as subsections?
<body>
<header class="site_header" role="banner">...</header>
<section class="page_intro">
<h1>Bold Introductory Statement Here</h1>
Play Video
</section>
<section class="service_summary">
<h1>Section A Title</h1>
<p>Section A content</p>
</section>
<section class="service_summary">
<h1>Section B Title</h1>
<p>Section B content</p>
</section>
<footer class="site_footer" role="contentinfo">...</footer>
</body>
You don't have to worry about excess markup. The div element isn't bad practice as long as you're not using it where a semantic element would be appropriate. In your case, you're trying to designate three other elements as the main content of a page. Barring any other options, it's entirely acceptable to wrap them in a <div role="main">.
However the good news is that there is a new semantic element called main which serves as a replacement for <div role="main">. You can wrap your three sections in a main element, and it will not affect your outline like <section role="main"> would:
<header class="site_header" role="banner">...</header>
<main>
<section class="page_intro">
<h1>Bold Introductory Statement Here</h1>
Play Video
</section>
<section class="service_summary">
<h1>Section A Title</h1>
<p>Section A content</p>
</section>
<section class="service_summary">
<h1>Section B Title</h1>
<p>Section B content</p>
</section>
</main>
<footer class="site_footer" role="contentinfo">...</footer>
(You can still add the role="main" attribute to a main, and in fact the spec recommends this if you're concerned about browser support as the main element is still relatively new.)

Which is more semantic for a sidebar of widgets?

In the following example html5 page structure, which of the following is more semantic in respect to the sidebar of widgets (elements which appear in the sidebar are elements which appear on multiple pages and do not necessarily, directly, nor particularly relate to this page of content):
<body>
<header id="site-header">
...
</header>
<section id="page-body">
<main>
<header></header>
<article></article>
<footer></footer>
</main>
<aside class="sidebar" id="sidebar-a">
<section id="search-widget">
...search field, etc...
</section>
<section id="recent-articles-widget">
...articles list...
</section>
</aside>
<aside class="sidebar" id="sidebar-b">
<section id="cloud-tag-widget">
...search field, etc...
</section>
<section id="recent-articles-widget">
...articles list...
</section>
</aside>
</section>
<footer id="site-footer"> ... </footer>
</body>
or...
<body>
<header id="site-header">
...
</header>
<section id="page-body">
<main>
<header></header>
<article></article>
<footer></footer>
</main>
<section class="sidebar" id="sidebar-a">
<aside id="search-widget">
...search field, etc...
</aside>
<aside id="recent-articles-widget">
...articles list...
</aside>
</section>
<section class="sidebar" id="sidebar-b">
<aside id="cloud-tag-widget">
...tag list...
</aside>
<aside id="popular-articles-widget">
...articles list...
</aside>
</section>
</section>
<footer id="site-footer"> ... </footer>
</body>
AKA - Is it more semantic or in any way more appropriate to put multiple asides within a section, or include multiple sections within an aside to create a sidebar of widgets? Should they instead be simple divs within a div? Or divs within a section? Divs within an aside? Why?
Which is easier for screen readers or search engines? Why?
The aside is "tangentially related to the content around" it.
Currently, it doesn’t seem to be defined what "around" means exactly. Assuming that it’s (at least) the content of the parent sectioning content element, then this would mean for your examples:
<body> <section> <aside></aside> </section> </body>
The aside is related to the content of the section.
<body> <aside> <section></section> </aside> </body>
The aside is related to the content of the body (i.e., of the whole document).
So in your case, you’ll probably want to have aside as descendant of body (and of no other sectioning content element).
The next thing to decide would be: one aside with several sub-sections vs. several aside. I’d go with a separate aside for each "sidebar block", unless you can logically group (*) these blocks.
* I.e., if there is a natural heading that could be used (it doesn’t matter if you actually use it) to group several sidebar blocks, use one aside with section childs for these.
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.

Shall I use <section> tags inside <aside>?

Having a markup like this:
<aside>
<div class="widget">
<h2>Latest news</h2>
<ul>...</ul>
<a>more news</a>
</div>
<div class="widget">
<h2>Choose site theme</h2>
<input type="select" />
</div>
<div class="widget">
<h2>Newsletter subscription</h2>
<form>...</form>
</div>
<div class="widget">
<h2>Related articles</h2>
<ul>...</ul>
</div>
</aside>
Which tag is more appropriate here: <div> or <section>?
Is section supposed to be used only inside <article> tag and never inside <aside>?
The HTML 5 spec does not prohibit you from using the section element inside of an aside element. The aside element is allowed to have flow content inside, and that includes the section element.
However, even though the div element is now, in HTML5, supposed to be the sectioning element of "last resort", using section in this context goes against the intent of the element. From the spec we see:
Note: The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
Now, little "sections" of an aside are definitely not something that belong in the outline of the entire document, so the short answer to your question is to use div. Alternatively, because your aside looks like it has four "items" inside, you might consider a ul with four lis and then style with the rule aside ul li.
Yes, you may use section there.
When you use headings, you have "implicit" sections anyway. By using section, you can make them explicit, which is encouraged (see last quote).
These snippets are semantically equivalent (they have the same outline):
<!-- using headings + div elements -->
<aside class="example-1">
<h1>Heading for this aside</h1>
<div>
<h2>Latest news</h2>
<p>…</p>
</div>
<div>
<h2>Choose site theme</h2>
<p>…</p>
</div>
</aside>
<!-- using headings only -->
<aside class="example-2">
<h1>Heading for this aside</h1>
<h2>Latest news</h2>
<p>…</p>
<h2>Choose site theme</h2>
<p>…</p>
</aside>
<!-- using section elements -->
<aside class="example-3">
<h1>Heading for this aside</h1>
<section>
<h2>Latest news</h2>
<p>…</p>
</section>
<section>
<h2>Choose site theme</h2>
<p>…</p>
</section>
</aside>
Note: if you don’t provide a heading for the aside, the document outline will be different when section is used. Which is not a bad thing; I guess that outline is what you typically want anyway. You can play around with gsnedders’ online outliner.
Of course you can also have other sectioning elements instead of section inside of the aside (e.g. nav for the navigation of that aside, or article for a list of related posts, etc.).
Side note: In your case, you might consider using several aside elements instead. This can’t be answered in general, it depends on the content, but a rule of thumb could be: Use one aside with several sections/headings inside, if all these sections are related somehow (i.e. if you could find a heading that describes all these sections). Use several aside, if not.
So your example could look like:
<aside class="widget">
<h2>Latest news</h2>
<ul>…</ul>
<a>more news</a>
</aside>
<aside class="widget">
<h2>Choose site theme</h2>
<input type="select" />
</aside>
<aside class="widget">
<h2>Newsletter subscription</h2>
<form>…</form>
</aside>
<aside class="widget">
<h2>Related articles</h2>
<ul>…</ul>
</aside>
(And use a container div for these, if you need one.)

Multiple <header> and <footer> in a HTML5 document

Is it fine to use multiple <header> and in HTML 5, if yes then isn't semantically incorrect and won't it confuse mobile readers?
I saw many site uses like
<body class="home">
<header class="hd1">
<hgroup>
<h1>HTML5 Documnet</h1>
<h2>tagline</h2>
</hgroup>
</header><!-- .hd1 -->
<div class="main">
<section class="hs1">
<header>
<h1>This is a Page Sub Title</h1>
</header>
<p>Some content...</p>
<h2>Demonstrating EM and STRONG</h2>
<p><strong>This text will have more importance (SEO-wise and contextually)</strong></p>
<footer>
<p>Author: <cite>Louis Lazaris</cite></p>
</footer>
</section>
</div><!-- .main -->
<footer class="f1">
<p>copyright © year</p>
</footer><!-- .f1 -->
</body>
Yes, multiple <header> and <footer> elements are fine. They aren't used the same as <div id="header"> as most people use them for. Technically speaking, header and footer represent a header and footer of a section. A section being a piece of the page such as an article that contains header tags like <h1> and then content, then footer stuff like copyrights, citations, references, etc.
From the horses mouth:
A header element is intended to usually contain the section's heading
(an h1–h6 element or an hgroup element), but this is not required. The
header element can also be used to wrap a section's table of contents,
a search form, or any relevant logos.
And
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.
Directly from the spec at: http://dev.w3.org/html5/spec/Overview.html
Note that as I said these are not used to create sections like people did with <div id="header/footer"> it mentions this confusion in the spec:
The footer element is not sectioning content; it doesn't introduce a
new section.
So, again, "technically" speaking, that last footer you have there introduces a new section and isn't semantic. From the spec's point of view anyways.