Subscribe To EM Squared
Posts
Comments
HTML5 - Article vs Section
The difference between HTML5 Articles and Sections can be a little confusing... unless you know this one important distinction: an Article is self-contained content, and a Section is a part of larger content.
This blog post explains the usage of the Article and Section tags. It also demonstrates how to use them: if you "view page source" in your browser, you'll see my usage of Article and Section tags in this post.
The Article
Article tags indicate self-contained content which could be copied and pasted into another page or context. For example, forum and blog posts are self contained. So a blog or forum page that displays several posts should contain several articles - one for each post. A home page or an about-us page might contain a single article.
This post contains a single article.
Articles inside other tags
Articles can go inside of sections. A blog page might have h1:"Articles about iPhones", h1:"Articles about Android", etc. Each of the sections would contain multiple articles.
Articles can go inside of articles. If a post on a blog is an article, comments on the post might be sub-articles.
The Section
A section is a piece of the larger content. For example, any time you have a heading tag (h1, h2, etc.), you can consider wrapping the heading and it's related content with section tags. The section wrapper indicates which part of the content the heading belongs to.
In this post, "The Article", "The Section", and "When do I use which tag?" are all h1's. I've wrapped the h1's and the corresponding text with Section tags.
Sections inside other tags
Sections can go inside of articles. A terms-and-conditions page has a single article (the terms and conditions), and that article might have many sections: h1:"Privacy", h1:"Cancelation", etc.
Sections can go inside of sections. For example, h1:"About Dogs" might be a section in an article about pets, and h2:"About Chihuahuas" might be a subsection in About Dogs.
In this post, "Articles inside other tags" and "Sections inside other tags" are h2's. I've wrapped the h2's and corresponding content with Section tags. The h2 section tags are inside of the h1 section tags.
When do I use which tag?
How do you know if the content is self contained (an article) or a piece of the larger content (a section)? You know because it's your content. By your choice to use article or section tags, you're telling readers how they should understand your content.
0 comments:
Post a Comment