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.
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.
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.
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.
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.
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 ++
- Sublime Text
- Visual Studio Code
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.
<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 ‘<!--’ and ends with ‘-->’. Any text between ‘<!--’ and ‘-->’ is a comment.
<!-- 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.
<!--[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.
<comment>I am a comment in IE</comment>
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.
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.
- 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.
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.
The <html> element is the root element of an HTML document. It contains all the other elements on the page.
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 <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.
The <body> element contains all the content that is displayed on the web page, including text, images, and other elements.
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.
<h1>Your Heading Goes Here</h1>
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
<!-- 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-->
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.
<!-- 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-->
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-->
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-->
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-->
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.
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 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.
- 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
- 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.
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.
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.