Tutorials

HTML Introduction

What is HTML?

HTML is known as the markup language to describe web documents (web pages).

  • HTML denotes for Hyper Text Markup Language
  • A markup language is made up of markup tags
  • HTML documents consists of HTML tags
  • Each and every HTML tag describes different content of document

A Small HTML Document

 

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Try it Yourself

Example Explained

  • The <!DOCTYPE html> declaration is used to define this document to be HTML5
  • The text between <html> and </html> is used to describe an HTML document
  • The text between <head> and </head> is used to provide information about the document
  • The text between <title> and </title> is used to provide a title for the document
  • The text between <body> and </body> is used to describe the visible page content
  • The text between <h1> and </h1> is used to describe a heading
  • The text between <p> and </p> is used to describe a paragraph

Using the above description, a web browser will be displaying a document with a heading and a paragraph.

HTML Tags

HTML tags are called askeywords (tag names) which are surrounded by angle brackets:

<tagname>content goes here...</tagname>
  • HTML tags are coming in pairs like <p> and </p>
  • In a pair, the first tag is the start tag, the second tag is called as the end tag
  • The end tag is also written similar to the start tag, but along with a forward slash which is inserted before the tag name

The start tag can also be known as the opening tag, and the end tag can be known as the closing tag.

Web Browsers

The use of a web browser (Chrome, IE, Firefox, Safari) is for reading HTML documents and display them.

The browser will not be displaying the HTML tags, but uses the tags to for displaying the document:

HTML Page Structure

 

Given below is a HTML page structure visualisation:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Only the <body> section (the white area above) is displayed in a browser.

The <!DOCTYPE> Declaration

 

The <!DOCTYPE> declaration represents the document type, and helps the browser to display a web page correctly.

It must only appear once, at the top of the page (before any HTML tags).

There are different document types. To display a web page correctly, the browser must know both type and version.

The doctype declaration is not case sensitive. All cases are acceptable:

<!DOCTYPE html>

<!doctype HTML>

Common <!DOCTYPE> Declarations

 

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//NGO//DTD HTML 4.01 Transitional//EN" "http://www.ngo.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//NGO//DTD XHTML 1.0 Transitional//EN" "http://www.ngo.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

All examples and tutorials used at NGO are using HTML5.

HTML Versions

 

Since the early days of the web, there have been many versions of HTML:

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014