HTML nav and aside Elements
Sectioning Content – Part 3
Foreword: In this part of the series I talk about the nav and aside elements, which are examples of sectioning content elements.
By: Chrysanthus Date Published: 30 Jul 2015
The nav Element
This is a double tag element. It cannot have a main element descendant; i.e. it cannot nest a main element. Remember: The body element can nest an article or main element. The article element cannot nest the main element. The HTML5 specification does not indicate whether the section element can nest the main element. In my opinion, do not nest the main element in the section element. The tags for the nav element are:
The nav element represents a section of a page that has a lot of (group) of navigation links (hyperlinks) to other pages or to other parts of the same page.
In cases where the content of a nav element represents a list of items, use list markup for the items (links).
Not all groups of links on a page need to be in a nav element - the element is primarily intended for a section that consists of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such links; while a nav element can be used in such cases, it is usually unnecessary.
Also, you can have navigation links dotted here and there, in a page and not in the nav element. The nav element comes in handy, when the navigation links are together.
The nav element is by default a block-level element. A block-level element is an element that has an inherent line break element above and below it; it also takes all the width of its containing element. However, you can float it to the left as in the following code:
Under this floated condition, the element can have text in multiple lines, on its right. Under this condition, you can have each link in a paragraph.
The nav element whether floated or not, can be inside an article element or outside the article element (above). The nav element whether floated or not, can be inside the main element or outside the main element (above). You can have zero, one or more nav elements in a web page.
The following code is an example of a nav element where each link is in a paragraph:
<p><a href="page1.htm">Page A</a></p>
<p><a href="page2.htm">Page B</a></p>
<p><a href="page3.htm">Page C</a></p>
<p><a href="page4.htm">Page D</a></p>
<p><a href="page5.htm">Page E</a></p>
In this case, all the web pages are in the same directory as the web page having the nav element.
<p><a href="page1.htm">Page A</a> - <a href="page2.htm">Page B</a> - <a href="page3.htm">Page C</a> - <a href="page4.htm">Page D</a> - <a href="page5.htm">Page E</a></p>
As another example, the following code, copied from the specification, shows a group of (a lot of) navigation links mixed with text in the nav element.
<p>You are on my home page. To the north lies <a href="/blog">my
blog</a>, from whence the sounds of battle can be heard. To the east
you can see a large mountain, upon which many <a
href="/school">school papers</a> are littered. Far up thus mountain
you can spy a little figure who appears to be me, desperately
scribbling a <a href="/school/thesis">thesis</a>.</p>
<p>To the west are several exits. One fun-looking exit is labeled <a
href="http://games.example.com/">"games"</a>. Another more
boring-looking exit is labeled <a
<p>To the south lies a dark and dank <a href="/about">contacts
page</a>. Cobwebs cover its disused entrance, and at one point you
see a rat run quickly out of the page.</p>
Since this nav element is not floated, it spreads out in its containing element (horizontally).
A nav element should have a heading. I would give an h3 heading to a typical nav element.
This is a double tag element. It is a block level element by default. The tags are:
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.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page. A pull quote is an excerpt (extract) from a longer quoted text.
It is not appropriate to use the aside element just for parentheticals (remarks), since those are part of the main flow of the document.
To use it as a sidebar, you have to float it to the right, as follows:
You can also float it to the left.
An aside element cannot have any main element descendant.
The aside element whether floated or not, can be inside an article element or outside the article element. The aside element whether floated or not, can be inside the main element or outside the main element. You can have zero, one or more aside elements in a web page.
The following example shows how an aside element is used to mark up background material on Switzerland in a much longer news story on Europe.
Switzerland, a land-locked nation in the middle of Europe, has not joined the European Union, though it is a signatory to a number of European treaties.
An aside element should have a heading. However, when it is short (small) like for a pull quote, you can omit the heading. I would give an h3 heading to a typical aside element.
Well, before we leave this part of the series, know that sectioning content elements are the body, section, article, nav and aside elements. Also know that sectioning root elements are the body, blockquote, fieldset, figure and td elements. If you have been reading the series in this volume, in the order given, then you should know the meaning of the body, section, article, nav, aside, blockquote, figure and td elements. td is for HTML Table cell. The fieldset element. will be explained later. The body element is both a sectioning content element and a sectioning root element.
Also remember that the body element can immediately nest an article or main element. The article element cannot nest the main element. The HTML5 specification does not indicate whether the section element can nest the main element. In my opinion, do not nest the main element in the section element. The nav element cannot nest the main element. The aside element cannot nest the main element.
Remember as well that a sectioning content element should have a heading element (h1 – h6).
Let us stop here for now, and continue in the next part of the series.
Related LinksBasics of HTML 5
Basics of ECMAScript
HTML DOM Basics
Text Elements in HTML
Microsyntax Dates and Times in HTML
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course