HTML5 Introduction

27th July 2016

HTML5 is the fifth and latest revision of HTML. Its initial release was in October 2014 and includes features that natively support multimedia and graphical content.

To get started with HTML5, declare that the document contains HTML5 markup by using the HTML5 doctype declaration.

<!DOCTYPE html>

Within an HTML5 page, the charset should be declared. This is usually set just after the opening <head> tag within the pair of <html> tags.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
</html>

It is recommended that you use UTF-8 in your Web pages, as it simplifies character handling in documents using different scripts.

Within a basic HTML page, there are other tags to be made aware of.

  • The content between <head> and </head> provides information about the document
  • The text between <title> and </title> provides a title for the document
  • The content between <body> and </body> describes the visible page content
  • The text between <h1> and </h1> describes a heading
  • The text between <p> and </p> describes a paragraph

A basic HTML5 page might look like the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Here is some content.</p>
  </body>
</html>

However, there are also some other handy tags we can add to the document.

The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

It’ll also ensure that no compatibility icon appears in Internet Explorer 9.

A viewport meta tag gives the browser instructions on how to control the page’s dimensions and scaling.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The ‘width=device-width’ segment sets the width of the page to follow the screen-width of the device the browser is loaded on.

The ‘initial-scale=1.0’ segment sets the initial zoom level when the page is first loaded by the browser.

Putting everything together, a basic HTML5 template should look like the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Here is some content.</p>
  </body>
</html>

Which will look like the following when loaded in a browser:

HTML5 Introduction