HTML5 Layout Design From Scratch including header, article, footer tag etc.

In this tutorial, we are going to discuss how to create HTML5 layout design from scratch, which covers header and footer design. HTML5 offers new semantic elements that define the different parts of a web page. W3C has conducted a study of over billion websites and found that the most of common div IDs and classes are footer, header, menu, content, title and nav. HTML5 semantic markup elements that can convey the purpose of the element to developers, browser and search spider algorithms.

Check out the below mostly used semantic elements and their purpose :

<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element

Here we have designed simple example using HTML5 semantic elements and also it includes basic header and footer design. Refer the below diagram that help you to build more understanding on HTML5 template design.

header and footer in html5 example

Lets see the complete example to build more understanding on HTML5 Template Design :

HTML 5 Layout Design.html
check out HTML5 template source code.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>HTML5 Template Design</title>
    <meta content='HTML5 Template Design' name='description' />
    <meta content='width=device-width, initial-scale=1' name='viewport' />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
   
    <div id="main-container">
        <header id="header">
            <section> Skptricks </section>

            <nav>
                <ul>
                    <li><a href="http://www.skptricks.com/p/php.html">PHP</a>
                    </li>
                    <li><a href="http://www.skptricks.com/search/label/java">JAVA</a>
                    </li>
                    <li><a href="http://www.skptricks.com/search/label/jquery">Jquery</a>
                    </li>
                    <li><a href="http://www.skptricks.com/search/label/AJAX">AJAX</a>
                    </li>
                    <li><a href="http://www.skptricks.com/search/label/android">Android</a>
                    </li>
                </ul>
            </nav>
        </header>

        <section id="display-ads">
            <h1><center> Display Ads </center> </h1>
        </section>

        <section id="main-body-container">

            <article id="main-article">
                <h1> Article Box </h1>
                <section> You can write or mention your article description here </section>
            </article>

            <aside id='sidebar'>
                <h1> Slider Box </h1>
                <section> You can write or mention your Slider description here </section>
            </aside>

        </section>

        <footer id="footer">Copyright © <a shref="http://www.skptricks.com">www.skptricks.com </a>
        </footer>
    </div>

</body>

</html>

style.css

Styleheet design for above HTML5 template.

* {
     margin: 0px;
     padding: 0px 
}
 #main-container {
     width: 100%;
     margin: 0px auto;
}
 #header {
     width: 100%;
     background-color: black;
     padding: 10px;
     color: white;
}
 #header:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}
 #header section {
     float: left;
     width: 20%;
     font-size: 18px;
     font-weight: bold;
}
 #header nav {
     width: 50%;
     float: left;
}
 #header nav ul {
     list-style: none;
}
 #header nav ul li {
     float: left;
     min-width: 10%;
     padding: 4px;
     margin-left: 10px;
     background-color: #fdf1e5;
     text-align: center;
     color: black;
}
 #header nav ul li a, a {
     text-decoration: none;
}
 #main-body-container {
     padding: 10px;
     margin: 10px;
  }
 #main-body-container:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}
 #display-ads{
     padding: 20px;
     margin: 20px;
     background: #e5e5e5;
}
 #main-article {
     float: left;
     width: 60%;
     min-height: 450px;
     background: #e5e5e5;
}
 #sidebar {
     float: right;
     width: 38%;
     min-height: 450px;
     background: #e5e5e5;
}
 #footer {
     width: 100%;
     background-color: black;
     padding: 10px;
     color: white;
}