<aside> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:aside

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. aside

Introduction

The aside element marks content for a sidebar.

Its content isn't part of the main flow.

The aside Element summary

Item Value
Element:aside
Element Type: Flow
Permitted Parents: this element cannot be a descendant of the address element.
Local Attributes: None
Tag Style: Start and end tags
New in HTML5? Yes
Changes in HTML5 N/A
Style Conventionaside { display: block; }

The following code shows the aside element in use.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
      <style>
aside { width:40%; background:white; float:right; border: thick solid black; margin-left: 5px;}
aside > section { padding: 5px;}
aside > h1 {background: white; color: black; text-align:center}

      </style> 
   </head> 
   <body> 
      <article> 
         <header> 
            <hgroup> 
               <h1 id="itemsilike">CSS</h1> 
               <h2>Layout</h2> 
            </hgroup> 
         </header> 
         <aside> 
            <h1>Why</h1> 
            <section>
                why it is important <!--from  w  ww. j a v a2 s.co  m-->
               <ol> 
                  <li>point 1</li> 
                  <li>point 2</li> 
                  <li>point 3</li> 
               </ol> 
            </section> 
         </aside>
          content  
         <footer> 
            <nav>
                More Information: 
               <a href="#">Learn More About CSS</a> 
            </nav> 
         </footer> 
      </article>  
   </body>
</html>

Related Tutorials