This assignment should be fairly easy; at least I hope it is! In the previous exercise you laid out a website by using div tags defined by Ids and classes. In this exercise you are going to recreate the same website with the semantic elements of main, nav, header, and section.
To make this really easy, I suggest that you duplicate the div_layout folder and name the new folder semantic. Then open monkeys.html or one of the other html files, and change (for example) <div id = “leftlinks”> to <nav>. Be sure and close the ending </div> tag as well to </nav>. <div id=”all_content”> will, of course, become <main>. <div id=”right_side_content”> can become <section> or <article> and <div id=”banner”> should become <header>.
You could, if you wanted to, apply the same ids that you used in the previous exercise to the semantic elements, but because we are using the four of them just once, you could also simply rename, for example, #all_content in your CSS file to main, and take a similar approach to the rest of the ids in your CSS file.
A couple of points
- Leave the internal div tags that contain images exactly as they are!
- In the previous exercise we created this compound rule:
#right_side_content div which defined all of the div tags inside of right_side_content. If you do NOT apply right_side_content to the section tag that you now are using to replace <div id=”right_side_content”> you will need to modify your CSS to reflect the new arrangement. This shouldn’t be very hard, BTW.
Finish the drill
Make sure that you modify all three html files and you are done. Told you it was easy!