Introduction

The World Wide Web (www) and its publishing language, the HyperText Markup Language (HTML), were developed between the years 1989 and 1991 by Tim Berners-Lee at CERN in Geneva, Switzerland. The world's first website was hosted on Berners-Lee's NeXT computer.

tim berners lee Tim Berners-Lee. © 1994-2016 CERN

HTML is the main markup (formatting) language for the Web. The basic building blocks are known as elements, which consists of a pair of starting and ending tags. For example, a paragraph element begins with the start tag <p> and ends with the end tag </p>.

Since 1991, there have been many versions of HTML released: HTML 2.0 (1995), HTML 3.2 (January, 1997), HTML 4.0 (December, 1997), HTML 4.01 (December, 1999), XHTML (2000) and the latest HTML5 (October, 2014).

Below is an example of a very basic HTML5 document

				
					<!DOCTYPE html>
					<html lang="en">
					<head>
						<meta charset="utf-8"/>
						<title>Title of this Page</title>
					</head>
					<body>
					    <p>This is a paragraph.</p>
					</body>
					</html>

The above lines can be typed in a text editor and saved as, say, example.html, and can be opened in a browser by double-clicking on it or by right-clicking on it and selecting open.

The <!DOCTYPE html> declaration is placed at the very first line of the document before the html element. It declares to the browser that the document is written in HTML5. The html element begins with the <html> opening tag and ends with the </html> closing tag and the content in between describes the HTML document. It is also known as the root element. lang is an attribute of the html element which specifies the language of the page's content (en or English in our case). The head element provides general information about the page (via <metatag> tags) and also includes its title, styles and scripts (or links to them). <meta charset="utf-8"/> specifies the character encoding of the document as UTF-8. The main and visible content goes inside the body element which holds texts, tables, lists, hyperlinks, images, music, videos and other elements that is displayed in the browser window. In the above example, the body element contains a paragraph element <p>This is a paragraph.</p>, the text of which is displayed in the browser.

But not all tags have closing tags. For example, the <img> tag that defines an image content in a web page do not have a closing tag. It is self-closed with a slash at the end of it, like <img />. To insert an image, say daisy.png, into a document and display it at the height of 200px and width of 200px, we place it as 

				
					<img src="daisy.png" height="200px" width="200px" />

Here, src, height and width are known as attributes. Other examples of self-closing tags include <br/>, <hr/>, <input/>, <meta/>, etc.

The new elements introduced in HTML5 include

  • Semantic Elements - <article>, <aside>, <details>, <dfn>, <dialog>, <figcaption>, <figure>, <footer>, <header>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <ruby>, <section>, <summary>, <time>, <wbr>
  • Form Elements - <datalist>, <output>
  • Media Elements - <audio>, <embed>, <source>, <track>, <video>
  • Graphic Element - <canvas>

Besides elements, several new types and attributes for the <input> element were also introduced.

Notes

  • The lang attribute of the html element is optional, but recommended.
  • The standard character set from HTML 2.0 upto HTML 4.01 was ISO-8859-1, implemented as <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">.