Structure and Navigation

The page has everything a visitor needs, and we've added the shelter's address to its end. But its code says nothing about what each part of the page is, and on a phone, a visitor has to scroll past all the cats to get to the visiting hours. Let's fix both.

First, give the page its structure, as you did with the cat page in the lesson on advanced HTML elements. The heading and the introduction make up the header of the page. The main content has two sections, Our Cats and Visiting Hours, each with everything that belongs to it, and the address goes in the footer.

Then add navigation at the top of the page: two links that take the visitor straight to the sections. When you're done, try the links in the preview.

That's the whole page. The shelter's page now has pictures that open at full size, a table of the visiting hours and navigation links, and browsers, screen readers and search engines can tell what each part of it is. In the next lesson, you'll learn to build forms, so the shelter's page could get one for people who want to adopt a cat.