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.
Related
I have a main image at the top of the page. For simplicity working with my stylesheet/layout, I have it in it's own section:
<section class="container page-intro boxed-none">
<figure>
<img class="width100" src="article-image.png" alt="Template Article" />
</figure>
</section>
When I use the W3C validator, it suggests that a section have a heading. Is it proper markup to have my HTML like this, or should it be modified?
It's suggested that you always use a heading in your <section> but if you want you don't have why to use it.
Here is some basic information on how each of the major HTML5 tags can/should be used (I suggest reading the full source linked at the bottom):
section – Used for grouping together thematically-related content.
Sounds like a div element, but it’s not. The div has no semantic
meaning. Before replacing all your div’s with section elements, always
ask yourself: “Is all of the content related?”
aside – Used for tangentially related content. Just because some
content appears to the left or right of the main content isn’t enough
reason to use the aside element. Ask yourself if the content within
the aside can be removed without reducing the meaning of the main
content. Pullquotes are an example of tangentially related content.
header – There is a crucial difference between the header element and
the general accepted usage of header (or masthead). There’s usually
only one header or ‘masthead’ in a page. In HTML5 you can have as many
as you want. The spec defines it as “a group of introductory or
navigational aids”. You can use a header in any section on your site.
In fact, you probably should use a header within most of your
sections. The spec describes the section element as “a thematic
grouping of content, typically with a heading.”
nav – Intended for major navigation information. A group of links
grouped together isn’t enough reason to use the nav element. Site-wide
navigation, on the other hand belongs in a nav element.
footer – Sounds like its a description of the position, but its not.
Footer elements contain informations about its containing element: who
wrote it, copyright, links to related content, etc. Whereas we usually
have one footer for an entire document, HTML5 allows us to also have
footer within sections.
Source:
http://www.w3schools.com/html/html5_semantic_elements.asp
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.
I just read about the header tag not being equal to section. The author says, header should not be used outside a section, but he doesn't tell us, how the sites header and footer have to look like. Are they sections? Divs maybe? Or does body count as a section and I can use header and footer like I used to?
The header is the page title. In HTML5, there is a new tag named <header> that is used to format this section. The header usually contains the site name and logo, maybe a notice, and sometimes the page name for simple, one-page sites. A <section> is a block of content in the page. A header is basically a special section with a tag just for it because it is so common in webpages, similar to how <nav> is a special section on the page just for navigation links, but is not put in a <section> tag.
From w3c
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.
From my understanding of this, headers just group together elements to identify them as part of a header. The appearance is determined by the elements within the header.
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
quick question: is it actually allowed to use the header tag twice? e.g. i have two important head-sections in my header.php where both could have header tag?
Yes, but with a catch. The W3 documents state that the tags represent the header and footer areas of their nearest ancestor section. I would recommend having as many as your want, but only 1 of each for each "section" of your page, i.e. body, section etc.
From W3
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.
=========================
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.
Here are links to their respective standard documentation: header and footer
Yes you can use multiple header elements in your documents, by virtue of the w3c documentation:
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.
However ensure that it is semantically correct.
There's no penalty for using two header tags, but make sure it makes sense.
Happy coding!
The <header> is used to mark the header of e.g. articles in newspaper, so if you have multiple articles you can use multiple <header>.
It's like using multiple <h1>. It does only make sense in some special case.
In some situation, it is posible put two <header> in single <article>/<section> like this, so why not.
<article>
<!-- Feature Image on the LEFT -->
<div class="position-left">
...featrue image...
<header>
...H1 title ...
</header>
</div>
<!-- Content on the RIGHT with subtitle, date, etc -->
<div class="position-right">
<header>
..date, sub-title, etc...
</header>
...content...
<footer>..</footer>
</div>
</article>
You can put two <header> tags in your document, sure. Semantically, however, it is incorrect. Why not use one <header> tag and use a different tag inside it?