HTML Tutorial - Naukri Code 360

Introduction

HTML stands for HyperText Markup Language and it is used to design web pages. HTML helps you create a complete website structure. And it is the combination of Hypertext and Markup language. In HTML (Hypertext) defines the link between the web pages whereas markup defines the text document within the tag that defines the structure of web pages.

What is HTML?

HTML refers to Hypertext Markup Language and is a webpage's building block. It defines the webpage's structure and layout, i.e., how the content would be displayed. Therefore, HTML helps you create static web pages(the ones whose content remains the same throughout).HTML is like a skeleton to a webpage, or you can consider its importance the same as bricks while making a house. It allows you to add text, headings, paragraphs, lists, images, and many other things to a web page.

HTML consists of many different HTML tags, and every tag has its significance. It is a markup language while not a programming language because it does not have variables, loops, or conditional statements; it just consists of HTML tags that define the structure of a webpage or a web application. Hence, HTML helps us in the creation of web pages that are translated by a web browser. The latest version of HTML is HTML5, which supports audio and video.

History of HTML

Tim Berners-Lee is credited with inventing HTML in 1989, with the aim of creating a hypertext system for the Internet. His vision was to create a platform for researchers at CERN to store, share, and access documents from anywhere in the world. Berners-Lee proposed that documents could be stored on a server, and users could access them using a web browser. This led to the development of a Hypertext System that allowed users to move between different sets of documents or texts on different computers.

In 1990, Lee wrote the browser and server software for HTML with the help of other data system engineers. However, their proposal for funding was rejected by CERN. In 1991, Berners-Lee publicly released a document called "HTML Tags," which contained a description of HTML. The first version of HTML included only 18 tags.

Features of HTML

Some of the key features of HTML are as follows.

Easy to learn: HTML is a relatively simple language to learn and use, with a basic set of tags and attributes that can be combined in various ways to create complex web pages.
Supports multimedia: HTML supports multimedia content, such as images, videos, and audio files, within web pages.
Accessibility: HTML provides support for creating accessible web pages that can be used by people with disabilities or assistive technologies.
Cross-platform compatibility: HTML is a cross-platform language, which means it can be viewed and interpreted by any device or operating system with a web browser.

Why learn HTML?

Learning HTML is a valuable skill for anyone who wants to create websites or web applications. Here are a few reasons why learning HTML is worth your time:

Create your own web pages and websites: With HTML, you can create your own website from scratch. This gives you complete control over the design and functionality of your site.
Understanding how web pages work: HTML is the backbone of the web. By learning HTML, you'll gain a better understanding of how web pages work and how different elements on a page interact with each other.
Career Opportunities: Many jobs in the tech industry require some knowledge of HTML. By learning HTML, you'll be able to apply for jobs in web development, content creation, and other related fields.

Characteristics of HTML

Below are the characteristics of HTML.

HTML is a Markup Language: HTML, or Hypertext Markup Language, is a markup language used for creating web pages. It is different from programming languages like Java or Python, which are used to create software applications.
Beginner-Friendly and Easy to Use: One of the advantages of HTML is that it is very easy to learn and use, making it easy for beginners who want to learn web development.
Adding Text, Images, Audio, and Video: HTML allows you to add various types of content to web pages, including text, images, audio, and video. This makes it possible to create rich multimedia web pages that can be used for a variety of purposes.
Platform-Independent and Free to Use: Another advantage of HTML is that it is platform-independent, which means that it can be used on any device or operating system. Additionally, HTML is completely free to use, which makes it an affordable option for businesses and individuals alike.
Formatting and Presentation with HTML Tags: HTML uses tags to format and structure content on a web page. These tags help to define headings, paragraphs, lists, images, and other elements of a web page. Using HTML tags, you can control the appearance and layout of your web page.
Case-Insensitive HTML Tags: This means that you can use upper or lower case letters when writing HTML tags, and the browser will still interpret them correctly. For example, <html> and <HTML> are both valid tags in HTML.

Different Versions of HTML

HTML was developed in 1991, and since then, it has evolved a lot. From its first version, released in 1991, to its fifth version, released in 2014, it has greatly improved. Let’s quickly walk through all the versions of HTML and see its features.

HTML 1.0

This version supports elements like text and images. It also had the ability to link different web pages using the ‘href’ HTML tag. This version does not have tags for tables, video, and audio, which the latest version has. HTML 1.0 was a basic and simple version with only 20 HTML tags.

HTML 2.0

This version was released in 1995. Unlike the first version, this version supported or had tags for creating tables and forms. However, forms had minimal elements like option buttons and text boxes.

HTML 3.2

This version of HTML showed up in 1997. The version expanded the scope of forms and tables. A significant update in this version supported CSS(Cascading Style Sheet) with HTML, and thus web pages could be styled and presented in a much better way. Also, webpages could now include complex equations with added features of subscripts, superscripts, etc.

HTML 4.01

Developed in 1999, this version extended the scope of CSS.HTML 3.2 supported embedded CSS, i.e., CSS had to be present in the HTML page itself. Hence, if we had to apply the same styling to another block/webpage, we had to write the same CSS style again. Therefore it created repetition in code. In HTML 4.01, one could make an external CSS file, which could now be included with HTML itself.

HTML 5

This is the current or the latest version of HTML. HTML 5 could be used in 2014, and this version supported a lot of HTML tags. There are nearly 110 tags present, and all browsers support this version and its elements. HTML 5 included new tags like email, audio, password, section, multimedia, etc. It also supports Javascript on web pages.

From its initial version, HTML 5 has improved quite a lot. With the addition of new tags and the support of new form elements, one can create fantastic and interactive web pages.

Need of learning HTML

There are many advantages of learning HTML. Some of them are as follows.

Better Structuring of the Webpage: HTML allows you to structure and position your elements in a better way. One can use many website templates available on the web, but if you know HTML, you can create your Structuring of elements and stand out from the crowd.
Broader scope with HTML tags: HTML5 supports more than 110 HTML tags which help you add elements like tables, forms, images, and other multimedia objects to the webpage.HTML tags expand the scope of the webpages you create.
Stylish web pages: CSS with HTML can help you create webpages with good designs.CSS enables you to alter the size, colors, fonts, and spacing of elements; it helps you give an attractive look to your website.
Creates better understanding: If you are new to coding, HTML is an excellent place to start. Learning HTML and CSS has the benefit of being simple to learn, making it easy to construct your websites, and allowing you to make speedy progress while working.
Accessible Websites: With a solid understanding of HTML and CSS, you can build fully responsive web pages that are accessible to a variety of people and mobile devices. Responsive web pages are accessible to broader audiences.

Editors for HTML

Webpages can be created and managed easily using HTML editors. There are many HTML editors present, namely:-

Notepad
Notepad ++
Atom
Sublime Text
Visual Studio Code
Brackets
CoffeeCup
Froala

HTML codes can be written in any of the above text editors. However, the most simple and convenient text editor is Notepad. Notepad is a free and open-source HTML editor developed for Windows-based users. You just have to type HTML code in a Notepad file and save the file with ‘.html’ as the extension.

Tags in HTML

Anything written inside '<' and '>' is an HTML tag. There are many tags present in HTML, and each of them has different properties and uses. A web browser can tell the difference between plain content and HTML content with the help of tags.

An HTML tag consists of an opening tag, text, and a closing tag. However, there are some HTML tags that don't require a closing tag.

Syntax:-

<tag>text</tag>

<tag> represents an opening tag and </tag> represents a closing tag.

Let’s now discuss some of the most common HTML tags:-

1. Html tag

Represented by <html> and </html>. This tag contains all other elements. This tag represents the root of a document.

2. Head tag

Represented by <head> and </head>. As the name suggests, this tag is present at the head of the document and contains metadata.

3. Title tag

Represented by <title> and </title>. This tag is used inside the Head tag and has the title of the webpage.

4. Body tag

Represented by <body> and </body>. This tag is used after the head tag and contains all the contents of an HTML document.

5. Anchor tag

Represented by <a> and </a>. This tag helps in linking one web page to another.

6. Paragraph tag

Represented by <p> and </p>. This tag helps in adding paragraphs to web pages.

7. Heading tag

Represented by <h1> and</h1>. This tag has levels from <h1> to <h6>, with <h1> being the highest heading level and <h6> being the lowest heading level.

8. Italic tag

Represented by <i> and </i>. The tag makes the content italic in nature.

9. Bold tag

Represented by<b> and </b>. This tag makes the content bold in nature.

10. Image tag

Represented by<img> and <img>. This tag helps in adding images.

11. Division tag

Represented by <div> and </div>. This helps in creating a division or a part of an HTML document.

Elements that do not require a closing tag are called ‘Void Elements’. Some of the tags which do not require a closing tag are:-

1. Break tag

Represented by <br>. This tag helps in breaking the line of code.

2. Horizontal Rule tag

Represented by <hr>. This tag helps in creating a horizontal line.

Attributes in HTML

Attributes define the characteristics/properties of a HTML element. An attribute is present inside an opening tag and has two things, namely - name and value.

Consider the following example,

<a href=”https://www.codingninjas.com/”>Coding Ninjas</a>

Here href is the name of the attribute of the anchor tag and https://www.codingninjas.com/ is the value.
Let’s now discuss some of the core attributes in HTML:-

1. Id Attribute

The id of an element represents a unique identifier with an HTML page. One can consider it as an AADHAR number of an individual.

2. Class Attribute

This attribute is used to point an element to a particular class in a stylesheet. An element/tag can have multiple classes but a unique id.

3. Style Attribute

This attribute helps to add styling to a particular element. Style tag helps you to write inline CSS i.e. CSS within the elements.

4. Title Attribute

This attribute adds extra information about an element, and this information is displayed as a tooltip text when the mouse moves over the element.

Comments in HTML

HTML comments are lines of code or text which are not seen on the webpage or are ignored by the web browser. Comments can be only seen when the source of the webpage is opened or, in simple terms, when the code is seen. It is an excellent practice to add comments to your code as it improves readability and makes it easier for others to understand your code.
HTML comments begin with ‘’. Any text between ‘’ is a comment.

Syntax:-

<!-- Comment -->

Types of Comments in HTML:-

1. Single Line Comments

As the name suggests, a single line can be commented on using this. The syntax of the same is mentioned above.

2. Multi-Line Comments

A Multi-Line comment can comment multiple lines of text.

<!-- Hi! I am
    Multiline
    Comment -->

3. Conditional Comments

These comments execute a particular HTML code only when the conditions are fulfilled. Conditional Comments work only with Internet Explorer version 6 and more.

For example:

<!--[if IE 7]>
      <h1>Coding Ninjas</h1>
<![endif]-->

[if IE 7] represents the condition for Internet Explorer version 7 and [endif] represents the end of the condition. The HTML in between the condition is only seen on the browser when the condition is satisfied, else it stays as a comment.

4. Comment Tag

Internet Explorer supports the comment tag.
For example:-

<comment>I am a comment in IE</comment>

HTML Forms

HTML forms are used to collect data from users. A simple example of an HTML form is a login webpage that demands a username and a password. The data collected by states is then sent to some backend application which is where it is processed.

An HTML form is created by using the <form> tag. HTML helps a user input text, numbers, buttons, emails, etc.

Form Elements

Below are some of the most used form elements:-

<input>: Helps in taking input from users in a form.
<label>: Defines a label for various HTML elements.
<button>: Buttons are activated by mouse, keyboard, etc. Buttons, after activation perform an action.
<textarea>: Helps in taking multiple lines input from users.
<select>: Helps to create a drop-down list.
<option>: Option elements are present inside the select tag. Option tag defines an option in the drop-down list created by the select element.

Form Attributes

Action: Action attribute of a form defines the process to be performed after submission of form.
Method: This attribute defines the method for form submission. The two possible values for this attribute are ‘get’ and ‘put’.
Enctype: This attribute is used for mentioning the encoding type of the form content while submitting a form.
Target: The target attribute defines the place to open the response. The two possible values of this attribute are ‘_blank’ and ‘_self’.

Creating First Web Page using HTML

Until now, we have learned about tags, attributes, forms, and more. It's now time to get into action. Let's now create our first web page using HTML.

Open an HTML text editor('Notepad' is preferred) and type the following code:-

<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
           <!-- Header Section-->
<head>
<title>
My First Web Page
</title>
</head>
            
             <!--Body of the Webpage-->
<body>
HELLO WORLD!
</body>
</html>
<!-- Html Document Ends-->

Save the file with the ‘.html’ or ‘.htm’ extension and open the file in a web browser.

Hurray!! We have created our first own HTML page.

Output

Basic Construction of an HTML Page

A basic construction of an HTML page requires the following things:-

1. <!DOCTYPE html>
This is the first line of an HTML document, and it tells the browser which version of HTML the document is written in.

2. <html>
The <html> element is the root element of an HTML document. It contains all the other elements on the page.

3. <head>
The <head> element contains information about the page that is not displayed to the user. This includes the page title, which appears in the browser's tab or title bar.

4. <title>
The <title> element is nested inside the <head> element, and it specifies the title of the web page. This is the text that appears in the browser's tab or title bar.

5. <body>
The <body> element contains all the content that is displayed on the web page, including text, images, and other elements.

6. <h1>
The <h1> element is a heading element, and it specifies the main heading of the page. There are six levels of headings, from <h1> (the largest) to <h6> (the smallest).

How to Add HTML Headings To Your Web Page
HTML headings can be created using the HTML heading tag. The heading tag varies from <h1> to <h6>, where <h1> is the largest heading and <h6> is the smallest one.

Syntax:-

<h1>Your Heading Goes Here</h1>

Example:-
Below example show how one can add headings to a webpage.

<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
           <!-- Header Section-->
<head>
<title>
Headings in HTML
</title>
</head>
            
             <!--Body of the Webpage-->
<body>
<h1>Hi! I am a Ninja</h1>
                        <h2>Hi! I am a Ninja</h2>
                        <h3>Hi! I am a Ninja</h3>
                        <h4>Hi! I am a Ninja</h4>
                        <h5>Hi! I am a Ninja</h5>
                        <h6>Hi! I am a Ninja</h6>
</body>
</html>
<!-- Html Document Ends-->

How To Add Text In HTML

Many HTML tags allow you to add text in HTML. Let’s discuss a few of them:-

Heading Tag: As discussed above, HTML provides six different levels of heading tags, which can be used to add headings or titles to your webpage.
Paragraph Tag: A paragraph tag allows you to add paragraphs to a webpage. To add text to a paragraph, you can use the paragraph tag ‘<p>’.
<p>Your text goes here</p>
Bold tag: To make a text bold or give it a highlighted appearance, one can use the bold tag ’<b>’.
<b>Your Bold Text</b>
Italic tag: To make a text look slanted, you can use the Italics tag ’<i>’.
<i>Your Italic Text</i>

How To Add Links In HTML

HTML Links are also known as ‘Hyperlinks.’ Hyperlinks are text inside a text. They help us in linking one web page to another. A link can be a text, image, or button.

In HTML, links can be created using the anchor tag and the href attribute

Example:-


<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
           <!-- Header Section-->
<head>
<title>
Adding Links
</title>
</head>
            
             <!--Body of the Webpage-->
<body>
                      <!--Anchor tag-->
<a href=”https://www.codingninjas.com/”>Be a Ninja</a>
</body>
</html>
<!-- Html Document Ends-->

Output:-

The link when clicked redirects to Coding Ninjas website.

How To Add Images In HTML To Your Website

Images can be added in HTML using <img> HTML tag. This tag requires the ‘src’ attribute, which allows us to set the location of the image. Make sure to use the relative or project file path of an image instead of the absolute or full file path. A relative path indicates the file location in relation to the current working directory or folder.

Also, the <img> tag doesn’t require a closing tag.

Syntax:-

<img src=”Image_Source“>

Example:-

<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
           <!-- Header Section-->
<head>
<title>
Adding Images
</title>
</head>
            
             <!--Body of the Webpage-->
<body>
<img src=”codingninja.png”>
</body>
</html>
<!-- Html Document Ends-->

Output:-

The source file and the image are in the same directory.

How To Make an HTML List

A group of related elements is called a list. List Items in HTML can be added using the <li> tag.HTML allows developers to create three types of lists, namely:-

1. Unordered List (<ul>) is a collection in which sequence doesn’t matter.

<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
           <!-- Header Section-->
<head>
<title>
      Unordered List
</title>
</head>
            
             <!--Body of the Webpage-->
<body>
<ul>
                              <li>Item 1</li>
                              <li>Item 2</li>
                              <li>Item 3</li>
                       </ul>
</body>
</html>
<!-- Html Document End-->

Output:-

2. Ordered List (<ol>) is a sequential collection of items.

<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
           <!-- Header Section-->
<head>
<title>
      Unordered List
</title>
</head>
            
             <!--Body of the Webpage-->
<body>
<ol>
                              <li>Ordered Item 1</li>
                              <li>Ordered Item 2</li>
                              <li>Ordered Item 3</li>
                       </ol>
</body>
</html>
<!-- Html Document Ends-->

Output:-

3. Description List (<dl>) helps to add description to the list of items.

<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
           <!-- Header Section-->
<head>
<title>
      Description List
</title>
</head>
            
             <!--Body of the Webpage-->
<body>
<dl>
                             <dt>Item 1</dt>
                            <dd>Description</dd>

                            <dt>Item 2</dt>
                            <dd>Description</dd>
                              
                              <dt>Item 3</dt>
                              <dd>Description</dd>
                       </dl>
</body>
</html>
<!-- Html Document Ends-->

Output:-

How To Add Tables In HTML

Tables in HTML allow users to present data in the rows and columns.HTML <table> tag is used to create a table in a webpage. A table consists of cells which are made by the intersection of rows and columns.

<tr>: defines the table row.

<th>: defines the table header.
<td>: defines the table data.

Code:

<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
           <!-- Header Section-->
<head>
<title>
    Creating a Table
</title>
</head>
            
             <!--Body of the Webpage-->
<body>
                  <table>
                      <!--Header Row-->
                       <tr>
                             <th>Coding Ninja Courses</th>
                             <th>Difficulty</th>
                       </tr>

                      <!--Second Row-->
                      <tr>
                             <td>Basics of HTML</td>
                             <td>Easy</td>
                       </tr>


                      <!--Third Row-->
                      <tr>
                             <td>CSS and Javascript</td>
                             <td>Intermediate</td>
                       </tr>
                  </table>
</body>
</html>
<!-- Html Document Ends-->

Output:-

Applications of HTML

There are numerous applications of HTML. Some applications of HTML are:-

Creating web pages and websites.
Forms that help in collecting user data.
Interactive web-based dashboards and web-based games.
Designing professional and organised web pages.
Responsive web pages that are accessible to multiple users and devices.
Creating email newsletters and reporting tools.

Limitations of using HTML

Some of the limitations of using HTML are:-

HTML is a markup language and not a programming language, which limits its scope of features and uses.
HTML has limited design features.HTML depends on CSS for the styling of web pages.
HTML can only create static web pages, not dynamic ones.
HTML pages alone are not interactive. Javascript with HTML makes web pages more interactive and appealing.
HTML web pages are vulnerable to cyber-attacks.
Some browsers are not very compatible with rendering HTML web pages.

Advantages of HTML

Simple: HTML is easy to learn, and the coding structure is easy to grasp.
Open-Source: HTML is completely free to use, and also it doesn’t require any kind of setup for its use.
Compatible: HTML is compatible with other technologies and languages like CSS and Javascript.
Hyperlinking: Hypertext in HTML refers to text inside a text which makes it easy to link web pages.
Broad Community: HTML has a vast community, and there are multiple resources available on the web to learn with.

Disadvantages of HTML

Less Interactive: HTML alone doesn’t make the webpage interactive. Using languages like Javascript and other technologies makes web pages look cooler.
Confusing: Lots of HTML code can be confusing to follow and complex to handle.
Decentralised: Even if it's the same code, one needs to write it again, and thus HTML is not centralized.
Limited Multimedia scope: While HTML can be used to embed images, audio, and video in web pages, it has limited multimedia capabilities compared to other web technologies.

Check this out, indexOf in JavaScript

Frequently Asked Questions

What is HTML used for?

HTML is used for creating and structuring web pages. It allows developers to add headings, text, tables, forms, and many other things on the webpage.

What is HTML with example?

HTML stands for Hypertext Markup Language. It is a markup language used to create the structure and content of web pages. For example, we can add paragraphs using the <p> tag, images using <img> tag and much more.

What are 4 basic HTML?

The four basic HTML tags are, <html>, <head>, <body>, and <p>. The <html> tag denotes the start of an HTML document. This tag is the root element of any HTML webpage, and all other tags are contained inside this. The <head> element contains information about the page that is not displayed to the user. This includes the page title, which appears in the browser's tab or title bar. The <body> element contains all the content that is displayed on the web page, including text, images, and other elements. Paragraph Tag or <p> tag helps you to add paragraphs in the webpage.

What is an HTML code tag?

The HTML <code> tag is used to define a piece of computer code within a web page. It typically displays text in a monospace font, preserving the formatting and spacing, making it suitable for displaying programming code or other types of code snippets.

Conclusion

In conclusion, HTML is a fundamental language for web development and understanding its basics is crucial for anyone who wants to create web pages and applications. This HTML tutorial has provided an overview of the core concepts of HTML and covered some of the more advanced topics, such as HTML forms. Keep practicing and experimenting to become more proficient in HTML and take your skills to the next level.

Introduction to HTML

Introduction

What is HTML?

History of HTML

Features of HTML

Why learn HTML?

Characteristics of HTML

Different Versions of HTML

HTML 1.0

HTML 2.0

HTML 3.2

HTML 4.01

HTML 5

Need of learning HTML

Editors for HTML

Tags in HTML

1. Html tag

2. Head tag

3. Title tag

4. Body tag

5. Anchor tag

6. Paragraph tag

7. Heading tag

8. Italic tag

9. Bold tag

10. Image tag

11. Division tag

1. Break tag

2. Horizontal Rule tag

Attributes in HTML

1. Id Attribute

2. Class Attribute

3. Style Attribute

4. Title Attribute

Comments in HTML

1. Single Line Comments

2. Multi-Line Comments

3. Conditional Comments

4. Comment Tag

HTML Forms

Form Elements

Form Attributes

Creating First Web Page using HTML

Basic Construction of an HTML Page

How To Add Text In HTML

How To Add Links In HTML

How To Make an HTML List

How To Add Tables In HTML

Applications of HTML

Limitations of using HTML

Advantages of HTML

Disadvantages of HTML

Frequently Asked Questions

What is HTML used for?

What is HTML with example?

What are 4 basic HTML?

What is an HTML code tag?

Conclusion