Introduction to HTML

HTML Introduction

<< Previous

Next Chapter >>

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

<< Previous

Next Chapter >>

HTML Introduction

HTML5

HTML 4.01

XHTML 1.0

Top Tutorials

Top References

Top Examples

Web Certificates