Outline of a Basic HTML5 Web Page

HTML is an acronym for HyperText Markup Language. It was invented by a Swiss guy Tim Berners-Lee somewhere between 1989 and 1992. We're studying version 5.

In HTML, words or letters enclosed in brackets, < > are called HTML tags.

HTML is not case sensitive. <HTML> is the same as <html>

Notice, that most HTML tags come in pairs, open and close.

Closing tags always include a forward slash.

Examples:
<html> </html>
<h1> </h1>
<strong> </strong>

Important! The <html> tag requires the lang attribute as shown below. It should correspond with the language the web page is written in.

The main sections of a basic HTML page are HEAD and BODY and are set off by sets of tags.

The head and body sections are located within the opening and closing HTML tags.

Basic HTML5 code for a web page:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
</body>

</html>

Basic Code for W3C Validation

<!DOCTYPE html>
<html lang="en">
<head>
<title>Cannot be empty</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

TIPS: It isn't that hard to create error free code if you start out right. Get into the habit of using the W3C Validator to check your web pages before uploading them. We prefer the Direct Input option.

The HTML page on the left would produce two errors in the Validator. The page on the right would Validate as HTML 5 code. lang and meta charset are required.

Note: Get a feel by testing the two snippets of code. Just copy and paste each block of code. When you open the Validator choose the Direct Input option. Paste the code in the box and click Check. To clear the box for the second test right click on the code in the box, choose Select All then cut. Copy and paste the second block. Rinse and repeat.

Head Section

The Head section of an HTML page is located right after the Opening <html> tag.

It contains your title tag, meta tags and style sheet information. The head section is used to communicate information to browsers and search engine bots.

The html

<html lang="en">
<head>
<title></title>
<meta>
<style></style>
</head>

Head Section Contains:

Page Title <title>For SEO</title> (REQUIRED - cannot be empty)

meta_tags
<meta  charset="utf-8">  (REQUIRED)
<meta name="viewport" content="width=device-width, initial-scale=1"> (For Responsive Design)
<meta name="keywords" content=""> (A list of keywords in the content)
<meta name="description" content=""> (A description of content)

Style Sheets:
Embedded
Linked

Do not confuse the <title> in the <head> section, with the main heading on your page. The Title in the <head> section is what appears on the bar at the top of your browser window. It is also used by search engines to index your page and should include strategic keywords.

See Meta Tags

Body Section

The<body> section contains all of the code for the page that will display in the browser window.

<body>
Code for page goes here.
</body>

Sematics of the Body Section

With the introduction of some of the new tags or elements in HTML5, there may be some confusion about the proper way to structure the body section of your document.

*Use of the new tags article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.

Someone writing a thesis, documentation for a product, a complicated law brief or a biography of the President, might require heavy editing that includes a lot of footnoting and references to bibliographies and other sources.

It might be to their advantage to use the new structuring elements: section, article, aside and hgroup.

For the rest of us the accepted methods of creating customized classes for divisions would suffice for creating our columns and rows and making use of the h1-h6 elements for structuring content.

For newcomers, a mix of the new and the old might make the code of a web page easier to read once all the content has been added:

The New

<body>
<header><h1>Site title</h1></header>
<nav>Site Navigation Device</nav>
<main>
Web page content
</main>
<div class="right">
Sidebar information
</div>
<footer>Footer information</footer>
</body>

The Old

<body>
<div class="heading"><h1>Site title</h1></div>
<div class="top-navigation">Site Navigation Device</div>
<div class="main">
Web page content
</div>
<div class="right">
Sidebar information
</div>
<div class="footer">Footer information</div>
</body>

Both are correct and a matter of taste or the needs of the author.

Helps

Free Tools and Resources

Need more advanced information? Visit our Web Developer Resources page for a collection of other great tutorials and reference guides on the subjects of HTML5, CSS3, Responsive Design and SEO.

Have you tried our FREE Responsive Design template kit? Download Template #402 - 6 Page Kit