A Basic HTML5 Template For Your New Website

Tuesday, November 17 2015

While it may be a simple task for any Web developer, creating a site from scratch when you're just starting out can be a daunting task. Or can simply be annoying. So, here's a very simple, bare-bones HTML5 template for you to start your website with.

Feel free to grab this and use it for any of your upcoming projects.

<!doctype html>
<html>
<head>
    <title>My Website's Title</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="The description of your site, which will show up in search results on sites like Google." />

    <link rel="stylesheet" href="css/style.css">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
        <![endif]--> 
</head>

<body>

    <!-- The content of your page will go here -->      

</body>
</html>

If you're a developer who knows even the slightest bit of HTML, great! Take this and move right along. If you have no idea what is written above and need a little help understanding what all this means, however, here's a quick breakdown:

<!doctype html>
<html>
    .....
    .....
</html>

This is the code that says, "Hey! I'm an HTML5 file." The doctype declaration states what version of HTML the page is written in. The <html> bit of the code is the opening tag of the entire page. Notice the </html> thing at the very bottom? That's the closing tag. For almost every bit of code in HTML we need both an opening and closing tag. In addition, since this is an HTML document, everything is going to go inside the <html> tags.

<head>
    .....
    .....
</head>

Look, we're doing this opening and closing tag thing again! This time, it's with the <head> element. This element, or component of the code, is where the information about the page will go. Things such as the title, meta tags, and links to stylesheets (all of which we'll cover in a minute) go here.

<title>My Website's Title</title>

This is where the title of your page goes (inside the opening and closing tags, of course).

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="The description of your site, which will show up in search results on sites like Google." />

These things are a little weird. These are the meta tags, which essentially provide information about the page. Meta is short for metadata, which is information about information.

The charset is set to utf-8, which is basically telling it which alphabet to use. UTF, or Unicode Transformation Format, is a standard for encoding characters on computers.

The viewport is the viewable area of the page of whatever device you're on. So, a smartphone's viewport will be smaller than that of, say, a laptop. What we are doing with this line is saying that the viewport of the page should equal the width of the device and should scale to the device width. With this line, we're setting the foundation for a responsive, mobile-friendly site.

The description is where you should put a short summary of the page's content. For the home page of your site, it may be a high-level overview of what the purpose of your site is, whereas on an article page it may be a teaser as to what the article is about.

<link rel="stylesheet" href="css/style.css">

This line specifies a link relation for our stylesheet, which is a link to a separate file that will include CSS styles that make the page look pretty. Some other examples of link relations would be a shortcut icon or a JavaScript script. The href attribute in this line specifies the URL, or Web address, where the file that we want to include is located.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

This is called the HTML5 Shiv. This code states that, if the user is using a version of Internet Explorer that is earlier than Internet Explorer 9, a certain script from Google is pulled into the page to ensure that Internet Explorer recognizes the HTML5 elements and that they are displayed correctly.

We end our head element with the </head> tag, then we move onto the main content of the page:

<body>

    <!-- The content of your page will go here -->      

</body>

We're finally at the body tag!

This is where all the content of your site is going to go. Elements such as <div> and <p> will be in this lovely section. If you're following a tutorial or find a nice piece of code that you would like to use, there's a fair chance that you should probably paste it into this area.

I hope this breakdown helped you a bit. If it did, please send me a message - I'd love to hear about it! Or, if you have any questions, suggestions or corrections I would love to read those as well.