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.
An HTML document is basicly separated in two segments: the head (HTML head tag) and the body (HTML body tag), both contained by the html tag. You add a Document Type Declaration on top of it and get the basic document structure for a web page.
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.0 Strict standard (the one we recommend you to use) should look like this:
To see other document type declarations please refer to the HTML !DOCTYPE tag reference.
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 XHTML 1.0 Strict standard should have this basic definition:
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 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:
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.
For this tutorial, we're going to build a basic document structure that will be useful for the development of the following tutorial practices.
To begin with, we'll set the first thing every document should have in order to fit the standards: the Document Type Declaration (DTD). In this example, and because we think it's the best choice (the latest version that gives little troubles of browser compatibility), we'll build an XHTML compliant document. To do so, we first check the reference for the HTML !DOCTYPE tag, from where we'll get the right declaration.
The previous declaration will stablish what can or cannot be done in our document.
The next step in our practice is to define the html tag inside of which the whole document will be enclosed. With this tag, we'll also set two parameters: the XML Name Space, through the "xmlns" attribute, and the language of the document through the "xml:lang" attribute (note that other standards not compatible with XML, like HTML 4.01, may use the "lang" attribute instead). The value for the "xml:lang" attribute can be obtained from this list of language codes.
Now we'll add two important parts of any document: the head and the body. Both of the tags, the HTML head tag and the HTML body tag, will be inserted, in that order, as content of the html tag. Even when both elements have many attributes available, we wont use any of them as there's not need to in this example (as in most basic documents). To save steps we'll add both at the same time.
From here, we'll just place an title in the head; the content of the body will be left for further tutorials.
Remember that the title should describe in a short way the content of the document. We'll place the title using the HTML title tag.
That's it. The main structure for a basic document has been set. This "frame" can be reused to build other documents, and will actually be used in the next tutorials. Get ready!