In the last lesson, we introduced you to even more HTML5 and CSS3.

We used some HTML5 elements in previous lessons, including <header>, <footer>, and <section>. HTML5 introduced many other new elements. Some common ones include <nav>, <article>, and <main>.

These elements don't change how our website looks. They let us describe the structure of our page. This gives more information to the user's browser, and helps out assistive programs (such as screen readers, commonly used by blind people). We can still use CSS to change the style of these elements, just like we did with <div>s in previous tutorials.

A section is usually a "blob" of content. When you are considering using it, ask yourself if your potential <section> has a natural heading. If not, it might not be the right choice.

If you just want to style a part of the page, a <div> would be more appropriate.

An <article> should make sense as a self-contained document. For instance, it could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of contant. You can use <header> and <footer> tags within your <article>s too.

An <aside> is something related to but separate to the current containing element. For instance, if your page displayed bits of blog posts, an <aside> might contain a list of posts, or adverts related to the main content. Or maybe your page is a blog article - in that case, you could use an <aside> to contain a sidenote.

The <address> element is used to provide contact information related to the page. It's mainly meant for details like postal addresses and telephone numbers, but you can include email addresses and links to online contact methods too. Here's an example:

<address>
  Mr. Jack Random<br>
  HTML5 street,<br>
  The internets,<br>
  Word Wide Web,<br>
  Tel: +44 (0) xxx xxx
</address>

We've already seen that we can put images in our page using the <img> tag, but we often want to include a caption for our images. <figure> can be used in conjunction with the <figcaption> element to describe images, pictures, illustrations and diagrams (and even more).

<figure>
 <img src="assets/images/concerned-pug.png" alt="Concerned pug">
 <figcaption>
  Concerned pug
 </figcaption>
</figure>

In the old days, before HTML5, you had to use a plug-in if you wanted to include videos and audio in your page. These weren't supported in all browsers, and often didn't work at all on smart phones. These days, we can use the <video> and <audio> elements to play media directly in the browser and embed them in our documents.

Some browsers still don't support this. In that case, the browser will show the message you include within the tag. Here's a video example:

<video src="path/to/video">
  Your browser doesn't support embedded video!
</video>

We can use other attributes to control our media plays. To make music start playing automatically, you use the autoplay attribute. To make the controls visible, use the controls attribute. Without this, you wouldn't see your audio player!

<audio src="path/to/music.mp3" controls="controls" autoplay="autoplay">
  Your browser doesn't support embedded audio!
</audio>

Today, we will be following a different approach to building our page.

You now know enough to build a complete web page from scratch. Open our example page, then try to build it yourself. You should use the HTML5 elements we mentioned today and what you have learned in the previous tutorials.

Download the files required to begin working through the tutorial from here. Create a new folder on your computer for this tutorial, and extract the downloaded archive in that folder.

Hi I'm Ada Lovelace - http://codebar.github.io/tutorials/html/lesson3/example.html
Grace Hopper - http://codebar.github.io/tutorials/html/lesson4/example.html
Anita Borg - Where are we and where are we going. - http://codebar.github.io/tutorials/html/lesson5/example.html
Grace Hopper on Letterman - http://codebar.github.io/tutorials/html/lesson6/assets/images/grace-letterman.mp4

Also, don't forget to refer to the previous tutorials

Don't be afraid to ask for help from your coach.

Build a basic version first, then try to make it more fancy. Don't try to make it perfect first time.

Remember to use your browser inspector! It can help you find out why things aren't working. Try not to use it to peek at how the example was built, though. :)

If your video doesn't play, try using Chrome. There's a known issue with Firefox's video playback.

You can rotate elements using CSS:

img {
  transform: rotate(20deg);
}

This ends our sixth lesson. How did you find learning HTML5 and CSS? Is there something you don't understand? Try to use the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial send us an email and let us know.

Now that you are familiar with HTML & CSS, how about you go away and create your own little portfolio site. Think about the pages that you may include, such as home, about me and a portfolio or gallery page. You may even want to include a downloadable CV.