HTML document layout

December 2016

HTML document

An HTML page is a simple file containing text formatted with HTML tags. Traditionally, the file is given an .htm or .html extension, but a web page may have other extensions as well.

A web page can be built from even the most basic text editors (such as a notepad application, for example), but there are also more advanced editors out there.

WYSIWYG ("What You See Is What You Get") editors are graphical-interface editors for working on a web page so as to better visualize what visitors to the site will see. With this kind of editor, tags can be added with just a mouseclick, and their attributes can be modified by entering their properties in a form. However, in order to get the best possible use out of this kind of editor, it helps a great deal to already have a good understanding of HTML.

There are also HTML editors which display tags, attributes, and their values in different colors in order to make them easier to read. They sometimes include tools for checking whether the HTML code is valid.

Traditionally, the file is given an .htm or .html extension, but a web page may have other extensions as well, including:

  • .asp for a page generated dynamically by ASP (Active Server Pages);
  • .cgi for a page generated dynamically with CGI (Common Gateway Interface);
  • .php, .php3 or .php4 for a page generated dynamically in PHP;
  • .pl for a page generated dynamically in Perl (Practical Extraction and Report Language);
  • etc.

HTML Document Layout

An HTML document begins with the tag <HTML> and ends with the tag </HTML>. It also contains a header describing the title of the page, and a body where the page's content is located.

The header is delimited by the tags <HEAD> and </HEAD>. The body is delimited by the tags <BODY> and </BODY>.

For example, this is a very minimalist HTML page:

<HTML>
<HEAD>
<TITLE>Page title</TITLE>
</HEAD>

<BODY>
Page content
</BODY>
<HTML>

Document Type Declaration

The HTML page should include the document type declaration, a reference to the HTML standard being used, in order to specify which coding standard the page employs. The declaration is made by adding a line like this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>...</HEAD>
	<BODY>Page content</BODY>
</HTML>

This indicates which DTD (Document Type Definition) is being used. The DTD is a reference to the characteristics of the language being used. The table below summarises the declarations for the main versions of HTML:

Version Declaration
HTML 2.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//EN">
HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01
  • Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
  • Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
  • Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Related :


Disposición de documentos HTML
Disposición de documentos HTML
Structure d'un document HTML
Structure d'un document HTML
Struttura di un documento HTML
Struttura di un documento HTML
Estrutura de um documento HTML
Estrutura de um documento HTML
This document entitled « HTML document layout » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.