CODEWITHSUNDEEP
htmlsemantics
Anthony
Anthony

Reputation: 2416

Semantically correct HTML

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>

Upvotes: 0

Views: 481

Answers (2)

pandita
pandita

Reputation: 4989

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

Upvotes: 1

user2493235
user2493235

Reputation:

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

Upvotes: 1

Related Questions