In a typical index of articles (like a blog without excerpt) like this image:
those items should be a list (<ul><li>) or just divs?
And also, they should be figure/figcaption? Because would make some sense, but also... picture is part of an artcile not the main content, so maybe title/description is not the caption of the image, but the caption of the article.
what do you think?
EDIT: a live example - https://news.google.com/?hl=en
I’d use an article for each snippet (i.e. a news teaser).
Each article contains an h1 element for the heading, an img element for the image, and p element(s) for the text.
As you probably want to link to a full version, you could enclose all elements in one a element (which is allowed in HTML5), or the heading etc. only.
So it could look like:
<article>
<h1><!-- news title --></h1>
<img src="" alt="" />
<p><!-- news description --></p>
</article>
Only use figure if this image itself should have a separate caption. The news description (here contained in p) usually isn’t the caption for that image.
You may change the order of the article children. Thanks to the way sectioning elements work, the heading doesn’t have to be the first element.
You may use an ul, but it’s not necessary. ol, however, should only be used if the order is really meaningful for understanding the content (i.e. a different order would change the meaning of the document). Typical example: if the items are ranked by relevance (e.g. most relevant teaser at the top), you should use ol.
Regarding your question if the teaser should be an article:
Don’t confuse article (HTML5 element) with the term "article" (English language). article has a separate definition that doesn’t necessarily have something to do with the understanding of the term "article".
The teaser should also be an article – the teaser article and the fulltext article are different articles, although they refer to the same entity.
The answers here leave a lot to be desired. The HTML spec has an example of blog post markup with comments inside.
https://www.w3.org/TR/2013/CR-html5-20130806/sections.html#the-article-element
While the accepted answer has copy/pasted the description of how the <article> element is used it does not answer the question asked at all.
Here is the answer from W3.ORG
If you can use a native HTML element [HTML51] or attribute with the
semantics and behavior you require already built in, instead of
re-purposing an element and adding an ARIA role, state or property to
make it accessible, then do so.
Here is the logic I am proceeding with after researching:
I have a list of reviews.
Each review is ordered by helpful votes.
Therefore the first level will be an ordered list since reviews will be ordered by their helpful votes. Otherwise an unordered list would suffice such as the nested comments:
<ol>
<li class="review" role="article"> <!-- reviews ordered by votes-->
<header>
<h2>Review title</h2>
</header>
<p>Review body</p>
<section class="comments">
<ul>
<li class="comment" role="article"> <!-- comments with votes-->
</li>
</ul>
</section>
</li>
</ol>
An insightful answer by #Terrill Thompson explains that screen readers are helped by semantic list markup. So yes, a list of <article>'s does make sense. As things become complex he mentions how confusing it can be. This is where ARIA, role and tabindex attributes should absolutely be added and tested.
That answer has a comment directing users to a conversation at W3.ORG. By definition it appears that <article> would not be part of a list where it should be "stand alone content". However the question here, myself and probably you reading this require a deeper answer where article applies to a true list of articles.
Such as:
List of blog articles with excerpts
Search results
Reviews
Comments
This is an opinion question so it comes down to preference.
Based on your image, I would use a <ul> <li> though I could get the same result using divs.
If each item represents an article, then each should be represented using <article> elements.
If you feel that it's an ordered or unordered list of articles, then you could use <ol> or <ul> elements respectively.
I would recommend keeping the markup as simple as possible and as complex as necessary, so something along the lines of:
<div>
<article>
<img>
<div>…</div>
</article>
<article>
<img>
<div>…</div>
</article>
…
</div>
As other people said, I think that each article should be marked with an article tag.
I also suggest to surround the whole list with an aside tag. So If you have one main article in the page (surrounded with main), it will not be affected by the other articles.
Here is a nice article about aside.
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>
I am very new to HTML5 and I need to implement an article container (for example, I need to create the classic structure for the WordPress articles where the user see a series of articles one below another), but I have some doubts about the semantic use of the new HTML5 components.
To do this I thought something like this:
<section>
<h1>My Posts:</h1>
<article>
<header>
<time datetime="2010-11-10" pubdate>10/11/2010</time>
<h2>FIRST POST TITLE</h2>
</header>
<p>
POSTS CONTENT
</p>
<footer>
<address>MY NAME</address>
</footer>
</article>
<article>
<header>
<time datetime="2010-11-01" pubdate>01/11/2010</time>
<h1>SECOND POST TITLE</h1>
</header>
<p>
POSTS CONTENT
</p>
<footer>
<address>MY NAME</address>
</footer>
</article>
</section>
So I have reasoned in the following way:
All the shown posts are contained in an external <section> element (because following the HTML5 specification a <section> represents a generic section of a document, in this case an area where posts are shown), the <sections> have its <h1> title.
Every post is represented by a specific <article> element (should be semantically correct).
Every article element represents a specific post and contains a <header> element that contains the date of publication and the post title. I used a <header> element to contain these information because this element is used to represent "a group of introductory or navigational aids".
Then I have a classic <p> to contain the article textual content (but I can also wrap it into a div or is it better use a new <section> if the text is long and detailed?)
Finally I have put the e-mail contact into a <footer> element because it is an information about the container (the <article> element).
Is this a valid structure for my problem? Is it semantically correct in HTML5?
This looks largely great to me. headers and footers were changed a while ago to allow them to be used in sections and articles.
However, the p element should be used for a single paragraph. In all likelihood, your articles will have more than a single paragraph, and WordPress will generally generate these for you based on line breaks. If you need to wrap all of your article contents into an element, a div will be sufficient. If your article is long and has several sections, you could use these instead.
The address element threw me off a bit first, as not many people use it, but its purpose is to describe the contact address of the author of the document (or part of the document), so your usage is absolutely correct.
For bonus points you can consider implementing the hCard standard for formatting the email: http://microformats.org/wiki/hcard
Basically, aside from the use of the paragraph element to wrap the entire article, this is absolutely fine! You've shown a lot of thoughts behind your decisions, which is quite rare these days.
Your markup is fine.
(Note that for the first article you used h2 and for the second one h1. While both ways are possible, why not stick to one variant?)
is it better use a new section if the text is long and detailed?
Don’t include the whole text in a section! But when you use sub-headings in the article, you are "encouraged" to use explicit section elements to group the heading and its content.
Let's say you had something like a TV show listing, where you had a show title, and a show description. You want the listing to be accessible for people with disabilities as well.
Would it make more sense to use a definition list:
<dl>
<dt>...title...</dt><dd>...description...</dd>
...
</dl>
Or an unordered list with headings?
<ul>
<li><h3>...title...</h3><p>...description...</p></li>
...
</ul>
Which makes more semantic sense and will respond better to screen readers? (knowing that they can both be styled the same way)
If you are using HTML 4.01, you shouldn't use dl as it's defined as "definition list" (and your example does not consist of terms and their definitions). If you are using HTML5, the use of dl is fine, because the definition of dl changed.
Using headings inside of li might be a bit problematic regarding the document outline. The scope of a heading would include the start of the next li: <li><!--scope start--><h3>title</h3><p>description</p></li><li><!--scope end--><h3>…. By using section (resp. article), this could be avoided.
So, for HTML5, I think the following ways are possible:
dl
<dl>
<dt>Title1</dt>
<dd>Description1</dd>
<dt>Title2</dt>
<dd>Description2</dd>
</dl>
That would be my favorite, if you only want to provide title and description for each show (if not, see the last example).
ul + section
<ul>
<li>
<section>
<h1>Title1</h1>
<p>Description1</p>
</section>
</li>
<li>
<section>
<h1>Title2</h1>
<p>Description2</p>
</section>
</li>
</ul>
I don't like that very much. The list isn't adding much here, so why not omit it? (see next example)
headings only
<section>
<h1>Title1</h1>
<p>Description1</p>
</section>
<section>
<h1>Title2</h1>
<p>Description2</p>
</section>
Instead of section the article element might be possible, too.
You could also omit section (or article) and use headings only (in the case of section it wouldn't change the meaning); in that case you'd need to apply the correct heading level.
headings + dl
If you want to provide additional metadata (maybe in the future), I'd go with the following markup:
<section>
<h1>Title1</h1>
<dl>
<dt>Description</dt>
<dd>…</dd>
<dt>Rating</dt>
<dd>…</dd>
<dt>Time</dt>
<dd>…</dd>
<dt>Length</dt>
<dd>…</dd>
</dl>
</section>
I prefer the former. First, it seems to make more sense to me just based on the content.
But that's me. I think the markup should reflect the document structure, and since (as you say) the CSS can style it either way, why not make the markup reflect the content? A list containing items that contain a header for a title, followed by a description seems a bit of overkill to me.
But, hey. You know what they say about opinions.
In this case using a Definition list makes much more sense. Aside from this though, is it really necessary to use a list at all? It may make more sense just to use your Heading tags appropriately on the page wit a tag (x= 2-6) and have everything apply under the header of that. TV Shows in specific it may not make sense to use a "List" to display them with definitions or anything else. Again, they can be styled however, so i'm only worried about sematics with this.
Hope this helps
Zach
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.
Making a search result list (like in Google) is not very hard, if you just need something that works. Now, however, I want to do it with perfection, using the benefits of HTML5 semantics. The goal is to define the defacto way of marking up a search result list that potentially could be used by any future search engine.
For each hit, I want to
order them by increasing number
display a clickable title
show a short summary
display additional data like categories, publishing date and file size
My first idea is something like this:
<ol>
<li>
<article>
<header>
<h1>
<a href="url-to-the-page.html">
The Title of the Page
</a>
</h1>
</header>
<p>A short summary of the page</p>
<footer>
<dl>
<dt>Categories</dt>
<dd>
<nav>
<ul>
<li>First category</li>
<li>Second category</li>
</ul>
</nav>
</dd>
<dt>File size</dt>
<dd>2 kB</dd>
<dt>Published</dt>
<dd>
<time datetime="2010-07-15T13:15:05-02:00" pubdate>Today</time>
</dd>
</dl>
</footer>
</article>
</li>
<li>
...
</li>
...
</ol>
I am not really happy about the <article/> within the <li/>. First, the search result hit is not an article by itself, but just a very short summary of one. Second, I am not even sure you are allowed to put an article within a list.
Maybe the <details/> and <summary/> tags are more suitable than <article/>, but I don't know if I can add a <footer/> inside that?
All suggestions and opinions are welcome! I really want every single detail to be perfect.
1) I think you should stick with the article element, as
[t]he article element represents a
self-contained composition in a
document, page, application, or site
and that is intended to be
independently distributable or
reusable [source]
You merely have a list of separate documents, so I think this is fully appropriate. The same is true for the front page of a blog, containing several posts with titles and outlines, each in a separate article element. Besides, if you intend to quote a few sentences of the articles (instead of providing summaries), you could even use blockquote elements, like in the example of a forum post showing the original posts a user is replying to.
2) If you're wondering if it's allowed to include article elements inside a li element, just feed it to the validator. As you can see, it is permitted to do so. Moreover, as the Working Draft says:
Contexts in which this element may be
used:
Where flow content is expected.
3) I wouldn't use nav elements for those categories, as those links are not part of the main navigation of the page:
only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element. [source]
4) Do not use the details and/or summary elements, as those are used as part of interactive elements and are not intended for plain documents.
UPDATE: Regarding if it's a good idea to use an (un)ordered list to present search results:
The ul element represents a list of
items, where the order of the items is
not important — that is, where
changing the order would not
materially change the meaning of the
document. [source]
As a list of search results actually is a list, I think this is the appropriate element to use; however, as it seems to me that the order is important (I expect the best matching result to be on top of the list), I think that you should use an ordered list (ol) instead:
The ol element represents a list of
items, where the items have been
intentionally ordered, such that
changing the order would change the
meaning of the document. [source]
Using CSS you can simply hide the numbers.
EDIT: Whoops, I just realized you already use an ol (due to my fatique, I thought you used an ul). I'll leave my ‘update’ as is; after all, it might be useful to someone.
I'd markup it up this way (without using any RDFa/microdata vocabularies or microformats; so only using what the plain HTML5 spec gives):
<ol start="1">
<li id="1">
<article>
<h1>The Title of the Page</h1>
<p>A short summary of the page</p>
<footer>
<dl>
<dt>Categories</dt>
<dd>First category</dd>
<dd>Second category</dd>
<dt>File size</dt>
<dd>2 <abbr title="kilobyte">kB</code></dd>
<dt>Published</dt>
<dd><time datetime="2010-07-15T13:15:05-02:00">Today</time></dd>
</dl>
</footer>
</article>
</li>
<li id="2">
<article>
…
</article>
</li>
</ol>
start attribute for ol
If the search engine uses pagination, you should give the start attribute to the ol, so that each li reflects the correct ranking position.
id for each li
Each li should get id atribute, so that you can link to it. The value should be the rank/position.
One could think that the id should be given to the article instead, but I think this would be wrong: the rank/order could change by time. You are not referring to a specific result but to a result position.
Remove the header
It is not needed if it contains only the heading (h1).
Add rel="external" to the link
The link to each search result is an external link (leading to a different website), so it should get the rel value external.
Remove nav
The category links are not navigation in scope of the article. So remove the nav.
Each category in a dd
You used:
<dt>Categories</dt>
<dd>
<ul>
<li>First category</li>
<li>Second category</li>
</ul>
</dd>
Instead, you should list each category in its own dd and remove the ul:
<dt>Categories</dt>
<dd>First category</dd>
<dd>Second category</dd>
abbr for file size
The unit in "2 kB" should be marked-up with abbr:
2 <abbr title="kilobyte">kB</code>
Remove pubdate attribute
It's not in the spec anymore.
Other things that could be done
give hreflang attribute to the link if the linked result has a different language than the search engine
give lang attribute to the link description and the summary if it is in a different language than the search engine
summary: use blockquote (with cite attribute) instead of p, if the search engine does not create a summary itself but uses the meta-description or a snippet from the page.
title/link description: use q (with cite attribute) if the link description is exactly the title from the linked webpage
Aiming for a 'perfect' HTML5 template is futile because the spec itself is far from perfect, with most of the prescribed use-cases for the new 'semantic' elements obscure at best. As long as your document is structured in a logical fashion, you won't have any problems with search engines (most of the new tags don't have the slightest impact). Indeed, following the HTML5 spec to the letter - for example, using <h1> tags within each new sectioning element - may make your site less accessible (to screen readers, for example). Don't strive for 'perfect' or close-to, because it doesn't exist - HTML5 is not thought-out well enough for that. Just concentrate on keeping your markup logical and uncluttered.
I found a good resource for HTML5 is HTML5Doctor. Check the article archive for practical implementations of the new tags. Not a complete reference mind you, but nice enough to ease into it :)
As shown by the Footer element page, sections can contain footers :)