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).
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.
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 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.
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.
A lot of marketing and content-heavy sites showcase the page's primary content using large text and/or images, sometimes with a slider, containing a call to action for signing up for a service, or downloading an app, etc.. I'm not sure what this design element is called, I got the term hero unit from twitter bootstrap:
http://twitter.github.com/bootstrap/components.html#typography
I think most of you know what I'm trying to describe... If it's not clear I can add screenshots or links to this question.
I looked at a few different sites, and some put this hero unit inside a ASIDE element, others use SECTION, ARTICLE and even HEADER. Using twitter bootstrap as an example again:
<header class="jumbotron masthead">
<div class="inner">
<h1>Bootstrap, from Twitter</h1>
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
<p class="download-info">
Is HEADER the most appropriate tag for this type of content? Or should I use ASIDE, ARTICLE or SECTION?
From HTML5 doctor, where they discuss how to mark up the main content:
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.
So I would just wrap your "hero unit" in a section. Each related group of content on a page should be grouped in its own section, with the first section being the start of the main content.
I would however second #net.uk.sweet's suggestion to frequently use a HTML5 outliner. Also, check out the HTML outlining article on the Mozilla Developers Network, it was really helpful for me.
I'd suggest looking at the w3 specification for each of the tags you're considering using and reading the description and usage examples. Of course you only need to look at the debate spawned by a seemingly simple question such as when to use an article tag to realise that this stuff is pretty subjective. However, reading the spec will leave you in a better position to formulate your own opinion:
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element
I do think that your header tag should be contained in a further sectioning element so that it's not hierarchically equal to other page headers within the element that contains it. What that sectioning element should be will depend on the content of your "hero unit" and how that content relates to the rest of the page.
Finally, check your work frequently in an HTML5 document outliner to get a feel for the structure of your new section and the page which contains it.