Lesson Twenty Two: The Aside Element

The latest version of HTML (HTML5) allows you to use the <aside> element to structure and design portions of your pages.

1. Enter this code just under the header element:

   <aside id="animalpicturesection">
   <img src="images/elephant1.jpg" alt="Elephant">
   <img src="images/lion1.jpg" alt="Lion">
   <a href="ak2.html">Hippopotamus webpage
   <img src="images/hippo1.jpg" alt="Hippopotamus"></a>
   <img src="images/Giraffe1.jpg" alt="Giraffe">
   <img src="images/rhinosaurus1.jpg" alt="rhinoceros">
   <img src="images/tiger1.jpg" alt="Tiger">
   </aside>

   
   Your page should look like this: Sample
   
   
2. The new elements allow you to add more structure. The CSS is easier to understand and maintain. Consider what will happen as you enter this code to your CSS file:

   aside{ width: 240px;
   margin: 0px 20px 0px 650px;
   position: absolute;
   padding-right: 10px; }
   #animalpicturesection img { margin: 20px 20px 20px 20px; }

   
   Save your file and view changes: Sample
   
   
3. You are encouraged to add more animal pictures to your aside section.

Lesson Twenty Three: Navigation - the Nav Element