Introduction to HTML

 HTML stands for HyperText Markup Language, which is the most widely used language on the Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification that was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used currently we are having the HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.

Why Learn HTML?

Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.

HTML is a MUST for students and working professionals to become great Software Engineers especially when they are working in Web Development Domain. I will list down some of the key advantages of learning HTML:

  • Create a Web site - You can create a website or customize an existing web template if you know HTML well.

  • Become a web designer - If you want to start a career as a professional web designer, HTML and CSS designing is a must skill.

  • Understand web - If you want to optimize your website, to boost its speed and performance, it is good to know HTML to yield the best results.

  • Learn other languages - Once you understand the basics of HTML then other related technologies like javascript, PHP, or angular become easier to understand.

Hello, World using HTML.

Just to give you a little excitement about HTML, I'm going to give you a small conventional HTML Hello World program, You can try it using the Demo link.

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>

Applications of HTML

As mentioned before, HTML is one of the most widely used languages over the web. I'm going to list a few of them here:

  • Web page development - HTML is used to create pages that are rendered over the web. Almost every page of the web is having HTML tags in it to render its details in the browser.

  • Internet Navigation - HTML provides tags that are used to navigate from one page to another and are heavily used in internet navigation.

  • Responsive UI - HTML pages nowadays work well on all platforms, mobile, tabs, desktop, or laptops owing to a responsive design strategy.

  • Offline support HTML pages once loaded can be made available offline on the machine without any need for the internet.

  • Game development- HTML5 has native support for rich experience and is now useful in the gaming development arena as well.

Audience

This HTML tutorial is designed for the aspiring Web Designers and Developers with a need to understand the HTML in enough detail along with its simple overview, and practical examples. This tutorial will give you enough ingredients to start with HTML from where you can take yourself to a higher level of expertise.

Prerequisites

Before proceeding with this tutorial you should have a basic working knowledge of Windows or Linux operating system, additionally, you must be familiar with −

  • Experience with any text editor like notepad, notepad++, or Edit plus, etc.
  • How to create directories and files on your computer.
  • How to navigate through different directories.
  • How to type content in a file and save them on a computer.
  • Understanding images in different formats like JPEG, PNG format.

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.

  • Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.

  • As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display.

Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.

Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.

A Simple 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>

Example Explained

  • The <!DOCTYPE html> the declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> the element contains meta-information about the HTML page
  • The <title> the element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • The <body> the element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> the element defines a large heading
  • The <p> the element defines a paragraph

Basic HTML Document

In its simplest form, the following is an example of an HTML document −


<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</
</body>
</html>

HTML Tags

As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except for a few tags, most of the tags have their corresponding closing tags. For example, <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc.

The above example of an HTML document uses the following tags −


World Wide Web Consortium (W3C) recommends using lowercase tags starting from HTML 4.To learn HTML, you will need to study various tags and understand how they behave while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage.

HTML Document Structure

A typical HTML document will have the following structure −

<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>

We will study all the header and body tags in subsequent chapters, but for now, let's see what is document declaration tag.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. The current version of HTML is 5 and it makes use of the following declaration −

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE...> tag along with other HTML tags.

>

comments Center