Page Structure

Our page already has quite a few parts: links to other pages, a heading with a photo, a table of contents, sections with text, a video and a link to the source. In the code, though, many of them look alike. A div only groups elements together; it says nothing about what they are.

That's why HTML has elements that say what each part of a page is:

• header: the introductory part at the top of the page, with the main heading and often a logo or links,
• nav (navigation): a group of links for moving around the website or the page,
• main: the main content of the page,
• section: one part of the content on a single topic, usually with its own heading,
• footer: the end of the page with extra information, such as the author, contacts or sources.

In the preview, they look just like a div. The difference is that browsers, screen readers and search engines can tell from them what each part of the page is. A screen reader, for example, can jump straight to the main content or to the navigation.

A page built from them can look like this:

<body>
	<header>
		<nav>...</nav>
		<h1>...</h1>
	</header>
	<main>
		<section>...</section>
		<section>...</section>
	</main>
	<footer>...</footer>
</body>

A page can have more than one nav. Ours will have two: one with the links to the other pages and one with the table of contents. In this exercise, we will add header, nav and footer to our page, and in the next one, main and section.

Tip: when you wrap elements in a new one, indent them one level more so that the code stays easy to read. Just select the lines and press Tab.