HTML Introduction for Beginners

What is HTML?

HTML stands for Hypertext Markup Language. Many people think HTML is a programming language but it is not. It is a markup language that describes the structure of a web page.

In simple language, you can imagine a whole building as a website. Each floor of that building is a webpage. Every floor (webpage) may have different structure.

You can create this structure using html. HTML does not provide any dynamic functionality.

It allows creating sections, paragraphs, headings, links, blockquotes, display image, text and forms on web pages and applications.


How Does It Work?

To create HTML structures elements and tags are used. Tags are the part of an element. Element name surrounded by angle brackets. For example, <p> is an html tag.

<p> this is content </p>

HTML tags normally comes in pair, opening tag and closing tag like <p> and </p> Closing tag looks like the opening tag just contains a forward slash before the tag name.

The content you want to show on your web page will go between this opening and closing tags. Tag does not show up on web page.

There are many tags in HTML for paragraph, heading, link, image etc. We will discuss all of them in detail in later tutorials.

The opening tag, closing tag and content together is the HTML element.


HTML Basic Format

OUTPUT

Example Explanation

  • <!DOCTYPE html> is the declaration that defines this document will be in HTML5. There are 6 versions of html and HTML5 is the latest one.
  • <html> element is the root of every web page. All tags and content will go inside this element.
  • <head> element contains all the information those are not visible in a web page. Title, Meta description, keywords, scripts all these will go inside this element. This section is very important for website SEO.
  • <title> element declare the title of a web page. This title represents what your page is about to say.
  • <body> element contains all the visible content in the web page. You need to put the contents inside this element that you want to present to your users.
  • <h1> element defines the large heading. There are total 6 heading tags in html. They are different in size.
  • <p> element defines the paragraph. You need to use this to create paragraph sections.

This is the basic structure of an html page. You have to follow this structure in order to create a page.


Web Page in Browsers

We visit websites using a browser. The main function of a web browser like Chrome, Firefox, Safari, and IE is to read HTML document and display the contents.w

web page in browser html introduntion

Browsers do not display html tags. By seeing those tags, browser understand how to display the main content inside the page.


HTML Web Page Structure

We have already discussed about the basic structure of a web page. Everything goes inside the <html> element. Because this the root element.

Other than this, a webpage has two main section. One is head section and another is body section.

From <head> to </head> is the head section. In addition, from <body> to </body> is the body section.

Head section contains all the Meta information. This is top part of a document. Body section contains the visible contents for the web page.

You can create as many sections you want in this body section to decorate you webpage. Like header, sidebar, footer etc.


HTML <!DOCTYPE>

The <!DOCTYPE> represents the type of a document. It declares the html version for the web page.

You must declare <!DOCTYPE> at the top of your document, before the <html> tag. There are different rules to declare this in different version of html.

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Note: The <!DOCTYPE> is not case sensitive. You can use uppercase as well as lowercase if you want. Both works in the same way.


HTML Versions

HTML first developed by Tim Berners-Lee in 1990. First version came out in 1991. At that time, very few people were using this.

However, day by day, use of html increased. Greater demand was placed on websites in terms of formatting and interactivity.

To fulfill those demands html came with different versions time to time to add more features.

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

Prerequisites

Before going to this tutorial, you should have basic knowledge about any operating system like Windows, Linux or Mac.

There is no programming knowledge is necessary to learn html. Having basic knowledge of computer and internet is important for better understanding.

Most importantly, your willingness to learn a new thing is necessary. I hope you have the courage and determination to explore the new.

This was HTML introduction for you. So, let’s jump into the next tutorial and start our journey to the programming world.