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

Introduction

This is part 3 of my series, Sectioning Content. In this part of the series I talk about the nav and aside elements, which are examples of sectioning content elements. You should have read the previous parts of the series before reaching here, as this is a continuation.

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:

    <nav>
    </nav>

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:

    <nav style="float:left">
    </nav>

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:

    <nav style="float:left">
        <h3>Navigation</h3>
        <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>
    </nav>

In this case, all the web pages are in the same directory as the web page having the nav element.

If the links should be in a horizontal line, you can place them in a paragraph element, which is then placed in the nav element, as follows:

    <nav>
        <h3>Navigation</h3>
        <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>
    </nav>

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.

<nav>
<h1>Navigation</h1>
<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
href="http://isp.example.net/">ISP™</a>.</p>
<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>
</nav>

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.

The aside Element
This is a double tag element. It is a block level element by default. The tags are:

    <aside>
    </aside>

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:

    <aside style="float:right">
    </aside>

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.

<aside>
    <h1>Switzerland</h1>
    <p>
            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.
    </p>
</aside>

This aside element takes the whole width of its containing element. There are paragraphs on the page, above and below it. The reader may not know that it is an aside element. It may be given a particular style, using CSS, to differentiate it from the main content.

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.

Chrys

Broad Network

Related Articles

HTML nav and aside Elements

Sectioning Content – Part 3

Introduction

Related Links

Comments