My colleague who work with me and is responsible for SEO on pages slightly force me to use <div id="footer"> instead of new <footer>, cause saarch robots supposedly works better with the <div id="footer">.
I won't ask what is better to use cause I don't want to have question which doesn't fit SO rules.
I better ask what are advantages and disadvantages of these two approaches?
My research:
I think <footer> is better from Semantic Web view hence it's better.
I read some articles about HTML5 and new elements which brought me to use <footer> instead of <div id="footer">.
The only possible logical reason I can see why this could possibly be true is if Google see "<footer>" as a footer, but "<div id='footer'>" the same as other content on the page.
As a footer should just be part of the template, rather than the content, they may use that tag to say that they should not index text within it as that page's content.
However, even if that is true, I can't see how that would impact on SEO.
It seems many SEOs like to tweak things with no rationality or evidence. Other SEOs would no doubt tell you that the footer is duplicate content and so should be removed altogether.
It should really be up to your SEO to give reasoning why it works and why it is worth the impact upon code quality.
Semantic code should help search engines index your pages correctly - it tells them what everything is.
I know this is old, but the <footer> element (to quote spec):
The <footer> element represents a footer for its nearest ancestor <main> element or 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.
A <footer> element can also contain entire sections representing appendices, indexes, long colophons, verbose license agreements, and other such content.
When a <footer> element’s nearest ancestor sectioning root element is the <body> element, and it is not a descendant of the <main> element or a sectioning content element, then that <footer> is scoped to the <body> element and represents a footer for the page as a whole.
TL:DR; A footer element can be in any element. It can be an article footer, and is only treated as a main site footer when it's parent element is the body tag. It also means you can have more than 1 footer element in a site.
Adding id="footer" identifies it as the footer for the main site, and not an article footer. Not sure how it being a div or a footer tag affects seo however, as I suspect seo parsers look for an element with "footer" as the id, and ignore the container type if it's found.
Related
On a page I'm working on, I noticed the following pattern:
<section>
<header>Article Headline</header>
<footer>
<!-- publication date and author go here -->
</footer>
<article>
<!-- article content goes here -->
</article>
</section>
At first glance, I was a bit surprised by the appearance of the <footer> element before the <article> (I'm a backend developer and my HTML skills are not honed as much as they probably should). When asked about this, my colleague just said that the ordering used here made the styling easier, was probably fine when semantics are concerned and that the order didn't matter but couldn't point me to a definitive source.
I tried to find some information on the semantics of the <footer> tag and it seems that a lot can be said about the rules governing its allowed content or its appearance as a child of another tag (I find the description on MDN particularly nice and clear) but there's little to no information on the ordering.
The only mention of the order of <footer> I found is in the W3C specification for HTML5
Footers don't necessarily have to appear at the end of a section, though they usually do.
Based on these sources, it seems to me that there are indeed no rules specifying any relationship between <article> and <footer> other than the well explained parent-child one. Therefore, the markup from the beginning of my post is semantically correct and we're indeed free to reorder these elements at will if it serves some other purpose.
Is this assumption correct? Are there any other caveats that we have to be mindful of?
Yes, your assessment is correct. A footer will always be a footer regardless of where exactly it appears within its sectioning element, as long as it appears within the correct sectioning element it is intended for. The sole distinguishing feature of a footer is the sort of content that appears inside it, which, as the spec suggests, may be:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.
As §4.3.8 The footer element says,
The footer element represents a footer for its nearest ancestor
sectioning content or sectioning root element.
So you can move it freely (if that doesn't change its section) without changing its semantic meaning: being the footer of that section.
just wondering, is it bad practice to place a <header> tag inside a div tag when designing a site that mostly uses html5 elements and the doctype is for html5? Thanks!
Also, should I place the Nav outside the header or inside, or does it really matter?
I do not believe that it is a bad practice. However, still make sure you have it placed int the general area where it should be.
Here is a link that might help you understand the location of your header.
No, as long as you respect the content semantics and that your header contains header information. You can wrap it in a div with no SEO drawbacks.
No, not strictly, but there are some contextual semantics that are implied by embedding the header under elements other than the body. Depending on how you structure the document, you may run into unexpected behaviours. See below.
HTML5, as far as I can tell, is a DTD-less document type. Which does not apply strict rules as it pertains to document structure validation. According to the W3C document on HTML5 the:
... header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids. [1]
Basically, what this seems to indicate is that, if the header element is directly under the body of the document, it applies to the page as a whole, but if contained under another element which identifies a section the header applies more specifically to the nearest ancestor.
Bear in mind though that a <div> is not a sectioning element as pointed out by Tomasz Zielinski. Originally I had thought it was. If you want your header to apply only to a specific section of the page, it is best to use one of the defined sectioning elements to encompass the header, as defined here: http://www.w3.org/TR/html5/sections.html
E.g.
<div>
<section>
<header>...</header>
</section>
</div>
Which would be semantically better markup for a site 'extended footer' <aside> or <footer>?
By 'extended footer', I'm referring to something like the extended footer on this site (containing the Contact Details and Opening Hours as opposed to the 'real' footer at the very bottom containing the copyright notice). The content of the 'extended footer' would be general, site-wide and not specifically related to the content of the pages of the site.
According to the spec quoted in HTML5Doctor:
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.
I would be inclined to implement something like
<footer>
<div id="extended-footer"> <!-- Sitemap, latest posts, contact details, etc. --> </div>
<div id="bottom-footer"> <!-- Copyright notice etc. --> </div>
</footer>
However, I note that the HTML5Doctor site itself uses something like the snipped below:
<aside id="extended-footer"> ... </aside>
<footer> <!-- similar to id-footer --> <footer>
I do note though that the HTMLDoctor 'extended footer' seems to have some connection with the actual article / content (ie via the "Related Posts" section) so probably could be implemented as a <footer> within <main>.
HTML5 CR defines the footer element as representing, well, a footer. It does not give a real definition beyond that, though it characterizes a footer with some examples. Between the lines, however, I think we can see two “footer” concepts intertwingled: A footer as additional information that belongs to the page content proper but set off due to its nature; and a footer as a boilerplate that appears on all or most pages of a site, possibly with some page-specific modifications.
Either way, social media buttons, for example, seem to belong to an aside element, since they are really just “tangentially related” to the content (of the site or of the page). Yet, they are typically repeated on all pages, thus logically part of a footer in the “boilerplate” sense.
The solution appears to be simple: use an aside element nested inside a footer element, e.g.
<footer>
© 2013 ACME • <a href=map.html>Sitemap</a>
<aside><a href="https://www.facebook.com/acme">
<img src=fb.png alt=Facebook></a></aside>
</footer>
The choice of markup in cases like this has very little practical impact, at least for now. Browsers, search engines, and other relevant software don’t handle footer, aside, and friends in any particular way. Some day they might, and then it may be of some importance to have “tangentially related” content in aside elements and “boilerplate” content in (header and) footer elements (e.g., so that people using screen readers can easily skip the site boilerplate after hearing it once).
P.S. “Semantically better” has no well-defined meaning, i.e. it is semantically vague, if not empty. Most often in HTML contexts, “semantical” really means “structural”, i.e. as relating to the structure of a page rather than meanings of things. In practice, the question seems to be: how should we interpret the structural, sometimes rather scholastic descriptions in HTML5 drafts (and/or WHATWG HTML)?
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'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