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 in the first block would produce two errors in the Validator. The second block 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)
<link rel="stylesheet" href="style.css" type="text/css">
<style></style>

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>

Semantics 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 an attempt to make content more machine-readable for the disabled but also to make it more accessible to AI.

For newcomers learning Semantic Design early would be a wise decision.

Semantic simply means that you are using page elements designed for a specific purpose related to their name.

The New


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

👉See also: Header Element

🔺