Is the below code semantically correct? I think my biggest confusion is around the need of sections in articles
Article: 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
Section:The HTML Section Element () represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.
In my case im thinking the article sections are self contained chunks of info and the section is generic info about that header. Does that make sense?
<!DOCTYPE html>
<html>
<head>
<Title>Anthonys Personal Profile</Title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<article>
<header>Personal Profil</header>
<section>
<p>Role</p>
<p>Education</p>
<p>Major</p>
<p>Residence</p>
</section>
</article>
<article>
<header>Key Skills</header>
<section>
<p>Development</p>
<p>PM</p>
<p>Performance</p>
<p>Agile</p>
</section>
</article>
CORRECTION:
I stand corrected. The specs I linked to below don't include an example, however there is an example included here:
<article>
<header>
<h1>Apples</h1>
<p>Tasty, delicious fruit!</p>
</header>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
...
</article>
clearly showing that my original interpretation wasn't correct. HT #cilerler.
To summarise, section can be used to subdivide e.g. parts following h1 including h1.
There is flexibility though according to this article. A nice article which inludes do's and don'ts.
Following is what made sense to me this morning:
ORIGINAL:
You need to close the <section> tags as well, i.e.:
<section>
.....
</section>
There are a few questions about this on SO:
This one is very close to you question
How to correctly use "section" tag in HTML5?
This one explains the scenarios where the tag should be used
In what scenarios do you use <section> tag of html 5, in place of <div>?
Quote from there:
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
So my understanding is that section marks high level parts, whereas e.g. the individual news items mentioned in the quote could be tagged as articles.
EDIT:
Ok from the official specs:
http://dev.w3.org/html5/html-author/#the-section-element
The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header and possibly a footer.
http://dev.w3.org/html5/html-author/#the-article-element
The article element represents an independent section of a document, page, or site. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of content.
While this is far from totally clear to me at least, I would say that the intent is that section is higher level than article. This statement of mine is also partially based on how the official specs are structured with section sitting directly under body followed only later by article:
4.3.4 Sections
4.3.4.1 The body element
4.3.4.2 The section element
4.3.4.3 The nav element
4.3.4.4 The article element
4.3.4.5 The aside element
4.3.4.6 The h1, h2, h3, h4, h5, and h6 elements
4.3.4.7 The header element
4.3.4.8 The footer element
4.3.4.9 The address element
4.3.4.10 Headings and Sections
The following 3 articles provide an excellent overview of the use of HTML5 semantic blocks:
http://html5doctor.com/avoiding-common-html5-mistakes/
http://html5doctor.com/the-article-element/
http://html5doctor.com/the-section-element/
Related
My goal is to use the correct H* tag (H1 to H6) in my html5 code.
I read here I shouldn't use <section> at all: "Why you should choose article over section : Browsers’ visual display of headings nested inside elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies"
but I feel that isn't true because of the answers to this popular question:
that says "sections in an article are like chapters in a book, articles in a section are like poems in a volume" and I want to use sections for their intended purpose.
The problem is this mdn page says "Important: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the outline algorithm should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure."
The guy from the first link I posted does make a good point about halfway down that page where he says "browsers display different sizes of font depending on how deeply the is nested in <section>s”.
So am I correct in saying I have to correctly match H* tags to depth/nesting to achieve a good outline AND visual styling or is there a different way. eg this would be incorrect:
<body>
<h1> something </h1>
<section>
<h1> section heading for outline </h1>
<article>
<h1>my first news article</h1>
<p>stuff</p>
</article>
</section>
</body>
because screen readers can't properly process <section> for outlining.
and because browsers display different fonts according to level of nesting.
so then would this would be correct?
<body>
<h1> something </h1>
<section>
<h2> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
note: This is my first question I'm posting so please go easy on me if I've made a faux-pas, I'm new here :)
The document outline algorithm based on <h1> has been removed from the spec and actually never worked. In terms of heading levels, your last code example is the correct one.
Why the HTML Outlining Algorithm was removed from the spec – the truth will shock you!
There Is No Document Outline Algorithm
So you should not use it, and your quote holds true.
Authors are advised to use heading rank (h1-h6) to convey document structure.
Correctly using <section>
As to the question of using <section> vs <article>.
You shouldn’t avoid the latter due to styling issues. You already did your research and should stick to your outcome. You’d need to apply some styling yourself, though.
I’d also like to add the ARIA perspective on a page summary:
<article> has role article
An article is not a navigational landmark
and
<section> has role region, which is …
[…] sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.
To do so, it is also noted
Authors MUST give each element with role region a brief label
So, let’s put it together
<body>
<h1> something </h1>
<section aria-labelledby="s1-heading">
<h2 id="s1-heading"> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
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.
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.
I know there are tons of questions about this topic but I can't find an authoritative source for the answer.
This is the official definition and the wiki page, and there there is more documentation, but there they don't explain the correct usage if not in a very simple examples or in different ways.
What I've "understood" so far:
<section> defines a part(section) of the page, like blogrolls, headlines news, blog entries list, comments list, and everything which can be with a common topic.
<article> defines a content which has sense estranged from the rest of the page (?) and which has a single topic (blog entry, comment, article, etc).
But, inside an <article>, we can split parts of it in sections using <section>, and in this case it has the function of container to mark chapters of a bigger text.
The doubt
If these sentences are correct (or partially correct) that means that <section> has two completly different usage cases.
We could have a page written in this way:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Fruits</title>
</head>
<body>
<h1>Fruits war blog</h1>
<section id="headlineNews"> <!-- USED AS CONTAINER -->
<h1>What's new about fruits?</h1>
<article><h1>Apples are the best</h1>Apples are better than bananas</article>
<article><h1>Apple's cakes</h1>With apples you can prepare a cake</article>
</section>
<section id="blogEntries"> <!-- USED AS CONTAINER -->
<h1>Articles about fruits</h1>
<article>
<h1>Apples vs Bananas</h1>
<section> <!-- USED AS CHAPTER -->
<h2>Introduction:</h2>
Bananas have always leaded the world but...
</section>
<section> <!-- USED AS CHAPTER -->
<h2>The question:</h2>
Who is the best? We don't know so much about apples...
</section>
</article>
</section>
</body>
</html>
And this is how looks the Outline:
1. Fruits war blog
1. What's new about fruits?
1. Apples are the best
2. Apple's cakes
2. Articles about fruits
1. Apples vs Bananas
1. Introduction:
2. The question:
So the <section> is thought with two completly different and not related semantic meanings?
Is it correct use:
<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
<article>
<section></section> <!-- USED AS CHAPTER -->
</article>
</section>
in this neasted way?
I've found that is possible to use in the inversed way:
<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
<section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
<article></article> <!-- COMMENT -->
</section>
</article>
But I can't find an answer to the way I've written below.
I guess read the discussion where the W3C group has wrote the basis of the <section> tag could be useful but I can't find it.
N.B. I'm looking for replies documented with authorative sources
http://www.w3.org/wiki/HTML/Elements/section is not the official definition of section. section is defined in the HTML5 specification, which currently is a Candidate Recommendation (which is a snapshot of the Editor’s Draft).
In the CR, section is defined as:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
section is a sectioning content element (together with article, aside and nav). Those sectioning elements and the headings (h1-h6) create an outline.
The following three examples are semantically equivalent (same meaning, same outline):
<!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…</p>
<h2>Waking up</h2>
<p>…</p>
<h2>The big moment!</h2>
<p>…</p>
<h2>Going to bed</h2>
<p>…</p>
<!-- example 1: using section elements with corresponding heading levels -->
<section>
<h1>My first day</h1>
<p>…</p>
<section>
<h2>Waking up</h2>
<p>…</p>
</section>
<section>
<h2>The big moment!</h2>
<p>…</p>
</section>
<section>
<h2>Going to bed</h2>
<p>…</p>
</section>
</section>
<!-- example 1: using section elements with h1 everywhere -->
<section>
<h1>My first day</h1>
<p>…</p>
<section>
<h1>Waking up</h1>
<p>…</p>
</section>
<section>
<h1>The big moment!</h1>
<p>…</p>
</section>
<section>
<h1>Going to bed</h1>
<p>…</p>
</section>
</section>
So you can use section whenever (*) you use h1-h6. And you use section when you need a separate entry in the outline but can’t (or don’t want to) use a heading.
Also note that header and footer always belong to its nearest ancestor sectioning content (or sectioning root, like body, if there is no sectioning element) element. In other words: each section/article/aside/nav element can have its own header/footer.
article, aside and nav are, so to say, more specific variants of the section element.
two completly different usage cases
These two use-cases are not that different at all. In the "container" case, you could say that section represents a chapter of the document, while in the "chapter" case section represents a chapter of the article/content (which, ouf course, is part of the document).
In the same way, some headings are used to title web page parts (like "Navigation", "User menu", "Comments", etc.), and some headings are used to title content ("My first day", "My favorite books", etc.).
<article> and <section> are both sectioning content. You can nest one sectioning element inside another to slice up the outer element into sections.
HTML Living Standard, 4.4.11:
...
Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.
...
You can consider a <section> as a generic sectioning element. It's like a <div> that defines a section within its closest sectioning parent (or the nearest sectioning root, which may be the <body>).
An <article> is also a section, but it does have some semantics. Namely, it represents content that is self-contained (that is, it could possibly be its own page and it'd still make sense).
OK so here is what I've gathered from authorative sources.
MDN:
The HTML Section Element () represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.
Usage notes :
If it makes sense to separately syndicate the content of a element, use an element instead.
Do not use the element as a generic container; this is what is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.
Shay Howe's guide:
A section is more likely to get confused with a div than an article. As a block level element, section is defined to represent a generic document or application section.
The best way to determine when to use a section versus a div is to look at the actual content at hand. If the block of content could exist as a record within a database and isn’t explicitly needed as a CSS styling hook then the section element is most applicable. Sections should be used to break a page up, providing a natural hierarchy, and most commonly will have a proper heading.
dev.opera.com
Basically, the article element is for standalone pieces of content that would make sense outside the context of the current page, and could be syndicated nicely. Such pieces of content include blog posts, a video and it's transcript, a news story, or a single part of a serial story.
The section element, on the other hand is for breaking the content of a page into different functions or subjects areas, or breaking an article or story up into different sections.
Here's the official w3c take on section:
http://www.w3.org/wiki/HTML/Elements/section
Quote: "The [section] element represents a generic section of a document or application."
I guess, in theory if you have an article within an article then your nested selections example might work. But, why would you have an article within an article ? Makes little semantic sense.
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.