HTML Document Structure
Jakob Jenkov |
In this text we will look at the basic HTML document structure. Here is an example HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
Visible Page Content
</body>
</html>
Every HTML document (page) should include a doctype declaration plus a <html>, <head>, <title> and <body> element. These elements are explained in the following sections.
Doctype
The doctype declaration must be at the top of the document. The doctype is not an HTML element, even though it looks a bit like it. The doctype tells the browser what version of HTML that is used in the document. Here is an example doctype declaration for a HTML4 document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
You do not need to understand the different parts of the HTML4 doctype if you are planning to use the HTML4 elements in an HTML5 document. The HTML5 doctype simply looks like this:
<!DOCTYPE html>
The doctype declaration is actually optional. If you leave it out, the browser will try to guess what version of HTML you are using.
The html Element
The <html> element marks the beginning and the end of the HTML document. All HTML content has to be within the start and end tag (<html>...</html>).
The head and title Elements
The <head> element contains all the page information which is not shown in the browser. For instance, the <title> element, metatags and more elements which will be covered in later texts in this tutorial.
The <title> element contains the page title, which will be shown in the web browsers title-bar. The title should match the content of the HTML page, meaning it should tell what the page contains. The <title> element can be defined individually for every single HTML page.
Here is an example <head> element with a <title> element embedded:
<head><title>Page Title</title></head>
The <head> and <title> elements are actually optional. You can leave them out if it makes more sense in your concrete HTML page.
The body Element
The <body> element contains the visible page content. It can contain text, images, graphs, forms, tables etc. The following texts in this tutorial will describe the most common HTML elements used inside the <body> element.
| Tweet | |
Jakob Jenkov | |
