HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang
"nav" and "aside" Elements
This section provides an tutorial example of using 'nav' and 'aside' elements in HTML documents to present navigation blocks and sidebars.
"nav" and "aside" elements are added in HTML5 standard to allow us to group paragraphs together to be presented as navigation blocks and sidebar blocks in HTML documents. Here are some general rules about "nav" and "aside" elements:
1. "nav" and "aside" elements are used to present navigation blocks and sidebar blocks.
2. Multiple "nav" and "aside" elements are allowed at the same level.
3. "nav" and "aside" elements are allowed to be directly nested.
Here is a good example of using "header" and "footer" elements in HTML documents:
<!DOCTYPE html> <!-- HTML5_nav_and_aside_Example.html - Copyright (c) 2014 HerongYang.com. All Rights Reserved. --> <html> <head> <title>HTML5 nav and aside Example</title> </head> <body> <nav> <ul> <li><a href="/first-post">My first post</a></li> <li><a href="/last-post">My last post</a></li> </ul> </nav> <aside> <p>Sidebar note - I'm on vacation, writing my blog... </p> </aside> <p>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. </p> </body> </html>
Table of Contents
►Introduction of HTML5 Features
Differences between HTML5 and HTML 4
Adding Inline SVG Image in HTML5 Documents
Adding MathML Formula in HTML5 Documents
"article" and "section" Elements
"header" and "footer" Elements
"details" and "summary" Elements
"figure" and "figcaption" Elements
HTML Document Structure and Content
HTML Document and Elements Syntax
Displayed and Printed HTML Documents
Responsive Design of Web Pages