Let me just say first that I'm not looking to start a flame war :-)
I'm aware of the semantic meaning that tags such as <article> give a document, but what benefits does one get from using them?
Do search engines look at them differently? If not, what other benefits are there?
A Q+A on Google's Webmaster Central seems to suggest that the new HTML5 semantic elements have no impact currently, but will at some point in the future:
http://www.google.com/support/forum/p/Webmasters/thread?tid=2d4592cbb613e42c&hl=en
There are the obvious benefits that one day search engines might use them or microdata to associate more meaning to your site. I'm not totaly sure if that is the case yet, but some of the other answers so far provide some good links to answer that question.
Another benefit is cleaner markup. It helps to clean up the div soup that solved so many of our organization issues with HTML 4.01. Take this example:
<div class="post">
<h1>Example Blog Post</h1>
<div class="entry">
<p>Blog text goes here...</p>
</div>
<div class="entryFooter">
<p> Posted in example category.</p>
</div>
</div>
is not as readable or as clean as:
<article>
<header>
<h1>Example Blog Post</h1>
</header>
<p>Blog text goes here...</p>
<footer>
<p>Posted in example category.</p>
</footer>
</article>
Cleaner markup will make maintaining the markup a lot easier and that is always a benefit in my opinion.
Search engines will certainly look at Microdata differently.
Here's a tool that parses microdata:
http://www.google.com/webmasters/tools/richsnippets
To learn more about HTML5 Microdata:
http://diveintohtml5.ep.io/extensibility.html
Related
My goal is to use the correct H* tag (H1 to H6) in my html5 code.
I read here I shouldn't use <section> at all: "Why you should choose article over section : Browsers’ visual display of headings nested inside elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies"
but I feel that isn't true because of the answers to this popular question:
that says "sections in an article are like chapters in a book, articles in a section are like poems in a volume" and I want to use sections for their intended purpose.
The problem is this mdn page says "Important: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the outline algorithm should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure."
The guy from the first link I posted does make a good point about halfway down that page where he says "browsers display different sizes of font depending on how deeply the is nested in <section>s”.
So am I correct in saying I have to correctly match H* tags to depth/nesting to achieve a good outline AND visual styling or is there a different way. eg this would be incorrect:
<body>
<h1> something </h1>
<section>
<h1> section heading for outline </h1>
<article>
<h1>my first news article</h1>
<p>stuff</p>
</article>
</section>
</body>
because screen readers can't properly process <section> for outlining.
and because browsers display different fonts according to level of nesting.
so then would this would be correct?
<body>
<h1> something </h1>
<section>
<h2> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
note: This is my first question I'm posting so please go easy on me if I've made a faux-pas, I'm new here :)
The document outline algorithm based on <h1> has been removed from the spec and actually never worked. In terms of heading levels, your last code example is the correct one.
Why the HTML Outlining Algorithm was removed from the spec – the truth will shock you!
There Is No Document Outline Algorithm
So you should not use it, and your quote holds true.
Authors are advised to use heading rank (h1-h6) to convey document structure.
Correctly using <section>
As to the question of using <section> vs <article>.
You shouldn’t avoid the latter due to styling issues. You already did your research and should stick to your outcome. You’d need to apply some styling yourself, though.
I’d also like to add the ARIA perspective on a page summary:
<article> has role article
An article is not a navigational landmark
and
<section> has role region, which is …
[…] sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.
To do so, it is also noted
Authors MUST give each element with role region a brief label
So, let’s put it together
<body>
<h1> something </h1>
<section aria-labelledby="s1-heading">
<h2 id="s1-heading"> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
What's the best practise for accessibility when you have redundant links on a page. For example, a page containing blog listings often has a clickable title and a read more link:
<article>
<h2><a>My awesome blog post title</a></h2>
<p>This is the excerpt...</p>
<a>Read More</a>
</article>
<!-- more blog listings... -->
My first approach would be to add an aria label to the read more link to give it some context.
<article>
<h2><a>My awesome blog post title</a></h2>
<p>This is the excerpt...</p>
<a aria-label="My awesome blog post title">Read More</a>
</article>
<!-- more blog listings... -->
However now there are two identical links and I can see how this would be irritating for people using screen readers - especially if the page contains a large number of articles.
Would this be a good use case for hiding the extraneous link from screen readers and/or people navigating using the keyboard. Something like this?
<article>
<h2><a>My awesome blog post title</a></h2>
<p>This is the excerpt...</p>
<a role="presentation" tabindex="-1">Read More</a>
</article>
<!-- more blog listings... -->
Not sure whether this is one of those situations where trying to help may actually make things worse. Would appreciate any advice!
Thanks, Adam
Some baseline:
Generally you want links that point to the same URL on a site to use the same text. This is part of the reason "read more" is so confusing for many screen reader users.
You also want to avoid being overly-verbose, in deference to screen reader users.
You also want to avoid linking an entire block of content, as that can also be incredibly verbose.
This mostly affects screen reader users; visual non-screen reader users can generally parse "read more" links easily.
You may have found from Google searches that are lots of different approaches and many of them depend on the context.
That is the catch — context matters. Knowing the audience, considering the material, and understanding the impact are all crucial. I might code it differently for a tech blog targeted at younger users than I would for a food blog targeted at a generation ahead of mine. In both cases I would include screen reader testing.
That being said, since "it depends" is generally a crap answer. Here are a some approaches you can test. Since screen reader users are our target, I am leaning on ARIA instead of CSS or scripting trickery.
This approach has issues in NVDA when a user tabs to a link (but is still my preferred method):
<article>
<h2>My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</article>
This approach will be more clear and gives context, but is a bit verbose and means you have to update / insert the content twice (which can be problematic if your post titles of have double quotes in the title that are not escaped):
<article>
<h2>My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</article>
This approach leans on the existing heading, as the first one does, but removes the "read more" text instruction completely:
<article>
<h2 id="Foo">My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</article>
This approach gives context first (id="Bar") and then the name of the post (id="Foo") thanks to a space separated list of IDs in the aria-labelledby. A skilled screen reader user (or someone who understands the page) can skip right past it after the first couple words:
<article>
<h2 id="Foo">My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</article>
I hope that gives you at least a starting point to test and/or decide which is the best fit for your audience and content.
<article>
<h2><a href>My awesome blog post title</a></h2>
<p>This is the excerpt...</p>
<a href>Read More</a>
</article>
First solution : let screen readers users ignore the "read more" link
Here the easiest thing is to set the aria-hidden attribute on the "Read more" link.
Problem : like it was stated for tabindex=-1, sighted screen reader users will see a link they can't go on.
Second solution : consider all as a link
In HTML5, you can perfectly enclose the whole article snippet in a link
<article>
<a href><h2>My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</a>
</article>
Problem : the alternative text will be awfully long.
3rd solution : Playing with a bit of javascript
Combining the aria-labelledby approach (see #aardrian excellent answer) and some javascript magic, you can have the best of two worlds by playing with the onclick event on the article tag (or the h2)
<article onclick>
<h2 id="Foo">My awesome blog post title</h2>
<p>This is the excerpt...</p>
<a aria-labelledby="Foo" href>Read More</a>
</article>
This way, the only visible link is the "read more" link, keyboard and screenreaders users can focus it. The alternative text is very explicit. Mouse users are still able to click on the heading or the excerpt.
I would add that having a link inside an heading (or vice versa) is often a bad design choice (too long to discuss here).
In my personal recommendation, I would combine it to one link... Anytime you can combine redundant links that's a great win.
<article>
<h2>My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</article>
<!-- more blog listings... -->
If you really need both links you can use an onclick function and remove the href.
<article>
<h2 id="Foo">My awesome blog post title</h2>
<p>This is the excerpt...</p>
<a onclick="examplefunction()"id="Bar" aria-labelledby="Bar Foo">Read More</a>
</article>
This removes that redundant link error and removes the second link from achieving focus. The link can still work if someone clicks on it, but it removes it from the tab order. This is perfectly valid.
Though it's always best to have HTML handle links instead of using javascript to do it.
Good Luck,
Giovani
For example, if I want to put h1 in a left column and content in a right column:
<div class="left-column">
<main>
<h1>Document Title</h1>
</main>
</div>
<div class="right-column">
<main>
<p>Text content<p>
</main>
</div>
Is it correct? Thanks!
The short answer is yes, you can. However, the W3C spec forbids it while the WHATWG spec allows it. As the author of the main element wrote the W3C version and is at odds with WHATWG's interpretation, I would defer there. There is also an open bug to have the WHATWG spec align with the W3C spec.
However, you SHOULD NOT as the best use of main involves supporting assistive technology (AT) (screen readers, for example). It also maps to the ARIA role of main, so it has a direct mapping expectation.
AT users have a quick way to navigate to the main element, which represents the main content of the page. If you use more than one, then those users may never see it as they do not expect there to be more than one block of main content (the WHATWG bug report bears this out as stated by AT users).
Also the HTML validator will throw an error, which may or may not be a concern.
In most cases, multiple article elements can be nested within a main to achieve the desired effect for styling hooks.
I don't have enough rep points to post more than 2 links, else I'd offer some more material.
I think not - There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
it can only be use once per page. see this link here
http://html5doctor.com/the-main-element/
For more info about why. Take a look at this one
http://lists.w3.org/Archives/Public/public-html/2013Jan/0230.html
Here is the Alignment
<div class="left-column">
<main>
<h1 align="left">Document Title</h1>
</main>
</div>
<div class="right-column">
<main>
<p align="right">Text content<p>
</main>
</div>
I want to change
<section>
<header>...</header>
<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
</section>
into
<section>
<header>...</header>
<article class="tweet">
<p>This is a tweet preview. You can... <time pubdate>6 Hours ago</time></p>
</article>
</section>
But after reading some articles on the <article> tag, I'm not sure that this is the best move. What would be better practice?
The important thing to understand about articles and sections is that they are sectioning elements. Each follows a common pattern:
<sectioning_element>
<heading_or_header>
... the body text and markup of the section
<footer>
</sectioning_element>
The footer is optional. Sectioning elements should have a "natural" heading. That is, it should be easy to write an <h?> element at the start of the section/article, that describes and summarises the entire content of the section/article, such that other things on the page not inside the section/article would not be described by the heading.
It's not necessary to explicitly include the natural heading on the page, if for example, it was self evident what the heading would be and for stylistic reasons you didn't want to display it, but you should be able to say easily what it would have been had you chosen to include it.*
For example, a section might have a natural heading "cars for sale". It's extremely likely that from the content contained within the section, it would be patently obvious that the section was about cars being for sale, and that including the heading would be redundant information.
<section> tends to be used for grouping things. Their natural headers are typically plural. e.g. "Cars for Sale"
<article> is for units of content. Their natural headers are usually a title for the whole of the text that follows. e.g. "My New Car"
So, if you're not grouping some things, then there's no need, and it's not correct, to use another sectioning element in between the header and footer of the section and your correct mark-up would be
<article class="tweet">
<header>...</header>
<p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</article>
assuming you can find a natural heading to go inside the <header> element. If you can't, then the correct mark-up is simply
<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
or
<div class="tweet">
<p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</div>
* There's a case for including the natural heading anyway, and making it "display:none". Doing so will allow the section/article to be referenced cleanly by the document outline.
<article> content
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.
(from the html5 working spec)
in fact one of the examples illustrates nested <article> elements where the inner <article> is inside a <section>
Why don't you think it's a good move? It seems to me that a Tweet would fit perfectly in the W3C spec on what should be in an article. It would most likely depend on the context your sample code is in (which we can't tell from what you've provided).
It could also be put this way.
The semantics don't matter THAT much. You could very well do that if you wanted to and it would be fine. The thing with the article vs. section usage debate is that it's all subjective, to a point. I would recommend against how you're doing it in the second version though because it seems as though that just clutters the code more. What you could do is just replace the section tag with an article tag.
I went through quite a bit of head scratching to understand it because it seems to be confusing to quite a few but it really should be looked at a bit more literally. Here is an easy way to look at it:
Sections can contain elements from different topics.
Articles should contain elements from the same topic.
For example:
<section>
<section>
<article id="article_ONE">
<header>...</header>
<p>Not directly related to article_TWO</p>
<footer>...</footer>
</article>
</section>
<section>
<article id="article_TWO">
<article>
<header>...</header>
<p>Part 1 of article TWO</p>
<footer>...</footer>
</article>
<article>
<header>...</header>
<p>Part 2 of article TWO</p>
<footer>...</footer>
</article>
</article>
</section>
</section>
I have a title and subtitle like so:
The Programmer
Saving the world with bikesheds and perl hacks.
Which I'm representing like this:
<h1>The Programmer</h1>
<p><strong>Saving the world with bikesheds and perl hacks.</strong></p>
However perhaps this is more appropriate:
<h1>The Programmer</h1>
<p class="subtitle">Saving the world with bikesheds and perl hacks.</p>
But since it seem to make sense to put a subtitle class on the element wouldn't this be better:
<h1>The Programmer</h1>
<h2>Saving the world with bikesheds and perl hacks.<h2>
Which would be more appropriate?
In HTML4, I'd maybe go for your 2nd approach but change the class name to tagline if you're not quite comfortable having a class of subtitle on a non-heading tag:
<h1>The Programmer</h1>
<p class="tagline">Saving the world with bikesheds and perl hacks.</p>
In HTML5 you could use a <section>, <header> and <hgroup> tag and wrap the <h1> and <h2> version, giving you something like:
<section>
<header>
<hgroup>
<h1>The Programmer</h1>
<h2>Saving the world with bikesheds and perl hacks.<h2>
</hgroup>
</header>
...
</section>
(Alternatively you could use an <article> tag instead of a <section> tag - or any other sectioning tag - due to the change in the way HTML5 works out the document outline).
Well i think it that using proper markup it's more appropriate, if it's an header (like the start of a chapter) you should definitly use <h2>. If it's just a way of emphasize content i think it's better to use the CSS class so that you explain what it is.
If you use html 5 you may be intersted in teh <header> tag like in this example:
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<article>
<header>
<h1>Title of this article</h1>
<p>By Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
here and here there are some quick info on the header tag in html5.
You can also read this chapter of "Dive into html5" for more complete reference (read the whole book while you are at it, it's good!)
Sometimes such "subtitles" are more of a teaser or short description (but in your case it actually seems like a subtitle); if you felt it was part of the title, you could stick it in the <h1> tag and perform special formatting. It's just a question of semantics: if you feel this is more a part of the header or more a part of the body, or neither.
I'd say my suggestion would be more appropriate, semantically and for screen readers, in this particular case. But the second case works well too, assuming these aren't huge descriptions.
First one is looking good. 2nd approach is also good, but for that you have to write a css class.