When HTML5 was introduced, some code changes needed to be when creating an HTML5 page as opposed to an HTML4 version.
Changes include replacing some of the <div> elements with new elements in HTML5, such as <main> and <section>.
The start of the HTML5 element should include the DOCTYPE declaration on the first line.
<!DOCTYPE html>
Like other versions of HTML, a pair of <html> tags should proceed the doctype declaration and within these tags, <head> and <body> tags follow.
Within an HTML5 page, the <meta>: tag contains a new <charset> attribute which 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 as the chrset in your web pages, as it simplifies character handling in documents using different scripts.
Additional <meta> tags that can be added to your HTML5 document include the tag with a <http-equiv> attribute.
The meta tag, and the value specified below in the content attribute 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 the the IE9 address bar does not show up the Compatibility View button.
A viewport attribute 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 value specified 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.
You can also pass in minimum-scale and maximum-scale which specifies the minimum and maximum amount the visitor can zoom on the page.
Similarly, by adding user-scalable=no, you can prevent the web page from being zoomed in and out.
An example HTML5 document with the some of the above meta information in might look like the below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
Instead of using <div> nodes to define your header and footer containers, you can now use <header> and <footer> HTML5 elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>
If the navigation items are deemed as a ‘main group of navigation items’ in the HTML5 document, you can replace this <div> with the <nav> element.
<header>
<nav class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
Content that is considered the ‘main’ content of the website, and doesn’t contain repeated elements that appear across all web pages (such as the header navigation), can reside in a pair of <main> tags.
There should only be one pair of <main> elements per HTML5 page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
<main class="main">
<div class="intro">
<div class="intro-title">
<h1>Intro Title</h1>
<p>Intro content</p>
</div>
</div>
<div class="services">
<h2>Services</h2>
<p>Services content</p>
</div>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>
You can use <section> elements to define a generic section of a document. In the code snippet above, the <div class="intro"> and <div class="services"> could both be replaced with <section> elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
<main class="main">
<section class="intro">
<div class="intro-title">
<h1>Intro Title</h1>
<p>Intro content</p>
</div>
</section>
<section class="services">
<h2>Services</h2>
<p>Services content</p>
</section>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>
In conclusion, the learning curve for constructing an HTML document using the 5th version of the markup language isn’t too steep.
Creating an HTML page will provide your website with clean markup, improve SEO and usability and user experience.