<aside> 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.

Using aside to Mark Up a "Related Links" Section

 
<!DOCTYPE html> 
         <html lang="en"> 
         <head> 
             <title>This has a nice outline</title> 
         </head> 
         <body> 
         <article> 
         <header> 
         <h1>HTML5</h1> 
         </header> 
         <p><strong>Pellentesque habitant morbi tristique</strong> </p> 
          ... 
         </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 this demo.
 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
    <header> 
        <nav> 
            <h1>Contents</h1> 
            <ul> 
                <li><a href="#">a link</a></li> 
                <li><a href="#">a link</a></li> 
            </ul> 
        </nav> 
    </header> 
    <article> 
        <header> 
            <hgroup> 
                <h1>H1</h1> 
                <h2>H2</h2> 
            </hgroup> 
        </header> 
        <aside> 
            <h1>Sidebar H1</h1> 
            <section> 
                <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
                <ol> 
                    <li>A</li> 
                    <li>B</li> 
                    <li>C</li> 
                </ol> 
            </section> 
        </aside> 
        <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
        <section> 
            <h1>H1</h1> 
            <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
            <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
            <section> 
                <h1>H1</h1> 
                <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
                <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
                <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
                <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
                <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
                <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
                <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
            </section> 
        </section> 
        <footer> 
            <nav> 
                More Information: 
                <a href="">Link</a> 
            </nav> 
        </footer> 
    </article> 
</body> 
</html>
  
Click to view this demo.
Home 
  HTML CSS Book 
    HTML reference  

Tag:
  1. <a>
  2. <acronym>
  3. <address>
  4. <area>
  5. <article>
  6. <aside> for SideBar
  7. <audio>
  8. <b>
  9. <base>
  10. <bdi>
  11. <bdo>
  12. <blockquote>
  13. <body>
  14. <br>
  15. <button>
  16. <canvas>
  17. <caption>
  18. <cite>
  19. <code>
  20. <col>
  21. <colgroup>
  22. <dd>
  23. <del>
  24. <details> for expandable section
  25. <dfn>
  26. <div>
  27. <dl>
  28. <!DOCTYPE>
  29. <dt>
  30. <em>
  31. <embed>
  32. <fieldset>
  33. <figure> for content with caption
  34. <footer> for footers
  35. <form>
  36. <frame>
  37. <frameset>
  38. <head>
  39. <header> for headers
  40. <hgroup> for header grouping
  41. <hN>
  42. <hr>
  43. <html>
  44. <i>
  45. <iframe>
  46. <img>
  47. <input>
  48. <ins>
  49. <kbd>
  50. <keygen>
  51. <label>
  52. <legend>
  53. <li>
  54. <link>
  55. <mark> to highlight
  56. <map>
  57. <meta>
  58. <meter>
  59. <nav> for navigation
  60. <noscript>
  61. <object>
  62. <ol>
  63. <output>
  64. <optgroup>
  65. <option>
  66. <p>
  67. <param>
  68. <pre>
  69. <progress>
  70. <q>
  71. <ruby>, <rt>, and <rp> Elements
  72. <rt>
  73. <ruby>
  74. <samp>
  75. <script>
  76. <section> marks sections
  77. <select>
  78. <span>
  79. <strong>
  80. <style>
  81. <sub>
  82. <sup>
  83. <table>
  84. <tbody>
  85. <td>
  86. <textarea>
  87. <tfoot>
  88. <thead>
  89. <th>
  90. <time> for date and time
  91. <title>
  92. <tr>
  93. <ul>
  94. <var>
  95. <video>
Related: