I've been reading up on the new HTML5 elements and their appropriate usage, and currently have some markup like this:
<article>
<h1>Crazy Awesome Programming Projects</h1>
<article>
<h2>Mathematics</h2>
<section>
<h3>Binary to Decimal converter</h3>
<p> info here </p>
</section>
<section>
<h3>Scientific Calculator</h3>
<p> info here </p>
</section>
</article>
<article>
<h2>String Manipulation</h2>
<section>
<h3>RSS Feed Generator</h3>
<p> info here </p>
</section>
<section>
<h3>Palindrome Detector</h3>
<p> info here </p>
</section>
</article>
</article>
Is it semantically correct to nest <article> tags in such a manner?
There are cases where nesting article elements is correct; the most prominent case being comments to a blog post.
But I don't think it's the case for your example (it's hard to decide this without seeing the full content, though).
I'd do it exactly the other way around:
<section> <!-- probably not article -->
<h1>Crazy Awesome Programming Projects</h1>
<section> <!-- not article -->
<h2>Mathematics</h2>
<article> <!-- not section -->
<h3>Binary to Decimal converter</h3>
<p> info here </p>
</article>
<article> <!-- not section -->
<h3>Scientific Calculator</h3>
<p> info here </p>
</article>
</section>
<section> <!-- not article -->
<h2>String Manipulation</h2>
<article> <!-- not section -->
<h3>RSS Feed Generator</h3>
<p> info here </p>
</article>
<article> <!-- not section -->
<h3>Palindrome Detector</h3>
<p> info here </p>
</article>
</section>
</section>
"Binary to Decimal converter", "Scientific Calculator", "RSS Feed Generator" and "Palindrome Detector" are the articles here. They are "a self-contained composition" and "in principle, independently distributable or reusable, e.g. in syndication".
"Mathematics" and "String Manipulation" are categories.
In structure it's similar to a web shop. "Palindrome Detector" would be a buyable product, while "String Manipulation" would be the product category. I guess you wouldn't consider a product category as "self-contained".
For the container ("Crazy Awesome Programming Projects") I'd use an article only if there would be more content giving context. Otherwise it's just a top-category, containing sub-categories, which contain the "real" content.
Good questions to ask whether article is appropriate:
could the content have an own publication date?
could the content have a different author than the page?
could the content be a separate entry in a feed?
would the content still make sense if it was printed out without any other content/context?
If (some of) these questions are answered with 'yes', article could be correct.
Yes, according to the HTML5 spec. This is what it says about nesting article elements:
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.
Related
Forgive me if I misspelled it and please correct it.
I do not know exactly how to use these two elements (Article | Section)
Now I want to launch a site that has completely standard HTML code,
Now, how do you think an article from my site should be structured? And where can I put the site header better?
I am stuck between these two options.
<!-- 1 -->
<section>
<header>
<h1>title of page</h1>
</header>
<article>
<p>some text</p>
</article>
</section>
<!-- 2 -->
<section>
<article>
<header>
<h1>title of page</h1>
</header>
</article>
<p>some text</p>
</section>
If both are incorrect, what do you suggest?
My English is very poor. So I could not use any more questions. But I understand the coding. Please explain to me by writing the code and simple sentences, and do not say that there is an answer to your question.
Read more about the HTML element article of Mozilla:
The HTML element represents a self-contained composition in
a document, page, application, or site, which is intended to be
independently distributable or reusable (e.g., in syndication)... each
post would be contained in an element, possibly with one or
more s within.
Unlike the article element, the section element:
The HTML element represents a generic standalone section of
a document, which doesn't have a more specific semantic element to
represent it.
Thus, the article element can contain section elements. But the section element cannot contain any other semantic elements.
Accordingly, your example can be presented like this:
<header>
<h1>The article News from Valinor of Gandalf</h1>
</header>
<article>
<h2>News from Valinor</h2>
<p>A short introduction to the content of the article.</p>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
...
</article>
<footer>
<h2>Publisher and copyright holder</h2>
<p>Publisher and © 2021 Gandalf</p>
</footer>
As part of a project mentioned in connection with another question I need to markup nested articles in semantic HTML5. There's a magazine article containing a number of short texts by different authors plus some editor comments. In the present HTML4 version it looks something like this:
<div id="article">
<h1>Main heading - a collection of texts</h1>
<p id="intro">
A general introduction to the whole collection by the editor.
</p>
<p class="preamble">
A few words from the editor about the first text.
</p>
<h2>First text heading</h2>
<p>First text. Lorem ipsum ...</p>
<p class="author">
Name of author of first text.
</p>
<div>*</div>
<p class="preamble">
A few words from the editor about the second text.
</p>
<h2>Second text heading</h2>
<p>Second text. Dolorem ipsum ...</p>
<p class="author">
Name of author of second text.
</p>
<p id="postscript">
Some final words about the whole collection by the editor.
</p>
<div>
I have been considering something like this in HTML5, but there are some elements where I simply don't know what's best:
<article>
<header>
<h1>Main heading</h1>
<ELEMENT>
General introduction
</ELEMENT>
</header>
<article>
<header>
<ELEMENT>
Preamble
</ELEMENT>
<h2>
Article heading
</h2>
</header>
<p>
Article text
</p>
<ELEMENT>
Name of author
</ELEMENT>
</article>
<div>*</div>
<article>
Second article ...
</article>
<ELEMENT>
Postscript by editor
</ELEMENT>
</article>
Should I use a p element with class names for the various introductions and postscript, or maybe aside elements? Something else? And the same question regarding the names of authors. The address element doesn't seem quite right there. A footer perhaps with some other element (?) in it?
Edit: Occasionally there are some images as well and the photographer is mentioned in small print at the end of the article ("Photo: John Doe."). Element x inside a footer?
I think the first question should be where to put the editor comment for an article. I can think of three ways:
(a) editor comment in the header of an article
<article class="author-text">
<header class="editor-comment"></header>
</article>
(b) editor comment in an article that is nested in an article
<article class="author-text">
<article class="editor-comment"></article>
</article>
(c) editor comment in a section that has the article as child
<section class="editor-comment">
<article class="author-text"></article>
</section>
You are using (a) in your question. I don’t think it’s the best choice, mainly because this article would contain content from different authors (that did not work together), so the concept of "nearest article element ancestor" for denoting authorship wouldn’t work. It’s used, for example, by the author link type and the address element.
(b) and (c) don’t have this problem. In (b), each editor could have their own authorship info, in (c) the authorship info for the editor would be taken from the parent article (which includes the whole collection of articles), so the editor would have to be same everytime.
The definition of article suggests that (b) is appropriate:
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article.
It would make sense to include this editor comment article in a header.
The authorship information could be placed in a footer. Only if this information contains contact information for the author, use an address element in addition (and only for these contact information parts).
So a single short text could look like this:
<article class="author-text">
<h1>First text heading</h1>
<header>
<article>
<p>Editor comment</p>
</article>
</header>
<p>First paragraph of the text …</p>
<footer>
<!-- text author information -->
<!-- use 'address' here if appropriate -->
</footer>
</article>
The whole collection could be structured like this:
<article class="text-collection">
<h1>Main heading</h1>
<p>General introduction</p>
<article class="author-text"></article>
<article class="author-text"></article>
<article class="author-text"></article>
<article class="author-text"></article>
<p>Postscript by editor</p>
</article>
I just confused how to use <article> and <section> tags in HTML5.
I referenced lot in Google and also in Stack Overflow website.
On that, I found HTML5 pages with <section> elements containing <article> elements, and <article> elements containing <sections> elements.
I also found pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.
What is the exact use of these tags?
It depends on your content.
For example, a list of recent blog posts could be a section containing several article (example 1), a complex blog post could be an article with several section (example 2), a blog post with comments could be an article with a section and several article (example 3).
How to decide when to use which? Easy:
If you need a sectioning content element, start with section.
Check if the content matches the definition of nav. If yes, go with nav, else:
Check if the content matches the definition of aside. If yes, go with aside, else:
Check if the content matches the definition of article. If yes, go with article, else:
Stay with section.
Example 1: A list of blog posts
<section>
<h2>Recent blog posts</h2>
<article>
<h3>Blog post 1</h3>
</article>
<article>
<h3>Blog post 2</h3>
</article>
</section>
Example 2: A complex blog post
<article>
<h2>Blog post 1</h2>
<section>
<h3>So, this is what happened</h3>
</section>
<section>
<h3>What the others said</h3>
</section>
</article>
Example 3: A blog post with comments
<article>
<h2>Blog post 2</h2>
<section>
<h3>Comments</h3>
<article>
<p>First!</p>
</article>
<article>
<p>First! <ins>Edit: Second :(</ins></p>
</article>
</section>
</article>
Despite reading pages upon pages about the <article> and <section> tags I really don't understand how to apply them to my site.
I have a product page with related products at the end of the page. First I thought about doing something like this:
<section>
<header><h1>Product title</h1><header>
<img src="image.jpg"/>
<p>Description</p>
<p>Price</p>
<p>Order</p>
</section>
<section>
<header><h1>Related products</h1></header>
<article>
<img src="image1.jpg"><br/>Product 1<br/>Price
</article>
<article>
<img src="image2.jpg"><br/>Product 2<br/>Price
</article>
<article>
<img src="image3.jpg"><br/>Product 3<br/>Price
</article>
</section>
But, then I read some other blogs and it occured to me that maybe I should replace the <section> tags with <article> tags.
Which is right and why? Thanks.
<article> is for an independent piece of content that should make sense even if all of it's surrounding content is stripped away. <section> is more of a generic container that's quite similar to div tag and mostly used for content structuring. So the right code should be like this:
<article>
<header><h1>Product title</h1><header>
<img src="image.jpg"/>
<p>Description</p>
<p>Price</p>
<p>Order</p>
</article>
<article>
<header><h1>Related products</h1></header>
<section>
<img src="image1.jpg"><br/>Product 1<br/>Price
</section>
<section>
<img src="image2.jpg"><br/>Product 2<br/>Price
</section>
<section>
<img src="image3.jpg"><br/>Product 3<br/>Price
</section>
</article>
Also HTML 5 doctor's got a great Flowchart if you get confused picking the right HTML5 semantic element for your need. You can give it a try and see if it helps.
Section
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
Article
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.
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.
Straight from the W3 http://www.w3.org/html/wg/drafts/html/master/sections.html
In their example, they have an article nested within a section within an article. I would say you are definitely using it correctly.
<article>
<header></header>
<section>
<h1></h1>
<article></article>
<article></article>
</section>
</article>
In the HTML5 standard, the <"article"> element defines a complete, self-contained block of related elements.
The <"section"> element is defined as a block of related elements.
Can we use the definitions to decide how to nest elements? No, we cannot!
On the Internet, you will find HTML pages with <"section"> elements containing <"article"> elements, and <"article"> elements containing <"sections"> elements.
You will also find pages with <"section"> elements containing <section> elements, and <article> elements containing <"article"> elements.
Right From : http://www.w3schools.com/html/html5_semantic_elements.asp
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>