Versión en español



 


Tutorial: An HTML document structure


Table of contents


With this tutorial you will learn the HTML document structure and the way it's divided, as well as what information you can place in each one of these divisions. We'll also set the document's type and the basis to design an HTML document compatible with the XHTML code.

The !DOCTYPE declaration

Every well written HTML document begins with a basic declaration that defines what type of document it is. This declaration is made using the HTML !DOCTYPE tag and is the very first thing in all the document. It's intended to tell the processing agent (e.g., browser, search engine, etc.) for which standard is designed the document that's about to process.

A normal declaration for a document written according to the XHTML 1.1 standard should look like this:

Code begin<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
Code end

To see other document types declarations please refer to the HTML !DOCTYPE tag reference.

The main container: html tag

The html tag acts as a container for the whole document. With the exception of the HTML !DOCTYPE tag every single character in the document should be in between the html start and end tags. The html tag can also be used to define the language of the contained document through the "lang" attribute.

When writing XHTML code there are two things to take into account. The first one is that the "lang" attribute (for every tag supporting it) receive a different denomination: "xml:lang". This doesn't mean that the language codes are changed, only the attribute name is different. The second consideration, is that the attribute "xmlns" must also be defined for the html tag. A common HTML document compatible with the XHTML code standard should have this basic definition:

Code begin<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
...Head's content...
</head>
<body>
...Body's content...
</body>
</html>
Code end

Subsequently the content of the html tag can be basically divided in two parts: the head (HTML head tag) and the body (HTML body tag).

The document's head

The head of an HTML document acts as a container for many particular information that's defined through a set of tags. All the information contained in the document's head is loaded first, before any other thing in the document, as it's defined before the body segment. Given that everything in the head of an HTML document is non-visual information (except for the title), the head segment is loaded before the document can be shown, which can be useful to define many characteristics that need to be pre-loaded (e.g., scripts).

An HTML document's head is enclosed by the HTML head tag and can contain some of these tags definitions:

Note that we've only described briefly the tags listed above. You can find more information about the use of them in the resources specified for each one. Here is an example:

Code begin<head>
<title>The HTML code explained</title>
<meta name="keywords" lang="en" content="HTML, code, explanation" />
<meta name="description" lang="en" content="Full explanation of the HTML code." />
<meta name="Author" content="Patrik Peterson" />
<style>
table {
border-width: 100%;
border-color: black;
}
</style>
<script>
function sum(amount) {
result += amount;
}
</script>
<link rel="index" href="../index.html" />
<link rel="print" href="printer.html" />
</head>
Code end

The document's body

The body is the container for the visual part of a document. All the things written here will be shown when the document is finally rendered. Most of the tags in HTML can be inserted in the body section (inside the HTML body tag) and will shape the visual aspects of the document.


Next tutorial: Links in HTML >>


Bypass footer options  |   Send to a friend Send to a friend  |  Post to del.icio.us Post to del.icio.us

Digg this page Digg this!  |  File on Furl File on Furl  |  Add to Yahoo! MyWeb Add to Yahoo! MyWeb

Bypass W3C declarations | 

Valid XHTML 1.0 Strict  |  Valid CSS Why should you trust us? Click the images on the left to see how seriously we write our own pages, then make your choice.

Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0. This website gives its best effort to achieve the Level Triple-A Conformance, W3C-WAI Web Content Accessibility Guidelines 1.0. If you find any detail or error that we didn't see, don't hesitate and let us know.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web.

 Link to us  |  Contact us  |  Beyond HTML  |  Tools and resources  |  Sitemap  |  Webmaster