Introduction to HTML

Overview

HTML, the full abbreviation is Hyper Text Markup Language, is a standard markup language used to take control of the web pages.

It allows you to design web pages using a variety of HTML tags.

What is HTML?

⦁ In simple words, HTML is a computer language which is founded to create the basics of web pages.

⦁ It is the combination of Hypertext and Markup language.

⦁ HTML elements are represented by tags, which are known as the building blocks of HTML pages.

⦁ HTML tags are used to label different kinds of content, such as ‘heading’, ‘title’, ‘paragraph’, ‘image’ and others.

⦁ HTML tags are never shown in the browser, but they are used to shape the content of the page.

⦁ Using HTML you can create your own website in an easy and simple way.

As compared to other languages, this markup language is quite simple and easy to learn. No need to learn the complete language, as learning small parts can give a lot of benefits. The more you learn, the better you create a web page.

The HTML document is written on the Notepad, WordPad, and Word Processor or in Simple Text. After creating the HTML document, you can open it in a web browser, where one of the most commonly used browsers is ‘Netscape Navigator’. This web browser is highly capable to understand the HTML commands and texts and display the webpage in the same manner you want to view.

The HTML document must be text only. So, when you save it, you have to save the text only, not more than that.

Simple HTML Document

This example will help you to understand how exact HTML document looks like and what role HTML tags play to render the webpage content.

It is the basic structure of the HTML page.

Example:

<!DOCTYPE html>
<html>
<head>
<title>It shows the Title of the Page</title>
</head>
<body>

<h1>It displays the heading </h1>
<img src= "It contains the image file and display the image you select”>
<p>It displays a paragraph</p>
</body>
</html>

Now, let’s get a brief of these tags that what purpose they hold in the HTML document.

<!DOCTYPE html> - This element is used to declare the version of HTML document. This currently tells that the version is HTML5.
<html> - This element is used to start the HTML page which acts as root of an HTML page. It is used to wrap all the code.
<head> - This element is used to define the meta information of the HTML document. You can use <style>,<base>, <noscript>,<script>, <meta>,<title>tags inside this element.
<title> - This element is used to define a title of HTML document.
<body> - This element is used to define the visible content of a page, it can be text, image or anything.
<h1> - This element is used to define the heading i.e. Heading 1 on the MS-word.
<img src> - This element is used to define the image you want to view on a page.
<p> - This element is used to define a paragraph.

HTML Tags

The HTML document contains the number of tags that have their own specific purpose to create a webpage. The HTML tags are used depending on the design of a page.

HTML tags and elements are used based on your requirements. These predefined tags and elements tell the browser how the content should be displayed on a page.

You have seen in the previous example that all tags are closed with ‘/’ tag after specifying their purpose. If you forget to close a tag, then the browser indicates it as a tag which goes long and effects till the end of a page.

<title>It shows the Title of the Page</title>
<title> - It is the opening tag.
</title> - It is the closing tag

If any tag is not closed due to any reason, it will hinder the entire content below that particular tag in the document. This error will not activate any tag which is defined after that opening tag.


Supports all Web browsers

No matter what web browser you use for HTML, the purpose of all browsers is to read the document containing HTML codes and to display them on a webpage.


The browser does not show any HTML tag, instead read them to determine the design of a webpage.


In the very first example, the tags used inside the <body> section will display the actual content in a browser.


Like, it will display ‘Heading’ above the content, then Image and words written as a paragraph.


The <!DOCTYPE> Declaration

Any HTML document is incomplete if it does not contain <!DOCTYPE html> declaration at the top of the page before starting any HTML tag, as we have shown it in the above example.


This declaration comes only once in the document and is not case-sensitive.


The latest version of HTML is HTML5, which is displayed as:


<!DOCTYPE html>

Features of HTML

⦁ As compared to other languages, HTML is easy to learn and is used to create any kind of content on a webpage.

⦁ It allows you to add images, videos and audios in any file formats to a web page without using flash or third party plugging.

⦁ It is a platform independent language that enables you to add hypertext to text.

⦁ You can create highly interactive documents using tags, elements, attributes etc.

⦁ It also provides a solution to stipulate the files that you want your browser to cache.

Benefits of HTML

⦁ This markup language is used to create websites, where you can present anything on a webpage.

⦁ It is supported by all web browsers, even the mobile web browsers which are pre-installed on iPhones, iPads, and Android phones.

⦁ No need to purchase any software, it comes as a built-in in all Windows.

⦁ HTML can be easily integrated with other languages as well, like CSS, JavaScript, and others.

⦁ It is supported by most development tools. Thus, gives more functionality to create a website using HTML than other programming languages.