Pink White Black Purple Blue Textile Web Scripts

The Structure of the HTML Document.

This tutorial studies the organization of information in an HTML document, analyzing its basic structure, how it is divided, and what type of content corresponds to each section.

TABLE OF CONTENTS

THE BASIC STRUCTURE

Before you can start adding content to your document, there is a basic structure that you need to implement in your file. This structure is not only required for your document to conform to the standard, but it will also allow you to provide useful information about your document. The basic structure of an HTML document is made up of the following sections or elements:

The DTD ( declaration!DOCTYPE ).
The main container ( elementhtml ).
The header section ( elementhead ).
The section of the body ( elementbody ).

THE! DOCTYPE DECLARATION

Every HTML document must begin with a declaration that identifies its type. This is a very useful measure that informs browsers in advance what type of document they are about to process, allowing them to adjust their processing mechanisms accordingly.

The DTD declaration is inserted by means of a special tag ( !DOCTYPE) that takes a particular form for each type of document. This statement can only be present at the beginning of the document. The following example shows the DTD for an HTML 5 document :

<!DOCTYPE html>

Unless you are writing documents for a very particular scenario, this is the declaration you will use. With the arrival and establishment of HTML 5 as the standard for the web, other DTDs have lost importance and have been forgotten. To see other DTDs go to the declaration!DOCTYPE reference.

THE MAIN CONTAINER: THE HTML ELEMENT

After you've placed the DTD right at the top of your document, it's time to create the main container: space where the entire document (with the exception of the DTD ) will fall. This container is inserted with the elementhtml , and in addition to acting as a container, it offers a good opportunity to define the language used by default in the document, through the global attribute lang .

Declaring the language used in the document is of particular importance for users who rely on speech synthesizers, as it provides key information for determining the correct pronunciation.

The following example shows the structure of the main container (including the language used in the document) and indicates where the elements of the document should be located.

<html>
  ...Elementos del documento...
</html>

The content of this element can, in turn, be divided into two sections: the header ( head) and the body ( body).

THE DOCUMENT HEADER

The header section ( head) is a container for metadata about the document. This metadata can be classified into five categories according to the element they use.

The title of the document: briefly describes the topic covered in the document. This item is required and is inserted with the itemtitle .
Style Declarations - Group style declarations used to set presentational attributes for document elements. It is inserted with the elementstyle .
Client-side scripts: insert programs that provide functionality and interactivity. It is declared with the elementscript .
Meta Declarations: Define custom attributes and values. They are inserted with the elementmeta .
Relational information: indicates resources that, in some way, are related to the document. It is inserted with the elementlink .

The following example shows the declaration of the header block ( head) of a document with some of the elements previously described.

<head> <title>Eppur si muove</title> <meta name="keywords" content="Galileo Galilei, heliocentrismo, geocentrismo"> <meta name="description" content="Este document trata brevemente los trabajos de Galileo Galilei acerca del Heliocentrismo..."> <meta name="Author" content="Mark Rottenberg"> <style> table { width: 100%; border-color: black; } </style> <script> result = 0; function increment(amount) { result += amount; } </script> <link rel="index" href="../index.html"> <link rel="alternate" media="print" href="version-para-impresora.html"> </head>

It might be beneficial to consider that the information declared in this block will be loaded, given the order of precedence, before the elements in the body of the document ( body). This is a good opportunity (often taken) to preload elements such as scripts or style definitions.

Must Read, HTML Articles