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
Related
I've got a page, which contains some citations in blockquotes, with the associated source in a nested footer element.
For instance
<!-- some html content -->
<blockquote>
My very looooong citation about something ............
<footer>
<cite> The Jungle book, p. 43 </cite>
</footer>
</blockquote>
<! -- more html -->
The problem is that when I print the page, the content from the footer element gets added to the global footer of the printed page.
Any solution?
From MDN on <footer>:
The HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element
As <blockquote> is not sectioning content, it’s not valid to use the <footer> element inside it to provide additional information for the quote. (Sectioning content elements are article, aside, nav, section. Finally body will be the referenced element.)
Instead, the next ancestor sectioning content is used. In your case I’m assuming that that content is spread on several pages, therefore the footer is repeated as well.
You could wrap the quote in a sectioning element, but it seems semantically more correct to simply not use the <footer> element. <cite> is already doing enough.
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.
Usually when I code HTML5 documents I use the following syntax:
<header class="site-header">
<hgroup class="site-brand">
<h1 class="brand-name">
Brand Name
</h1>
<h2 class="brans-slogan">
Awesome Slogan
</h2>
</hgroup>
</header>
<article>
<header class="article-header">
<h1 class="article-title">Article Header</h1>
</header>
[... content ...]
</article>
It seemed to be header the right tag for site header, but after reading the spec and outlining this code, I saw two drawbacks
header tag make its content first level, and article title 2nd
Site headers might not contain headings at all, since its purpose is to tell the user who the page belongs to.
What would be the best approach?
Your first problem is that you have two h1 tags. This is NOT proper semantic mark-up. You are correct about the header tag and it would be preferable to put you high level h tags in that area.
That being said, your original question is a design and content architecture problem. If you are going to use an h1 in your article body then you should choose a different tag to use in the header of you page.
The spec says,"The header element typically contains the headings for a section (an h1-h6 element or hgroup element), along with content such as introductory material or navigational aids for the section."
It does not have to, though. The h1 tag (and title tag) are your main semantic indicies for a page. You do NOT want 2 h1 tags or header tags, but these two tags do not have to go together ... but its nice if you can architecture it that way.
Your usage of header in this example is okay.
However, it's not really needed here. If you only include h1-h6 and hgroup, you don't need to specify that it's a header, because it is already clear by definition. header is useful if you want to include additional content for which it's not necessarily clear that it should belong to the header vs. the main content.
But there is no harm in using header for headings only, so go on with it if you like it, need it for CSS/JS hooks, might include additional header content in the future, etc.
header tag make its content first level, and article title 2nd
I don't understand what you mean by that. The header element doesn't influence the document outline. It's a way to differentiate between introductory content and main content.
Site headers might not contain headings at all, since its purpose is to tell the user who the page belongs to.
The header element doesn't have to contain a heading. E.g. this example would be fine:
<article>
<header>I visited Berlin last week and in this post I document what I liked about it.</header>
<p>…</p>
</article>
The footer element is similar, and for some content both elements could be suitable.
If you'd want to attribute the article author, it would go into a footer.
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.
I've read conflicting webpages about using HTML 5's section element. Is it semantically appropriate to use it as the section between my header and footer?
<body>
<header>logo, nav links</header>
<section>main content of my webpage</section>
<footer>copyright, more links, contact info</footer>
</body>
A good place to start is Bruce Lawson's Scooby Doo and the proposed HTML5 <content> element .
You'll find a link in there to the opinion of Ian (Hixie) Hickson who is the editor of the WHATWG version of HTML5 (aka HTML Living Standard) and until recently editor of the W3C version of the HTML5 standard.
What he says (and has consistently said for at least the last 5 years) is that there is no need for a sectioning element there. If you need a containing element for everything that is not in the header or footer <div> is the element to use.
On the other hand, another member of the W3C HTML working group, Steve Faulkner, has proposed the <maincontent> element for your use case, on the grounds that is allows the ARIA "main" role to be incorporated into native HTML.
FWIW, for me, it seems odd that you should have a special element for between the header and footer in <body> but not for between header and footer in <section> or <article> so I'm with Hixie on this.
I also don't buy Steve's comments that it will be useful in that it will mark the main content even if the other sectioning and header/footer elements are not marked up correctly, since there doesn't seem any case in which I could advocate its use. It seems to be only for the web author who wants to do a half-assed job.
Do note that if <maincontent> does get accepted, it will not be part of HTML5. The earliest it could appear would be HTML 5.1
<section> is slightly more semantic than <div>. One of <section>'s main points for HTML5 is that it helps the browser to understand the document's outline.
Your approach is really dependent on the content of our page. Is everything in between the <header> and <footer> tightly related, or could it be broken down a little into more <sections>, or even other elements?
There will always be sources full of conflicting advice, especially for something in the development and utilization stage that HTML5 is in.
If you are using headings (h1 to h6), you are already using something that could be called "implicit sections". The outlines of the following two markup examples semantically identical:
Example 1:
<body>
<header>
<h1>My cool site</h1>
…
</header>
<section>
<h1>My cool article</h1>
…
</section>
<footer>…</footer>
</body>
Example 2:
<body>
<header>
<h1>My cool site</h1>
…
</header>
<h2>My cool article</h2>
…
<footer>…</footer>
</body>
So in this very case it wouldn't matter if you explicitly add section or not: the outline (the semantic structure) would be the same. Side note: it is recommended to always explicitly use the sectioning elements for sectioning content:
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
(however, this applies only for sectioning content, not sectioning roots (like body))
Now, your question can't be answered generally, if we don't know which headings you are using. There are cases which would require you to use section (or article), otherwise you would get a wrong outline for your page. And there are cases where the use of an explicit section (or article) is optional.
Some general tips (applicable to "prototypical" websites only; there are of course many exceptions; these tips should only give you an idea)
each page of your site should have a site heading (e.g. "John's blog") and a content heading (e.g. "I found a funny video")
the site heading is the first heading in body, which is not included in a sectioning element (section, article, nav or aside)
the site heading "dominates" all scopes of your page, e.g. in most cases a) the navigation and b) the content
all scopes of your page should have a heading (you can visually hide them with CSS, though). If you can't or don't want to give a heading to a scope, you have to use a sectioning element (section, article, nav or aside), which would create an untitled/implicit heading