Introduction to HTML

HTML documents are the underpinning technology that makes up much of the Web. HTML allows documents to be linked together, which produces the structure of the Web. HTML documents are like electronic versions of paper-based documents. They allow the Web developer to structure the content of a web page into categories, such as headings, sub headings, paragraphs and tables. HTML describes the structure of a web page.

A HTML document is a plain text file containing HTML code. Usually a HTML document has the file extension .html or .htm .

HTML documents are made up of elements - each element is identified as they are enclosed in angle bracket. HTML elements follow a specific structure, as demonstrated by the following example:

HTML code is made up of characters. Some of the characters are enclosed in angle brackets: these are called HTML elements.

HTML elements are normally found in pairs (called tags) comprising an opening and closing tag. An opening tag contains a name, and the corresponding closing tag contains the same name, but the name is immediately preceded by a forwards slash.


The example below shows a paragraph element. It it possible to see two tags: one opening tag and a corresponding closing tag. The characters and elements between an open and closing HTML tag are said to be nested inside that particular HTML element. HTML tags act like containers - they contain other HTML elements and text. Let's take a closer look at this concept. In the above example the html element contains two elements: the head element and the body element. In turn, each of those elements contain other HTML elements. The head element contains a title element which in turn contains the text "Title of page". The type of the HTML element provides information about the type of content between the opening and closing tags. For example, in the example above the title element contains a piece of text. Because the text is enclosed between an opening tag and a closing tag, the text is the title of the page. The title of an HTML document is the text that is displayed in the title bar of the browser window. The opening tag of a HTML element can also contain additional information that provides details about the content of the element (metainformation). This additional information is called an attribute. An attribute is made up of two parts: a name and a value. The two components of an attribute are separated by an equals sign ("="). The example below shows how to set an attribute called lang to have the value en-us . The meaning in the example above is that the language of the text inside the paragraph element is English (US). If the text was provided in German, then the lang attribute could have been set to de (see below). For a complete list of language codes see ISO639-1

The structure of a HTML document and which HTML elements can be used are defined by a schema. The definition of schemas is beyond the scope of this module. In this module we will define HTML documents that conform to the HTML5 standard. We indicate that a HTML document should conform to a HTML standard by declaring a DOCTYPE element as the first element of the document. To indicate that a HTML document should conform to the HTML5 standard, the following element is included as the first HTML element in a HTML document: 

< !DOCTYPE html>

Structural HTML Elements

HTML provides a set of elements that allow the developer to define structure within an HTML document. It is possible to define that certain HTML elements are part of the main markup of the HTML document and that some other elements are part of the head of an HTML document. The element of a HTML document is the element that contains all of the content of a webpage. The body element of a HTML document is the element that contains metainformation about the HTML document, such as any additional resources that are required to view the web page. There are certain HTML elements that define structural features of the text, such as headings and paragraphs, and articles. There also also HTML elements that define semantic features of the text such as the meaning of acronyms and citations.

All HTML elements have the same fundamental structure. A HTML document contains a html element as its root element - that is, all other HTML elements are nested within the html element. There is one exception to this: the DOCTYPE element, which defines the format that the HTML document should conform to.

Simple Webpage Example

There is useful video recorded by Dr. Sam Wilson on how you can start with writing a simple web page and embed different elements

Summary

  • HTML documents are plain text files, usually with the extension .html or .htm.
  • HTML uses elements to give meaning to text. Elements are indicated by the user of angle brackets. HTML elements almost always have an opening and closing tag.
  • Opening tags can contain addition information called attributes. Attributes are name, value pairs.