HTML Layout Elements

Websites often display content in multiple columns (like a magazine or a newspaper).

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

<!DOCTYPE html>
<html>
    <head>
        <title>website layout</title>
        <link rel="stylesheet" href="style19webout.css">
    </head>
    <body>

        <!--semantic tags = keep your content organized
                            better for SEO(search engine optimization)
                            Assists screen readers and
                        other tech for accessibility
            <header> = introductory content
            <nav>    = navigation bar, links
            <main>   = main content (section,aside,article,div)
            <section>= dependent content
            <aside>  = side content
            <article>= independent content
            <footer> = closing content
        -->
        
        <header>
            <h2>Header</h2>
        </header>


        <nav class="navbar">

        </nav>

        <main>
            <aside>
                <h2>This is aside</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque obcaecati magni illum assumenda nihil officia asperiores at nemo natus, necessitatibus iste ut minima dolores facilis, dolor dignissimos adipisci, exercitationem eveniet.</p>
            </aside>
            <section>
                <h2>This is a section</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae ut officiis quis quidem labore placeat sint necessitatibus temporibus explicabo voluptatibus et modi deserunt impedit magni, autem ratione hic vero eveniet?</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos temporibus impedit omnis pariatur voluptas! Natus corporis veritatis aperiam, quisquam nesciunt consequatur consequuntur quo esse fugit deserunt earum exercitationem saepe ratione.</p>
            </section>
            <article>
                <h2>This is a article</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad praesentium in labore nemo architecto vero illum, dolorum suscipit quam blanditiis incidunt similique nihil libero sint ex voluptatibus totam aliquid! Perferendis!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur porro quia vel error possimus sint, illo dicta beatae deserunt ex sunt laborum maxime! Necessitatibus incidunt quis molestias accusamus, aliquam maxime.</p>
            </article>
        </main>

        <footer>
            <h2>Footer</h2>
        </footer>


    </body>
</html>

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

CSS framework
CSS float property
CSS flexbox
CSS grid

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work.

Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.

Example

<!DOCTYPE html>
<html>
    <head>
        <title>float property in css</title>
        <link rel="stylesheet" href="style5float.css">
    </head>
    <body>
        <!--float = allows other elements to flow around it-->

        <img src="images/cutedog.gif" alt="cute dog" width="200" id="img1">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ullam sunt asperiores reiciendis officia iure a harum voluptatem nobis dicta nihil necessitatibus quia odit facilis inventore, architecto deleniti rerum itaque?</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt voluptatum repellat obcaecati explicabo nisi officia nobis atque. Iure quae doloremque esse, dolore aliquam facere expedita voluptatum rerum, laboriosam harum nostrum?</p>
        <img src="images/icon.png" alt="cute dog" width="200" id="img2">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum explicabo aperiam dolor suscipit sapiente. Minus nihil at quas quasi. Vero eum sunt inventore accusamus perferendis voluptatum eos odio voluptatibus quas?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea maxime a repudiandae laborum reiciendis. Neque commodi suscipit, perferendis cum repudiandae unde repellat sapiente et, cupiditate ipsum dignissimos. Et, inventore eius!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores maiores qui porro, nemo iusto at blanditiis laborum sed accusamus maxime ut facilis voluptate delectus. Fugit consequatur similique saepe temporibus numquam.</p>
    </body>
</html>

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

<!DOCTYPE html>
<html>
    <head>
        <title>flexbox</title>
        <link rel="stylesheet" href="style22flexbox.css">
    </head>
    <body>
        <div class="container">
            <div class="box" id="box1">1</div>
            <div class="box" id="box2">2</div>
            <div class="box" id="box3">3</div>
            <div class="box" id="box4">4</div>
            <div class="box" id="box1">1</div>
            <div class="box" id="box2">2</div>
            <div class="box" id="box3">3</div>
            <div class="box" id="box4">4</div>
        </div>

    </body>

</html>