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
Related
I have read about some of the semantic elements on W3C, WHATWG, and MDN, but I still a little unclear on somethings. I also went to this article, on Sidebar and Aside are different!.
I have a few basic questions, or confirm that I am understanding what I have read:
Is the aside element not a sidebar?
In HTML5, can we use semantic and div tags?
When there are no semantic tags to use, is a div tag acceptable in HTML5 (this may be the same question as above)?
Can the semantic main element have other semantic tags embedded within, such as table, section, article and aside, but not limited to?
Keep in mind that semantic tags are just a way to keep the code more human readable and to standardize pages.
This is because before most users would define just divs and then a class describing its role like nav, footer, header, etc.
For your first question; no, an aside element does not represent a "sidebar" per se. It just represents content that is related to the main content, but it's not part of the main topic of the page. You could use it to wrap the contents of a sidebar (which is in itself a UI component), but you can use it for other things as well.
From the HTML5 specification:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or
sidebars, for advertising, for groups of nav elements, and for other
content that is considered separate from the main content of the page.
For your second question.
Yes, in HTML5 you can use divs or semantic tags whenever you like, but it is encouraged that you use semantics whenever possible; if there's no other tag you can use to define part of the document, then use a div without problems. You can use them interchangeably, at the end, most of them like main, section, footer, etc. are just divs with a different name to make it easier to read.
This has always caused great confusion. This is the original specification's author - Ian Hickson - on the subject in 2009 (his responses are in bold, to comments made by Tab Atkins Jr):
<aside> is similarly badly named. The name itself and the
description of it as "sidebar" content apparently leads almost
everyone astray into thinking it's for the ubiquitous website sidebar.
It is.
An informal survey showed that at least 3 people in that chat (me
included) immediately tried to misuse <aside> in precisely this way
when we first heard of it, and when I discussed the issue with another
friend mid-chat his response was roughly "what's confusing about them?
footer is for site footer and aside is for side panels".
That is a correct interpretation.
Is having a single section within the main tag acceptable or is redundant?
<main>
<section>
<section>
...
</section>
<section>
...
</section>
</section>
</main>
Or should I just put the two section tags within the main... even though all the content within it is relatable.
Also, is having a <header> within every single section acceptable? It is classified as “a group of introductory or navigational aids”. But seems like if I were to use it as I've described, it'd be just like using <h1>-<h6>.
The <section> element is used to represent a group of related content. There shouldn't be any issue in nesting these tags. You could also make use of other tags like <article>, <aside> etc.. The idea behind using these elements is to give more semantic meaning to your pages, allowing computer browser to understand your content better.
There are no restrictions on how to nest them and what tags to use in them. You can have the whole set of html tags with in them (you can use h1-h6, or other elements).
You might want to have a look at these articles:
How to Use The HTML5 Sectioning Elements
http://html5doctor.com/the-section-element/
Question: is the single section inside main redundant?
It depends on the semantic meaning of your page. Describe your
desired page layout in natural language. If you say "the main area
has a section that contains many sub-sections", then your HTML is
right on the money. If you say "the main area is broken down into a
few sections", then your single section sounds like an evolved form
of the div-itis virus - the one that left a lot trash behind: wrappers,
containers, container-wrappers, content-wrappers, main-content-wrappers,
wrapping-containers, containing-wrappers...
Question: is header within every section acceptable?
Yes. But again, do the above natural language litmus test to
determine if it is suitable.
There's also some confusion between <h1>-<h6> vs <header>. Think of header as an "introductory part" within a section. It may or may not be necessary in your markup. If your introductory part of the section consists of, say, only a <h1>, you should probably omit use of the <header>; but if your introductory part includes a few items, e.g. a heading, a logo, a nav bar, then it's probably a good idea to wrap them in a <header> tag.
We include a reference text for our content which is included at the top of pages when users print out the content.
In HTML4 and XHTML1.1, this was marked up as:
<div id="reference">
Our product name. Our organisation; 2013 June. Available from: https://oursite.com
</div>
We are rewriting our templates as HTML5, and I was wondering if I should be using <cite> instead?
The cite element is not appropriate here. You may only use it for "the title of a work" that is "being quoted", "referenced in detail" or "mentioned in passing". But you are giving information about the very same page, not some other work.
I think you may use the footer element:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
But instead of footer, the header element may also be appropriate here:
A header typically contains a group of introductory or navigational aids.
It might help to see the whole page structure, but taking your specific example into account, I’d probably go with header.
If the information only applies to the main content (and not the whole page content), make sure to include the footer/header in the sectioning element (article/section) for the main content. If the information is about the whole page, include the footer/header as child of body (with no other sectioning element as parent).
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.
I have this website I am designing and I want to make it to the newest HTML5 standards.
The general layout is pretty simple as you can see in the image.
So, since the content of #main is not always a blog article (more often it's a "static" page) which tag should I use?
Any other recommendations?
Thanks!
You should use <section>.
Those tags aren't limited to this usage.
You can, for example, have this kind of tree :
<header />
<section>
<article>
<header />
<footer />
</article>
</section>
<footer/>
<section> is here to help search engines to identify the most important divs, so show this one is important.
Take a look at these two articles from html5doctor.com:
Designing a blog with html5
The section element
In particular, the "designing a blog post" article describes a page layout almost exactly like the layout in your question. Two pertinent quotes regarding the main content area are:
The section element represents a generic document or application section... The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
and
Rules of thumb for using section:
Don't use it just as hook for styling or scripting; that's a div
Don't use it if article, aside or nav is more appropriate
Don't use it unless there is naturally a heading at the start of the section
I suggest using an article for the main content. If you have multiple items in the main content and they thematically related and can be grouped under a common title then use a section; otherwise use a div.