I'm making a view which will show a list of blog posts, with small excerpts of each. Is the correct semantic element to use?
I would use it like this for each adding a header and a footer too
<article>
<header>
<h1>Apple</h1>
<p>Published: <time>2009-10-09</time></p>
</header>
<p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
<footer>
<p><small>Creative Commons Attribution-ShareAlike License</small></p>
</footer>
</article>
For small excerpts, both article and section are OK.
Quoted from html spec:
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.
Note that:
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
The key point here is that the content has to make sense independent of its context, i.e. when all the surrounding content is stripped away.
Soruce
An example is:
<article>
<h1>Header</h1>
<p>Text</p>
</article>
So each blog-post preview can be an article element.
Related
If we have a list of blog posts, like in this case: http://www.gamempire.it/news
I think that every post could be an <article>, but the title of the page ("Novità"), that could be an <h1>, is the semantic title of what? A section?
So, i don't know if it's better to do in this way:
<section>
<h1>Novità</h1>
<article>...</article>
<article>...</article>
<article>...</article>
</section>
or:
<article>
<h1>Novità</h1>
<article>...</article>
<article>...</article>
<article>...</article>
</article>
As far as specs go <article> is a sectioning content and as such, accepts any flow, sectioning and palpable content (except <main>), including other <article>s.
As far as semantic goes, it depends: articles are independent, self-contained compositions, that can contain other articles as long as those are also independent, self-contained compositions that at the same time are part of the main composition.
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.
Your first method is definitely better. You should put your articles in a section.
Check out these two posts on htlm5doctor:
Section
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
Article
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.
Actually you can nested <article> as child of <article>
See the reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
The correct way is:
<section>
<article>...</article>
<article>...</article>
<article>...</article>
</section>
Because <section> means a piece of your web that can contains the content of your site, and <article> is a piece of content.
Im writing a markup for :
Would it be correct to present every tweet like an article or its too short and I should use ul or something else?
<section>
<h1>Recent tweets</h1>
<article>
<p>I'm looking...</p>
<time>3 day ago</time>
</article>
<article>
<p>#mediatemple will ...</p>
<time>6 days ago</time>
</article>
<article>
<p>Corpora Business</p>
<time>10 days ago</time>
</article>
</section>
It really doesn't matter. The WHATWG is still pretty vague about it. My issue is with the h1. Is this the only thing on the page? Is the page title also 'Recent Tweets'? If so you're fine. But I get the sense this is like a plug-in on a larger page. If so, consider using a lower level tag, for semantic/accessibility reasons.
Yes, each microblogging entry should be an article, as it matches the definition:
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.
You could list them in a ul/ (or, depending on the context, ol) too, if needed/appropriate:
<section>
<h1>Recent tweets</h1>
<ul>
<li><article>…</article></li>
<li><article>…</article></li>
<li><article>…</article></li>
</ul>
</section>
If you'd want to include metadata (like the author name), the footer element should be used. That's where your time element should be placed, too. If the author name would be linked to a profile where contacting the author is possible, the address element should be used (as it is associated with the article and not the whole page, which is another reason to use the article element for micro-blogging entries).
<article>
<p>…</p>
<footer>
<time>…</time>
</footer>
</article>
I have a list of blog excerpts, is it OK to call each an article or should I use list and divs instead?
<article class="post-excerpt body-font">
<header>
<h2 class="entry-title">At Day's End</h2>
<p><time datetime="2010-03-04T16:31:24+02:00">March 2010</time> ⋅ This post is about Poetry, Creativity and Myself</p>
</header>
<div class="content">
<p>And at day's end,<br />
Laying on my back.</p>
</div>
<footer>
<p>Read more ⇒</p>
</footer>
</article>
Yes, I think article(w3 spec) is appropriate in this case.
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.
Most of the times blog excerpts are not that clear as you presented it (you posted the perfect scenario), so I wouldn't take as a rule to use article for any blog excerpts.
Echoing what steveax says, that is an ideal example of where article should be used, probably one of the clearest!
Is the article tag of HTML5 only to use in blogs? Is it only for blog articles? Is it not to use for the content section of website, which is not a blog?
Generally I use
<div id="content">
<h2> title </h2>
<p> content </p>
</div>
Should I replace div with article
<article id="content">
<h2> title </h2>
<p> content </p>
</article>
or
<div id="content">
<article>
<h2> title </h2>
<p> content </p>
</article>
</div>
From the spec:
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.
So I guess it is quite dependant on what #content contains. If it would only contain that specific article (or stuff related to that article, like comments nested as further articles), you do not need the div.
My favourite resource about this - HTML5Doctor
There's some nice detail about the article element at html5doctor.
In a nutshell, <article> is not limited to blogs and your example
<article id="content">
<h2> title </h2>
<p> content </p>
</article>
would seem to be an ideal use of <article>.
One definition that I've read for the new tag, which I find to be the most succinct, is the following:
The article tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
Eg:
- forum post
- newspaper article
- blog entry
- user comment
If your content that you wish to wrap in tags is self-contained and in a syndication context, then yes. Then again, if the content is just the main section of a web page on a site, then I'd say, don't worry about it.
In HTML 5 what's the tag that is supposed to enclose a forum post, being as semantically correct as possible?
<div>
<article>
<section>
Other?
According to the Working Draft an article
The article element represents 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.
I suppose <article> is best suited, see http://www.alistapart.com/articles/previewofhtml5 for an excellent reference document.
I've always used <blockquote> for forum posts and blog comments. But <article> seems to be a good option too.
AS other mention above, <article>. But within that article you may want to split it up into sections (in <section>) as long as each section has a natural heading, otherwise don't.
e.g.
<article>
<section>
<header><h1>Introduction</h1></header>
section content goes here
</section>
<section>
<header><h1>Heading 1</h1></header>
section content goes here
</section>
<section>
<header><h1>Conclusion</h1></header>
section content goes here
</section>
</article>