HTML Layout

There are different types of layouts on an HTML page. These layouts are primarily used for two reasons.

Helping with search engine optimization.
It's convenient to understand the HTML codes part by part.

These layouts are built with HTML semantic elements instead of divs. These html semantic elements are <header>, <nav>, <section>, <article>, <aside>, <footer>.

<header> : This tag is used to define the top part of the web page. This part will contain the logo and name of the web page.

<nav> : This tag is used to create a navigation menu on the web page. Some main web page links are used in this section.

<section> : This tag refers to a part of the web page but this tag can be used as many times as desired.

<article> : This tag is used to write the content of the web page.

<aside> : This tag refers to the side part of the web page. This section contains the main content related topics or will be ad.

<footer> : This tag refers to the bottom part of the web page. This section will contain information related to the website.

Some CSS has been used here to explain the layout. For that, there is no problem if you don't understand CSS. Just try to understand the structure of HTML.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .heading{
            text-align: center;
            color:rgb(32, 32, 129);
            background-color: rgb(255, 219, 164);
            padding:30px;
        }
        .nav-list{
            display: flex;
            list-style-type: none;
            background-color: rgb(18, 18, 106);
            padding:10px;
        }
        .page-name{
            margin-right: 32px;
            color:rgb(255, 255, 255);
            text-decoration: none;
        }
        .container{
            display: flex;
        }
        .left{
            width: 70%;
            border: 1px solid black;
            height: 200px;
            padding: 10px;
        }
        .right{
            width: 30%;
            border: 1px solid black;
            height: 200px;
            padding: 10px;
        }
        .footer-part{
            text-align: center;
            background-color: rgb(77, 22, 22);
            padding: 20px;
            color: rgb(255, 255, 255);
        }

    </style>
</head>
<body>
    <header class="heading">
        <h1>myschoolhouse.in</h1>
    </header>
    <nav>
        <ul class="nav-list">
            <li><a href="#" class="page-name">Home</a></li>
            <li><a href="#" class="page-name">About</a></li>
            <li><a href="#" class="page-name">Contact</a></li>
        </ul>
    </nav>
    <div class="container">
        <div class="left">
            <section>
                <h3>HTML Tutorial</h3>
            </section>
            <article>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit consequatur qui aut molestias est architecto, non inventore. Amet,
               
            </article>
        </div>
        <div class="right">
            <aside>
                Lorem, ipsum dolor
            </aside>
        </div>
    </div>
    <footer class="footer-part">
        <h3>Footer</h3>
    </footer>
</body>
</html>

Try it Yourself