Creating Sidebar using <aside> – HTML5 semantic element

Sidebar is a term – used for information that can be placed adjacent to an article on a web page which is visually separate from the main content (i.e. article itself). It is not the part of an article but exists in context with the article or the main content.

Observe the HTML5 code below, I have used couple of  HTML5 semantic elements namely <article>, <aside>, <section>, <header>,<footer>, <nav> in this piece of work.

<aside> tag should be used to display any information which is related to article but is not directly the part of an article.

<aside> tag and all other html5 semantic tags discussed below are same – in the sense they all provide containership or can be used to group similar elements together.

Important part is they just add meaning to the content they group – for browser and also the developer to understand code better. Look and feel totally depends upon the CSS applied.

It is recommended that <article> tag or element should be used to wrap-up entire article (entire post content).

<header> tag or element can be used anywhere – to represent the header information for entire page, or header information for  your article, section etc. Literally anywhere you feel ‘header’ information is required or it make sense for you.

<section> tag can be used different sections of your article, document or a story you want to showcase and want to have a refine CSS control over each section in some way.

<nav> tag should be used to represent major navigational links.

<footer> tag can be used to display copyright information, contact information, small form, sitemap, menus,author information, social links etc. Footer information like header can be used for footer of the page, section, article etc.

↓ Image below shows the output of html file (asidesidebar.html), code provided below, without applying CSS.

creating sidebar using aside without css

asidesidebar.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Edukers- example code for aside tag</title>
    <!-- <link rel="stylesheet" type="text/css" href="sidebar.css"> -->
  </head>
<body>
  <header>
      <nav>
        <section>
        <a href="#">Home</a>
        <a href="#">About Us</a>
        <a href="#">Courses</a>
        <a href="#">Contact us</a>
        </section>
        <H1> Edukers</h1>
      </<nav>
  </header>
  <article>
    <header>
      <h2>HTML5 - all you want to know</h2>

    </header>
    <p>
      <strong>HTML5 has evolved</strong> and has lots of new features to offer. Comes with many new sematic elements and lots of new features.
      It has turned a lot of things, quite simple and easy.</p>
    <p> This example showcase one of the semantics - <strong>&lt;aside&gt;</strong> along with few other semantic elements.</p>
  </article>
  <aside>
    <h3>Side bar created using <strong>&lt;aside&gt;</strong> and CSS</h3>
    <nav>
      <ul>
        <li><a href="#">All about HTML4</a></li>
        <li><a href="#">5 CSS3 tricks!!!</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </nav>
  </aside>

  <footer>
    <a href="http://www.edukers.in">(C) Edukers 2018</a>
  </footer>
</body>
</html>

The entire solution is provided – in  the form of two files asidesidebar.html (.html code) and sidebar.css (.css file).


Observe :

  • Important links are  grouped inside <nav> tags, within <header> tags.
  • Entire post resides inside <article> tag, which has its own <header> and paragraph tags (<P>).
  • <aside> tag wraps up all the content that needs to be shown in a right-sidebar. which has a heading and few links in the form of bullets.
  • Finally we have a <footer> section that displays copy-right information in the form of a link.

You can see (in the figure that displays page without CSS) that these HTML5 semantic elements have no presentation of their own, and you can’t really make out by looking at this page – which element has been used to describe different sections of the document.

We will enhance the looks, by using CSS file “sidebar.css”

You will observe in the <head> section statement that links this html file to CSS file has been commented out (just below the <title>tag) using html comment  <!– comment –>.

  <head>
    <meta charset="utf-8">
    <title>Edukers- example code for aside tag</title>
    <!-- <link rel="stylesheet" type="text/css" href="sidebar.css"> -->
  </head>

Now we will create sidebar.css file to handle presentation part of this webpage. Code is provided.

↓ Your Webpage should look like the image below after implementing CSS (sidebar.css, code above).

Sidebar using Aside and CSS

You can copy/paste the code but just remove the comment in the <head> section of asidesidebar.html as shown below:

<head> 
<meta charset="utf-8"> 
<title>Edukers- example code for aside tag</title> 
<!-- removed the link below -->
<link rel="stylesheet" type="text/css" href="sidebar.css"> 
</head>

sidebar.css

body{
  margin-left: 20px;
  padding : 20px;	
  height:auto;
}
nav a{
  text-decoration: none;	
  color:#556B2F;
}
aside a{
  text-decoration: none;	
  color:#556B2F;
}
a{
  padding-right: 15px;
}
section{
  float:right;	
  text-align:right;
}
header{
  background-color:linen;
  color:tomato;
  border-top:2px solid tomato;
  width:90%;
  padding: 20px;	
}
article header{
  background-color:tomato;
  color:white;
  padding: 5px;
}

article, aside{
  display: block;
  padding: 10px;
  height: 100%;
}

article{
  border-top:1px solid tomato;
  float: left;
  background-color:linen;
  width:60%;
  /*height: 100%;*/
}
aside{
  border-top:1px solid tomato;
  border-left:1px solid gray;
  float: left;
  width:30%;
  background-color:linen;
}

footer{
  width:90%;
  float:left;
  background-color:gray;
  padding:20px;	
}

footer a{
  text-decoration:none;
  color:#F5F5DC;
}

 

Pawan Arora AdministratorKeymaster
Founder , Edukers
Teaching, Coding and Sharing is his passion. A true mentor and motivator. C/C++, Python, Java, Web Technologies (html5 / CSS/ Javascript/ JQuery,Bootstrap, nodeJS ,PHP etc.) and a WordPress enthusiast with more than 18 years of experience.
follow me