Introduction to HTML

About this Document

  This document is Copyright (c) Information Technology Group,, Alin Avasilcutei, Cornel Paslariu, Virgil Mager

Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.2
with no Invariant Sections, no Front-Cover Texts, no Back-Cover Texts.

This document is an introductory overview of the essential HTML concepts and elements required for building HTML documents, and is not intended to rigorously follow the specifications of any current HTML standard.

As with any presentation which is not intended to be an exact reproduction, this document occasionally contains original interpretations of some of the notions it presents. The reader is urged to only use this document as a "Getting Started" tool, and not to rely upon its content for reference information on the HTML language.

The reader of this document is assumed literate in programming, and familiar with the C programming language. For an introduction to the C programming language see The C programming language.

Introductory Overview

HTML (HyperText Markup Language) is a document format originally designed for embedding hyperlinks in text documents; however, later standards came to include advanced features such as embedding various types of multi-media objects (images, sound, movies, etc), enabling page interactivity via specialized objects (check-boxes, drop-down lists, etc), embedding scripting facilities, etc. Given the complexity reached by the current HTML standards, this tutorial will sart with an introductory overview of the basic organization principles of an HTML document (presented in a list format below), while a detailed presentation of the various HTML features will follow later throughout this document and in the other related documents contained in this package.


The diagram below presents the basic terminology that will be used throughout this document together with the way the terms relate to each other, and it is followed by a more detailed description for each of the included terms:

/---------> HTML Syntax <------------\
/ complies |syntax specified by
 / with |
 ^ \ ^
| \ contains |are instances of
 | \--------> HTML elements ------------/
| | ^
| | contain |
implements |interprets \---------/
(i.e. "contains") |
/--------------------- HTML Browser <-----------------------\
| | |
| |creates/accesses/destroys |
| | |
| | |
| | /--------------------------+
| | | |
| rendered by v v |
| /------------- Browser objects |
| | ^ | |communicate with
| | | | |
| | | \--------------------------/
| V |
\--> Renderer |
| |user-interface for
| |
| |
| | interacts with
\----------> Display objects <------------------------ USER
generates ^

The rendering process
The way an HTML document is actually rendered inside a browser window is determined by the HTML rendering rules; these rules are part of the HTML specifications, and they are implemented by the HTML browsers as a key part of their functionality. In other words, whereas displaying an HTML file inside a text editor will only show a long string of characters, opening the same file inside an HTML browser will actually produce the graphical interpretation of the HTML document as it was designed by the document's author.
This paragraph is an introductory overview of the general rendering rules as specified by the HTML language, but it is not intended either to be rigorous or to cover all the special cases that may occur in a real-life HTML document.

Overall Structure of an HTML Document

According to the DOM, an HTML document consists of a single element of type 'html', while the rest of the document structure results from the containment of various other HTML elements inside the 'html' element. Thus, the 'html' element acts as the root of a containment hierarchy of elements which together describe the HTML document

Header elements

This section introduces the most frequently used types of HTML elements that can be contained inside the 'head' element of an HTML document, together with a very limited sub-set of attributes that are applicable to each of them.

Syntax of the 'head' element:
elements contained in the document's 'head' element

The most common elements that can be contained inside the 'head' element are the following:

Body elements

This section introduces the most frequently used types of HTML elements that can be contained inside the 'body' element of an HTML document, together with a very limited sub-set of attributes that are applicable to each of them.

Syntax of the 'body' element:
<body bgcolor="document background color in 6-digit hex format RRGGBB, e.g. #FF8301">
[elements contained in the document's 'body' element]

The following list presents the most common types of elements that can be contained inside the 'body' element, together with their rendering rules-based classification as inline or block element types:

Multi-frame Documents

A multi-frame HTML document is a container for other HTML documents, where the contained documents may themselves be either single-frame or multi-frame documents. In order to display multiple documents inside a single display area (e.g. a browser window or a document page), the graphical display area is split into adjacent "parcels", with the dimension and positioning of the parcels being determined by the dedicated HTML 'frameset' element.

The graphical positioning of the display parcels in which the contained documents are individually displayed is determined based on several attributes attached to the 'frameset' element; similarly, the various graphical properties of the borders that separate a multi-frame document's display parcels (e.g. the visibility of the borders, their thickness, etc) are also determined via attributes attached to the 'frameset' element.