I'm building a page with some news items on it.
The current HTML I have is:
<h1>News</h1>
<article>
<h2>Item 1</h2>
<p>Lorem ipsum</p>
<footer>
<ul>
<li>By: me</li>
<li>31-12-2011</li>
</ul>
</footer>
</article>
<article>
<h2>Item 2</h2>
<p>Lorem ipsum</p>
<footer>
<ul>
<li>By: me</li>
<li>31-12-2011</li>
</ul>
</footer>
</article>
As you can see I use a <h2> for the article title.
However now I'm thinking it should also be a <h1> since it is in the 'scope' of the article element.
So: What would be the semantically correct element to use for the title of my news items?
From an HTML5 point of view, either is fine, and amount to the same thing.
For non-HTML5 aware processors though, the ranking of h2 will be understood correctly and h1 will not, so at the present time, while HTML5 is still new, I'd err on the side of caution and use h2, unless you need more than six levels of heading.
I think either one is semantically correct. From http://www.w3.org/TR/html5/sections.html#headings-and-sections:
Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.
So, either way is fine, but don't mix and match, and don't (for example) put an <h2> in a section that's within a section that has an <h2> or <h3>.
For what it's worth, the spec's own examples for <article>, at http://www.w3.org/TR/html5/sections.html#the-article-element, both use <h1>.
Related
There are cases when text and image content is too large to be put onto one single page, but context is important for the content in question, so displaying it explicitly makes sense from the UX perspective. For example, this content could be chapters of a novel, parts of a long article, entries in a specialized list of items:
A Tale in Three Parts
The Beginning
The Middle
The End
Local Flora and Fauna
Badger
Mushroom
Snake
The answer would've been more simple if everything was on the same page, but what if these are separate standalone pages? What should be the proper way to semantically mark headings in that case?
Option 1
Use same h1 but different h2 on all pages:
<article>
<h1>Main Title</h1>
<h2>Title of Specific Part</h2>
<p>...</p>
</article>
Option 2
Use h1 for both article and section even though there is only a single section, and have same top-level h1 on all pages:
<article>
<h1>Main Title</h1>
<section>
<h1 class="styled_like_h2">Title of Specific Part</h1>
<p>...</p>
</section>
</article>
Option 3
Optimize for machines, fake styling for humans:
<article>
<p class="styled_like_h1">Main Title</p>
<h1 class="styled_like_h2">Title of Specific Part</h1>
<p>...</p>
</article>
Option 4
Optimize for machines and hope humans figure it out from surrounding navigation:
(<nav><ul>...breadcrumbs...</ul></nav>)
<article>
<h1>Title of Specific Part</h1>
<p>...</p>
</article>
Using your example of a novel displayed as a chapter per page, it would make sense to use a structure like this:
Title Page
<head>
<title>A Tale in Three Parts</title>
</head>
<body>
<main>
<h1 class="title">A Tale in Three Parts</h1>
<p>Lorem ipsum...</p>
<nav>
<h2>Table of Contents</h2>
<ol>
<li>The Beginning</li>
<li>The Middle</li>
<li>The End</li>
</ol>
</nav>
</main>
</body>
Chapter Page
<head>
<title>A Tale in Three Parts: The Beginning</title>
</head>
<body>
<nav aria-label="Breadcrumbs">
<ol>
<li>A Tale in Three Parts</li>
<li>The Beginning</li>
</ol>
</nav>
<main>
<h1 class="chapter">The Beginning</h1>
<p>Lorem Ipsum...</p>
</main>
</body>
When thinking about HTML semantics, you should think about it in the context of the HTML document (the page) rather than the broader context of the full content (in this case, the novel). The elements should make sense for the content on the page.
Also remember, semantics aren't just for machines. Users with screen readers, or users for whom stylesheets don't load also benefit from semantic elements. Relatedly, the appearance of text shouldn't dictate which element is chosen. If a large, unique style is desired for a title page, and smaller heading styles are desired for chapter pages, that should be managed through CSS. Both should be <h1> elements on their respective pages.
Additionally, using <article> to wrap the content of each page isn't appropriate in this example, because articles are meant to be:
"...a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable..."
— MDN Web Docs: The Article Element
In the case of a novel, the individual chapters aren't independently distributable.
Is the article (or section) element appropriate on a homepage?
I am not sure since the content of homepage is mostly a bunch of summaries referring to the content that should be included in an article element (on a separate page).
A rule of thumb I follow is to only use <article> or <section> if there is a corresponding <h#>.
So this is more appropriate:
<h1>Home Page</h1>
<p>
Hi.
</p>
<article>
<h2>Sub-Head</h2>
<p>
Hello.
</p>
</article>
Than this:
<h1>Home Page</h1>
<p>
Hi.
</p>
<article>
<p>
Hello.
</p>
</article>
Do not add a heading just to make it work. The value of a heading should be determined by the nature of the content, not a desire to shoehorn the elements you want.
With an example URL or image of your intended layout and content, I could offer more context.
Also, consider that if you have one contiguous piece of content (like how a sub-page generally is about one thing), you would not wrap the entire page in <article> but you would wrap it in <main> instead.
For a bit more, check out this piece on <section> from W3C HTML5, WCAG, and ARIA spec participant and accessibility advocate Léonie Watson.
I know that here and around internet is a lot of information and I read them, but I got disappointed by html5 validation.
My webpage is like this:
<body>
<nav>
<ul>
<li>...</li>
<li>...</li>
</ul>
</nav>
<main>
<section>
<header>
<h1>...</h1>
</header>
<section>
<header>
<h1>Section 1</h1>
</header>
<p>...</p>
<p>...</p>
</section>
<section>
<header>
<h1>Section 2</h1>
</header>
<p>...</p>
<p>...</p>
</section>
<section>
<header>
<h1>Section 3</h1>
</header>
<p>...</p>
<p>...</p>
</section>
</section>
</main>
<footer>
<h2>...</h2>
<p>...</p>
</footer>
</body>
By my knowledges, html5doctor and w3c specification is right.
My page is onepage website and each sections have own meaning.
...but if I try to validate, I will get warnings to consider using h2 - h6 within section, instead of h1. My webpage past validation, but I am nervous by warnings there.
Please can you confirm me, that is OK or what is exactly wrong on that?
Thank you for each professional answer Peter
The original idea of HTML5 contained the concept of an outline algorithm. In it, the first h1 in your example would be interpreted in same way as an h1 in HTML 4.01. The h1 elements in the section elements would each be treated equivalent to an h2 element in HTML 4.01. That is, they would indicate the start of a subsection subordinate to the top level section started by the first h1 element.
However, what happened in practice is that neither browsers, nor screen readers, nor any other HTML processors of note implemented the HTML5 outline algorithm anywhere near correctly if at all.
The result is that your page will be misinterpreted. Mostly this affects Accessibility Technology which make heavy use of header levels to allow its users to navigate your pages effectively.
I don't know whether there any specific negative SEO effects, but the effective semantic misinterpretation is unlikely to be beneficial.
So the advice the validator is giving you, is that for the foreseeable future, it is best to use the same header level arrangement as you would use in HTML 4.01, that is h1 for top level section headers, h2 for the next level sub-sections, h3 for sub-sub-sections, etc.
Despite reading pages upon pages about the <article> and <section> tags I really don't understand how to apply them to my site.
I have a product page with related products at the end of the page. First I thought about doing something like this:
<section>
<header><h1>Product title</h1><header>
<img src="image.jpg"/>
<p>Description</p>
<p>Price</p>
<p>Order</p>
</section>
<section>
<header><h1>Related products</h1></header>
<article>
<img src="image1.jpg"><br/>Product 1<br/>Price
</article>
<article>
<img src="image2.jpg"><br/>Product 2<br/>Price
</article>
<article>
<img src="image3.jpg"><br/>Product 3<br/>Price
</article>
</section>
But, then I read some other blogs and it occured to me that maybe I should replace the <section> tags with <article> tags.
Which is right and why? Thanks.
<article> is for an independent piece of content that should make sense even if all of it's surrounding content is stripped away. <section> is more of a generic container that's quite similar to div tag and mostly used for content structuring. So the right code should be like this:
<article>
<header><h1>Product title</h1><header>
<img src="image.jpg"/>
<p>Description</p>
<p>Price</p>
<p>Order</p>
</article>
<article>
<header><h1>Related products</h1></header>
<section>
<img src="image1.jpg"><br/>Product 1<br/>Price
</section>
<section>
<img src="image2.jpg"><br/>Product 2<br/>Price
</section>
<section>
<img src="image3.jpg"><br/>Product 3<br/>Price
</section>
</article>
Also HTML 5 doctor's got a great Flowchart if you get confused picking the right HTML5 semantic element for your need. You can give it a try and see if it helps.
Section
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
Article
The article element represents a complete, or 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.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Straight from the W3 http://www.w3.org/html/wg/drafts/html/master/sections.html
In their example, they have an article nested within a section within an article. I would say you are definitely using it correctly.
<article>
<header></header>
<section>
<h1></h1>
<article></article>
<article></article>
</section>
</article>
In the HTML5 standard, the <"article"> element defines a complete, self-contained block of related elements.
The <"section"> element is defined as a block of related elements.
Can we use the definitions to decide how to nest elements? No, we cannot!
On the Internet, you will find HTML pages with <"section"> elements containing <"article"> elements, and <"article"> elements containing <"sections"> elements.
You will also find pages with <"section"> elements containing <section> elements, and <article> elements containing <"article"> elements.
Right From : http://www.w3schools.com/html/html5_semantic_elements.asp
using HTML5, would it be semantically correct to place an <article> element within a <li> element. A situation where this would prove useful is a list of recent or popular articles on a blog. Consider the following:
<section id="popular">
<div class="blurb">
<h2>Popular Articles</h2>
<p>The most popular posts from my blog.</p>
</div>
<ul>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
</ul>
</section>
Which would appear as follows:
Popular Articles
The most popular posts from my blog.
Article
An excerpt from the article.
Article
An excerpt from the article.
Article
An excerpt from the article.
To me, this seems an excellent way of marking up the information. My only question is if it is correct to nest the <article> element inside the <li> element in this way.
There is nothing semantically incorrect about it, but it is not really necessary. The <ul> and <li> elements aren't really adding anything here, unless you are taking advantage of their default styling. Simply putting the <article> tags directly within the <section id="popular"> should be sufficient, and it reduces the complexity of your page as well as its size.
To determine whether something is semantically correct and useful in HTML, ask yourself a few questions. Are you using each element for its intended purpose? For instance, it's not semantically correct if you use an <a> element for a button, as <a> is for hyperlinks, <button> is for buttons. Do you need each element you are using in order to convey all of the semantic information about your content (sections, headings, links, etc)? Is there anything meaningful that you intend to convey that isn't expressed by use of appropriate elements? Having lots of extra meaningless elements usually isn't harmful, but it adds clutter, and it may mean that there are semantic distinctions you are conveying visually but not encoding in a way that a screen reader or automated bot or browser that presented the information in a different format could make sense of.
If it displays correctly in all implementations, I don't have any idea why it would be incorrect... HTML5 is meant to be flexible. Also, the documentation states:
Contexts in which this element can be
used:
Where flow content is expected.
Which looks to be the context of most elements available.