HTML Tutorial

Chapter 1 - Introduction to HTML

HTML stands for Hyper Text Markup Language

It is a Markup language (not Programming or Scripting language) used to create webpages, which forms the part of a website.

An HTML document consists of various tags or elements which defines the structure of the webpage.

History of HTML

Tim Berners Lee, a physicist specified HTML and browser and server software in 1990s while the work was initiated in the 1980s while he was working at CERN.
HTML 2 was published as RFC standard in 1995
HTML 3.2 was published as a W3C recommendation in the 1997
HTML 4 was published in 1997 and was developed till 2000.
After a long gap, HTML 5 was published as W3C Recommendation in the year 2014.

Hello World in HTML

Let us start our journey with a Hello World code in HTML:

Open a text editor such as Notepad

Manually type or Copy & paste the following code in that file


<!DOCTYPE html>
<html>
<head>
<title>Hello world page title</title>
</head>
<body>
Hello World in Body
</body>
</html>

Save the file with an extension “.html”. For example, save the file as index.html
Now, open this file in a web browser such as Chrome/Firefox/Edge, etc.
If you open this webpage in a browser, you can see the output as below

Hello World in Body

Voila, you just finished writing your first Hello world code in HTML.

Explanation:

Let us first understand the script which we just wrote.

Whenever you start writing an HTML document, you should always start with the tag <!DOCTYPE html>. This will indicate the browser that this is an HTML5 document.

Next comes the <html> </html> tag which indicates the root of an HTML document. All the further elements or tags shall be typed within this <html> tags. <html> tag has two child elements as below:

<head> tag
<body> tag

<head> tag consists of various meta data information associated with that html document. This may include elements such as page title, links to CSS or Javascript files, search engine helper meta description tags, etc.

In the above example, you can see that the <head> tag further contains the <title> tag, which indicates the page title of the web page. You should be able to view this page title as “Hello world page title” in your browser’s tab name while you open this document.

<body> tag consists of the actual content which are displayed to the user in web browsers. This may contain page contents such as headings, normal text, tables, images, etc. We shall explore into the depth of HTML in subsequent tutorials.

Next Chapter Chapter 2 - HTML Elements