Creating a basic HTML5 page template

0800 156 0777

Creating a basic HTML5 page template

With this post I am going to share with you my basic HTML5 skeleton and discuss why I have set it up the way I have. This is nothing complicated, but I always get questions about how to set up a basic page with HTML5. First off a simple html, head, and body tags…

<!doctype html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
</head>
<body>

</body>
</html>
This is my starting skeleton. Nothing fancy. Quite often I see the word DOCTYPE in uppercase, but I make the doctype all lowercase because I like to, and I change the title to whatever is needed. I will add further meta tags depending on the project, but at the start I do not need much.

I will then add an empty style tag in the head and an empty script tag at the bottom of the body…

<!doctype html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
<style></style>
</head>
<body>

<script></script>
</body>
</html>

Of course If I am working with a particular javascript framework, I will also add those just above the </body> tag.  This now gives me a template for each of my files for the project.

Going into the body I will generally start off with just one div, with an id of wrapper (for example). This allows me to control everything inside that.
Apart from that div I generally stay away from further divs where possible and just stick to sections and articles and other, standard html tags. For example…

<!doctype html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
<style></style>
</head>
<body>
<div id="wrapper">
       <nav></nav>
        <section>
           <header></header>
                <article></article>
                <article></article>
            <footer></footer>
        </section>
    </div>
</body>
</html>

I will also add in some headers and footers and a nav element. I can now duplicate the sections as many times as I want, and all the structure comes along for the ride. 

Of course I will also add h1s and so on, but for clarity I have left them out.

So this is my standard page setup, providing me with a simple setup that is easy to use, easy to change, and easy to understand. How do you set your pages?