Let’s go deeper. Now we’re getting to the good stuff. It’s so easy to use <div>s all over the place. But there are good people over at the W3C who came up with tools for you to use - so many wonderful HTML elements.

Most of the pages we create have a common structure: a header, a main navigation, one area where the content goes, maybe an area on the edge with additional information and a footer. Something like this:

an example for a classic page structure
This is a classic page structure with a header, a navigation, main content, maybe some complementary content on the margin and a footer. We do have correct markup for these parts.

The beauty of landmarks is that they help assistive technology a great deal. If possible, use proper HTML elements like <header> for the area at the top of your page. Most of the time it holds a hero image, a logo and maybe even the <nav>. The <nav> can stand on its own, too. Your whole content goes into the <main>. Don’t use something like <div id=”main”> because there’s an element you can use. Things like a list of last posts, advertisements or other “non-essential” stuff goes into the <aside>. You can have multiple <aside>. And of course we always finish off with the