Page Layout
The layout of a web page can improve user experience and make the content more readable.
The body of a web page can be divided into 3 parts.
header - contains introductory information.
main - there must not be more than one main element in a document.
footer - contains contact and legal information and links.
The header often contains navigation links, a menu and/or a search bar. Brand elements like logos are usually found in the header too.
You can have several footer elements in one document.
<header>, <main> and <footer> elements are nested inside the <body> container tag.
<body>
<header>
<!--intro information-->
</header>
<main>
<!--main content-->
</main>
<footer>
<!--footer information-->
</footer>
</body>
Remember: <head> is used to include technical information about the page like title, description, author and keywords. This is not shown to the visitor by the web browser.
More on Layout
Layouts that improve accessibility and make the content easier to understand for both search engines and users.
article
<article> represents an independent, self-contained piece of content.
An article is content that makes sense on its own.
The <article> tag clearly indicates the role for its content. It’s used for content like news stories, and blog posts.
<article> is an example of a semantic tag.
Layout tags like <header>, <main>, <footer> and <article> are semantic tags because they give information about what they contain.
section
<section> helps to break down the content into parts.
It usually includes a heading.
A web page could be split into separate sections for introduction, contact information.
section is a semantic tag. <section> can be used to separate each chapter, news item, etc.
aside
<aside> is used for secondary, additional or somehow related content.
Semantic tags don’t give any visual effect to the content. You can nest layout elements to create organized and accessible pages.