Problem
I have a page with numerous “parts” such as videos, a newsfeed, and so on. I’m not sure how to represent these in HTML5 yet. Currently, I’m using HTML5 section>s, but upon closer investigation, it appears that the more appropriate tag would be article>. Is there anyone that could shed some light on this for me?
Because none of them are “documents” or “blog posts” in the traditional sense, it’s difficult to know which element to use.
Cheers
EDIT: I went with the article tag because it appears to be a container tag for unrelated parts, which my “sections” appear to be. The actual tagname article, on the other hand, appears to be somewhat misleading, and while they claim that HTML5 was built with a stronger focus on web apps, I found that many of the tags are more blog-centric / document centred.
Anyway, thank you for your responses, which appear to be somewhat subjective.
Asked by James Hay
Solution #1
The following is taken from the W3 wiki page on HTML5 structure:
Then it shows a picture that I’ve cleaned up:
It also explains how to utilize the article> tag (again, from the same W3 link):
<section id="main">
<article>
<!-- first blog post -->
</article>
<article>
<!-- second blog post -->
</article>
<article>
<!-- third blog post -->
</article>
</section>
<article>
<section id="introduction">
</section>
<section id="content">
</section>
<section id="summary">
</section>
</article>
Answered by Justin
Solution #2
It appears that each of the “sections” (as you refer to them) should be wrapped in article> tags, and each entry in the article should be wrapped in section> tags.
According to the HTML5 specification (Section):
And for Article
I believe what you refer to as “parts” in the OP fulfill the definition of article because they can be distributed or reused separately.
Update: Some minor text changes for the article in the latest HTML 5.1 editors draft (italic modifications):
In addition, there was discussion over the essay on the Public HTML email group in January and February of 2013.
Answered by steveax
Solution #3
For a text block that is completely unconnected to the other blocks on the page, I’d use article>. section>, on the other hand, is a separator used to divide a document into sections that are connected to one another.
Now, I don’t know what you have in your videos, newsfeed, or other media, but here’s an example (there’s no real right or wrong here; this is just how I use these tags):
<article>
<h1>People</h1>
<p>text about people</p>
<section>
<h1>fat people</h1>
<p>text about fat people</p>
</section>
<section>
<h1>skinny people</p>
<p>text about skinny people</p>
</section>
</article>
<article>
<h1>Cars</h1>
<p>text about cars</p>
<section>
<h1>Fast Cars</h1>
<p>text about fast cars</p>
</section>
</article>
As you can see, the sections are still related to one another as long as they’re contained within a block. Sections are not required to be contained within articles. They can be in the document’s body, although I prefer to use sections in the body when the document is a single article.
e.g.
<body>
<h1>Cars</h1>
<p>text about cars</p>
<section>
<h1>Fast Cars</h1>
<p>text about fast cars</p>
</section>
</body>
I hope this is clear.
Answered by mnsr
Solution #4
es. Pieces, in my opinion, include blog posts, documents, and news articles. Sections, on the other hand, refer to layout/ux elements such as the sidebar, header, and footer. However, as you pointed out, the specification for these pieces is not well defined, so this is just my personal interpretation.
The World Wide Web Consortium (W3C) defines an article element as a portion of material that can stand alone. A blog post can be a valuable and consumable piece of material on its own. A header, on the other hand, would not.
Here’s a fascinating piece on one man’s irrationality in attempting to distinguish between the two new elements. The article’s main idea, which I also believe is correct, is to try to use whatever element you think best depicts what it includes.
On SO, there’s a great answer to the same question.
Answered by Michael Jasper
Solution #5
When deciding between the many semantic HTML5 elements, the flowchart following can be useful:
Answered by Captain Sensible
Post is based on https://stackoverflow.com/questions/7549561/section-vs-article-html5