Basic HTML5 Web Page Code
Outline of a Basic HTML Document
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>
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.
Easy Code Validation
No more coding errors.
HTMLPad 2014 makes validating your code so easy, there's no reason not to do it.
Finish your HTML document. Click Tools then W3C HTML Validator.
Why upload errors in your HTML code?
Download your free trial of HTMLPad 2014
Basic HTML5 code for a web page:
<!DOCTYPE html>
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Basic Code for W3C Validation
<!DOCTYPE html>
<html>
<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.
The HTML page on the left would produce to erros in the Validator. The page on the right would Validate as HTML 5 code.
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> <!--required-->
<META> <!--charset required-->
<STYLE></STYLE>
</HEAD>
Head Section Contains:
- The Title of the page. (Required and cannot be empty)
- Meta tags (charset required)
- Embedded Style Sheets
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>
This is the same 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.
See also: Header Element