Elements for enclosing parts of pages

Within a large page you might have different areas and want to group things inside them.  For example you might have a page about Koalas and want different parts on physiology, behaviour and location.  Or you might just want to group some content together so that you can style it differently.  So far you have used div elements to do this.  There are also some elements which are basically the same as div elements but have special uses:

• use div elements when you are grouping just to control layout or style
• use section elements to group content which has a specific theme within the overall theme of the page (like the koala example)
• use article elements when a part of a page is a self-contained story or article which may not relate directly to other articles on the same page
• use nav elements to enclose content which is just made up of links or other things used for navigation
• use aside elements to enclose things which are related to the rest of the page but which maybe are not essential - they might give more information or extra explanation
• use header elements for the start of pages or other sections where the content is introducing what is going to follow (that can include some internal links to the other content on the page which you will learn to do soon)
• use footer elements for stuff at the end of a page or section which is not really part of the page but is related like the author, copyright notice or links to more information
• use address sections  to enclose the primary method to contact people related to the page or section (e.g. the author) in the form of links (a elements) to personal Web pages, email addresses (which will invite spam so be careful if you use them) or postal addresses - don't use address elements around addresses which are just part of the content (e.g. an address mentioned in a story)

If in doubt you could use div elements for everything but the more specific ones are both more professional and more suitable for the future.  They allow browsers (and search engines) to know what kind of thing each part of a page is.  They can then handle them to suit the particular user.  They may also help with accessibility.

Now that you know about the elements do this:

1. create a new file from your HTML template, call it structure.html and save it in intermediatesite
2. make the title and h1 content Koalas
3. place a header element around the h1 element (you should indent that h1 one extra tab as it is now inside another element)
4. under the h1 (but still inside the header) add a paragraph saying This page is about Koalas
5. under the header element closing tag add a new line and a section element (with an opening tag, five blank lines and a closing tag)
6. inside that section element on the five blank lines place an h2 element saying Physiology and four empty paragraphs
7. use the text from the first four paragraphs in this file to fill those paragraphs
8. create two more sections in the same way using the rest of the text in the file and the headings Behaviour and Location
9. test the page so far
10. between the header and the first section create a nav element
11. inside it put three paragraphs containing three links to other pages (any pages or pretend there are pages on kangaroos, wombats and wallabies as well)
12. create a footer element containing a copyright statement in a paragraph (e.g. copyright Fred Bloggs 2018)
13. add an address element to the footer
14. inside the address element put an email address