Semantically correct HTML

Question

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>

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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

I was reading this article that seems to contradict (I think) those posts: http://alistapart.com/article/previewofhtml5 what are your thoughts? also this article: http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article — Anthony, Sep 10 '13 at 21:37
Hmm it does seem to contradict the posts. I had a brief look [here](http://www.w3schools.com/tags/tag_section.asp) and [here](http://www.w3schools.com/tags/tag_article.asp) which to me seems to suggest high level use for `section` (e.g. parts of the layout: headers, footers, chapters) and more low level use for `article` (e.g. comments, news story). — pandita, Sep 10 '13 at 21:41
@Anthony I updated my answer with some reference to the official html specs. — pandita, Sep 10 '13 at 21:57
After more thinking I answered a related question [here](http://stackoverflow.com/a/18730264/2488942) perhaps with greater clarity — pandita, Sep 10 '13 at 23:21
Thanks for helping me reason this out! Think im on the right track — Anthony, Sep 11 '13 at 02:03
@Anthony Sorry but I have to correct myself... please see correction above and sorry for the confusion. On the plus side. I think this is now settled ;) — pandita, Sep 11 '13 at 04:14

score 1 · Answer 2 · answered Sep 10 '13 at 21:41

The following 3 articles provide an excellent overview of the use of HTML5 semantic blocks:

Semantically correct HTML

2 Answers2