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>
Related
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.
Plot: When building a coupons website I realize that their can be content that is not unique to the page but should be used inside the <main><article> ..here..</article></main>.
Problem: Just because w3schools state :
The content inside the element should be unique to the
document. It should not contain any content that is repeated across
documents.
But i have content which will be inside article. Like every time for example A coupon can be used by entering its code but a deal can only be activated by going to landing page.
This will be repeated in every 'coupon' post I will publish.
So now what I tried to use was.
<main><article><main>Unique content</main>
<aside>A coupon can be used by entering its code but a deal can only be activated by going to landing page</aside></article></main>
But again :
Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendent of an <article>, <aside>,
<footer>, <header>, or <nav> element.
So what is the best way to format the UN-UNIQUE content inside <main> and/or <article>.
The main tag should be used to group those article and aside elements.
<main>
<article>
The unique document content.
</article>
<aside>
Related content for that document.
</aside>
</main>
tl;dr - use your common sense :)
This article on the actual w3 site has a good overview of what should go where. The overall structure is:
<body>
<header>
<!-- header content goes in here -->
</header>
<nav>
<!-- navigation menu goes in here -->
</nav>
<section id="sidebar1">
<!-- sidebar content goes in here -->
</section>
<main>
<!-- main page content goes in here -->
</main>
<aside>
<!-- aside content goes in here -->
</aside>
<footer>
<!-- footer content goes in here -->
</footer>
</body>
Option 1 - <section>s
They go on to say that <section>s, fairly obviously, can contain multiple <articles>, but that it is also possible to put <section>s inside an <article>, for example to define the introduction or summary:
<article>
<section id="introduction">
</section>
<section id="content">
</section>
<section id="summary">
</section>
</article>
So one option is to put a <section id="content"> and <section id="terms"> inside your article.
Option 2 - <footer>s
It does appear valid to use a <footer> for this sort of content. You said it is just for author, date, category, but w3 states in its spec for <footer>:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Your text is terms and conditions of a coupon, which could be considered as semantically similar to copyright data. It's a judgement call I think.
Option 3 - <div>s et al...
As a get-out, in the first link they do also say about <div>s:
You should use [a div] when there is no other more suitable element available for grouping an area of content...
So if it really isn't clear what to use, another possibility could be:
<article>
Blah blah
<div class="terms"></div>
</article>
Summary
To be honest, after all this, it seems there is no definitive answer and sites are unlikely to become super-strict in how they semantically parse documents for a while yet, because they know there are legions of people out there who will do it completely wrong. If you just stick a <p> with the same terms in at the end of each article, it probably won't make any real difference because the main text is unique.
I personally think as long as you use your common sense and choose something which doesn't completely go against the recommendations, you can't go too wrong.
According to the WHATWG (the informal group behind the HTML Living Document Standard), there is no problem in using a main element inside an article. The HTML Living Document says:
There is no restriction as to the number of main elements in a document. Indeed, there are many cases where it would make sense to have multiple main elements. For example, a page with multiple article elements might need to indicate the dominant contents of each such element.
Consequently, you can write
<body>
<header>My Page Header</header>
<main>
<article><h1>My First Article</h1>
<main>My first article's content...</main>
<aside>A sidebar</aside>
</article>
<article><h1>My Second Article</h1>
<main>My second article's content...</main>
<aside>Another sidebar</aside>
</article>
</main>
</body>
However, the W3C HTML 5.3 Draft disallows this and states that "There must not be more than one visible main element in a document."
This is an interesting case of a disagreement about a central element of HTML. Amazing! It seems that there is again a schism between W3C authors and the web/browser developer professionals behind the WHATWG. In such a case, I would go with the WHATWG.
I would go with something like this :
<main>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
</main>
Anyway I think having multiple <main> tags is worse than having non-unique content in an <article> tag.
You can also take into consideration Schema.org for proper mapping your content with additional attributes ( itemprop ... )
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.
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>
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>