HTML Layouts

HTML Layout using CSS

CSS (and browser support) has come a long way since the early days of the web. These days, browsers have much more consistent support for CSS properties for dealing with website layouts.

Also, HTML now has a number of elements that can be used for the common sections of a website. In particular, the <main>, <header>, <footer>, <nav>, and <article> tags were introduced in HTML5, specifically for providing better semantics for a website's layout.

Also, the <div> element is a generic block level element that can be used for grouping HTML elements. Once grouped, formatting can be applied to the element and everything contained within it.

Using our previous HTML layout, we can use various HTML5 elements (along with CSS) to achieve a similar effect.

<!DOCTYPE html>
<html>
<head>
   <title>This is website title</title>
   <style>
        main {
            width: 100%;
        }
        header {
            background-color: yellow;
        }
        nav {
            background-color: orange;
            height: 200px;
            width: 30%;
            float: left;
        }
        nav>ul {
            list-style: none;
            padding-left: 0;
        }
        article {
            background-color: #eeeeee;
            height: 200px;
            width: 70%;
            float: right;
        }
        footer {
            background-color: yellow;
            clear: both;
        }
   </style>
</head>
<body>
  <main>
    <header>
        Header
    </header>
    <nav>
        Left menu
        <ul>
            <li>Home</li>
            <li>About US</li>
            <li>Contact US</li>
        </ul>
    </nav>
    <article>
        Main body
    </article>
    <footer>
        Footer
    </footer>
</main>
</body>
</html>
Try it with the Editor

Responsive Layouts

Another progression in modern-day web design is the practice of building responsive layouts.

Responsive layouts adjust according to the screen size being used to view the website. This means that your website will probably look different on a mobile phone vs a tablet vs a desktop computer. The website adjusts itself to provide the best layout for the screen size.

Because designing the visual layout is the job of CSS, we won't go into any more detail here. But the main thing to remember is, HTML provides the above elements (and more) to communicate the purpose of the element (eg, "article", "header", "nav" etc). We can then apply CSS to those elements to determine how they are presented to the user.

Because advanced layouts take time to create, a quicker option is to use a template. Web templates are basically a pre-built website that enables you to customize as required. To see what I mean, check out these HTML templates.

Heading elements should be used for headings only. Don't use headings to make text BIG or bold. All browsers automatically add some white space (a margin) before and after a heading.