This is part of a series on current web development and design fundamentals

HTML5 DOCUMENT Structure

There are two key tags that mark a html file as HTML5, the new and simpler doctype preamble at the top and the new and simpler meta tag setting the character set to HTML5's default which is UTF-8. 

Let's go through these two tags next and finally show the most basic HTML5 file content that could be used as a starting point when creating a new HTML5 page.



The doc tag: <!DOCTYPE html>

The first tag in a HTML5 web page is simpler than older html standards. It's now simply <!DOCTYPE html>

It's referred to as the preamble at the top of all HTML5 documents and it's purpose is to prevent browsers from switching to the so called quirks mode (it informs the web browser that this is a HTML5 web page and to expect HTML5 elements).

Currently all major web browsers support this tag (Internet Explorer, Chrome, Safari, Firefox and Opera).


The meta tag: <meta charset="utf-8">

The first meta tag placed in side your <head> section is the meta tag specifying the character encoding of the document. It is now simply <meta charset="UTF-8">

If your web page will be using a different character set (think international formats) then this meta tag's value needs to be set accordingly.

For security reason (to prevent certain types of attacks) HTML5 restricts character sets to those compatible with ASCII and using at least 8 bits per character encoding.

Currently all major web browsers support this tag (Internet Explorer, Chrome, Safari, Firefox and Opera).


Basic html5 document structure

Before we move on the actual elements (semantics) here's a basic HMTL5 document which can be used as a starting point for a new web page.

HTML5 Document template (the very basic required structure)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Title of the web page</title>
	</head>

	<body>
	  This is where your displayed content will be defined using element tags.
	</body>
</html>

In the next part we'll continue our introduction (revision) of HTML5 and look at semantics. HTML5 semantics provide a better way to describe the document structure and content. Using these semantics helps even social platforms and search engines better understand what they can automatically find on your web page instead of trying to interpret how to show a preview, summary or navigation links etc.