[vc_row][vc_column][vc_column_text]
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.
[/vc_column_text][vc_column_text css=”.vc_custom_1529478144851{margin-left: 5px !important;border-left-width: 4px !important;padding-left: 5px !important;border-left-color: #1e73be !important;border-left-style: solid !important;border-radius: 2px !important;}”]<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.[/vc_column_text][vc_column_text css=”.vc_custom_1529476495843{background-color: #ededb1 !important;}”]It is recommended that <article> tag or element should be used to wrap-up entire article (entire post content).[/vc_column_text][vc_column_text css=”.vc_custom_1529476520557{background-color: #bad6a9 !important;}”]<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.[/vc_column_text][vc_column_text css=”.vc_custom_1529476545339{background-color: #adc0cc !important;}”]<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.[/vc_column_text][vc_column_text css=”.vc_custom_1529476432330{background-color: #ededb1 !important;}”]<nav> tag should be used to represent major navigational links.[/vc_column_text][vc_column_text css=”.vc_custom_1529476980432{background-color: #bad6a9 !important;}”]<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.
[/vc_column_text][vc_column_text css=”.vc_custom_1529493533893{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 3px !important;padding-bottom: 3px !important;border-top-color: #000000 !important;border-top-style: solid !important;border-bottom-color: #000000 !important;border-bottom-style: solid !important;}”]↓ Image below shows the output of html file (asidesidebar.html), code provided below, without applying CSS.
[/vc_column_text][vc_single_image image=”2508″ img_size=”full” alignment=”center” style=”vc_box_border”][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_column_text]
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><aside></strong> along with few other semantic elements.</p>
</article>
<aside>
<h3>Side bar created using <strong><aside></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="https://edukers.in">(C) Edukers 2018</a>
</footer>
</body>
</html>
[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_column_text css=”.vc_custom_1529483356835{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #faf0e6 !important;}”]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.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=”.vc_custom_1529493494361{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 5px !important;padding-bottom: 5px !important;background-color: #dddcd0 !important;border-top-color: #2a7c13 !important;border-top-style: solid !important;border-bottom-color: #2a7c13 !important;border-bottom-style: solid !important;}”]↓ Your Webpage should look like the image below after implementing CSS (sidebar.css, code above).[/vc_column_text][vc_single_image image=”2510″ img_size=”full” alignment=”center” style=”vc_box_border” css_animation=”bounceInDown”][vc_column_text]
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>
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_column_text]
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;
}
[/vc_column_text][/vc_column][vc_column width=”1/2″][/vc_column][/vc_row]
