Website layouts help organize and structure a website better and easier by dividing it into defined HTML elements.
The most commonly used layouts are:
<header>
It is used to define a HEADER section in web page.
<nav>
It is used to define a container for navigation bar with links.
<main>
It is used to define main content in web page.
<section>
It is used to define necessary sections in web page.
<article>
It is used to define an individual, self-contained articles in web page.
<aside>
It is used to define side bar, content aside from the main content in web page.
<footer>
It is used to define a FOOTER section in web page.
<!DOCTYPE html>
<html>
<head>
<title>IT present</title>
</head>
<body>
<div id="wrap">
<header>
<p>HEADER</p>
</header>
<nav>
<p>NAV BAR</p>
</nav>
<main>
<p>MAIN</p>
<section>
<p>SECTION 1</p>
<article>
<p>ARTICLE 1</p>
</article>
<article>
<p>ARTICLE 2</p>
</article>
</section>
<section>
<p>SECTION 2</p>
<article>
<p>ARTICLE 1</p>
</article>
<article>
<p>ARTICLE 2</p>
</article>
<article>
<p>ARTICLE 3</p>
</article>
</section>
</main>
<aside>
<h2>ASIDE</h2>
</aside>
<footer>
<p>FOOTER</p>
</footer>
</div>
</div>
</body>
</html>