HTML Tag Reference - HTML tag <aside>








<aside> is for SideBar.

The <aside> element marks the surrounding elements. It could be some additional background, a set of links to related articles, and so on.

Browser compatibility

<aside> Yes 9.0 Yes Yes Yes

What's new in HTML5

The <aside> tag is new in HTML5.

Global Attributes

The <aside> tag supports the Global Attributes in HTML.

Event Attributes

The <aside> tag supports the Event Attributes in HTML.





Default CSS Settings

aside { 
    display: block;
}

Example

The following code uses aside to mark up a "Related Links" section.

<!DOCTYPE html> 
<html> 
<body> 
    <article> 
    <header> 
    <h1>HTML5</h1> 
    </header> 
    <p><strong>This is a title.</strong> ?</p> 
     ... <!--   ww w . ja  v  a2s  .co m-->
    </article> 
    <aside> 
      <h2>Related links</h2> 
      <nav> 
         <ul> 
           <li><a href="#">HTML4</a></li> 
           <li><a href="#">CSS3</a></li> 
           <li><a href="#">JavaScript</a></li> 
         </ul> 
    </nav> 
    </aside> 
</body> 
</html>

Click to view the demo





Example 2

How to use aside tag in an article element. 

<!DOCTYPE HTML> 
<html> 
<body> 
    <article> 
        <header> 
            <hgroup> 
                <h1>H1</h1> 
                <h2>H2</h2> 
            </hgroup> 
        </header> 
        <aside> 
            <h1>Sidebar H1</h1> 
            <section> 
                <p>This is a paragraph.  </p>
<!-- ww  w.  j ava2 s  . c o m-->
            </section> 
        </aside> 
    </article> 
</body> 
</html>

Click to view the demo