Skip to main content

Nav and Aside

HTML Semantic Elements: Nav and Aside​

In HTML, semantic elements are tags that provide meaning to both the browser and the developer. They clearly describe their meaning to both the browser and the developer. In this article, we are going to discuss two important semantic elements - <nav> and <aside>.

The <nav> Element​

The <nav> element is used to define a set of navigation links. It is intended for major block of navigation links. However, it doesn't have to be used for all links on a page. It is typically found in headers and footers of a webpage to contain primary navigation links such as Home, About, Contact, etc.

Here's a simple example of a <nav> element:

<nav>
  <a href="#home">Home</a> |
  <a href="#about">About</a> |
  <a href="#contact">Contact</a>
</nav>

In this example, we used the <a> element to create hyperlinks within the <nav> element. The | character is used to visually separate the links.

The <aside> Element​

The <aside> element is used to represent a section of a page that contains content that is tangentially related to the content around the aside element, and which could be considered separate from that content. It is often used for sidebars, pull quotes, or for advertising, for example.

Here's a simple example of an <aside> element:

<article>
  <h2>Introduction to HTML</h2>
  <p>HTML is a standard markup language for creating webpages...</p>
  
  <aside>
    <h3>Did you know?</h3>
    <p>HTML stands for Hyper Text Markup Language.</p>
  </aside>
  
  <p>HTML is easy to learn and has wide usage in the web development world...</p>
</article>

In this example, the <aside> element is used within an <article> element. The content in the <aside> element is related to HTML but isn't necessarily a part of the main flow of the <article>.

Accessibility​

Using semantic elements like <nav> and <aside> not only helps in creating a more readable and maintainable code, but also in improving the website's accessibility. Screen readers, used by visually impaired users, can use these elements to better understand the website's content.

Conclusion​

Understanding and using HTML semantic elements is a crucial part of web development. The <nav> and <aside> elements help in structuring your webpage and making it more accessible. Practice using these elements in your code and you will see the benefits they bring to both the readability and accessibility of your website.