Basic HTML5 Page - Tags Required for W3C Validation

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.
<HEAD> <TITLE></TITLE>  <META>  <STYLE></STYLE> </HEAD>

Head Section Contains:

The Title of the page. (Required and cannot be empty)
Meta tags (charset required)
Embedded Style Sheets or add linked style sheet.

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.

<Meta> tags are also used by some search engines to index your HTML page. The basic format of a meta tag is:
<meta name="" content="">

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>
Best coded as:
<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.

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:
<body> <header><h1>Site title</h1></header> <nav>Site Navigation Device</nav> <div class="main"> Web page content </div> <div class="right"> Sidebar information </div> <footer>Footer information</footer> </body>

As opposed to:
<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>

And for the thesis author:
<body> <header class="top"><h1>Site title</h1> <nav>Site Navigation Device</nav> </header> <div class="main"> <article> <h1>Article title</h1> Article content <section> <h1>Section title</h1> Section content </section> <footer>Article footer</footer> </article> </div> <div class="right"> <aside> Sidebar information </aside> </div> <footer class="sitefooter">Footer information</footer> </body>

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

Free Tools We Recommend

Free Ebook How to Code in HTML5 and CSS3: "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
Free Logo Generator Turbologo.com: If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
FREE HTML Editor (Windows): NoteTab Light: All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp: Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users: If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.; For image resizing we've found the easiest Linux tool to be Krita.

Have you tried our Free Mobile Ready Template Kit? Download Template #402 - 6 Page Kit