Article vs Section HTML5

October 23, 2014
Article vs Section tag in Sublime Text 3

Article vs Section tag in Sublime Text 3

I’m hoping to shed a little light with article vs section tags in the HTML5 syntax:

To start out, the <article> can be used when:
You have content that can be displayed independently and make sense.

Next, we can begin to think of the <section> tag being used when:
You have related content blocks or want to split a post into major categories.

 Article:

Usage may include blog posts, pages, or even excerpts such as the following:

Now usually you will have multiple post excerpts on one page, such as the home page of a blog. In this case, you will wrap the related posts with the <section> tag:

Section:

For example, if you have multiple posts all related to sports, this would be wrapped in a <section> tag. You can visit Global Edmonton website for an example. You will see on their page, they have a “Latest News” section, with multiple posts following below. Each posts is wrapped in an <article> tag because it is a piece of independent content.

A small example:

Section within Article:

Sometimes you will actually have <section> tags within an <article> tag. The best example I have heard of was this:

Consider the idea that you have a very large legal document on your website as one large post. The entire document would be wrapped in the <article> tag, however, there are usually major categories within this document.

We can split up a post’s major categories with the <section> tag, thus having <section> tags within the <article>.

Article vs Section Wrap Up:

Hopefully that helps clear up some of the confusion between the two new(ish) HTML5 tags. If you have any questions, feel free to comment below. Even with further clarity it can still sometimes be difficult to determine when to use an article vs section tags.

Leave a Reply

Your email address will not be published. Required fields are marked *