I am wondering if this applies.
Examples:
main tag
The HTML5 specification says:
The main element represents the main content section of the body of a
document or application. The main content section consists of content
that is directly related to or expands upon the central topic of a
document or central functionality of an application.
Does this, therefore, imply that:
If the only content that lives within your page is the main content and only the main content, you should exclude the tag since there is nothing to relate it to but itself?
section tag
The HTML5 specification says:
The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content.
If the only content that lives within your page is within a section, then does that mean that your page should not be sectioned, but rather be a single element, and therefore you should not use a section tag?
My thoughts:
I think the main tag should be omitted in the case provided, however, the section tag should be required since a page can be sectioned off into a single section. The word section can be used to describe a single part of a whole regardless of whether that part is the only one of the whole.
The Layout I was thinking about:
doctype html
html
head
...
body
header
main
section
nav
footer
becomes:
doctype html
html
head
...
body
header
section
nav
footer
I think the main tag should be omitted in the case provided, however,
the section tag should be required since a page can be sectioned off
into a single section.
There was a similar suggestion in an earlier candidate recommendation (see https://www.w3.org/TR/2012/CR-html5-20121217/common-idioms.html#the-main-part-of-the-content) which recommended implicit marking of the main content OR having body mark up the main content with elements (like header, nav, footer) exclude the other (non main content) bits (as you suggested).
BUT, this section was later dropped (see https://lists.w3.org/Archives/Public/public-html/2013Feb/0037.html or just search for Re: Week 4/5: Staged WHATWG patches for HTML5.1 / HTML5.0 CR in the public-html list at https://www.w3.org/Search/Mail/Public/advanced_search). To quote
I do not think this section should be included, as it states that
there is not a dedicated element for marking up the main part of the
content of a page.This contradicts the definition of main in HTML 5.1
Additionally, if you look at https://www.w3.org/html/wg/wiki/User:Sfaulkne/main-usecases#Introduction, there are use cases where not using a main tag would necessitate an alternative (like role="main" for ARIA or some structure based CSS for styling), so IMO it would be preferable to have the main tag even if you were just going by the use cases.
Note - it's still recommended that you use role="main" even if you the main tag (until all browsers automatically map the main element to role="main")
Under the main tag, you could have a section tag if you want to indicate that it forms part of something else (see https://www.w3.org/TR/html5/sections.html#article-or-section?)
And on a related note, while you can markup content with an article tag when the main content of the page (excluding all the extra bits) is self contained, the spec says that it is technically redundant (see https://www.w3.org/TR/html5/sections.html#the-article-element). To quote
...the content should be marked up with a main element and the content
may also be marked with an article, but it is technically redundant in
this case (since it's self-evident that the page is a single
composition, as it is a single document).
To summarize
You need the main tag.
You don't need the section tag unles you want to indicate that it forms part of something else.
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
While studying the HTML 5 semantic tags, I've ran upon some doubts on how to proper utilize the main and section tags, and since the W3Schools reference seems a little vague and other references on the Web seems to diverge I would like to know if there is a proper guideline to the following questions or if its pretty much up to the programmer:
Does the main tag also has the meaning of grouping related elements or in that case should it be within a section tag?
Does it make sense to wrap single elements, such as an image, into a section tag?
It's pretty common to have a header and footer of the page (not inside any section), in that case, should the remaining in between those tags be wrapped inside a section tag, as if delimiting the "content" of the page?
Does the main tag also has the meaning of grouping related elements
Only to the same extent that <div> groups related elements. The primary purpose of <main> is to indicate where the dominant content of the page starts. (and additionally, according to the WHATWG spec but not the W3C one, where the dominant content of the page resumes).
or in that case should it be within a section tag?
A section tag is one way of grouping your content, to indicate that its contents are on a particular theme, in a way that differs from the content which is not in the section. Typically, you can and should give the section a heading using a <h[1-6]> element, which states what that theme is.
Does it make sense to wrap single elements, such as an image, into a
section tag?
Rarely. For one thing that would mean that the section didn't contain a heading. See above. It's unlikely that any new information would be conveyed by wrapping an image on its own in a section tag.
It's pretty common to have a header and footer of the page (not inside
any section), in that case, should the remaining in between those tags
be wrapped inside a section tag, as if delimiting the "content" of the
page?
No. The "content" of the section is the section less its header and footer. There's no need to add another sectioning element container.
This has been bugging me for a while now, since the introduction of HTML5:
In some of our designs the page header is actually the title of the article you're viewing, which leads to a missing header in the outline (since the h1 is within the article, not directly a child of the body).
What would be a good practice for countering this?
I'm not a big fan of simply dumping in a hidden h1 in the body, as it's not the best idea for page-ranking for example.
I know that ideally the design would take these kind of things into account, but sometimes (as a developer) it's not your choice to make.
Example mark-up: http://codepen.io/TheDutchCoder/pen/DuKok
From the HTML draft:
When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, the content should be marked up with a main element and the content may also be marked with an article, but it is technically redundant in this case (since it's self-evident that the page is a single composition, as it is a single document).
According to this, you should drop the article container and go only with main.
Update (8-Nov-2013)
Well, I understand that having untitled sections is unappealing, but for the time being (HTML master draft, November 2013) there is no escape: <body> elements are sectioning roots that always start a section and are displayed in the outline. An outline such as:
The main article title
└── Related articles
Latest News
Latest Blog Posts
is simply not possible with the current outline algorithm in an HTML5 compliant way (you would need to add siblings to the <body>).
Since you were considering a suggestion to the W3C, here is an idea: perhaps the outline of a document should default to <title>.
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).
I am writing an online tutorial with sort of side notes or as they call it "admonitions" similar to those in Django tutorial:
https://docs.djangoproject.com/en/dev/intro/tutorial01/ (I mean the the boxes with green a frame and a note icon).
Which HTML tag I should use to enclose such notes to add a semantic meaning of a note that may be useful to read at a given point of a tutorial, but is not part of the main tutorial flow?
Noteworthy, the tag must allow for enclosing block elements.
I believe the accepted answer is not quite correct. According to the HTML5 working draft, the <aside> element can be used to mark up side notes in certain, but not all cases:
<aside> is appropriate if the side note "could be considered separate from the content", for example background material on Switzerland in a much longer news story, or a pull quote in a longer article. (examples from W3C document)
<aside> is not appropriate if the side note is "a parenthetical". The W3C gives no examples of what it means. A narrow interpretation would be anything that is put in parentheses, between commas or between dashes.
If you want to interpret the W3C spec strictly, not all of the sidenotes in the Django tutorial can be marked up with <aside>. For example, the note titled "Doesn't match what you see?" could not really be considered separate from the content, since it does not make sense without the content next to it. Arguably, "Where should this code live?" is also not an <aside>, as it mentions "this code", which ties it to the content.
In my opinion, the W3C definition is unnecessarily confusing and restrictive. The dictionary definition of aside is "a temporary departure from a main theme or topic", and the spec should just stick to that, rather than introducing subtle distinctions. Of course, there is no reason why you can't use <aside> for all sidenotes, if it makes your code simpler. Think of it as civil disobedience. :)
Relevant quote:
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.
Note: It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.
In HTML5 (supported by all modern browsers), the tag is aside.
From http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element:
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.
It's not appropriate to use the aside element just for parentheticals,
since those are part of the main flow of the document.
This is a block-level element and enclose anything a block-level element usually can (i.e. almost anything). It is essentially a "semantic div".