The minimal HTML5 page

You can drag across this and copy it, then paste it into your text editor document. The red text explains the page; it can be deleted after you paste the code into your text document. See what it should look like this after you save it and open it in your browser.


<!DOCTYPE html>
<html>
<!-- THE HEAD SECTION contains instructions for  the browser,
with code  the browser will load first. NO CONTENT IN THE HEAD SECTION! -->
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>TITLE GOES HERE</title>
 <link rel="stylesheet" href="style.css" type="text/css" />	
</head>
<!-- BODY SECTION: ALL CONTENT goes between the beginning 
and ending body tags. -->
<body>
<!-- WRAPPER: The div tags (division) control space. The
wrapper div sets overall width and placement of the page 
using CSS. -->
<div id="wrapper">
<header>
 <h1>The header is your main identifier</h1>
 <h2>Put a consistent header on every page</h2>
</header>  
<!-- The MAIN tags define the main content section.  -->
<main>
<h1>Begin each page with an informative h1 heading</h1>
<p>
 Paragraph tags define the beginning and end of a paragraph. You 
 must have beginning and ending paragraph tags for every paragraph.
</p>
<p>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
 nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam 
 erat volutpat.
</p>
</main>
<!-- ASIDE defines a space for sidebar information -->
<aside id="sidebar">
<h1>Sidebars have their own text and heading styles to fit in
a narrower space.</h1>
</aside>
<footer>
<p>The footer contains provenance for the website, the 
who, what, when and where of how it was made. </p>
</footer>
<!-- The last three things on every page are the closing 
#wrapper,  body and html tags. -->
</div><!-- #wrapper -->
</body>
</html>


EVERYTHING on the rest of the page goes between the beginning and ending HTML tags. Note that the tags do NOT say HTML5. Web browsers still read HTML. The doctype tells the browser that the page contains HTML5. The HTML tag above includes specifications for language and character set.

The head section:

<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>TITLE GOES HERE</title>
 <link rel="stylesheet" href="style.css" type="text/css" />	
</head>

The head section contains further instructions for the browser, and it has code that the browser will load first to make the rest of the page work properly. At a minimum, the head section will contain:

NO CONTENT goes in the head section. Content means the actual text and pictures that will be displayed on your page.

The body tags:

 <body></body>