The example is an art gallery site. Open the html4.html in your browser, and you will see it as following image.
It uses the old HTML4 tags and features, the task is to find them out and choose the right HTML5 features to replace them. Check out the result for HTML5 Demo.
There are two places using
nav. The one inside
header is for links to parts within the page, the other one in the sidebar is for links to other pages. These
are the cases that we usually use for
main, each element which is self-contained is wrapped with
article. Why not
section forms part of something else,
article is its own thing – something that is completed, self-contained. Inside
article, some of the header content just use
h1 without wrapping with
header, if the content is just a
<h1>header</h1>, we don’t need to use
<header> tag to wrap it.
See Tips if you get confused for choosing the features.