I got something like that:
<div>
<header>
//My content
</header>
<nav>
//My nav
</nav>
<footer>
//My footer content
</footer>
</div>
Is it semantically correct to move my footer tag outside the div id="page" so to have:
<div>
<header>
//My content
</header>
<nav>
//My nav
</nav>
</div>
<footer>
//My footer content
</footer>
I think yes, but not 100% sure. I accept advices.
Thanks
It really depends on how you interpret the definition of the footer tag:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Personally, I'd use the first example. The contents of the <div> act as one section of your document.
Related
I received designs for one project and client wants footer placed in sidebar which is main navigation. Is it correct to have structure like this? I mean from design part it looks good, but from code it looks weird.
<nav class="Navbar">
<div class="Navbar-content">
<!-- some stuff -->
</div>
<footer class="Footer">
<!-- footers content -->
</footer>
</nav
In w3 there is no exact rule which would forbid nesting footer in navbar.
https://www.w3.org/html/wiki/Elements/footer
Also the w3 validator doesn't recognize it as any kind of error, so I guess it's okay?
You can have a footer element in a nav element. But it would represent the footer for that navigation, not the footer for the whole page.
For a footer that applies to the whole page, you have to place the footer element so that its nearest section parent is the body element. This means it can’t be a descendant of section/article/nav/aside nor of a sectioning root element other than body (blockquote, figure etc.). See an example.
If you want to show the navigation and the footer in a sidebar, you can use a div element for the sidebar:
<body>
<h1>…</h1>
<div class="sidebar">
<nav><!-- site-wide navigation --></nav>
<footer><!-- site-wide footer --></footer>
</div>
</body>
I have gone through a discussion regarding header and footer. As HTML5 provides header, footer, content elements, I believe it should be used once per page. I state them in following snippet.
<!-- My understanding -->
<header>
<!-- code goes here -->
</header>
<content>
<!-- code goes here -->
<!-- code goes here -->
</content>
<footer>
<!-- code goes here -->
</footer>
Few people have header, footer elements approach like below.
<!-- People understanding -->
<header>
<!-- code goes here -->
</header>
<content>
<!-- code goes here -->
<!-- code goes here -->
</content>
<footer>
<header>
<!-- They also use <header> in footer. -->
</header>
<!-- code goes here -->
</footer>
Can header be used in footer element? In other words, What would you suggest to build a HTML structure?
No this isn't valid.
The header element represents a header for the content, however the header element must not be a descendant of the footer element.
The footer section of the HTML5 specification states that the footer element is:
Flow content, but with no header, footer, or main element descendants.
If you paste the below code into W3's HTML Validator you'll get the following error:
Line 8, Column 20: The element header must not appear as a descendant of the footer element.
<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
<footer>
<header>
</header>
</footer>
</body>
</html>
Ignoring the invalid content element, your first example is valid and you should stick with that instead.
I suggest that you should stick to your first line idea:
// My understanding
<header>
//code goes here
</header>
<content>
//code goes here
//code goes here
</content>
<footer>
//code goes here
</footer>
For me, it is more easy way to understand how to make a HTML file on this format.
The second example would technically work fine, as all of the <header>, <content> and <footer> functionally work similarly to <div>s, but semantically it'd be very bad practice. I'd go with your initial thoughts, which would certainly be the spirit in which those elements are intended.
According to MDN:
The HTML Element represents a group of introductory or
navigational aids. It may contain some heading elements but also other
elements like a logo, wrapped section's header, a search form, and so
on.
so I don't suggest you to use footer tag inside header tag.
Is it bad to nave no <header>?
I have this basic structure but I am thinking about wrapping a header arround everything between the body start and the content because the header has also this nice shema.org markup attached. Good Idea?
Just because sometimes the header is not there but the navbars actually contain the brandname and are sort of headers themseves.
if I do this how should I markup whats the <header> right now? A section inside a header is not valid right? Just a normal <div> I guess.
<body>
<div class="nav1"><h1>brandname</h1><nav>...</nav></div>
<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->
<div class="nav2"><h1>brandname</h1><nav>...</nav></div>
<div>content ...
To this
<body>
<header itemtype="http://schema.org/WPHeader" ...>
<div class="nav1"><h1>brandname</h1><nav>...</nav></div>
<div><h1>brandname</h1><p>slogan</p></div> <!-- sometimes this is not there -->
<div class="nav2"><h1>brandname</h1><nav>...</nav></div>
</header>
<div>content ...
Multiple headers not valid either or? I am thinking of it this way as using the <header> without any CSS styles just for semantic markup. I could think of styling barriers created with this so not 100% satisfied with this.
Or is this valid.
<body>
<header class="nav1"><h1>brandname</h1><nav>...</nav></header>
<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->
<header class="nav2"><h1>brandname</h1><nav>...</nav></header>
<div>content ...
// just read html5: using header or footer tag twice? this and looks like I stick with the 2nd solution since I not really like the idea of having no header at all
Dont be afraid to answer ;)
Decide for every sectioning root element (e.g., body) and every sectioning content element (e.g., article) if it contains content which is appropriate for header. The spec defines that it’s for "introductory content", and gives the following examples:
introductory or navigational aids
heading (an h1–h6 element) (not required)
table of contents, a search form, or any relevant logos
If there is such content, use a header element. If the content in that sectioning root/content element is scattered, use several header elements.
Keep in mind that the header always applies for "its nearest ancestor sectioning content or sectioning root element":
<body>
<header> <!-- this header is for the whole page --> </header>
<article>
<header> <!-- this header is for the whole article element --> </header>
<div>
<header> <!-- this header is also for the whole article element (and not only for the div element!) --></header>
</div>
<section>
<header> <!-- this header is for this article’s section element only --> </header>
</section>
</article>
<figure>
<header> <!-- this header is for the figure element only --> </header>
</figure>
<strong>
<header> <!-- but this header is also for the whole page (and not for the strong element only!) --> </header>
</strong>
</body>
In order to make websites more accessible I have been encouraged to use HTML5 tags <header>, <footer>, etc... to only surround the actual content, but I have a feeling that I might be doing something wrong.
An example body:
<header>
<div class="center">
<h1>Title</h1>
<nav>
...
</nav>
</div>
</header>
<div>
<section>
...
</section>
</div>
<footer>
<div class="center">
...
</div>
</footer>
.center {
max-width: 70em;
margin: 0 auto;
}
header {
width: 100%
background-color: red;
}
footer {
width: 100%
background-color: green;
}
body > div {
width: 100%
background-color: blue;
}
Is it actually better like this?
<div id="head">
<header>
<h1>Title</h1>
<nav>
...
</nav>
</header>
</div>
<div>
<section>
...
</section>
</div>
<div id="foot">
<footer>
...
</footer>
</div>
As for what is better — DIV inside structural elements like HEADER/FOOTER or structural elements inside DIV, it does not matter since DIV is common container without any semantic sense at all.
What is really unsemantic/bad-practice in your first example is center class name. Class names should reflect purpose of block (content, products, etc.), not its presentation (center, red, etc.).
Basically, that div elements are not required semantically speaking (maybe you need them for styling?).
div is an element without semantic (as its counterpart for inline elements span) and you have to use them where there isn't anything better. Even if you give them some semantic with its id attribute, that semantic is only known by you and not for, for example, any web search motor (google) or any screen reader (for blind people, for example), because there aren't any definitive conventions about id or class values.
If you use header, footer etc, you are giving them semantics. Maybe you want to increase their semantic using some value for the role attribute.
By the way, that section surely it isn't needed. Look at what people from HTML5 Doctor say:
In HTML 5 you can specifically mark up all the “secondary” content on
a page such as navigation, branding, copyright notices, so it feels
odd that you can’t specifically mark up the most important part of
your page—the content.
But what would be the purpose of marking it up specifically, anyway?
If you need to style it, use a div. An assistive technlogy like a
screenreader can find the main content because it is the first thing
inside a page that isn’t a header, nav or footer.
With a <div role="main"> you have everything you need.
It'd be better like this:
<header>
<h1>Title</h1>
<nav>
...
</nav>
</header>
<section>
...
</section>
<footer>
...
</footer>
Or alternatively:
<div class="header">
<h1>Title</h1>
<div class="nav">
...
</div>
</div>
<div class="section">
...
</div>
<div class="footer">
...
</div>
Why are you being told to add those extra wrapper div elements?
Try
<section>
<header> head content </header>
main content
<footer> footer content </footer>
</section>
This get's rid of all those silly divs and now you have your header and footer linked to your section like they should be.
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.