Learn when to use <nav />, <article /> & <aside />
There are numerous articles on explaining semantic HTML, but there are very few articles that will help you decide on which tag to use.
You just need to ask yourself some questions to decide on what tag to use.
<nav />
Will the element be a major navigation block that the users will primarily rely on to navigate around the website? If yes then you should be using the <nav /> tag.
The HTML 5 specification defines <nav /> as:
The nav element represents a section of a page that links to other pages or parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.
It is important to not abuse the <nav /> tag. If the footer and the header have the same links, then you should skip enclosing the footer with the nav tag.
If your website has pagination (and it is the only way to navigate between the pages), then it is necessary to enclose the pagination buttons with the nav tag. Similarly, a Table of content, Breadcrumbs can be enclosed in nav.
<article />
Does the content (in its entirety) make sense on its own? Then you need to enclose it in an article tag. The content can be News article, weblog or forum post, comment on an article, sidebar
widget, etc, with a heading… The best example of an article would be a post on an RSS feed.
The HTML 5 specification defines <article /> as:
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
It is also very common for a lot of people to get confused between <article /> and <section />. A simple hack I use is to ask myself these questions.
Does the content make sense on its own? If so, it should be enclosed in an article.
Are the content related to each other? If it is a group of related content, like comments in a blog post, each comment should be enclosed in an article, and all these articles should be enclosed around a single section.
<aside />
Is the content related & required to understand the content of the page? If it is related & is not required, then you can enclose these content in an <aside /> tag. The content can include Sidebar, comments section, pull-quote, glossary, advertising, footnote, etc.
The HTML 5 specification defines <aside /> as:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
A lot of people don't know that you can place aside inside an article. As long as it is content that relates to the article, but even if the content is not available, the article would still make sense, then it can be placed in an aside.
Many argue that the sidebar & advertisements shouldn't be placed in an aside. Because, your website can be about cats, but the ads might be for the pizza, which is not at all related to cats.
Unless your cats look like this
<conclusion />
I haven't completed penning down my opinion on semantic HTML tags yet😎, this post will be followed by a part 2 very soon 😀
Please leave your feedback in the comments below, It'll help me grow as a writer. 🥰
Top comments (0)