We use cookies. More

How to Create a Basic HTML 5 Web Page Template

In this quick tutorial, I will show you how to create a basic web page in HTML 5 that you can use as a template for quickly generating new pages while building your websites. I will mostly focus on the structure and the required tags and declarations of an HTML 5 document, to give you a basic starting point.

Advertisement

HTML 5 is the new HTML standard, which became a W3C recommendation as of October 28, 2014. What this means is that web designers and developers should follow this standard while building their websites and also web browsers should comply with this standard. If you haven't already, you should start to learn how HTML 5 works, what new things it brings and what deprecated things it removes from HTML and adapt your websites accordingly, that is if you want your websites to be displayed correctly by the web browsers going into the future.

I had briefly talked about how to create an HTML web page before; in this post, I will go into further detail using the new HTML 5 concepts. Now, let's start with our template.

TIP: If you need help with editing HTML files, you can check how to edit HTML files and if you need to understand how HTML elements are added to a web page, you can check how to add HTML elements.

HTML 5 Web Page Template

As already mentioned above, we will just focus on the basic structure of an HTML 5 document, so that you can have a simple template from which you can copy & paste to create new web pages easily while building your websites or web applications. We will list the core sections of the HTML 5 page one by one and provide a full code at the end.

Document Type Declaration

Every HTML document (web page) should start with the document type declaration (doctype). Some browsers may still render your website correctly even if you don't have this declaration but to comply with the standards and to ensure that your website will display properly on as many browsers as possible, you should always start an HTML page with the document type declaration.

Before HTML 5, when HTML 4 and XHTML was widely used, there were a number of doctype declarations for each version that was making it difficult to grasp for the newcomers and take many bytes of space in the document. HTML 5 got rid of all of them and reduced the doctype declaration to the following simple statement:

<!doctype html>

Remember to put this line to the very beginning of your HTML files.

HTML Tag

Immediately after the doctype declaration comes the <html> element as follows:

<!doctype html>
<html>

</html>

You don't need to but if you would like to specify the language of your web page, you can use the lang attribute of the html element. For example, if your website is in English, you can specify its language like the following:

<!doctype html>
<html lang="en">

</html>

You can find a list of HTML language codes here.

TIP: If you need to have different languages on different sections of your web page, you can use the lang attribute for HTML elements separately.

Head Tag

The first element within the html tag will be the <head> element which will store some useful information about the web page such as its title, character set, description, external resources and so on.

<!doctype html>
<html>
<head>
    
</head>
</html>

Character Set

Inside the head tag, we start with declaring the character set (charset) of the page:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
</head>
</html>

Unless you are using a specific character set on your website based on its language and content, for a general website in English, utf-8 is the charset you should be using.

Page Title

After the charset declaration, we add a title to our page using the <title> tag:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example Title</title>
</head>
</html>

The title is the title of the web page and it should briefly describe what the page is about. The reason we put it after the charset declaration is because the charset affects the title too.

Page Description

Although it is not a must, you can add a description to your page using the meta description tag as follows:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
  <meta name="description" content="Provide a brief description about your page here.">
</head>
</html>

The main purpose of this description is to give some information about your page to those who find it on a search engine. It is a useful tag to have but know that search engines do not always display the description depending on the search query and how relevant your page content and description are to that query.

Viewport Tag

If you are building a responsive layout and want your website to be displayed properly on all devices and screens, you should use the meta viewport tag.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
  <meta name="description" content="Provide a brief description about your page here.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</html>

Setting the width as the device-width and setting the initial-scale to 1 is enough in most cases, if you would like to learn more about how to set the viewport tag properly, you can check this page.

External Resources

External resources are usually style and scripts that are not stored on the current page. They can be files that are hosted on your website or files that are hosted on other websites. The following shows how to add a CSS style file and a JavaScript file to your page:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
  <meta name="description" content="Provide a brief description about your page here.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/style.css">
  <script src="/script.js"></script>
</head>
</html>

You can add multiple external resource files if you wish and also you can use inline styles or scripts like the following:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
  <meta name="description" content="Provide a brief description about your page here.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  ....
  </style>
  <script>
  ...
  </script>
</head>
</html>

Page Content

The content of an HTML page goes into the <body> tag. You can use HTML tags such as divisions, articles, sections, paragraphs, images, links, lists and others to create your page content.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
  <meta name="description" content="Provide a brief description about your page here.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/style.css">
  <script src="/script.js"></script>
</head>
<body>
  <!-- Page content goes here. -->
</body>
</html>

This concludes our basic HTML 5 web page template. You can simply copy & paste it to create new HTML pages easily. You can continue learning about HTML by visiting our HTML Tutorial.

I hope that this tutorial will help you start with HTML 5 and please let me know if you have any questions.

Advertisement

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in