I've looked all over and have yet to find anything that specifically answers this question: In html5 is it semantically ok to have an h1 tag inside of a footer? I know that you can have multiple h1s in a document now but I'm working on a project that involves a footer with a heading and there's some debate going on as to whether or not that is semantic.
There is nothing mutually exclusive about footer and h1 tags. In fact, you can even have multiple footers, too.
Take a look at W3C HTML standard last code example for footer: it contains h1 inside of one:
Some site designs have what is sometimes referred to as "fat footers"
— footers that contain a lot of material, including images, links to
other articles, links to pages for sending feedback, special offers...
in some ways, a whole "front page" in the footer.
This fragment shows the bottom of a page on a site with a "fat
footer":
...
<footer>
<nav>
<section>
<h1>Articles</h1>
...
Semantically this would be very bad as H1 are for representing a header for a section or whatever. Image this for a blind user. There is a discussion on this here:
http://moz.com/community/q/h1-tag-in-the-footer
It should be noted that in your example and link it the h1 in the footer is always wrapped inside a <section></section> tag.
<section> can have its own blocks of self contained content as well
<header>
<!-- nav/logo/etc -->
</header>
<main>
<!-- article/content/section/etc -->
</main>
<footer>
<!-- nav/links/section/etc... -->
<section>
<h1></h1> <!-- h1 in a NEW section -->
</section>
</footer>
Related
Plot: When building a coupons website I realize that their can be content that is not unique to the page but should be used inside the <main><article> ..here..</article></main>.
Problem: Just because w3schools state :
The content inside the element should be unique to the
document. It should not contain any content that is repeated across
documents.
But i have content which will be inside article. Like every time for example A coupon can be used by entering its code but a deal can only be activated by going to landing page.
This will be repeated in every 'coupon' post I will publish.
So now what I tried to use was.
<main><article><main>Unique content</main>
<aside>A coupon can be used by entering its code but a deal can only be activated by going to landing page</aside></article></main>
But again :
Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendent of an <article>, <aside>,
<footer>, <header>, or <nav> element.
So what is the best way to format the UN-UNIQUE content inside <main> and/or <article>.
The main tag should be used to group those article and aside elements.
<main>
<article>
The unique document content.
</article>
<aside>
Related content for that document.
</aside>
</main>
tl;dr - use your common sense :)
This article on the actual w3 site has a good overview of what should go where. The overall structure is:
<body>
<header>
<!-- header content goes in here -->
</header>
<nav>
<!-- navigation menu goes in here -->
</nav>
<section id="sidebar1">
<!-- sidebar content goes in here -->
</section>
<main>
<!-- main page content goes in here -->
</main>
<aside>
<!-- aside content goes in here -->
</aside>
<footer>
<!-- footer content goes in here -->
</footer>
</body>
Option 1 - <section>s
They go on to say that <section>s, fairly obviously, can contain multiple <articles>, but that it is also possible to put <section>s inside an <article>, for example to define the introduction or summary:
<article>
<section id="introduction">
</section>
<section id="content">
</section>
<section id="summary">
</section>
</article>
So one option is to put a <section id="content"> and <section id="terms"> inside your article.
Option 2 - <footer>s
It does appear valid to use a <footer> for this sort of content. You said it is just for author, date, category, but w3 states in its spec for <footer>:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Your text is terms and conditions of a coupon, which could be considered as semantically similar to copyright data. It's a judgement call I think.
Option 3 - <div>s et al...
As a get-out, in the first link they do also say about <div>s:
You should use [a div] when there is no other more suitable element available for grouping an area of content...
So if it really isn't clear what to use, another possibility could be:
<article>
Blah blah
<div class="terms"></div>
</article>
Summary
To be honest, after all this, it seems there is no definitive answer and sites are unlikely to become super-strict in how they semantically parse documents for a while yet, because they know there are legions of people out there who will do it completely wrong. If you just stick a <p> with the same terms in at the end of each article, it probably won't make any real difference because the main text is unique.
I personally think as long as you use your common sense and choose something which doesn't completely go against the recommendations, you can't go too wrong.
According to the WHATWG (the informal group behind the HTML Living Document Standard), there is no problem in using a main element inside an article. The HTML Living Document says:
There is no restriction as to the number of main elements in a document. Indeed, there are many cases where it would make sense to have multiple main elements. For example, a page with multiple article elements might need to indicate the dominant contents of each such element.
Consequently, you can write
<body>
<header>My Page Header</header>
<main>
<article><h1>My First Article</h1>
<main>My first article's content...</main>
<aside>A sidebar</aside>
</article>
<article><h1>My Second Article</h1>
<main>My second article's content...</main>
<aside>Another sidebar</aside>
</article>
</main>
</body>
However, the W3C HTML 5.3 Draft disallows this and states that "There must not be more than one visible main element in a document."
This is an interesting case of a disagreement about a central element of HTML. Amazing! It seems that there is again a schism between W3C authors and the web/browser developer professionals behind the WHATWG. In such a case, I would go with the WHATWG.
I would go with something like this :
<main>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
</main>
Anyway I think having multiple <main> tags is worse than having non-unique content in an <article> tag.
You can also take into consideration Schema.org for proper mapping your content with additional attributes ( itemprop ... )
I am designing a semantic mark-up of my HTML page. The page consists of a main content block and of a side bar. There are several independent blocks in the side bar like latest news, links, statistics e.t.c. Each block has a header with a block name: "Statistics", "Links" e.t.c.
The question. Is it a semanticly correct usage of the tag header if I put a block name in the header tag like <section id="News"><header>News</header><ul>...</ul></section>.
Is it a semanticly correct to put the name of the section in <h*> tag instead?
What is the difference between the options and why one should use one of the options?
As you are using a sectioning element (section in your case, but you might want to use aside), these sections already have an implicit outline entry.
You can provide an explicit entry by using a heading (h1-h6).
So yes, you should use a heading element (h1-h6) for specifying the heading of each block (→ section).
In addition, you may use a header element. But this is not required (it makes sense to use it if your header consists of more than just the heading).
So I’d go with:
<aside>
<h1>News</h1>
<!-- content -->
</aside>
<aside>
<h1>Statistics</h1>
<!-- content -->
</aside>
And for complex headers:
<aside>
<header>
<h1>News</h1>
<!-- more header content -->
</header>
<!-- content -->
</aside>
<aside>
<header>
<h1>Statistics</h1>
<!-- more header content -->
</header>
<!-- content -->
</aside>
that use of a header is valid - that's how sections are meant to be used - see this definition for the use of sections https://stackoverflow.com/a/6941170/3529814
It's completely valid, but if it's just a simple heading, I'd say an H* tag will be sufficient and semantically correct on it's own.
If there are several elements describing the section contents, such as a heading, a description and a date tag or something along that path, I would wrap them in a <header> tag.
My question is specifically about semantic HTML5.
In a case where the primary navigation is not part of the header by design, but is still site-wide, should it then be nested within the <main> tag?
The W3C specification states about the <main> tag:
"The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application."
To me, this would indicate that I should place the <nav> outside <main> like so:
<body>
<header>
[...]
</header>
<nav>
[...]
</nav>
<main>
[...]
</main>
<footer>
[...]
</footer>
</body>
I also get the notion that the <main> tag can be used on level with <header> and <footer> and effectively include everything between those two tags:
<body>
<header>
[...]
</header>
<main>
<nav>
[...]
</nav>
[...]
</main>
<footer>
[...]
</footer>
</body>
Which one is more semantically correct? Does it matter?
All of the most reliable sources on the <main> tag conveniently avoid the issue in their examples by either nesting the primary navigation in the header or making the navigation directly related to the content.
I guess this might bring up how much design should dictate semantic markup?
I'm also interested in whether a sidebar <aside> that is repeated across a website, and is not directly related to the topic of the page, should be nested in the <main> tag, but I image that would be covered by answers to my main question.
The basic idea of the <main> element is that the content within it is considered unique to the document (which lends itself to the entire concept of individual documents within a site).
Since site-wide navigation is supposed to exist across the whole site, it should exist outside of the <main> element.
Likewise for any content that pertains to the site as a whole, rather than being document-specific, such as sidebars.
To be clear, as Kunaal Topraniu mentions, you can place a <nav> within a <main> provided that it consists of navigation that is specific to the <main> content, such as a table of contents. Site-wide navigation, of course, is not content-specific, and therefore does not belong in a <main> element.
I'm sure you've long solved this issue by now, but I thought I'd clarify anyway.
As the <main> element is supposed to be used for the main, unique content of your site, your <nav> should not be inside it if it is navigation for your entire site. You CAN, however, put a <nav> inside your <main> if, for example, you have page content or content-related navigation, e.g. anchors for sections of your content.
However, if you are using <nav> for your main, site-wide navigation, and it doesn't belong in your header--for example, if you're using sidebar navigation--I would do something like this:
<header>
<!-- header stuff -->
</header>
<div id="mainPanel"> <!--(or whatever)-->
<nav>
<!--your nav-->
</nav>
<main>
<!--main content-->
</main>
</div>
And that would be perfectly semantically correct. Since what (I think) you want to do is to position your navigation somewhere, and not really change what you mean by navigation and main content, a div is actually the correct usage, since divs don't carry semantics.
Edit: I should add that I conditionally disagree with some of the responses that prescriptively claim that nav should be in header. As header is not considered sectioning content per W3C, this is not only often unnecessary but would be flatly incorrect in some website models.
The issue with standards is that many people are still doing it wrong and don't really respect the standards. Even at school they are still telling us that nav needs to be in the header. What is really a shame is that this new generation still applies their work incorrectly. This is how I'm doing it so far.
<html>
<head></head>
<body>
<!-- HEADER -->
<header>
<div class="banner" role="banner"></div>
</header>
<!-- NAV -->
<nav>
<div class="brand"></div>
<div class="menu" role="menu"></div>
</nav>
<!-- CONTENT -->
<main>
<section class="container"></section>
<section class="container"></section>
<section class="container"></section>
</main>
<!-- FOOTER -->
<footer>
<div class="copyright"></div>
</footer>
</body>
</html>
I have put nav inside header and it works fine
<body>
<header>
<nav>
[...]
</nav>
[...]
</header>
<main>
[...]
</main>
<footer>
[...]
</footer>
</body>
<nav> should be declared in this format:\
<header>
<nav>....</nav>
</header>
<main>
<nav>....</nav>
</main>
<footer>....</footer>
I want to know if it would be ok to have a section tag contain no heading tags inside of it. I have looked at couple of examples and they all have heading tags inside of them.
The structure I implement for my section tag at the moment is:
<section>
<article>
<div>
</div>
</article>
<article>
<div>
</div>
</article>
</section>
HTML5 does not require the use of headers within an article element however it can be useful if you want to publish additional details such as date of publishing as well as you could include a nice footer to each article as well.
This would be useful:
<section>
<article>
<header>
<hgroup>
<h1>This is the Article Header</h1>
<h2>This is a tagline header</h2>
</hgroup>
<time class="dtstart" datetime="2011-10-05T09:00Z">9am Oct 5th</time>
</header>
<div>
<p>This is the content</>
</div>
<footer>
<p>Article Authored by Username<br>
Twitter Link<br>
Google Plus Author Link</p>
</footer>
</article>
By using the above code you can style the site without making hardly any addition classes due to the fact the main header and footer of your site won't be contained within a section, or least I hope you don't have it.
So styling article footers and headers and everything else in their is possible without making addtional classes which is very code freindly for example
article header h1 {font-size:20px;}
article header h2 {font-size:12px;}
article div h1 {font-size:36px;}
article div h2 {font-size:26px;}
article footer {font-size:12px;}
article time {fonts-size:9px;}
article hgroup {padding:20px;}
section article {padding:20px;}
Notice how with the above code there is no need for classes to be made, its pretty awesome and very flexible.
This would not be useful:
<section>
<article>
<header>
<h1>The Header</h1>
</header>
<div>
<p>I am the content</p>
</div>
</article>
</section>
The instructions on using HTML5 is very vague and many people agru if header should even be used at all within an Article but headers are useful if you have a lot of content to stick in their such as publish date, author, more than one H1, and H2 etc.
Footers in articles I find more useful but generally if I'm using the footers I use the headers as well, generally you should always code with as little code as possible and you should always consider Googles snippets as an alternative over some HTML5's if you want the benefit from those.
You should factor in what is easiest to style your site, using header can be easier to use without making additional classes for example.
The current spec only says that it typically has a header. There's nothing that says it requires one.
Sources:
http://www.w3.org/TR/html51/sections.html#the-section-element
http://developers.whatwg.org/sections.html#the-section-element
http://html5doctor.com/the-section-element/
I'm setting up my WordPress sidebars for an HTML5 theme and really wanting to use before_widget and after_widget right.
So my question is this: which of the two markup patterns is more appropriate? The following code is all completely outside the <article> element.
Option 1: Aside with sections
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
Option 2: Div with Asides
<div id="sidebar">
<aside id="widget_1"></aside>
<aside id="widget_1"></aside >
<aside id="widget_1"></aside >
</div>
I suppose the auxiliary question is then what heading to use for each widget title. If I wrap each widget in a <section> then <h1> seems most appropriate. If I use <aside>, I'm not sure.
All opinions welcome. Devil's advocates encouraged.
First of all ASIDE is to be used only to denote related content to main content, not for a generic sidebar. Second, one aside for each sidebar only
You will have only one aside for each sidebar. Elements of a sidebar are divs or sections inside a aside.
I would go with Option 1: Aside with sections
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
Here is the spec https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
Again use section only if they have a header or footer in them, otherwise use a plain div.
Update 17/07/27: As this is the most-voted answer, I should update this to include current information locally (with links to the references).
From the spec [1]:
The aside element represents a section of a page that consists of
content that is tangentially related to the content of the parenting
sectioning content, and which could be considered separate from that
content. Such sections are often represented as sidebars in printed
typography.
Great! Exactly what we're looking for. In addition, it is best to check on <section> as well.
The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content. Each section should be identified, typically by including a
heading (h1-h6 element) as a child of the section element.
...
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.
Excellent. Just what we're looking for. As opposed to <article> [2] which is for "self-contained" content, <section> allows for related content that isn't stand-alone, or generic enough for a <div> element.
As such, the spec seems to suggest that using Option 1, <aside> with <section> children is best practice.
References
https://www.w3.org/TR/html51/sections.html#the-aside-element
https://www.w3.org/TR/html51/sections.html#elementdef-article
http://html5doctor.com/aside-revisited/
Look at the following example, from the HTML5 specification about aside.
It makes clear that what currently is recommended (October 2012) it is to group widgets inside aside elements. Then, each widget is whatever best represents it, a nav, a serie of blockquotes, etc
The following extract shows how aside can be used for blogrolls and
other side content on a blog:
<body>
<header>
<h1>My wonderful blog</h1>
<p>My tagline</p>
</header>
<aside>
<!-- this aside contains two sections that are tangentially related
to the page, namely, links to other blogs, and links to blog posts
from this blog -->
<nav>
<h1>My blogroll</h1>
<ul>
<li>Example Blog
</ul>
</nav>
<nav>
<h1>Archives</h1>
<ol reversed>
<li>My last post
<li>My first post
</ol>
</nav>
</aside>
<aside>
<!-- this aside is tangentially related to the page also, it
contains twitter messages from the blog author -->
<h1>Twitter Feed</h1>
<blockquote cite="http://twitter.example.net/t31351234">
I'm on vacation, writing my blog.
</blockquote>
<blockquote cite="http://twitter.example.net/t31219752">
I'm going to go on vacation soon.
</blockquote>
</aside>
<article>
<!-- this is a blog post -->
<h1>My last post</h1>
<p>This is my last post.</p>
<footer>
<p><a href="/last-post" rel=bookmark>Permalink</a>
</footer>
</article>
<article>
<!-- this is also a blog post -->
<h1>My first post</h1>
<p>This is my first post.</p>
<aside>
<!-- this aside is about the blog post, since it's inside the
<article> element; it would be wrong, for instance, to put the
blogroll here, since the blogroll isn't really related to this post
specifically, only to the page as a whole -->
<h1>Posting</h1>
<p>While I'm thinking about it, I wanted to say something about
posting. Posting is fun!</p>
</aside>
<footer>
<p><a href="/first-post" rel=bookmark>Permalink</a>
</footer>
</article>
<footer>
<nav>
Archives —
About me —
Copyright
</nav>
</footer>
</body>
Based on this HTML5 Doctor diagram, I'm thinking this may be the best markup:
<aside class="sidebar">
<article id="widget_1" class="widget">...</article>
<article id="widget_2" class="widget">...</article>
<article id="widget_3" class="widget">...</article>
</aside> <!-- end .sidebar -->
I think it's clear that <aside> is the appropriate element as long as it's outside the main <article> element.
Now, I'm thinking that <article> is also appropriate for each widget in the aside. In the words of the W3C:
The article element represents a self-contained composition in a
document, page, application, or site and that is, in principle,
independently distributable or reusable, e.g. in syndication. This
could be a forum post, a magazine or newspaper article, a blog entry,
a user-submitted comment, an interactive widget or gadget, or any
other independent item of content.
The book HTML5 Guidelines for Web Developers: Structure and Semantics for Documents suggested this way (option 1):
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
It also points out that you can use sections in the footer. So section can be used outside of the actual page content.
I'm surprised that none of the responses above consider responsive design.
I may have valid aside elements such as a tag cloud, links for further reading and so on together, one after the other, in my sidebar when my page is viewed on a desktop device.
However, when my page is reduced on a mobile device to a single column then I will be separating those elements. My navigation element will go between my header and main content elements, and links for further reading will go below the main content element, above the footer.
As the semantic content of these elements is not changing with the width of the display window, then they need to be individually marked up as aside elements.
It follows then, that the sidebar itself should not be marked up as an aside element, even when it only contains content of one type.
In turn, this means that Option 1 in the original question must be undesirable (wrong?) and that the better answer should be Option 2.
The ASIDE has since been modified to include secondary content as well.
HTML5 Doctor has a great writeup on it here:
http://html5doctor.com/aside-revisited/
Excerpt:
With the new definition of aside, it’s crucial to remain aware of its context. >When used within an article element, the contents should be specifically related >to that article (e.g., a glossary). When used outside of an article element, the >contents should be related to the site (e.g., a blogroll, groups of additional >navigation, and even advertising if that content is related to the page).