Structuring Your HTML

Last update on: 05-08-2008
HTML defines three tags that are used to describe the page's overall structure and provide some simple header information. These three tags<html>, <head>, and <body>identify your page to browsers or HTML tools. They also provide simple information about the page (such as its title or its author) before loading the entire thing. The page structure tags don't affect what the page looks like when it's displayed; they're only there to help tools that interpret or filter HTML files.

In the strict HTML definition, these tags are optional. If your page does not contain them, browsers usually can read the page anyway. These tags, however, are required elements in XHTML 1.0. The most recent browsers already take advantage of XHTML.

The HTML document

Elements of an HTML page:

The first element on the code is known as I already mention the DOCTYPE element. Its purpose to notify the browser of the "flavor" of HTML used in the document. The DOCTYPE element used and will be used for all our examples refer to XHTML 1.0 transitional.
and the document type definition (DTD) that defines the specification. This is followed by the <html>, <head>, and <body> tags. In our example, the XHTML 1.0 Strict document type appears before the page structure tags:

The DOCTYPE element must always occur right at the beginning of the HTML document.

Next, note that the remainder of the document is enclosed by elements <html> at the start of the page and </html> at the end. These tags notify the browser that what lies between should be interpreted and displayed as an HTML document.

Although many modern browsers correctly display HTML without these tags, it is a bad practice to omit them. Even if the page is shown correctly on your PC, you have no idea what operating system and browser a visitor may be using, he may not be so lucky.

The document within these outer tags is split into two further section. The first is enclosed in <head> and </head> tags, and the second is contained between <body> and </body>. Essentially, the document's head section is used to store information about the document that is not to be displayed in the browser window, whereas the body of the document contains text to be displayed to the user via the browser window.

The <head> of the Document

We always studying our sample code, we can see that the head section of our simple HTML document contains only one line ; our "My Sample HTML Page" title enclosed in <title> and </title> tags.

Remember that the head section contains information that is not to be displayed in the browser window. This is not, then the title displayed at the top of our page text, as you can confirm in the image. Neither does the document title refer to the filename of the document.

In fact, the document title fulfills a number of functions, among them:

Search engines often use the page title (among other factors) to help them decide what a page is about.
When you bookmark a page, it is generally saved by default as the document title.
Most browsers, when minimized, displayed the title of the current document on their icon or Taskbar button

It's important, therefore to chose a meaningful and descriptive title for each page that you create.

Many other element types are used in the head section of a document, including link, meta and script elements although we don't give an account of them in these section.

The Document <body>

Referring again to our example, we can see that the document's body section is made up of the content we want to display on the page. This includes all the text and other content (links, pictures, and so on).

Basics of HTML's lessons:

Structuring Your HTML
The Title
Headings
Paragraphs
Lists
Comments
Tags Summary