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!
Related
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.
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 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>
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>