HTML Layout Elements

Body layout elements in HTML are used to create the visual structure and presentation of the content on a web page. In this tutorial, we will learn about the following HTML layout elements:

  1. Divisions (<div>): The <div> tag is used to create divisions or sections of a web page. It is a generic container element that can be used to group other HTML elements together and apply styles to them. The <div> tag does not have any semantic meaning, it is used purely for layout purposes.

  2. Headers (<header>): The <header> tag is used to create the header section of a web page. It typically contains the site logo, navigation menu, and other information about the site.

  3. Main Content (<main>): The <main> tag is used to define the main content area of a web page. It should be unique to the document, excluding content that is repeated across a set of documents such as site headers, footers, and navigation.

  4. Articles (<article>): The <article> tag is used to create standalone, self-contained content that can be distributed independently of the main content of a web page. It is typically used for blog posts, news articles, and other similar content.

  5. Sections (<section>): The <section> tag is used to create sections within a web page. It is used to group related content together and give it a semantic meaning.

  6. Navigations (<nav>): The <nav> tag is used to create the navigation section of a web page. It is used to define a set of navigation links to other pages within the site.

  7. Aside (<aside>): The <aside> tag is used to create a section of content that is tangentially related to the main content of a web page. It is often used for sidebars, pull quotes, and other similar content.

  8. Footers (<footer>): The <footer> tag is used to create the footer section of a web page. It typically contains information such as the site name, copyright information, and other similar content.

It is important to use these layout elements correctly in order to create an accessible and well-structured HTML document. Proper use of these elements can also make it easier to style and manage the layout of a web page.

This is just an introduction to body layout elements in HTML. To learn more about HTML, it is recommended that you continue to study and practice creating web pages with HTML.

Example of Basic Layout of HTML Page

Here is an example of how you can use HTML layout elements in your HTML document:

<!DOCTYPE html>
<html>
    <head>
    <title>My Website</title>
    </head>
    <body>
    <header>
        <h1>My Website</h1>
        <nav>
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        </nav>
    </header>
    <main>
        <article>
        <h2>About Us</h2>
        <p>Welcome to our website! We are a company that provides high-quality services to our clients. Our mission is to help our clients achieve their goals by providing them with the best possible solutions.</p>
        </article>
        <article>
        <h2>Our Services</h2>
        <p>We offer a wide range of services, including:</p>
        <ul>
            <li>Web design and development</li>
            <li>Search engine optimization</li>
            <li>Social media management</li>
        </ul>
        </article>
    </main>
    <aside>
        <h3>Contact Us</h3>
        <p>Have a question or need to get in touch with us? Fill out the form below and we will get back to you as soon as possible.</p>
        <form action="#">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <label for="message">Message:</label>
        <textarea id="message" name="message"></textarea>
        <input type="submit" value="Submit">
        </form>
    </aside>
    <footer>
        <p>Copyright © 2023 My Website</p>
    </footer>
    </body>
</html>

In this example, we have used the <header>, <main>, <article>, <aside>, and <footer> elements to create a simple, well-structured HTML document. The <header> element contains the site logo and navigation menu, the <main> element contains the main content of the page, the <article> elements contain separate pieces of content, the <aside> element contains a contact form, and the <footer> element contains the site's copyright information.