Introduction to HTML: What is HTML and How it Works?

HTML stands for Hypertext Markup Language and it is a widely used programming language used to develop web pages. Through this HTML Tutorial, we’ll understand what HTML means, the features of HTML, the basic tags and elements used, and more. Let’s get started

HTML Tutorial – What is HTML?

HTML Stands for HyperText Markup Language, where

HyperText stands for Link between web pages.
Markup Language means Text between tags that define the structure.

HTML is a markup language that is used to create web pages. It defines how the web page looks and how to display content with the help of elements. It forms or defines the structure of our Web Page, thus it forms or defines the structure of our Web Page. We must remember to save your file with .html extension. In this HTML Tutorial, we’ll understand all the basic concepts required to kick-start your journey in HTML.

Applications of HTML

HTML is used for various purposes. Let us take a look at them

Web Pages Development
HTML is famously used for creating web pages on the world wide web. Every web page contains a set of HTML tags and hyperlinks which are used to connect other pages. Every page on the internet is written using HTML.
Navigating the Internet
Navigating on the internet would have been quite a tedious task without HTML. The anchor tags of HTML allows us to link pages and navigate easily. Imagine our life without anchor tags, you would literally have to enter URL everytime. Using achor tags, you can also navigate within a webpage.
Embedding Images and Videos
HTML allows us to embed images and videos with ease and gives us features to adjust height, position and even rendering type. You can adjust controls, thumbnails, timestamps and much more for videos. Earlier this was done using Flash and HTML has made it easier with the help of <video> tag.
Clinet-side storage
HTML5 has made client-side storage possible using localStorage and IndexD due to which we no longer need to reply on Cookies. Both of these tactics have their own set of rules and characteristics. String-based hash-table storage is provided by localStorage. Its API is straightforward, with setItem, getItem, and removeItem functions available to developers. On the other hand, IndexDB is a larger and more capable client-side data store. With the user’s permission, the IndexDB database can be enlarged.
Game development
Although you cannot create complex high-end video games with HTML, the <canvas> element of HTML can be used to make 2D and 3D games using CSS and JavaScript which can be run on browsers.
Data entry support
With the usage of new HTML5 standards in all the latest browsers, developers can simply add the tags for required fields, text, data format, etc. and get the data. HTML5 now has several new attributes for data-entry and validation purposes.
Interacting with Native APIs
With the help of HTML, you can interact with your Operating system. With this feature, you can easily drag files onto a web page to upload, full-screen a video, and much more.

Features Of HTML

The learning curve is very easy (easy to modify)
Creating effective presentations
Adding Links wherein we can add references
Can display documents on platforms like Mac, Windows, Linux, etc
Adding videos, graphics, and audios making it more attractive
Case insensitive language

HTML Editor

Simple editor: Notepad
Notepad++
Atom
Best editor: Sublime Text

HTML Skeleton

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

HTML Basic

<!DOCTYPE html>

Instruction to the browser about the HTML version.

<html>

Root element which acts as a container to hold all the code
The browser should know that this is an HTML document
Permitted content: One head tag followed by one body tag

<head>

Everything written here will never be displayed in the browser
It contains general information about the document
Title, definitions of CSS and script sheets
Metadata(information about the document)

<body>

Everything written here will be displayed in the browser
Contains text, images, links that can be achieved through tags
Examples:
○ <p> This is our first paragraph. </p>
○ <a href=”http://www.google.com”>Go To Google</a>
○ <img src=”photo.jpg”>

HTML Comment

Comments don’t render on the browser
Helps to understand our code better and makes it readable.
Helps to debug our code
Three ways to comment:

Single line
Multiple lines
Comment tag //Supported by IE

HTML Elements

Elements are created using tags
Elements are used to define the semantics
Can be nested and empty

What is HTML Elements Definition

<p color=”red”> This is our first Paragraph </p>

Explanation:

Start tag: <p>
Attributes: color =” red”
End tag : </p> // optional
Content: This is our first Paragraph

Types of Elements

There are different types of elements in HTML. Before moving ahead in the HTML Tutorial, let us understand the types of elements.

Block Level

○ Takes up full block or width and adds structure in the web page

○ Always starts from the new line

○ Always end before the new line

○ Example:

■ <p >

■ <div>

■ <h1>…<h6>

■ <ol>

■ <ul>

Inline Level

○ Takes up what is requires and adds meaning to the web page

○ Always starts from where the previous element ended

○ Example :

■ <span>

■ <strong>

■ <em>

■ <img>

■ <a>

Now you can enroll for free to online HTML course in hindi

HTML Attributes

Properties associated with each tag is called an Attribute.
<tag name=”value”></tag> is the structure.
There are some Global Attributes that can be applied to all the tags.
- Title: Add extra information (hover)
- Style: Add style information(font,background,color,size)
There are some attributes that can be applied to specific tags.
- <img src=” URL” width=”100” height=”70” alt=” File cannot be loaded”>
- src is the attribute used in image tag to define the path
- Width is an attribute used to define width in pixels
- Height is an attribute used to define width in pixels
- Alt i.e alternate text if an image is not loaded
Name of the link
- href is used for defining the path of the link
- color is used to set the color of the horizontal line drawn on the webpage.

HTML Tags

Enclosed within <>
Different tags render different meanings.
Example: </li>
- Defines the paragraph
- Syntax:<p > This is our first Paragraph </p>
Whatever is written this tag comes up in the web page’s tab
Defines the title of the page
Syntax: <title>Home </title>

List of Self-closing tags

● <hr> tag

○ Stands for horizontal rule

○ Dividing the web page

○ Syntax: <hr>

● <br> tag

○ Stands for break line

○ Moving to next line

○ Syntax: <br>

● <img> tag

○ To add images in the web page

○ Syntax: <img src=”path”>

○ Example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<img src="https://images.unsplash.com/photo-1592195241233-84b15fc81ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" title="lotus" style="width:500px">
</body>
</html>

● <h1> tag …… <h6>tag

○ Stands for heading tag

○ Defines heading of a page

○ h1 represents most important page in the page

○ h6 represents least important page in the page

○ Syntax: <h1>This is my first heading </h1>

○ Example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1>This is heading 1 </h1>
	<h2>This is heading 2 </h2>
	<h3>This is heading 3 </h3>
	<h4>This is heading 4 </h4>
	<h5>This is heading 5 </h5>
	<h6>This is heading 6 </h6>
</body>
</html>

● <strong> tag

○ Defines the text to be bold

○ Replaced <b>tag //HTML5

○ Syntax: <strong> This text is important </strong>

○ Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit <strong>amet, consectetur adipisicing elit, sed do eiusmod</strong>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</body>
</html>

● <em> tag

○ Defines the text to be bold

○ Replaced <i>tag //HTML5

○ Syntax: <em> This text is special </em>

○ Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit <em>amet, consectetur adipisicing elit, sed do eiusmod</em>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</body>
</html>

● <ol> tag

○ Stands for an ordered list

○ To define a series of events that take place in some order

○ Example making a tea (like a flow chart)

○ Syntax: <ol>………</ol>

● <ul> tag

○ Stands for unordered list

○ To define a series of events that take place where the order is not important.

○ Example your hobbies

○ Syntax: <ul>………</ul>

● <li> tag

○ Defines the list item

○ Used inside the ol and ul tag to define the event

○ Syntax: <li></li>

○ Example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ul>
       <li>  Cricket </li>
       <li>  Football </li>
       <li>  Hockey </li>
   </ul>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ol>
       <li>  Cricket </li>
       <li>  Football </li>
       <li>  Hockey </li>
   </ol>

</body>
</html>

● <div> and <span> tags

○ Both of these are used to group different tags .

○ Acts like a container.

○ Effective while styling.

○ Syntax: <div>………</div>

○ Syntax: <span>….</span>

○ Difference <div> is block level and <span> is inline level.

○ Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit amet, <div>consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore</div> et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit amet, <span>consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore</span> et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

</body>
</html>

● <a> tags

○ Used to add links in a web page

○ <a href=”url”> Name of the link </a>

○ Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<a href="https://www.google.com/">go to google</a>

</body>
</html>

● <table> tags

Used to create a table on a web page
Need other tags for completing the creation of a table
- <tr> : for marking the table row
- <th> : for table header
- <td> : for table column data
- Everything is always enclosed within <tr>
- <thead> : to keep all header data
- <tbody> : to keep all body data
Example:

<!DOCTYPE html>
<html>
<head>
	<title>Color Chart</title>
</head>
<body>
	<h1>My first Color Chart</h1>
	<table border="1">
		<thead>
			<tr>
				<th>Name</th>
				<th>Type</th>
				<th>Mixed with</th>
			</tr>
		</thead>
		<tbody>
			<!-- Red  -->
			<tr>
				<td>Red</td>
				<td>Turns to pink </td>
				<td>White</td>
			</tr>
			<!-- Dark Blue  -->
			<tr>
				<td>Dark Blue</td>
				<td>Turns to Sky Blue</td>
				<td>White</td>
			</tr>
			<!--  Green  -->
			<tr>
				<td>Green</td>
				<td>Turns to Black</td>
				<td>Blue</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

● <form> tags

action attribute: It specifies the URL to send form data to
method attribute: specifies the type of HTTP request(GET or POST)
Example: <form action=”/my-form-submitting-page” method=”POST”>
<input>: used to accept data from the user
Some types of inputs are:

Text: used to store text data. Syntax: type=”text”
Password: used to enter a secure password. Syntax: type=”password”
Placeholder: temporary text in input fields. It is generally accompanied by “text” and “password” attributes. Syntax: placeholder=”insert- text-here”
Button: used to include buttons in the form. Syntax: type=”button” value=”insert-text-here”
Submit button: For creating a submit button. All the data will get submitted when it is clicked. Syntax: type=”submit”
Checkbox: to provide the ability to check multiple options. Syntax: type=”checkbox”. To check options by default, set it with the checked attribute.
Radio Button: allows one to choose a single option. Syntax: type=”radio”. Keep the name attribute of all the options the same.
<select>: For every possible option to select, use an <option> tag<option>
Text Areas: multi-line plain-text editing control. Syntax: <textarea>. You can specify how large the text area is by using the “rows” and “cols” attributes
Labels: add captions for individual items in a form. Syntax: <label>. A label can be used by placing the control element inside the <label> element, or by using the “for” and “id” attributes.
Validations ensure that users fill out forms in the correct format, e.g.:
required: The Boolean attribute which makes a field mandatory:
email: the browser will ensure that the field contains an @ symbol.

Example:

<!DOCTYPE html>
<html>
<head>
	<title>Register</title>
</head>
<body>
	<h1>Register Form</h1>
	<form>
		<label>First Name: <input type="text" name="firstName" placeholder="firstName" required></label>
		<label>Last Name: <input type="text" name="lastName" placeholder="lastName" required></label><br>

		<label>Male <input type="radio" name="gender" value="male"></label>
		<label>Female <input type="radio" name="gender" value="female"></label>
		<label>Other <input type="radio" name="gender" value="other"></label><br>

		<label>Email: <input type="email" name="email" placeholder="your email" required></label>
<!-- 		<label>Password: <input type="password" name="password" placeholder="your password" minlength="5" maxlength="10"></label><br>
 --> 
 		<label>Password: <input type="password" name="password" placeholder="your password" pattern=".{5,10}" required title="Please enter password of length 5 to 10"></label><br>

		<label for="">Birthday: </label>
		<select id="birthday" name="Month">
			<option>Month</option>
			<option>Jan</option>
			<option>Feb</option>
			<option>Mar</option>
			<option>Apr</option>
		</select>
		<select id="birthday" name="Day">
			<option>Day</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
		</select>
		<select id="birthday" name="Year">
			<option>year</option>
			<option>1990</option>
			<option>1991</option>
			<option>1992</option>
			<option>1993</option>
			<option>1994</option>
		</select><br>

		<label>I agree to the terms and conditions 		
			<input type="checkbox" name="check">
		</label><br>

		<input type="submit" name="submit">

	</form>
</body>
</html>

Meta Tags in HTML

Metadata is the additional information about a document. We can specify metadata through Meta Tags in HTML. These Meta Tags in HTML can be used to describe elements such as author, list of keywords, expiry date, etc. It is an empty element and does not have any closing tag. However, it carries information within it’s attribute.

A <meta> tag does not impact the physical appearance of the document. So from an appearance point of view, it makes no difference whether meta tags are included or not.

HTML Forms

The next step in the HTML tutorial is to understand Forms. An HTML (HyperText Markup Language) form is a document that contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc., to store the information of a user on the web server. An HTML form is used to enter data that is to be sent to the server for processing, such as name, email address, password, phone number, etc., using interactive controls.

The various elements of HTML forms with the details are captured below:

<form> element

The <form> element of HTML is used to create HTML form which is used for user to input information.

<form>
..
form elements
..
</form>

The <form> element contains different types of input elements. Some of the form elements are: text fields, checkboxes, radio buttons, submit buttons, etc.

Below is the table consisting of form elements.

Tag	Description
<form>	This element defines an HTML form for user input
<input>	This element defines fines an input control
<textarea>	This element defines a multiline input control (text area)
<label>	This element defines a label for an <input> element
<fieldset>	This element groups related elements in a form
<legend>	This element defines a caption for a <fieldset> element
<select>	This element defines a drop-down list
<optgroup>	This element of HTML <form> defines a group of related options in a drop-down list
<option>	This element defines an option in a drop-down list
<button>	This element defines a clickable button
<datalist>	This element of HTML <form> specifies a list of pre-defined options for input controls
<output>	This element defines the result of a calculation.

HTML Form Attributes

Now let’s learn about the different attributes for the HTML <form> element.

The HTML form Attribute specifies that the element can contain one or more forms. The various <form> attributes are defined below:

The Action Attribute

As the same specifies, the action attribute defines the action to be performed when the form is submitted.

When the submit button is clicked by the user, the form data is sent to a file that is on the server.

Let us understand with an example below: the form data is sent to a file named “action_sample.php”. The file consists of a server-side script that handles the form data:

Example:

On submit, send form data to “action_sample.php”:

<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris"><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br><br>
 <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br><br>
<label for="country">Age:</label><br>
 <input type="text" id="country" name="country" value="India"><br><br>

  <input type="submit" value="Submit">
</form>

Note: If the action attribute is removed, then the action is set to the current page.

The Target Attribute

As the name indicates, the target attribute specifies where the response is displayed after the user submits the form.

The target attribute can have one of the following values as mentioned in the table below:

The default value of the target attribute is _self which means that the response will be displayed in the current window.

Value	Description
_blank	This value means the response is displayed in a new window or tab.
_self	This value means the response is displayed in the current window.
_parent	This value means the response is displayed in the parent frame.
_top	This value means the response is displayed in the full body of the window.
framename	This value means the response is displayed in a named iframe.

Let us understand with an example:

The submitted result of above query will open in a new browser tab.

The Method Attribute

The method attribute is used to specify the HTTP method to be used when submitting the form data.

GET method is the default HTTP method used when submitting form data.

The form-data is sent as URL variables (with method=”get”) or as a HTTP post method(with method=”post”).

Let us take an example that uses the GET method when submitting the form data:

An example using he POST method when submitting the form data is as below:

Some important points to remember when using the GET method are:

The form data is appended to the URL with the Get method, in name/value pairs
We should never use the Get method to send sensitive data that is not meant to be exposed. It is because the submitted form data is visible in the URL. So the sensitive information will be exposed.
The length of a URL when using the Get method is limited to 2048 characters.
GET method should be used for non-secure data, like query strings in Google

Some important points to remember when using the POST method are:

Post method appends the form data inside the body of the HTTP request. The form data that is submitted is not shown in the URL.
Post method can be used to send large data; it has no size limitation.
Form submissions that are done with the Post method cannot be bookmarked

Note: We should always use the Post method if the form data contains any sensitive information that is not meant to be exposed.

The Autocomplete Attribute

As the name autocomplete specifies, the browser automatically fills the values based on what the user has filled earlier when this attribute is on.

With the help of the autocomplete attribute, users can specify whether a form should have autocomplete on or off.

Example of autocomplete attribute is with autocomplete ON is:

The Novalidate Attribute

The Novalidate attribute of HTML form is a boolean attribute. As we know, boolean means 2 values, either yes or no. So when the novalidate attribute of the HTML form is present, it indicates or specifies that the form-data should not be validated when submitted.

An example of a form with a novalidate attribute is as below:

Below is the list of all <form> attributes

Attribute	Description
accept-charset	This attribute is used to define or specify the character encodings used for form submission
Action	This attribute is used to define or specify where to send the form data when a form is submitted
autocomplete	This attribute is used to tell whether a form should have autocomplete on or off
enctype	This attribute is used to tell how the form-data should be encoded when submitting it to the server (only for method=”post”)
method	This attribute is used to tell the HTTP method to use when sending form-data
Name	This attribute is used to tell the name of the form
novalidate	This attribute is used to tell that the form should not be validated when submitted
Rel	This attribute is used to tell the relationship between a linked resource and the current document
Target	This attribute is used to define where to display the response that the user receives after submitting the form

HTML Form Elements

Now let us learn about the HTML <form> Elements

The various HTML <form> elements that are available and can be used are as below:

<input>

<label>

Let us learn in details about the form elements:

The <input> Element

Since HTML forms are used to take input from the user, so <inpot> elemnt is one of the most used form element.

Depending on the type attribute, the <input> element is displayed in several ways.

Some of the examples are:

The <label> Element

The HTML form element <label> , defines a label for several form elements.

This element of HTML form is useful for screen reader users. When the focus of the user is on the input element, the screen reader will read the label.

Some users have difficulty clicking on a very small region( radio button or check box); the label element is helpful. When user clicks on text within <label> element , radio button/checkbox is toggled.

Example:

<input type=”checkbox” name=”click_lbl” id=” click_lbl ” value=” click_lbl “><label for=”click_lbl “> Click this label to select.</label>

The <select> Element

As the name select specifies, the <select> element of HTML form defines a drop-down list:

Let us try to understand about select with the help of an example:

<label for="cars">Choose a car:</label>
<select id="car" name="car">
  <option value="maruti">Maruti</option>
  <option value="hyundai">Hyundai</option>
  <option value="skoda">Skoda</option>
  <option value="ford">Ford</option>
</select>

The <option> element defines an option that can be selected from the given options.

The first item in the drop-down list is the default that is selected.

If we want to define a pre-selected option, the the select attribute can be added to the option:

For Example

Visible Values:

The size attribute of the HTML form is used to specify the number of visible values:

Example

<label for="car">Choose a car:</label>
<select id="car" name="car" size="3">
  <option value="maruti">Maruti</option>
 <option value="hyundai">Hyundai</option>
  <option value="skoda">Skoda</option>
  <option value="ford">Ford</option>
</select>

If we want to allow Multiple Selections, then multiple attribute can be used that allows the user to select more than one value:

<label for="car">Choose a car:</label>
<select id="car" name="car" size="4">
  <option value="maruti">Maruti</option>
 <option value="hyundai">Hyundai</option>
  <option value="skoda">Skoda</option>
  <option value="ford">Ford</option>
</select>

The <textarea> Element

The <textarea> element defines a text area for multi-line input.

For Example:

The cat was chasing the mouse in the garden.

</textarea>

Here, the rows attribute specifies the number of lines that are visible in a text area.

And the cols attribute defines the width of a text area specified.

The size of text area can also be defined using CSS:

Example

The cat chasing the mouse in the garden.

</textarea>

The <button> Element

The next import form element is the <button> element which defines a clickable button:

Example:

<button type=”button” onclick=”alert(‘Hello World!!!’)”>Click Me!</button>

Please Note: Since different browsers might use different default types for button elements, we should always specify the type attribute for button elements.

The <fieldset> and <legend> Elements

Another important form element <fieldset> is used to group related data in a HTML form.

The <legend> element is used to define a caption for the <fieldset> element.

Let us try to understand about fieldset and legend with the help of an example:

<form action="/action_sample.php">
  <fieldset>
    <legend>PersonalInfo:</legend>
    <label for="first_name">First name:</label><br>
    <input type="text" id="first_name" name="first_name" value="Chris"><br>
    <label for="last_name">Last name:</label><br>
    <input type="text" id="last_name" name="last_name" value="Darwin"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

The <datalist> Element

The <datalist> element, as the name list specifies, is a list of pre-defined options for an <input> element.

Users will be able to see a drop-down list of the pre-defined option when they input data.

For Example:

<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<form action="/action_sample.php">
  <input list="cars" name="cars">
  <datalist id="cars">
    <option value="Maruti">
    <option value="Ford">
    <option value="Skoda">
    <option value="Audi">	
    <option value="Hyundai">
  </datalist>
  <input type="submit">
</form>
</body>
</html>

The <output> Element

The <output> element, as the name specifies, represents the result of any calculation.

Let us try to understand the output element with the help of an example.

<!DOCTYPE html>
<html>
<body>
<h2>The output Element</h2>
<form action="/action_sample.php"
input="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="x" name="x" value="50">
  100 +
  <input type="number" id="y" name="y" value="50">
  =
  <output name="z" for="x y"></output>
  <br><br>
  <input type="submit">
</form>

</body>
</html>

HTML Input Types

Now let’s learn about the different types for the HTML <input> element.

The different input types that are used in HTML forms are mentioned below:

Please Note: The default value of the type attribute is “text”.

Input Type Text

<input type=”text”> of the HTML form defines a text input field with single line

For Example:

<!DOCTYPE html>
<html>
<body>
<h2>Text field</h2>
<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id=" first_name " name=" first_name "><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id=" last_name " name=" last_name "><br><br>
  <input type="submit" value="Submit">
</form>
<p>Note that the form itself is not visible.</p>
</body>
</html>

Input Type Password

<input type=”password”>, this input type defines a password field:

For Example:

<!DOCTYPE html>
<html>
<body>

<h2>Password field</h2>
<p>The <strong>input type="password"</strong> defines a password field:</p>
<form action="/action_page.php">
  <label for="loginid">LoginId:</label><br>
  <input type="text" id="loginid" name="loginid"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd"><br><br>
  <input type="submit" value="Submit">
</form>

<p>The characters in a password field are masked (shown as asterisks or circles).</p>

</body>
</html>

This is how the HTML code above will be displayed in a browser:

Input Type Submit

<input type=”submit”>, as the name indicates, is used to define a button for submitting form data to a form handler.

The form-handler is usually a server page that has a script for processing input data.

The form-handler is defined in the form action attribute:

For Example:

<!DOCTYPE html>
<html>
<body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris"><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click "Submit", the form-data will be sent to a page called "/action_sample.php".</p>

</body>
</html>

Display in browser:

Input Type Reset

As the name indicates <input type=”reset”> specifies a reset button that resets all the form values to their default values:

Example

<!DOCTYPE html>
<html>
<body>

<h2>Reset Button</h2>

<p>The <strong>input type="reset"</strong> defines a reset button that resets all form values to their default values:</p>

<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form> 
<p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p>
</body>
</html>

This is how the HTML code above will be displayed in a browser:

Input Type Radio

Radio buttons as the name specifies allows user to select only one choice of the available choices. Its syntax is <input type=”radio”> defines a radio button.

Example

<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines a radio button:</p>

<form action="/action_page.php">
  <input type="radio" id="Maths" name="Subject" value="Maths">
  <label for="Maths">Maths</label><br>
  <input type="radio" id="Physics" name="Subject" value="Physics">
  <label for="Physics">Physics</label><br>
  <input type="radio" id="Chemistry" name="Subject" value="Subject">
  <label for="Chemistri">Chemistry</label><br><br>
  <input type="submit" value="Submit">
</form> 
</body>
</html>

This is how the HTML code above will be displayed in a browser:

Input Type Checkbox

As the name specifies, the Input type Checkbox defines a checkbox.

Its syntax is <input type=”checkbox”>

With checkboxes a user can select zero or more options from limited number of options.

Example code:

<!DOCTYPE html>
<html>
<body>

<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_sample.php">
  <input type="checkbox" id="subject1" name="subject1" value="Maths">
  <label for="subject1"> I love Maths</label><br>
  <input type="checkbox" id="subject2" name="subject2" value="Physics">
  <label for="subject2"> I love Physics</label><br>
  <input type="checkbox" id="subject3" name="subject3" value="Chemistry">
  <label for="subject3"> I love Chemistry</label><br><br>
  <input type="submit" value="Submit">
</form> 
</body>
</html>

This is how the HTML code above will be displayed in a browser:

Input Type Button

As the name specifies, Input type button defines a button

Syntax is: <input type=”button”>

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Input Button</h2>
<input type="button" onclick="alert('Hello Everyone!!!')" value="Click Me!">
</body>
</html>

Input Type Color

As the name specifies, Input type color is used for fields that contain color. Syntax is: <input type=”color”>

Example

<!DOCTYPE html>
<html>
<body>
<h2>Show a Color Picker</h2>
<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>
<form action="/action_sample.php">
  <label for="favcolor">What is your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Input Type Date

As the name specifies, Input type date is used for fields that contain date. Its syntax is : <input type=”date”>

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Date Field</h2>
<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>
<form action="/action_page.php">
  <label for="birthday">When is your Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Input Type Datetime-local

This input type specifies a date and time input field, with no time zone.

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Local Date Field</h2>
<form action="/action_page.php">
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Input Type Email

As the name specifies , this input type is used for input field that contain an email address. Syntax is <input type=”email”>

For Example

<!DOCTYPE html>
<html>
<body>

<h2>Email Address</h2>
<form action="/action_sample.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Input Type File

As the name specifies, the Input type file defines a file-select field and also a “Browse” button that is used for file uploads. The syntax is <input type=”file”>

Example

<!DOCTYPE html>
<html>
<body>

<h1>File upload</h1>
<form action="/action_sample.php">
  <label for="sample_file">Select a file:</label>
  <input type="file" id="sample_file" name="sample_file"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Input Type Hidden

As the name specifies, input type hidden defines a hidden input field that is not visible to the user. Syntax is : <input type=”hidden”>

Please Note: The value of field with input type hidden is not displayed to the user in the page’s content but it is visible using any browser’s developer tools or “View Source” functionality.

For Example

<!DOCTYPE html>
<html>
<body>
<h1>Hidden Field</h1>
<form action="/action_sample.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="emailid" name="emailid" value="sample@gmail.com">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Input Type Month

As the name specifies, with this input type, the user can select a month and a year. Syntax is: <input type=”month”>

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Month Field</h2>
<form action="/action_sample.php">
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Input Type Number

As is obvious from the name, input type number defines a numeric input field.

Syntax is: The <input type=”number”>

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Number Field</h2>
<form action="/action_sample.php">
  <label for="rollno">Roll No. (between 1 and 50):</label>
  <input type="number" id="rollno" name="rollno" min="1" max="50">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Input Restrictions

Please find below the list of some common input restrictions:

Attribute	Description
Checked	This attribute of the HTML form specifies that an input field should be pre-selected when the page loads (for type=”checkbox” or type=”radio”).
Disabled	This attribute of the HTML form specifies that an input field should be disabled.
Max	This attribute specifies the maximum value for an input field.
Maxlength	This attribute of the HTML form specifies the maximum number of character for an input field.
Min	This attribute specifies the minimum value for an input field.
Pattern	This attribute of the HTML form specifies a regular expression to check the input value against on form submission.
Readonly	This attribute specifies that an input field is read-only (cannot be changed).
Required	This attribute specifies that an input field is required (must be filled out).
Size	This attribute specifies the width (in characters) of an input field.
Step	This attribute of the HTML form specifies the legal number intervals for an input field.
Value	This attribute specifies the default value for an input field.

Input Type Range

As the name range specifies, the input type range allows to enter a number whose exact value is not important. Syntax is <input type=”range”> . The default range is defined from 0 to 100.

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Range Field</h2>
<form action="/action_sample.php" method="get">
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Input Type Search

As the name specifies, input type search is used for search fields. Syntax is : The <input type=”search”>

For Example

<!DOCTYPE html>
<html>
<body>
<h2>Search Field</h2>
<form action="/action_sample.php">
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
  <input type="submit" value="Submit">
</form>
</body>
</html>

Input Type Tel

As the name specifies, input type Tel is used for input fields that contain a telephone number. Syntax is <input type=”tel”>

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>Time Input Control</h1>

<form action="/action_sample.php">
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Type Url

As the name indicates, this input type is used for fields that contain URL. The syntax is <input type=”url”> .

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>URL Input Field</h1>
<form action="/action_sample.php">
  <label for="homepage">Homepage:</label>
  <input type="url" id="homepage" name="homepage">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Type Week

The <input type=”week”> allows the user to select a week and year.

For Example

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>

HTML Input Type Attribute

Now let’s learn about the HTML Input Attributes

The value Attribute

The value attribute of HTML input element defines an initial value for an input field.

For Example:

Input fields with initial (default) values:

<!DOCTYPE html>
<html>
<body>

<h1>Input value attribute</h1>

<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The readonly Attribute

As the name specifies, the readonly attribute of the HTML input element defines that an input field is read-only. This field cannot be modified, and its value is sent when submitting the form.

For Example

<!DOCTYPE html>
<html>
<body>

<h1>Readonly attribute</h1>
<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris" readonly><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The disabled Attribute

As the name specifies ,the disabled attribute of HTML input element specifies that an input field should be disabled.

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>The input disabled attribute</h1>

<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris" readonly><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The size Attribute

As the name specifies, the size attribute of HTML input element specifies the width, in characters, of an input field. Its defaut value is 20

For Example

To set a width for an input field, which in PIN in below example:

<!DOCTYPE html>
<html>
<body>

<h1>The input size attribute</h1>
<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris" readonly><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The maxlength Attribute

This attribute specifies the maximum number of characters that can be allowed in an input field.

Example

Below snippet sets a maximum length for an input field PIN:

<!DOCTYPE html>
<html>
<body>

<h1>The input maxlength attribute</h1>
<form action="/action_sample.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="Chris" readonly><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Darwin"><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age" value="27"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The min and max Attributes

This attribute specifies the minimum and maximum values for an input field of HTML form.

For Example:

Below code snippet sets a max date, a min date, and a range of legal values:

<!DOCTYPE html>
<html>
<body>
<h1>The input min and max attributes</h1>
<form action="/action_sample.php">
  <label for="date_max">Enter a date before 1980-01-01:</label>
  <input type="date" id="date_max" name="date_max" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br> 
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The multiple Attribute

As indicated by the name, the multiple attribute of the HTML form element specifies that the user is allowed to enter more than one value in an input field.

For Example

<!DOCTYPE html>
<html>
<body>

<h1>The input multiple attributes</h1>

<form action="/action_sample.php">
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The pattern Attribute

The pattern attribute of the HTML input element specifies a regular expression that the input field’s value is checked for when the user submits the form.

For Example:

In the below example, an input field that can contain only three letters. It cannot have any number or special characters:

<!DOCTYPE html>
<html>
<body>
<h1>The input pattern attribute</h1>
<form action="/action_sample.php">
  <label for="ccode">Country code:</label>
  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The placeholder Attribute

As the name specifies, the placeholder attribute specifies a sample value or short description of the expected format in the input field.

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>The input placeholder attribute</h1>

<form action="/action_sample.php">
  <label for="phone">Enter phone number:</label>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The required Attribute

As the name indicates, the required attribute specifies that an input field is required to be filled before submitting the form.

<!DOCTYPE html>
<html>
<body>

<h1>The input required attribute</h1>
<form action="/action_sample.php">
  <label for="Loginid">LoginId:</label>
  <input type="text" id="Loginid" name="Loginid" required><br><br>
  <label for="password">Password:</label>
  <input type="text" id="password" name="password" required><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The step Attribute

This attribute specifies the legal number intervals for an input field in a HTML form input element.

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>The input step attribute</h1>
<form action="/action_sample.php">
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
  <input type="submit" value="Submit">
</form>

</body>
</html>

The autofocus Attribute

As the name autofocus indicates, the autofocus attribute specifies that an input field should automatically get focus whenever the page is loaded.

For Example:

Suppose the user wants that when the page loads the automatic focus is on Firstname:

<!DOCTYPE html>
<html>
<body>
<h1>The input autofocus attribute</h1>
<form action="/action_sample.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The height and width Attributes

As the name indicates, the height and width attributes specify an <input type=”image”> element of HTML form.

For example:

The example below define an image as the submit button, with height and width attributes:

<!DOCTYPE html>
<html>
<body>

<h1>The input height and width attributes</h1>

<form action="/action_sample.php">
  <label for="first_name">First name:</label>
  <input type="text" id="first_name" name="first_name"><br><br>
  <label for="last_name">Last name:</label>
  <input type="text" id="last_name" name="last_name"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
</body>
</html>

The list Attribute

As the name indicates, the list attribute of HTML input refers to a <datalist> element that contains pre-defined options.

For Example:

<!DOCTYPE html>
<html>
<body>

<h1>The input list attribute</h1>

<form action="/action_sample.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Safari">
  </datalist>
  <input type="submit" value="Submit">
</form>

</body>
</html>

The autocomplete Attribute

As the name indicates, the autocomplete attribute specifies whether a form or an input field should have autocomplete feature on or off.

Example

<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>
<form action="/action_sample.php" autocomplete="on">
  <label for="first_name">First name:</label>
  <input type="text" id="first_name" name="first_name"><br><br>
  <label for="last_name">Last name:</label>
  <input type="text" id="last_name" name="last_name"><br><br>
  <label for="address">Address:</label>
  <input type="text" id="address" name="address"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML Input form* Attributes

Now let us learn about the different form* attributes for the HTML <input> element.

The form Attribute

The input form attribute of the HTML form specifies the form to which the <input> element belongs to.

For Example:

In the below code snippet, an input field is located outside of the HTML form but it is still a part of the form.

<!DOCTYPE html>
<html>
<body>
<h1>The input form attribute</h1>
<form action="/action_sample.php" id="form1">
  <label for="first_name">First name:</label>
  <input type="text" id="first_name" name="first_name"><br><br>
  <input type="submit" value="Submit">
</form>
<label for="last_name">Last name:</label>
<input type="text" id="last_name" name="last_name" form="form1">

</body>
</html>

The formaction Attribute

The input formaction attribute of the HTML form attribute specifies the URL of the file that will process the input when the form is submitted.

For Example:

Below example represents an HTML form with two submit buttons, but with different actions:

<!DOCTYPE html>
<html>
<body>

<h1>The input formaction attribute</h1>
<p>The formaction attribute specifies the URL of a file that will process the input when the form is submitted.</p>
<form action="/action_sample.php">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Password:</label>
  <input type="text" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_sample2.php" value="Submit as Admin">
</form>

</body>
</html>

The formenctype Attribute

As the name indicates, the input formenctype attribute of the HTML form specifies how the form-data should be encoded when submitted. It is used only for forms with method=”post”.

Example

A form with two submit buttons. The first submit button sends the form-data with default encoding, the second submit button sends the form-data encoded as “multipart/form-data”:

<!DOCTYPE html>
<html>
<body>

<h1>The input formenctype attribute</h1>
<form action="/action_sample.asp" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>
</body>
</html>

The formmethod Attribute

As the name indicates, the input formmethod attribute of the HTML form defines the HTTP method for sending form-data to the action URL.

The form-data can be sent as URL variables methods “get” and “post”.

For Example:

A form with two submit buttons. The first sends the form-data with method=”get”. The second sends the form-data with method=”post”:

<!DOCTYPE html>
<html>
<body>

<h1>The input formmethod Attribute</h1>

<form action="/action_sample.php" method="get" target="_blank">
  <label for="first_name">First name:</label>
  <input type="text" id="first_name" name="first_name"><br><br>
  <label for="last_name">Last name:</label>
  <input type="text" id="last_name" name="last_name"><br><br>
  <label for="age">Age:</label>
  <input type="text" id="age" name="age"><br><br>
  <label for="address">Address:</label>
  <input type="text" id="address" name="address"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

</body>
</html>

The formtarget Attribute

As the name formtarget indicates, the input formtarget attribute of the HTML form specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

For Example

Below is an example of a form with two submit buttons, with different target windows:

<!DOCTYPE html>
<html>
<body>

<h1>The input formtarget attribute</h1>
<form action="/action_sample.php">
  <label for="first_name">First name:</label>
  <input type="text" id="first_name" name="first_name"><br><br>
  <label for="last_name">Last name:</label>
  <input type="text" id="last_name" name="last_name"><br><br>
  <label for="age">Age:</label>
  <input type="text" id="age" name="age"><br><br>
  <label for="address">Address:</label>
  <input type="text" id="address" name="address"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
</body>
</html>

The formnovalidate Attribute

As the name indicates, the input formnovalidate attribute of the HTML form specifies that an <input> element should not be validated when submitted.

For Example

Below example defines a form with two submit buttons (with and without validation):

<!DOCTYPE html>
<html>
<body>

<h1>The input formnovalidate attribute</h1>

<form action="/action_sample.php">
  <label for="email_id">Enter your email id:</label>
  <input type="email_id" id="email_id" name="email_id" required><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>

</body>
</html>

The novalidate Attribute

The novalidate attribute of the HTML form is a <form> attribute.

When this attribute is present, it indicates that novalidate specifies that all of the form-data should not be validated when submitted.

For Example:

Below code snippet specifies that no form-data should be validated on submit:

<!DOCTYPE html>
<html>
<body>

<h1>The form novalidate attribute</h1>
<form action="/action_sample.php" novalidate>
  <label for="username">Enter your username:</label>
  <input type="username" id="username" name="username" required><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

HTML Links

The HTML has a connected label that can connect the rakish sections .href is the tag utilized for the HTML interface.

The connection tag can be utilized to put a connection Ina site at that point click that interface that page is to divert into that site page.

<!DOCTYPE html> 
<html> 
       <body> 
             <h2>HTML Links</h2> 
             <p>HTML joins are characterized with the a tag:</p> 
              <a href="https://www.greatlakes.com">This is a link</a> 
       </body> 
</html>

Output

HTML Image Links

Now that we’ve seen how to use links in HTML, the next step in the HTML Tutorial is to see how to add Image Links. To use an image as a link, it is quite simple. All we need to do is use an image inside the hyperlink in place of text.

<!DOCTYPE html> 
<html> 
       <body> 
             <h2>HTML Links</h2> 
             <p>HTML joins are characterized with the a tag:</p> 
              <a href="https://www.greatlakes.com">This is a link</a> 

              <img src="/images/GLlogo.png" alt="Great Lakes" border="0">
            </a>
       </body> 
</html>

HTML Tables

HTML tables are used by web developers to arrange data into rows and columns.

To defines an HTML table, <table> tag is used.

The table row in HTML is defined with a <tr> tag. The table header in HTML is defined with a <th> tag. Each table data/cell in HTML is defined with a <td> tag.

By default in HTML table, the text in <th> elements are bold and centered.

By default in HTML table, the text in <td> elements are regular and left-aligned.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Company1</td>
    <td>Contact1</td>
    <td>Country1</td>
  </tr>
  <tr>
    <td>Company2</td>
    <td>Contact2</td>
    <td>Country2</td>
  </tr>
  <tr>
    <td>Company3</td>
    <td>Contact3</td>
    <td>Country3</td>
  </tr>
  <tr>
    <td>Company4</td>
    <td>Contact4</td>
    <td>Country4</td>
  </tr>
  <tr>
    <td>Company5</td>
    <td>Contact5</td>
    <td>Country5</td>
  </tr>
  <tr>
    <td>Company6</td>
    <td>Contact6</td>
    <td>Country6</td>
  </tr>
</table>

</body>
</html>

Adding a Border

The CSS border property is used to add a border to a table:

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
    <tr>
    <td>Sample_fname1</td>
    <td>Sample_lname1</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Sample_fname2</td>
    <td>Sample_lname2</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Sample_fname3</td>
    <td>Sample_lname3</td>
    <td>30</td>
  </tr>

</table>

</body>
</html>

The user should define borders for both the table and the table cells.

Collapsed Borders

The CSS border-collapse property is added to let the borders collapse into one border:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
    <tr>
    <td>Sample_fname1</td>
    <td>Sample_lname1</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Sample_fname2</td>
    <td>Sample_lname2</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Sample_fname3</td>
    <td>Sample_lname3</td>
    <td>30</td>
  </tr>
</table>

</body>
</html>

Cell Padding

Cell padding in HTML is used to specify the space between the cell content and its borders. If the user does not specify a padding, the table cells will be displayed without padding. The CSS padding property of the CSS is used to set the padding in HTML tables:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
</style>
</head>
<body>

<h2>Cellpadding</h2>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
    <tr>
    <td>Sample_fname1</td>
    <td>Sample_lname1</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Sample_fname2</td>
    <td>Sample_lname2</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Sample_fname3</td>
    <td>Sample_lname3</td>
    <td>30</td>
  </tr>
</table>

</body>
</html>

Left-Align Headings

The table headings in HTML are bold and centered by default. The CSS text-align property is used to left-align the table headings:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Left-align Headings</h2>
<p>The text-align property of CSS is used to left-align the table headings</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
    <tr>
    <td>Sample_fname1</td>
    <td>Sample_lname1</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Sample_fname2</td>
    <td>Sample_lname2</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Sample_fname3</td>
    <td>Sample_lname3</td>
    <td>30</td>
  </tr>
</table>

</body>
</html>

Border Spacing

The space between the cells is specified by border-spacing. The CSS border-spacing property is used to set the border-spacing for a table:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>The space between the cells is specified by border spacing in the HTML</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
     <tr>
    <td>Sample_fname1</td>
    <td>Sample_lname1</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Sample_fname2</td>
    <td>Sample_lname2</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Sample_fname3</td>
    <td>Sample_lname3</td>
    <td>30</td>
  </tr>
</table>

</body>
</html>

Colspan Attribute

In the HTML table, the colspan attribute is used to make a cell span to more than one column.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans over two columns</h2>
<p>The colspan attribute is used to make a cell span more than one column .</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Sample_Name1</td>
    <td>Phone1</td>
    <td>Phone2</td>
  </tr>
</table>

</body>
</html>

Rowspan Attribute

Use the rowspan attribute of HTML to make a cell span in more than one row:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>
<p>Use the rowspan attribute, to make a cell span in more than one row. </p>

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Sample_Name1</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>Phone1</td>
  </tr>
  <tr>
    <td>Phone2</td>
  </tr>
</table>

</body>
</html>

HTML CSS

You’ve already seen how styles can change the appearance of different elements. Cascading Style Sheets (CSS) is a language for outlining style (e.g. colours, fonts, margin and size) to HTML documents. Let’s see how the Style sheet works. You can attach CSS with HTML documents in 3 simple ways:

Inline:

As the name says, inline CSS used to apply a style to one HTML element at a time with the help of style attribute. Let’s see the example.

Internal:

Now we know that inline CSS for one line. What if we want to style the same element (e.g. all <p> tags) in the single HTML document, then we can use internal CSS. An internal CSS is defined in the <Head> section within <Style> tags.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: red;}
P {color: green;}
</style>
</head>
<body>
<h1>HTML Tutorials </h1>
<p>Paragraph1</p>
<p>Paragraph2</p>
</body>
</html>

External:

In the above two methods, we embedded the style sheet in the HTML document using the style element. The external style sheets are commonly used when you want to do style modifications on different pages. An external style sheet (.css file) contains several style rules. You can attach a .css document to one or more HTML documents with the help of <link> tag inside the head section.

<!DOCTYPE html>
<html>
<head>
<link rel-"stylesheet" href-"style.css">
</head>
<body>
<h1>HTML Tutorials</h1>
<p>Paragraph1</p>
<p>Paragraph2</p>
</body>
</html>

style.css file expressions like:

h1 {
color: orange;
}
p{
color: skyblue;
}

Let’s check some commonly used font-related CSS properties:

color
font-family
font-size
font-style

color	Colour property of CSS used to change the colour of the text.
You can use the colour value (numeric \| name)
font-family	font-family property of CSS used to change the font
You can use values as (one or more font names separated by commas)
font-size	font-size property of CSS used to change the font size
You can use values as (percentage \| length unit)
font-style	font-style property of CSS used to change the font style
You can use values as(italic \| oblique)

<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: #FF0000;
font-family: courier;
font-size: 120%;
font-style: italic;
}
pl
color: blue;
font-family: Verdana, sans-serif;
font-size: 12px;
font-style: oblique;
}
</style>
</head>
<body>
<h1>HTML Tutorial</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>

Let’s check some commonly used box-related CSS properties:

Padding:

The area (space) between the content and boundaries is the padding.

Border:

The border is a line covering the element and its surrounding area such as padding.

Margins:

An optional amount of space added on the outside of the border is the margin.

<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px dotted red;
padding: 30px;
margin: 50px;
}
</style>
</head>
<body>
<h1 styles="colour:green;">HTML Tutorial</h1>
<p>Paragraph1</p>
<p>Paragraph2</p>
</body>

HTML Classes

The class attribute organizes HTML elements into abstract groups. Different HTML elements can belong to the same class name. With the help of class attributes, you can use a single style rule to apply styles to all of the classed elements at once or manipulate them all with a script.

With the help of class attributes, you can apply styles to all of the classed elements together with a single style rule or control them all with a script.

We have to write (.)class_name to style that class. Let’s check one example of the class attribute.

<!DOCTYPE html>
<html>
<head>
<style>
.engineering
color: red;
text-align: center;
}
.fields {
color:blue;
}
</style>
</head>
<body>
<h1 class="engineering">Engineering</h2>
<h2 class="fields">Paragraph about IT engineering</h2>
<h2 class="fields">Paragraph about Mechanical engineering</h2>
<h2 class="fields">Paragraph about Civil engineering</h2>
</body>
</html>

HTML Marquees

The HTML < marquee > tag is used to rotate text or picture segments, depending on the settings, either horizontally or vertically the screen of your website. The marquee tag has deprecated in HTML5 for the same results you can use CSS and JavaScript. To learn more about JavaScript, you can check our JavaScript blog.

<!DOCTYPE html>
<html>
<head>
<style>
marquee{
font-size: 20px;
font-weight: 700;
color: skyblue;
}
</style>
</head>
<body>
<marquee direction="left">Marquee Text here.</marquee>
</body>
</html>

HTML File Path

You can link different files externally by providing the path location of that file. You can use an absolute or relative path to attach the following files:

Web pages
Images
Style sheets
JavaScript

An absolute path is an URL whereas relative path points to a file in the folder. We’ll see an example of both attachment methods.

Absolute path example:

<!DOCTYPE html>
<html>
<body>
<h2>Absolute file path</h2>
<img
src="https://d1vwxdpzbgdqj.cloudfront.net/s3-public-images/learning-partners/greatlearning-brand
.png" alt="greatlearning" style="width:300px">
</body>
</html>

Relative path example:

HTML Embed Multimedia

In today’s world multimedia is the most important; component of the web. Multimedia can be almost anything, like images, audios, videos, records, music, animations, and many more. You can embed multimedia files in your website with the help of <embed> tag.

There are many video and audio formats. HTML standard supports the MP4, WebM, and Ogg formats for video whereas MP3, WAV, and Ogg formats for audio. HTML5 provides native audio and video tags as <video> & <audio>. We’ll check both methods to embed multimedia in a web page.

Some attributes which needed for native elements as below:

src: The path/URL for the audio/video to be played.
height: The height of the video.
width: The width of the video.
Controls: it gives controls for audio/video like play, pause, volume, etc.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<embed type="video/mp4" src="video.mp4" width="426" height="240">
<embed type="audio/mp3" src="music.mp3">
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<video width="426" height="240" controls>
<source src="video.mp4" type="video/webm">
</video>
<br>
<audio controls>
<source src="music.ogg" type="audio/ogg">
</audio>
</body>
</html>

Output: video and music file available in the output folder

HTML Quotations

The quotation elements used in HTML to quote any text in a web document. We can easily differentiate quoted texts apart from normal text. Let’s check commonly used quotation elements of HTML:

q quotation:

The < q > HTML tag is used to quote small parts of text. It’s an inline quotation with both opening and closing tags.

blockquote quotation:

The <blockquote> HTML tag is used to quote a large section such as paragraph. It changes the alignment of the block to look unique from others.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>With the help of HTML quotation <q>You can quote facts</a> to look different from normal
text.
<blockquote>Block quotation is for block-level element such as paragraphs, lists, etc. It changes
alignment of block to look different.</blockquote>
</body>
</html>

address quotation:

The <address> HTML tag used to create an area for an author contact information on the website. It is mostly positioned at the end of the document. The browsers always apply a line break before and after the <address> tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<address>
Contact us<br>
Blog Coordinator<br>
test address<br>
mob. 90000<br>
</address>
</body>
</html>

abbr quotation:

The <abbr> HTML tag used to write a shortened form of a word or phrase. The full-form will be pop-up when you mouse hovers on the <abbr> element.

bdo quotation:

The <bdo> HTML tag is used to override a text in bi-directional format. Direction can be left-to-right or right-to-left.

cite quotation:

The <cite> HTML tag is used for citation. The text written in the <cite> tags draws in italic on the browser.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>The <abbr title="Hypertext Markup Language">HTML</abbr>Tutorial</p>
<bdo dir="ltr">You can write text from left to right.</bdo><br>
<bdo dir="rtl">You can write text from right to left.</bdo>
<p><cite>Blog Written</cite> by great learning academy.</p>
</body>
</html>

HTML Semantic Elements

Semantic elements accurately describe the meaning of words inside an HTML tag. For example, header, table, form, article, footer, etc. Let’s check some semantic elements of HTML:

figure and figcaption element:

The <figure> element used to add content that displays image, snippet, etc. on a web page. A description can attach above or below to the figure using the <figcaption> element.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<figure>
<img src="diagram.png" alt="figure_1">
<figcaption>Figure 1. Figure caption is here</figcaption>
</figure>
</body>
</html>

section and article elements:

To divide web documents into groups that have a meaningful reason to be grouped like Introduction, conclusion, etc. we can use <section> elements. The <article> tag includes independent content that does not need any other reference, Like YouTube page that contain a different kind of videos.

mark elements:

The <mark> element is useful to draw special attention to words.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<article>
<h1>History of India</h1>
<section>
<h2>History of<mark>Mughal</mark>empire</h2>
<p>...</p>
</section>
</article>

details and summary elements:

The <details> element used to deliver extra information that is hidden by default. When you use <details> element, <summary> element also needed to display heading for <details> element. Users can click on heading to view additional information.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<details>
<summary>Heading here</summary>
<p>Additional information is here.....</p>
</details>
</body>
</html>

header and footer elements:

The <header> element is used for a container that occurs at the top of a web page. The header element contains information like a logo, headings, etc. The <footer> tag contains information that usually comes at the end of a page such as its author, copyright information, etc.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<article>
<header>
<h1=HTML Tutorial</h1>
<p>by Great Learning Acadumy</p>
</header>
<p>...article content here...</p>
<footer>
<p>P<small>Coptright &copt:2020 great learning acadummy</small></p>
<nav>
<ul>
<li>Next</li>
<li>Previous</li>
</ul>
</nav>
</header>
</article>
</body>
</html>

aside elements:

The <aside> element comprises independent content that does not need any other reference. An aside may hold a list of links, or anything else that might connect with the surrounding content but not part of it.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Web Tutorials</h1?
<p>Tutorial for Front end developers...</p>
<p>Tutorials for Back end developers...</p>
<aside>
<h2>Programming languages</h2>
<ul>
<li>a href="#">Python</a></li>
<li>a href="#">Java</a></li>
</ul>
</aside>

nav elements:

The <nav> element provides a section that contains navigation links for a site. You can use the <nav> tag for the link that provides primary navigation around the website.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> Tutorials: </p>
<nav>
<a href = "#">HTML</a> |
<a href = "#">Python</a> |
<a href = "#">Java</a> |
<a href = "#">Android</a> | 
</nav>
</body>
</html>

HTML Frames

HTML frames used to split the browser window into several sections where a separate HTML document can be loaded in each portion. The bunch of frames displayed in the browser window is called a frameset.

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "30%,40%,30%">
<frame name = "left" src ="#"/>
<frame name = "center" src ="#"/>
<frame name = "rght" src ="#"/>
<noframes>
<body> Browser doesn't support frames.</body>
</noframes>
</frameset>
</html>

You can see <frameset> tag replaced <body> tag while creating frames. <body> tag is the most important tag in HTML that’s the reason <frame> and <frameset> tag deprecated in HTML5.

HTML Iframes

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Iframes examle</h2>
<iframe src="#" height=width="300" title="iframe 1"></iframe>
</body>
</html>

HTML Entities

There are certain reserved characters in HTML. These reserved characters must be replaced with HTML Entities. If you are using less than (<) or greater than (>) symbols in your text, there is a chance of getting mixed up with tags. To display these reserved characters, we use HTML Entities.

&entity_name;

OR 

&#entity_number;

For example, to display less than, we will write: < OR <

HTML Computer Code

In HTML, we can use several elements that will help us define user input and computer code. The <kbd> element is useful in defining keyboard input and the content is displayed in the browsers default monospace font.

<!DOCTYPE html>
<html>
<body>

<h2>kbd Element</h2>

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

</body>
</html>

The <samp> element can help us define a sample output from a computer program. This content is displayed in the browser’s default monospace font.

<!DOCTYPE html>
<html>
<body>

<h2>samp Element</h2>

<p><samp>File not found.<br>Press F1 to continue</samp></p>

</body>
</html>

HTML vs XHTML

XHTML stands for eXtensible HTML. XHTML has been introduced to make HTML more extensible and versatile to deal with other data formats (e.g. XML). XHTML has capabilities of both XML and HTML. It can be used as a superior version of HTML. The first version, XHTML 1.0, is almost similar to HTML 4.01. Let’s check face-to-face comparison of both markup language.

Parameters	HTML	XHTML
Stands for	HyperText Markup Language	Extensible HyperText Markup Language
Extended from	SGML	XML, HTML
File extension	.html, .htm	.xhtml, .xht, .xml
Closing tags	not necessary	necessary
<!DOCTYPE>	not necessary	necessary
Elements must be in Lowercase	not necessary	necessary
Attribute Names must be in Lowercase	not necessary	necessary

Let’s check one XHTML code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang"en">
<head>
<title>Transitional DTD XHTML</title>
</head>
<body>
<div>Hello World</div>
<p>Your first XHTML file</p>
</body>
</html>

HTML Canvas

The word canvas says that it’s a two-dimensional rectangular area for drawing. The <canvas> tag used to draw a graphical item on the web page with the help of JavaScript. The canvas is raster-based and made up of a bunch of tiny pixels, so it has low scalability.

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border:1px solid red;
}
</style>
<script>
window.onload=function(){
var a = document.getElementByld("canvas");
var ct = a.getContext("2d");
ct.font = "30px Arial";
ct.fillText("Draw here..",25,50);
};
</script>
</head>
<body>
<canvas id="canvas" width="200" height="80">
</canvas>
</body>
</html>

HTML SVG

The <svg> HTML tag is used to draw scalable vector-based graphics for the web. Vector images are made up of a mathematical formula; hence there is no upper or lower limit for scaling. SVG can be customizable through script and CSS. SVG images can handle events.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
svg {
borger: 1px solid black;
}
</style>
</head>
</body>
<svg width="200" height="200">
<circle cx="150" cy="100" r="70" style="fil:red; stroke:green; stroke-width:3"/>
</svg>
</body>
</html>

This brings us to the end of this HTML tutorial. If you want to improve your skills be sure to enrol in our free online programs. Click on the banner below to know more!

HTML Tutorial FAQs

What is HTML used for?

HTML is the programming language that is used to create web page structure and content. By structure we mean the way content is placed within paragraphs, bullets, data tables, or in the form of images and videos.

2. What HTML means?

HTML stands for HyperText Markup Language is a set of markup symbols and codes that are inserted into a file to display on the internet. Hypertext refers to the hyperlinks on the HTML page and markup language is the way that tags are used to define the layout of the page. The markup instructs the web browsers on how they should display the content and images.

3. How do I start HTML coding?

Open Notepad (Windows PC) or TextEdit (Mac)
Write or copy an existing HTML code on Notepad
Save the file as HTML page on your computer
View the HTM page on your browser

4. What is HTML syntax?

A syntax in HTML is the arrangement of attributes and elements for the purpose of creating well-formed documents. Syntax defines the purpose of the attributes and elements along with the logical relationship between them.

5. Is HTML coding good?

HTML is a basic programming language for web developers and designers. It is beneficial for professionals across various disciplines such as developers, marketers, analysts, among others. It is gaining popularity across domains and hence is definitely considered as a good.

6. How do I start learning HTML?

You can learn HTML by reading a HTML Tutorial available on the Great Learning blog. You can also take up the Front End Development – HTML Free Online course offered by Great Learning Academy and upskill today.

Full Stack Software Development Course from UT Austin

Cloud Computing PG Program by Great Lakes

Introduction to HTML: What is HTML and How it Works?

HTML Tutorial – What is HTML?

Applications of HTML

Features Of HTML

HTML Editor

HTML Skeleton

HTML Basic

HTML Comment

HTML Elements

What is HTML Elements Definition

Types of Elements

HTML Attributes

HTML Tags

Meta Tags in HTML

HTML Forms

HTML Form Attributes

HTML Form Elements

HTML Input Types

HTML Links

HTML Image Links

HTML Tables

Adding a Border

Collapsed Borders

Cell Padding

Left-Align Headings

Border Spacing

Colspan Attribute

Rowspan Attribute

HTML CSS

HTML Classes

HTML Marquees

HTML File Path

HTML Embed Multimedia

HTML Quotations

HTML Semantic Elements

HTML Frames

HTML Iframes

HTML Entities

HTML Computer Code

HTML vs XHTML

HTML Canvas

HTML SVG

HTML Tutorial FAQs

SQL Tutorial for Beginners | What is SQL (Structured Query Language)?

SQL Practice Questions | Structured Query Language Questions

Selection Sort Algorithm in C, in Java, in C++, in Python & Examples

Append in Python| How is Append function used in Python

Git Tutorial| What is Git?

Docker Tutorial | What is Docker?

Full Stack Software Development Course from UT Austin

Cloud Computing PG Program by Great Lakes