Structure of an HTML document

An HTML document begins with a document type declaration, a short string indicating what syntax and version it is written in, for example HTML 4.0 Strict. This information is necessary for the browser to identify the appropriate interpretation and display rules for the specific document, and it is for this reason that the declaration must precede the actual document.

Each version of the HTML language prior to the fifth, i.e. up to HTML 4.01 or XHTML 1.1, has a syntax formally defined by a document type definition (DTD) which, published on the web by the W3C, indicates, for each version, which elements, attributes and entities can or should be used, and in what way; therefore in these cases the document type declaration must (may, in the case of XML variants) also include the URL of that resource. However, the fifth version of HTML does not have any DTDs, so in these cases the initial declaration simply reads “HTML”.

To declare a document that will use the HTML5 standard, use the <!DOCTYPE html> tag.

After the declaration of the document type, the HTML document presents a nested tree structure, made up of sections delimited by suitable tags which in turn contain smaller subsections, always delimited by tags.

The outermost structure is the one that delimits the entire document, except the DTD, and is between the <html> and </html> tags.

Within the <html> tag, the standard always provides for the definition of two distinct sections arranged in an ordered sequence:

the header section, delimited between <head> and </head> tags, which contains control information not normally displayed by the browser, with the exception of some elements
the body section, delimited between the <body> and </body> tags, which contains the actual information part, i.e. the text, images and links that make up the part displayed by the browser.
Below this general subdivision, the standard does not provide for particular obligations regarding the order and positioning of the further subsections within the header or body, apart from the indication of compliance with the correct nesting (the subsections must overlap, i.e. each subsection must be closed before starting the next subsection), thus leaving complete freedom to the developer or designer as regards subsequent structuring and organization.

Head tag

The tags used in the head section are typically of a different type than those used in the body section, being intended for different purposes. The tags used in the head section are normally not displayed by the browser but serve as control and service information such as:

metadata to convey useful information to external applications (e.g. search engines) or to the browser (e.g. character encoding, useful for displaying non-Latin alphabets)
metadata of type http-equiv to check for additional information in the HTTP protocol
links to external service files (CSS, scripts, icons visible in the browser address bar)
inserting scripts (executable code) used by the document
style information (local CSS)
the title associated with the page and displayed in the main browser window

Body tag

Within the body section, which encloses the viewable part of the document, specific tags are used for formatting the contents accessible to the end user, i.e. for controlling:

headings (chapter titles, paragraph titles, etc.)
text structures (indented text, paragraphs, etc.)
text appearance (bold, italic, etc.)
lists and lists (numbered, generic, definition)
electronic forms (user-fillable fields, clickable fields, drop-down menus, buttons, etc.)
hyperlinks and anchors
generic layout of the document
inserting images
insertion of multimedia content (audio, video, animations, etc.)
insertion of interactive contents (scripts, external applications)
Among those listed above, the <a> tag is the one that plays a key role as it describes a connection (or link) to another hypertext document allowing, with a click of the mouse or with a keyboard operation, to leave the page or the site you are viewing and load the one indicated by the link, thus performing the navigation function typical of Internet use.

Leave a Reply