CODEWITHSUNDEEP
htmlsemantic-markup
user1049430
user1049430

Reputation:

Best practices on usage of section/article semantic elements in HTML5

It's pretty much the first time I really use HTML5, I've done some research on article/section but I find the answers a little confusing.

An example is this statement:

section – Used for grouping together thematically-related content. Sounds like a div element, but it’s not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself: “Is all of the content related?”

But I'm still not 100% sure if I'm using it correctly.

I have made an example website, is this the correct use of section/article?

I basically use section as a sort of "wrapper" around every element on the frontpage. The article I use for each element inside the section.

Is this the best practice?

Upvotes: 2

Views: 2360

Answers (3)

Ethan Ettleman
Ethan Ettleman

Reputation: 77

The biggest difference between the article and section is how they define the structural layout and semantics of your web page. The article element is used for content that is off topic and can stand on its own without any accompanying content around it(i.e. a blog post, news article, etc.). The section element combines related content and typically has a header and paragraph elements contained within to describe the section

In your site, I would only use the article tag for the testimonials section. You can nest as follows:

<section class="testimonials">
    <h3>Testimonials</h3>
        <p>...</p>
    <article class="individual-response">
        <h4>Tim Cook</h4>
        <blockquote cite="...">text here</blockquote>
    </article>
</section>
...

It may seem confusing but section elements can have article elements nested within them and vice versa. Just remember the significance that differentiates them. Although the content may seem related, someone said it independent of your site content (you can also use the blockquote element within the article section that defines a direct quote and adds certain default styling and semantic value).

As for the section tag, I would use it to define your "About Us" section and where you list all your available services with descriptions. The section tag is best used here because all content is directly tied together relying on all content to make sense and falls under a main heading.

For your featured services, personally I would use div elements to separate the individual services/descriptions because if you think about the semantics; each individual service is like its own section because each covers different content. It wouldn't fall under the article tag because without the context of the rest of the section, it wouldn't make sense or have the ability to stand alone.

It's a long explanation, but I hope I covered it in enough detail for you to understand. Let me know if it all makes sense.

Upvotes: 1

Alex M
Alex M

Reputation: 2836

Section

The <section> element defines a section in a document.

According to W3C's HTML5 documentation:

A section is a thematic grouping of content, typically with a heading.

A Web site's home page could be split into sections for introduction, content, and contact information.

Article

The <article> element specifies independent, self-contained content.

According to W3C's HTML5 documentation:

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.

It could have a heading as well.

Examples of where an element can be used:

  • Forum post
  • Blog entry
  • Newspaper or magazine article

Nesting

As it's said above, in the HTML5 standard, the <article> element defines a complete, self-contained block of content.

The <section> element is defined as a block of related elements.

Is it possible to use these definitions to decide how to nest elements? No, it isn't!

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.

Example:

Newspaper: The sports articles in the sports section have a technical section in each article.

Why should we use Semantic HTML5 Elements?

  1. This makes it impossible for search engines to identify the correct web page content.
  2. This adds an HTML structure semantic meaning and allows data to be shared and reused across applications, enterprises, and communities.
  3. This makes Web content and Web applications more accessible to people with disabilities (WAI-ARIA).

Upvotes: 2

Shivang Kapoor
Shivang Kapoor

Reputation: 31

An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

  • If all you want to do is have something look different use a div tag (a generic container) and CSS styles.
  • If you want a particular part of a page separated from the rest of the page due to the information in it - its "content", use section elements (a generic section).

The "article" element is a specialised kind of "section"; it has a more specific semantic meaning than "section" in that it is an independent, self-contained block of related content. We could use "section", but using "article" gives more semantic meaning to the content.

By contrast "section" is only a block of related content, and "div" is only a block of content. To decide which of these three elements is appropriate, choose the first suitable option:

  1. Would the content would make sense on its own in a feed reader? If so use article.
  2. Is the content related? If so use section
  3. Finally if there’s no semantic relationship use div

Upvotes: 3

Related Questions