HTML Tutorial: Beginners Guide to Learn HTML with Examples

HTML tutorial provides basic as well as advanced concepts of HTML. The guide is for beginners as well as professionals to learn all about HTML. Learn each topics one-by-one given with live examples with output. You can copy these examples and use anywhere on your projects.

Key Points of HTML

Full form of HTML is Hypertext Markup Language
The creator of HTML is Berners-Lee in the year 1991.
You can use many text Editors like Sublime, Notepad++, etc. to create and edit web pages.
HTML pages can be execute in all the major Browsers like Chrome, Firefox, etc.

What is HTML

HTML is a HyperText Markup Language widely used by many web developers to create web pages. The combination of these web pages makes a complete website which you can make live. By using HTML, you can add images, tables, lists and other elements required to create a static website.

A markup language is a programming language in HTML used to create interactive and dynamic web pages. These web pages are executed on browsers to display the website. The webpages displays the output and not the raw HTML codes.

W3C is the main maintainer of HTML and Tim Burners-Lee is the Inventor of the World Wide Web. On that time when Lee developing HTML. HTML pages are just a simple document as of below.

Test it Live

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML Example</title>
</head>
<body>
<h1>This is my First Heading</h1>
<h2>Simple HTML Example</h2>  
<p>This is my First Paragraph</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Simple HTML Example</title>

</head>

<body>

<h1>This is my First Heading</h1>

<h2>Simple HTML Example</h2>

<p>This is my First Paragraph</p>

</body>

</html>

Explanation of Example

To understand each section of the above example. Below is the description of each of the tags of a simple HTML example of the web page content.

<!DOCTYPE>: This tag used to describe the web document type. See HTML Doctype tag to see details about this. We can say this as the document type declaration. This validates the HTML document and tells us whether the document is of HTML5, 4 or other versions.

<html>: This tag used at the top and after Doctype tag. See HTML tag to see details about this. This is the main starting tag of HTML. Everything of HTML document comes inside the opening tag <html> and the closing tag with forward slash(/) </html>.

<title>: This tag used to describe the title of the web document. See the HTML title tag to see details about this. Check your browser title bar to see the output of this tag. This tag is useful when you want to specify the document title. A title is the main starting part of a web document.

<meta>: This tag used to describe the meta declaration of the web document. See HTML meta tag to see details about any page. A meta tag plays a significant role in the SEO part. There are many meta-types in a web document. Keyword meta-type is used to describe keywords for the web document. Description type used to specify the description of the web document.

<body>: This tag used to describe the main body part or the main content of the web document. See HTML body tag to see details about this.

<h1>: This tag used to describe the heading of the main content of the body. See HTML heading tag to see details about this.

<p>: This tag used to describe the paragraph inside the main content of the web document. See HTML paragraph tag to see details about this.

Use of HTML tags HTML Introduction

HTML tags are the key elements inside webpages. These tags are surrounded by angle barackets For exp: <html>, <p>.

Each tag has opening and closing tags. For example: HTML paragraph tag has opening tag <p> and closing tag </p>. Below is the example of the HTML paragraph tag.

<p>Paragraph content will go here.</p>

1	<p>Paragraph content will go here.</p>

There are many other elements available in HTML like forms, table, etc. You can add different form elements in the forms like inputbox, radio button, checkboxes and submit button. These forms can give you user input data on submission of the forms.

HTML create a static website to store in the web server or local server. However, you can create an interactive dynamic website by using the scripting languages like Javascript, JQuery and PHP.

HTML version list

Below is the HTML version list from the start to the end.

Sr. No.	Version Name	Version Year
1	HTML	1991
2	HTML 2.0	1995
3	HTML 3.2	1997
4	HTML 4.01	1999
5	XHTML	2000
6	HTML5	2014
7	HTML5.1	2016
8	HTML5.2	2017

You can also learn these scripting languages on this website in the other Tutorials. You can also take benefits from The Digital HTML Cheat Sheet.

HTML Reference

There are many HTML tags which you have to learn in the HTML reference chapter. The tags are useful for creating many other elements of HTML. So, don’t forget to learn all HTML tags given in sequence.

Tip: If you are a beginner and want to learn HTML completely. You should start learning each HTML tags and also learn how to use them. Move forward with the HTML reference and check each tags day-by-day.

Visit HTML references Chapter

HTML Examples

Learn HTML with live examples given in each topics of the tutorial. Each chapter contains many useful examples with ‘Text it Live’ button to check the live output.

Check TutorialDeep Live Editor

You can make changes to the examples and check live output of your code.

HTML Tutorial