Reading an article on the <article> tag on HTML5, I really think my biggest confusion is in the first question of this section:
Using <article> gives more semantic meaning to the content. By contrast <section> is only a block of related content, and <div> is only a block of content... To decide which of these three elements is appropriate, choose the first suitable option:
Would the content would make sense on its own in a feed reader? If so, use <article>.
Is the content related? If so, use <section>.
Finally, if there’s no semantic relationship, use <div>.
So I guess my question is really: What types of content belong in a feed reader?
The spec answers this quite clearly:
The article element represents a self-contained composition in a
document, page, application, or site and that is, in principle,
independently distributable or reusable, e.g. in syndication. This
could be a forum post, a magazine or newspaper article, a blog entry,
a user-submitted comment, an interactive widget or gadget, or any
other independent item of content.
see: http://dev.w3.org/html5/spec/Overview.html#the-article-element
The W3C spec leaves a lot open to interpretation and it ultimately comes down to the author's opinion. Here is a short and simple answer in the form of a question:
What are the primary significant pieces of content you want to share on the page?
Here are a few examples:
On this very page, each answer could be an article.
On flickr each photo displayed in the photostream could be considered an article.
On dribbble each shot displayed on the page could be an article.
On google each search result listed could be an article.
On a blog each article.. well each article could be an article.
On a blog page with an article and a series of comments you could have two major sections. One with an article and another for comments in which each comment could be considered an article.
It's the author's discretion as to how far they want to go. Most blog authors have an RSS feed for their articles, but others may also provide feeds for comments, and shared links.
A lot of people have written on this subject. For further information I highly recommend reading:
http://html5doctor.com/the-article-element/ (you've already shared this)
http://www.impressivewebs.com/html5-section/
http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article
You've brought up a good argument and yes the spec does rather clearly define <article> as a syndication-worthy collection of content. The way I see it, your article would be the composed blog post – what you as the content writer of the site produce. While comments on that section are related to the article, they are not, in fact, part of the article, and should be relegated to another block in the <section>, either a non-semantic <div> or simply <p>s with display:block set. This is a decision that's left to the designer, depending on how they semantically evaluate the worth of the commentary.
Remember too that you have the <aside> tag, which is almost tailor-made for commentary, whether from the author or from the reader.
Most feed readers can handle many types of content, it could include copy, images, videos, etc. The feed for your will include the content on your site that is repeated or includes multiple versions. A question and answer site will have a feed of new questions. A video sharing site will have a feed of new videos. A software review site will have a feed of new software or new reviews.
I'd recommend considering what the typical consumer of your content would want to find easily in their feed reader. You get to define what types of content belong in a feed reader.
A feed reader, in general, should contain a list of stories. Look at http://google.com/elections/ - it's a good example of the sort of thing a feed reader might contain. The important part is that all the stories are self-contained, and in theory do not need to be related at all.
The markup for that document could look like the following:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
You may find more information in this article on A List Apart.
Related
I am using section tag for grouping topics and replies on the forum page. In cases that I need to load the topic and its replies on other article page, I use div tag for the same block and change topic title from h1 to h2. Although it is valid. But, for assistive technology, will this make navigating a bit confusing?
Assuming that the assistive technology you are talking about concerns mainly screenreaders, the best way for you to know how accessible your pages are is by downloading one yourself and testing it out. A free screenreader that I have used to do this is called NVDA but there are more out there.
In general, screenreaders work best when a page has a logical structure behind it. If you are displaying several articles, make sure that each article is located in a similar heirarchical location on the page and that each article itself resembles the others in terms of its structure. Using HTML5 semantic tags like article, aside and the like can be helpful but are not necessary. Screenreaders and other assistive technologies have made due for a lot longer than these tags have been around. They are certainly good to use when possible, but there are other more important ways to make your page accessible to as wide an audience as possible.
Another good thing to do is to use header tags for titles, and to use them in order. Screenreaders often give the option to users to skip from heading to heading in order to get a summary of what is on the page. You can also include visually invisible (via placing them far off the edge of the page using CSS) links at the top of the page, or in sections where placing a heading may not be appropriate visually. These will be read in context by screenreaders without your non-visually-impaired users seeing them.
If you are concerned about accessibility, a good way to get a clearer picture of how accessible your pages are is by following the WCAG (Web Content Accessibility Guidelines) standard recommendations. WCAG is managed by the W3C, and has various levels of accessibility that you can consider respecting when developing your content. The W3C has a list of validators that can be found here.
To answer your question from comments:
How it sound when read a topic title as h2, click it, then arrive the forum page and this topic title become h1?
This shouldn't confuse most people, especially if you do it consistently. I am assuming that you are making a news-like site.
Above Levi mentioned article tags. I would recommend using them if you are having multiple stories per page. The div tag is roughly the garbage can of the HTML world, you only should use it when nothing else is available. Article tags both give your code better syntaxical value as well as they have another feature, called a role. Roles allow a person using a screen reader to jump around a page, like they can with heading tags.
In term of SEO, if I want to group relevant page content together to maximize search engine readability, should I use the tag <nav> or <article>?
1) It's not there yet.
2) If it was, and you were wrapping menus as article, or wrapping affiliate link-farms as article, Google would slap you (keep that in mind in three or four years).
3) If you have lots of legitimate content, and each piece of content is self-contained (ie: suitable for article), then not only should you wrap it in an article tag, but you should also learn how to use Google's "Rich Snippet Tool", which was recently renamed "Structured Data Tool".
If you learn how to mark things up, both in an html5-friendly way, and in a Google-friendly microformat, then GoogleBot will grab all of the content it knows how, and it will be displayed in search results and elsewhere, when relevant.
Like I said... ...that's if you've got content which is worthy of doing this, because otherwise, Google will slap you, eventually, if you try to use it for evil.
article tag:-
The tag allows to mark separate entries in an online publication, such as a blog or a magazine. It is expected that when articles are marked with the tag, this will make the HTML code cleaner because it will reduce the need to use tags. Also, probably search engines will put more weight on the text inside the tag as compared to the contents on the other parts of the page.
nav tag:-Navigation is one of the important factors for SEO and everything that eases navigation is welcome. The new tag can be used to identify a collection of links to other pages.
so both tag have their own functionality which can be implemented according to need.
I got really excited when I read this on Mozilla Publisher Network:
In HTML4, every section is part of the document outline. But documents
are often not that linear. A document can have special sections
containing information that is not part of, though it is related to,
the main flow, like an advertisement block or an explanation box.
HTML5 introduces the <aside> element allowing such sections to not be
part of the main outline.
I felt equally trumped when I came across this on HTML5 Doctor:
Navigation, ads, search boxes, blogrolls and so on are not directly
related to the article and therefore do not justify the use of an
<aside>.
As such, after quite a bit of Googling, I realized that people have mixed opinions. Some agree with the use of <aside> for content like ads, but others don't.
Core Problem: I am building a technology blog, and ever since the beginning, I wanted the pages (including the articles) to be full-width. This gives me little chance to place an ad in it (Google really doesn't like "ads" in between an article's content).
And when I came across the <aside> element I thought I struck a gold mine until I saw the mixed opinions about its use for advertisements.
So, the question is, can someone knowledgeable shed some light on whether it is okay to use <aside> for advertisements? Also, are there any semantic alternatives (element or markup)?
Here's what the spec says:
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.
Leaving aside the fact that advertising is specifically mentioned as being OK in the second paragraph, the source of the confusion is clear. The two paragraphs are slightly contradictory.
The first paragraph states that it should be used for content tangentially related to and considered separate from the main content.
The second paragraph only requires that the content be considered separate from the main content.
I suspect this confusion has come about through the choice of the "aside" name which has "tangentially related to" connotations in English, whereas the alternative rejected name for the element, which was "sidebar" does not.
I'm not wholly sure why "sidebar" was rejected, but possibly it was considered too presentational and insufficiently semantic. Unfortunately in selecting "aside" instead, the author introduced semantics that weren't really intended and aren't helpful.
Fortunately, we don't in this case need to decipher this contradiction. Advertisements are specifically called out as being suitable for <aside> so the issue is clearly resolved.
While I still wait for answers, I've found an authoritative source, W3, stating that <aside> can contain advertisements.
Example of contents
pull quotes
sidebars
advertising
groups of nav elements
etc. Other content that is considered separate from the main content of the page.
UPDATE: In a revision of their article on use of 'aside' element, HTML5 Doctor states this:
With the new definition of aside, it’s crucial to remain aware of its
context. When used within an article element, the contents should be
specifically related to that article (e.g., a glossary). When used
outside of an article element, the contents should be related to the
site (e.g., a blogroll, groups of additional navigation, and even
advertising if that content is related to the page).
Unfortunately, I don't understand how they came to that conclusion, because the HTML5 spec for aside does NOT state anything as such and that specifically.
In fact, from I've quoted above, I believe if aside in an article can contain pull quotes, so can they advertising (W3C hasn't specifically separated their use cases, and I believe they would, if it has to be that way).
PS: I've contacted HTML5 Doctor on this, and will update my answer if I get a reply.
This is the most relevant conclusion on aside that I've come across:
The aside element can now represent secondary content when used
outside of an article. Keep in mind that aside — and, more generally,
secondary content — does not necessarily mean “sidebar”. The style of
the content should not dictate the use of the element. For content
that is not the primary focus of an article (or page) but is still
related to the article (or page), aside is what you need, regardless
of its visual design.
Reference: http://html5doctor.com/aside-revisited/
Basically, it depends on if you use it inside your article or outside it. outside being the best for ads.. is how i read it.
I had a little disagreement with a friend yesterday and rather than continuing a never-ending discussion I thought I'll just ask here.
I recently coded a site using HTML5 semantics. The page has relatively little content and I wrapped it in an article tag.
You can check out the page and it's source here: http://inneresauge.co/
And here is the lowdown for those that don't like clicking links...
<div id="container">
<header>
<h1 id="logo">Inneres Auge Co.</h1>
<nav id="main-nav">
...
</nav>
...
</header>
<article id="main">
<p>We're <strong>Inneres Auge Company</strong>, a creative media company that knows no limits.</p>
<p>We do everything and more, from mobile games and apps to web sites and platforms to video and audio production.</p>
<p>The best thing about it?<br />
We're amazing at all of them!</p>
<p>Don't believe us?<br />
Just see for yourself...</p>
</article>
</div>
I figured section wouldn't be appropriate, because it really isn't an individual section of the page that could stand on its own, the text alone can however stand on its own without feeling out of place, that's why I figured article is the best choice.
What's the best choice here? article, section or maybe just a plain div because neither is a good match?
Please feel also free to mention if there is any other unsemantic/unproper usage of html elements.
Doesn’t look like an article to me. As per the spec:
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
http://dev.w3.org/html5/spec-author-view/the-article-element.html#the-article-element
I don’t think the text is really a self-contained composition that’s reusable. It’s marketing blurb, an introduction to the company.
Whereas <section>, I think, would be fine:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction [emphasis mine], news items, and contact information.
http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element
I don’t think it matters that you’d only have one section — the spec doesn’t say you need multiple <section>s. (And the company may well add additional sections to the page later on.)
It’s all a matter of interpretation, of course. And it doesn’t have a lot of practical consequences.
W3C Specification
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Examples here
The article element is a specialised kind of section; it has a more specific semantic meaning than section in that it is an independent, self-contained block of related content. We could use section, but using article gives more semantic meaning to the content.
To me it looks like div would be best fit here. An article generally actually has a heading, which yours doesn't. section would be appropriate if the site was actually split into more than one section, but as you said, yours isn't but I think it could still be used.
I wrote a bit about it: HTML5: Section or Article? which might help.
Whenever you ask yourself "Is this semantically correct?" you should consult "the oracles". They are
WHATWG <article>
W3 <article>
The important thing that W3 and WHATWG state is
independently distributable or reusable
So in your case <article> is not semantic.
The [WHATWG <section>] states
A section, in this context, is a thematic grouping of content, typically with a heading
Does the group of content have a header? I say yes. It is
We're Inneres Auge Company
If you don't think that content has a header then use <div> if you do think it has a header then wrap it in <header>
As a further aside you have <div><header></header><article></article></div> I think that outer div should be a <section>
The new HTML5 article tag all seems very great and wonderful and there has been much discussion here and elsewhere about its uses.
Unfortunately, all this discussion seems to be in the context of blog or news sites where the content is all just that, content.
In an ecommerce site, the biggest question to be asking is, how do I now mark up a product?
Taking the spec for guidance, it seems that a saleable item is indeed something distinct that could be syndicated (and often is). The article tag seems like a good match, yet I see no mention of its use in this way.
Is it appropriate here but all the examples blogs etc. because they seem to fit a bit more intuitively with the name of the tag? Or am I stretching too hard at the spec?
Any guidance would be much appreciated.
I don't think <article> is suitable for product data. Although not using semantic elements, you may wish to look at the Product schema from schema.org.
EDIT :
See the following quote from the W3C spec. Perhaps article is suited after all, as a product can be considered an "independent item of content."
The article element represents a component of a page that consists of
a self-contained composition in a document, page, application, or site
and that is intended to be independently distributable or reusable,
e.g. in syndication. This could be a forum post, a magazine or
newspaper article, a blog entry, a user-submitted comment, an
interactive widget or gadget, or any other independent item of
content.
You should take a look at this article
Looks like <article> is not that bad an idea. I am using pointers from here and http://schema.org/Product for an e-commerce site project.
Having custom tags bothers IE a lot and we can not ignore the internet explorer yet.