HTML Tutorials

HTML Table
HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.
We can create a table to display data in tabular form, using <table>

element, with the help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header
section, navigation bar, body content, footer section etc. But it is
recommended to use div tag over table to manage the layout of the
page .
HTML Table Tags

Tag Description
<table> It defines a table.

<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting
<col> It is used with <colgroup> element to specify column properties for
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.
HTML Table Example

Let's see the example of HTML table tag. It output is shown above.
1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
Test it Now
Output:
First_Name Last_Name Marks

Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15

values.
HTML Table with Border

There are two ways to specify border for HTML tables.
1. By border attribute of table in HTML

2. By border property in CSS
1) HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But
it is not recommended now.
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
Test it Now
Output:
First_Name Last_Name Marks

Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
2) CSS Border property

It is now recommended to use border property of CSS to specify border
in table.
<style>
table, th, td {
border: 1px solid black;
}
</style>
Test it Now
You can collapse all the borders in one border by border-collapse

property. It will collapse the border into one.
<style>
table, th, td {
border-collapse: collapse;
}
</style>
Test it Now
Output:
Name Last Name Marks

Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
HTML Table with cell padding

You can specify padding for table header and table data by two ways:
1. By cellpadding attribute of table in HTML

2. By padding property in CSS
The cellpadding attribute of HTML table tag is obselete now. It is

recommended to use CSS. So let's see the code of CSS.
<style>
table, th, td {
border: 1px solid pink;
}
th, td {
padding: 10px;
}
</style>
Test it Now
Output:
Name Last Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
HTML Table width:

We can specify the HTML table width using the CSS width property. It
can be specify in pixels or percentage.
We can adjust our table width as per our requirement. Following is the
example to display table with width.
table{
width: 100%;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
table{
width: 100%;
}
th,td{
border: 2px solid green;
padding: 15px;
}

</style>
</head>
<body>
<table>
<tr>
<th>1 header</th>
<th>1 header</th>
<th>1 header</th>
</tr>
<tr>
<td>1data</td>
<td>1data</td>
<td>1data</td>
</tr>
<tr>
<td>2 data</td>
<td>2 data</td>
<td>2 data</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
</body>
</html>
Test it Now
Output:
HTML Table with colspan

If you want to make a cell span more than one column, you can use the
colspan attribute.
It will divide one cell/row into multiple columns, and the number of
columns depend on the value of colspan attribute.
Let's see the example that span two columns.
CSS code:
<style>
table, th, td {
}
th, td {
padding: 5px;
}
</style>
HTML code:
1. <table style="width:100%">
2. <tr>
3. <th>Name</th>
4. <th colspan="2">Mobile No.</th>
5. </tr>
6. <tr>
7. <td>Ajeet Maurya</td>
8. <td>7503520801</td>
9. <td>9555879135</td>
10. </tr>
11. </table>
Test it Now
Output:
Name Mobile No.

Ajeet Maurya 7503520801 9555879135
HTML Table with rowspan

If you want to make a cell span more than one row, you can use the
rowspan attribute.
It will divide a cell into multiple rows. The number of divided rows will
depend on rowspan values.
Let's see the example that span two rows.
CSS code:
<style>
table, th, td {
}
th, td {
padding: 10px;
}
</style>
HTML code:
<table>
<tr><th>Name</th><td>Ajeet Maurya</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
<tr><td>9555879135</td></tr>
</table>
Test it Now
Output:
Name Ajeet Maurya
7503520801
Mobile No.
9555879135
HTML table with caption

HTML caption is diplayed above the table. It must be used after table
tag only.
1. <table>
2. <caption>Student Records</caption>
3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>
6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>
7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
8. </table>
Test it Now
Styling HTML table even and odd cells

CSS code:
<style>
table, th, td {
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: #eee;
}
table#alter tr:nth-child(odd) {
background-color: #fff;
}
table#alter th {
color: white;
background-color: gray;
}
</style>
Test it Now
Output:
NOTE: You can also create various types of tables using different CSS properties
in your table.
HTML Lists
HTML Lists are used to specify lists of information. All lists may
contain one or more list elements. There are three different types of
HTML lists:
1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
Note: We can create a list inside another list, which will be termed as nested List.
HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by
default. It is known as numbered list also. The ordered list starts with
<ol> tag and the list items start with <li> tag.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
Test it Now
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
Click here for full details of HTML ordered list. HTML Ordered List
Play Videox
HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is
also known as bulleted list also. The Unordered list starts with <ul> tag
and list items start with the <li> tag.
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
Test it Now
Output:
o Aries
o Bingo
o Leo
o Oracle
Click here for full details of HTML unordered list. HTML Unordered

List
HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML
and XHTML. It is also known as definition list where entries are listed
like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present

glossary, list of terms or other name-value list.
The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
Test it Now
Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
Click here for full details of HTML description list. HTML Description

List
HTML Nested List

A list within another list is termed as nested list. If you want a bullet list
inside a numbered list then such type of list will called as nested list.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Nested list</title>
</head>
<body>
<p>List of Indian States with thier capital</p>
<ol>
<li>Delhi
<ul>
<li>NewDelhi</li>
</ul>
</li>
<li>Haryana
<ul>
<li>Chandigarh</li>
</ul>
</li>
<li>Gujarat
<ul>
<li>Gandhinagar</li>
</ul>
</li>
<li>Rajasthan
<ul>
<li>Jaipur</li>
</ul>
</li>
<li>Maharashtra
<ul>
<li>Mumbai</li>
</ul>
</li>
<li>Uttarpradesh
<ul>
<li>Lucknow</li></ul>
</li>
</ol>
</body>
</html>
Test it Now
Output:
HTML Ordered List | HTML Numbered List

HTML Ordered List or Numbered List displays elements in numbered
format. The HTML ol tag is used for ordered list. We can use ordered
list to represent items either in numerical order format or alphabetical
order format, or any format where an order is emphasized. There can be
different types of numbered list:
o Numeric Number (1, 2, 3)

o Capital Roman Number (I II III)
o Small Romal Number (i ii iii)
o Capital Alphabet (A B C)
o Small Alphabet (a b c)
To represent different ordered lists, there are 5 types of attributes in <ol>

tag.
Type Description
Type "1" This is the default type. In this type, the list items are numbered with nu
Type "I" In this type, the list items are numbered with upper case roman numbers
Type "i" In this type, the list items are numbered with lower case roman numbers
Type "A" In this type, the list items are numbered with upper case letters.
Type "a" In this type, the list items are numbered with lower case letters.
HTML Ordered List Example

Let's see the example of HTML ordered list that displays 4 topics in
numbered list. Here we are not defining type="1" because it is the
default type.
1. <ol>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
1. HTML
2. Java
3. JavaScript
4. SQL
ol type="I"
Let's see the example to display list in roman number uppercase.
1. <ol type="I">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
I. HTML
II. Java
III. JavaScript
IV. SQL
ol type="i"
Let's see the example to display list in roman number lowercase.
1. <ol type="i">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
i. HTML
ii. Java
iii. JavaScript
iv. SQL
ol type="A"
Let's see the example to display list in alphabet uppercase.
1. <ol type="A">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
A. HTML
B. Java
C. JavaScript
D. SQL
ol type="a"
Let's see the example to display list in alphabet lowercase.
1. <ol type="a">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
a. HTML
b. Java
c. JavaScript
d. SQL
start attribute
The start attribute is used with ol tag to specify from where to start the
list items.
<ol type="1" start="5">: It will show numeric values starting with

"5".
<ol type="A" start="5"> : It will show capital alphabets starting with

"E".
<ol type="a" start="5"> : It will show lower case alphabets starting
with "e".
<ol type="I" start="5"> : It will show Roman upper case value

starting with "V".
<ol type="i" start="5"> : It will show Roman lower case value starting
with "v".
1. <ol type="i" start="5">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
v. HTML
vi. Java
vii. JavaScript
viii. SQL
reversed Attribute:
This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5
version. If you use the reversed attribute with
tag then it will numbered the list in descending order (7, 6, 5,

4......1).
Example:
1. <ol reversed>
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
HTML Unordered List | HTML Bulleted
List
HTML Unordered List or Bulleted List displays elements in bulleted
format . We can use unordered list where we do not need to display
items in any particular order. The HTML ul tag is used for the unordered
list. There can be 4 types of bulleted list:
o disc
o circle
o square
o none
To represent different ordered lists, there are 4 types of attributes in <ul>

tag.
Type Description
Type "disc" This is the default style. In this style, the list items are marked wit
Type "circle" In this style, the list items are marked with circles.
Type "square" In this style, the list items are marked with squares.
Type "none" In this style, the list items are not marked .
HTML Unordered List Example

1. <ul>
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ul>
Test it Now
Output:
o HTML
o Java
o JavaScript
o SQL
ul type="circle"
1. <ul type="circle">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ul>
Test it Now
Output:
o HTML
o Java
o JavaScript
o SQL
ul type="square"
1. <ul type="square">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ul>
Test it Now
Output:
o HTML
o Java
o JavaScript
o SQL
ul type="none"
1. <ul type="none">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ul>
Test it Now
Output:
o HTML
o Java
o JavaScript
o SQL
Note: The type attribute is not supported in HTML5, instead of type you can use
CSS property of list-style-type. Following is the example to show the CSS property
for ul tag.
1. <ul style="list-style-type: square;">
2. <li>HTML</li>
3. <li>Java</li>
5. <li>SQL</li>
6. </ul>
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2>The type attribute with CSS property</h2>
7. <ul style="list-style-type: square;">
8. <li>HTML</li>
9. <li>Java</li>
11. <li>SQL</li>
12. </ul>
13. </body>
14. </html>
Test it Now
Output:
HTML Description List | HTML Definition
List
HTML Description List or Definition List displays elements in
definition form like in dictionary. The <dl>, <dt> and <dd> tags are
used to define description list.
The 3 HTML description list tags are given below:
1. <dl> tag defines the description list.

2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).
1. <dl>
2. <dt>HTML</dt>
3. <dd>is a markup language</dd>
4. <dt>Java</dt>
5. <dd>is a programming language and platform</dd>
6. <dt>JavaScript</dt>
7. <dd>is a scripting language</dd>
8. <dt>SQL</dt>
9. <dd>is a query language</dd>
10. </dl>
Test it Now
Output:
HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language
HTML Form
An HTML form is a section of a document which contains controls
such as text fields, password fields, checkboxes, radio buttons, submit
button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the
server for processing such as name, email address, password, phone
number, etc. .
Why use HTML Form

HTML forms are required if you want to collect some data from of the
site visitor.
For example: If a user want to purchase some items on internet, he/she

must fill the form such as shipping address and credit/debit card details
so that item can be sent to the given address.
Play Videox
HTML Form Syntax

1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>
HTML Form Tags

Let's see the list of HTML 5 form tags.
Tag Description
<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
HTML 5 Form Tags

Let's see the list of HTML 5 form tags.
Tag Description
<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.
<output> It defines the result of a calculation.
HTML <form> element

The HTML <form> element provide a document section to take input
from user. It provides various interactive controls for submitting
information to web server such as text field, text area, password field,
etc.
Note: The <form> element does not itself create a form but it is container to
contain all required form elements, such as <input>, <label>, etc.
Syntax:
1. <form>
2. //Form elements
3. </form>
HTML <input> element
The HTML <input> element is fundamental form element. It is used to
create form fields, to take input from user. We can apply different input
filed to gather different information form user. Following is the example
to show the simple text input.
Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>
Output:
HTML TextField Control

The type="text" attribute of input tag creates textfield control also
known as single line textfield control. The name attribute is optional, but
it is required for the server side component such as JSP, ASP, PHP etc.
1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>
Output:
Note: If you will omit 'name' attribute then the text filed input will not be
submitted to server.
HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a
form. The size of <textarea> can be specify either using "rows" or "cols"
attribute or by CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
Output:
Label Tag in Form

It is considered better to have label in form. As it makes the code
parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do so,
you need to have for attribute in label tag that must be same as id
attribute of input tag.
NOTE: It is good to use <label> tag with form, although it is optional but if you
will use it, then it will provide a focus when you tap or click on label tag. It is more
worthy with touchscreens.
1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>
Output:
HTML Password Field Control

The password is not visible to the user in password field control.
1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <
br/>
4. </form>
Output:
HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct email
address. You must use @ and . in this field.
1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>
It will display in browser like below:
Note: If we will not enter the correct email, it will display error like:
Radio Button Control
The radio button is used to select one option from multiple options. It is
used for selection of gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can
be selected at a time.
Using radio buttons for multiple options, you can only choose a single
option at a time.
1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"
/>Male
4. <input type="radio" id="gender" name="gender" value="femal
e"/>Female <br/>
5. </form>
Checkbox Control
The checkbox control is used to check multiple options from given
checkboxes.
1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="c
ricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value=
"football"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="
hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>
Note: These are similar to radio button except it can choose multiple options at a
time and radio button can select one button at a time, and its display.
Output:
Submit button control
HTML <input type="submit"> are used to add a submit button on web
page. When user clicks on submit button, then form get submit to the
server.
Syntax:
1. <input type="submit" value="submit">
The type = submit , specifying that it is a submit button
The value attribute can be anything which we write on button on web

page.
The name attribute can be omit here.
Example:
1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
7. </form>
Output:
HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related
information of a form. This element is used with <legend> element
which provide caption for the grouped elements.
Example:
1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
9. </fieldset>
10. lt;/form>
Output:
HTML Form Example

Following is the example for a simple form of registration.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="ma
le"/>Male <br>
21. <input type="radio" id="gender" name="gender" value="fe
male"/>Female <br/>
22. <input type="radio" id="gender" name="gender" value="oth
ers"/>others <br/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>
Test it Now
Output:
HTML Form Example
Let's see a simple example of creating HTML form.
1. <form action="#">
2. <table>
3. <tr>
4. <td class="tdLabel"><label for="register_name" class="label">Enter
name:</label></td>
5. <td><input type="text" name="name" value="" id="register_name" s
tyle="width:160px"/></td>
6. </tr>
7. <tr>
8. <td class="tdLabel"><label for="register_password" class="label">E
nter password:</label></td>
9. <td><input type="password" name="password" id="register_passwo
rd" style="width:160px"/></td>
10. </tr>
11. <tr>
12. <td class="tdLabel"><label for="register_email" class="label">
Enter Email:</label></td>
13. <td
14. ><input type="email" name="email" value="" id="register_email"
style="width:160px"/></td>
15. </tr>
16. <tr>
17. <td class="tdLabel"><label for="register_gender" class="label"
>Enter Gender:</label></td>
18. <td>
19. <input type="radio" name="gender" id="register_gendermale" val
ue="male"/>
20. <label for="register_gendermale">male</label>
21. <input type="radio" name="gender" id="register_genderfemale" v
alue="female"/>
22. <label for="register_genderfemale">female</label>
23. </td>
24. </tr>
25. <tr>
26. <td class="tdLabel"><label for="register_country" class="label
">Select Country:</label></td>
27. <td><select name="country" id="register_country" style="widt
h:160px">
28. <option value="india">india</option>
29. <option value="pakistan">pakistan</option>
30. <option value="africa">africa</option>
31. <option value="china">china</option>
32. <option value="other">other</option>
33. </select>
34. </td>
35. </tr>
36. <tr>
37. <td colspan="2"><div align="right"><input type="submit" id=
"register_0" value="register"/>
38. </div></td>
39. </tr>
40. </table>
41. </form>
Test it Now
HTML Form Input Types

In HTML <input type=" "> is an important element of HTML form. The
"type" attribute of input element can be various types, which defines
information field. Such as <input type="text" name="name"> gives a
text box.
Following is a list of all types of <input> element of

HTML.
type=" " Description
text Defines a one-line text input field

password Defines a one-line password input field
submit Defines a submit button to submit the form to server
reset Defines a reset button to reset all values in the form.
radio Defines a radio button which allows select one option.
checkbox Defines checkboxes which allow select multiple options form.
button Defines a simple push button, which can be programmed to perform
event.
file Defines to select the file from device storage.
image Defines a graphical submit button.
HTML5 added new types on <input> element. Following is the list of

types of elements of HTML5
type=" " Description
color Defines an input field with a specific color.

date Defines an input field for selection of date.
datetime-local Defines an input field for entering a date without time zone.
email Defines an input field for entering an email address.
month Defines a control with month and year, without time zone.
number Defines an input field to enter a number.
url Defines a field for entering URL
week Defines a field to enter the date with week-year, without time zon
search Defines a single line text field for entering a search string.
tel Defines an input field for entering the telephone number.
Following is the description about types of <input> element with

examples.
1. <input type="text">:
<input> element of type "text" are used to define a single-line input text
field.
Example:
1. <form>
2. <label>Enter first name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter last name</label><br>
5. <input type="text" name="lastname"><br>
6. <p><strong>Note:</strong>The default maximum cahracter lenght i
s 20.</p>
7. </form>
Test it Now
Output:
Input "text" type:
The "text"field defines a sinlge line input text field.
Enter first name
Enter last name
Note:The default maximum cahracter lenght is 20.
2. <input type="password">:
The <input> element of type "password" allow a user to enter the
password securely in a webpage. The entered text in password filed
converted into "*" or ".", so that it cannot be read by another user.
Example:
1. <form>
2. <label>Enter User name</label><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>
Test it Now
Output:
Input "password" type:
The "password"field defines a sinlge line input password field to enter

the password securely.
Enter User name
Enter Password
s ubmit
3. <input type="submit">:
The <input> element of type "submit" defines a submit button to submit
the form to the server when the "click" event occurs.
Example:
1. <form action="https://www.javatpoint.com/html-tutorial">
2. <label>Enter User name</label><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>
Test it Now
Output:
Input "submit" type:
Enter User name
Enter Password
s ubmit
After clicking on submit button, this will submit the form to server and
will redirect the page to action value.We will learn about "action"
attribute in later chapters
4. <input type="reset">:
The <input> type "reset" is also defined as a button but when the user
performs a click event, it by default reset the all inputted values.
Example:
1. <form>
2. <label>User id: </label>
3. <input type="text" name="user-id" value="user">
4. <label>Password: </label>
5. <input type="password" name="pass" value="pass"><br><br>
6. <input type="submit" value="login">
7. <input type="reset" value="Reset">
8. </form>
Test it Now
Output:
Input "reset" type:

us e r ****
User id: Password:
login Re s e t

Try to change the input values of user id and password, then when you
click on reset, it will reset input fields with default values.
5. <input type="radio">:
The <input> type "radio" defines the radio buttons, which allow
choosing an option between a set of related options. At a time only one
radio button option can be selected at a time.
Example:
1. <form>
2. <p>Kindly Select your favorite color</p>
3. <input type="radio" name="color" value="red"> Red <br>
4. <input type="radio" name="color" value="blue"> blue <br>
5. <input type="radio" name="color" value="green">green <br>
6. <input type="radio" name="color" value="pink">pink <br>
8. </form>
Test it Now
Output:
Input "radio" type

Kindly Select your favorite color
Red
blue
green
pink
s ubmit
6. <input type="checkbox">:
The <input> type "checkbox" are displayed as square boxes which can
be checked or unchecked to select the choices from the given options.
Note: The "radio" buttons are similar to checkboxes, but there is an important
difference between both types: radio buttons allow the user to select only one
option at a time, whereas checkbox allows a user to select zero to multiple options
at a time.
Example:
1. <form>
2. <label>Enter your Name:</label>
3. <input type="text" name="name">
4. <p>Kindly Select your favourite sports</p>
5. <input type="checkbox" name="sport1" value="cricket">Cricket<b
r>
6. <input type="checkbox" name="sport2" value="tennis">Tennis<br
>
7. <input type="checkbox" name="sport3" value="football">Football<
br>
8. <input type="checkbox" name="sport4" value="baseball">Baseball
<br>
9. <input type="checkbox" name="sport5" value="badminton">Badmi
nton<br><br>
11. </form>
Test it Now
Output:
Input "checkbox" type
Registration Form
Enter your Name:
Kindly Select your favorite sports
Cricket
Tennis
Football
Baseball
Badminton
s ubmit
7. <input type="button">:
The <input> type "button" defines a simple push button, which can be
programmed to control a functionally on any event such as, click event.
Note: It mainly works with JavaScript.
Example:
1. <form>
2. <input type="button" value="Clcik me " onclick="alert('you are lear
ning HTML')">
3. </form>
Test it Now
Output:
Input "button" type.

Click the button to see the result:
Note: In the above example we have used the "alert" of JS, which you will learn in
our JS tutorial. It is used to show a pop window.
8. <input type="file">:
The <input> element with type "file" is used to select one or more files
from user device storage. Once you select the file, and after submission,
this file can be uploaded to the server with the help of JS code and file
API.
Example:
1. <form>
2. <label>Select file to upload:</label>
3. <input type="file" name="newfile">
5. </form>
Test it Now
Output:
Input "file" type.

We can choose any type of file until we do not specify it! The selected
file will appear at next to "choose file" option
s ubmit
Select file to upload:
9. <input type="image">:
The <input> type "image" is used to represent a submit button in the
form of image.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Input "image" type.</h2>
5. <p>We can create an image as submit button</p>
6. <form>
7. <label>User id:</label><br>
8. <input type="text" name="name"><br><br>
9. <input type="image" alt="Submit" src="login.png" width="100px"
>
10. </form>
11.
12. </body>
13. </html>
HTML5 newly added <input> types element

1. <input type="color">:
The <input> type "color" is used to define an input field which contains
a colour. It allows a user to specify the colour by the visual colour
interface on a browser.
Note: The "color" type only supports color value in hexadecimal format, and the
default value is #000000 (black).
Example:
1. <form>
2. Pick your Favorite color: <br><br>
3. <input type="color" name="upclick" value="#a52a2a"> Upclick<br
><br>
4. <input type="color" name="downclick" value="#f5f5dc"> Downclic
k
5. </form>
Test it Now
Output:
Input "color" types:
Pick your Favorite color:
Up-click
Down-click
Note:The default value of "color" type is #000000 (black). It only

supports color value in hexadecimal format.
2. <input type="date">:
The <input> element of type "date" generates an input field, which
allows a user to input the date in a given format. A user can enter the
date by text field or by date picker interface.
Example:
1. <form>
2. Select Start and End Date: <br><br>
3. <input type="date" name="Startdate"> Start date:<br><br>
4. <input type="date" name="Enddate"> End date:<br><br>
5. <input type="submit">
6. </form>
Test it Now
Output:
Input "date" type
Select Start and End Date:
Start date:
End date:
Submit
3. <input type="datetime-local">:
The <input> element of type "datetime-local" creates input filed which
allow a user to select the date as well as local time in the hour and
minute without time zone information.
Example:
1. <form>
2. <label>
3. Select the meeting schedule: <br><br>
4. Select date & time: <input type="datetime-local" nam
e="meetingdate"> <br><br>
5. </label>
7. </form>
Test it Now
Output:
Input "datetime-local" type
Select the meeting schedule:
Select date & time:
Submit
4. <input type="email">:
The <input> type "email" creates an input filed which allow a user to
enter the e-mail address with pattern validation. The multiple attributes
allow a user to enter more than one email address.
Example:
1. <form>
2. <label><b>Enter your Email-address</b></label>
3. <input type="email" name="email" required>
5. <p><strong>Note:</strong>User can also enter multiple email ad
dresses separating by comma or whitespace as following: </p>
6. <label><b>Enter multiple Email-addresses</b></label>
7. <input type="email" name="email" multiple>
9. </form>
Test it Now
Output:
Input "email" type
Submit
Enter your Email-address
Note:User can also enter multiple email addresses separating by comma

or whitespace as following:
Submit
Enter multiple Email-addresses
5. <input type="month">:
The <input> type "month" creates an input field which allows a user to
easily enter month and year in the format of "MM, YYYY" where MM
defines month value, and YYYY defines the year value. New
Example:
1. <form>
2. <label>Enter your Birth Month-year: </label>
3. <input type="month" name="newMonth">
5. </form>
Test it Now
Output:
Input "month" type:

Submit
Enter your Birth Month-year:
6. <input type="number">:
The <input> element type number creates input filed which allows a
user to enter the numeric value. You can also restrict to enter a minimum
and maximum value using min and max attribute.
Example:
1. <form>
2. <label>Enter your age: </label>
3. <input type="number" name="num" min="50" max="80">
5. </form>
Test it Now
Output:
Input "number" type

Submit
Enter your age:
Note:It will allow to enter number in range of 50-80. If you want to

enter number other than range, it will show an error.
7. <input type="url">:
The <input> element of type "url" creates an input filed which enables
user to enter the URL.
Example:
1. <form>
2. <label>Enter your website URL: </label>
3. <input type="url" name="website" placeholder="http://
example.com"><br>
4. <input type="submit" value="send data">
5. </form>
Test it Now
Output:
Input "url" type
Enter your website URL:

s e nd da ta
8. <input type="week">:
The <input> type week creates an input field which allows a user to
select a week and year form the drop-down calendar without time zone.
Example:
1. <form>
2. <label><b>Select your best week of year:</b></label><br><br>
3. <input type="week" name="bestweek">
4. <input type="submit" value="Send data">
5. </form>
Test it Now
Output:
Input "week" type

Select your best week of year:
Se nd da ta

9. <input type="search">:
The <input> type "search" creates an input filed which allows a user to
enter a search string. These are functionally symmetrical to the text input
type, but may be styled differently.
Example:
1. <form>
2. <label>Search here:</label>
3. <input type="search" name="q">
4. <input type="submit" value="search">
5. </form>
Test it Now
Output:
Input "search" type

s e a rch
Search here:
10. <input type="tel">:

The <input> element of type ?tel? creates an input filed to enter the
telephone number. The "tel" type does not have default validation such
as email, because telephone number pattern can vary worldwide.
Example:
1. <form>
2. <label><b>Enter your Telephone Number(in format of xxx-xxx-
xxxx):</b></label>
3. <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-
9]{4}" required>
4. <input type="submit"><br><br>
5. </form>
Test it Now
Output:
Input "tel" type

Submit
Enter your Telephone Number(in format of xxx-xxx-xxxx):
Note: Here we are using two attributes that are "pattern" and"required"

which will allow user to enter the number in given format and it is
required to enter the number in input field.
HTML form Attribute

HTML <form> element attributes
In HTML there are various attributes available for <form> element
which are given below:
HTML action attribute

The action attribute of <form> element defines the process to be
performed on form when form is submitted, or it is a URI to process the
form information.
The action attribute value defines the web page where information
proceed. It can be .php, .jsp, .asp, etc. or any URL where you want to
process your form.
Note: If action attribute value is blank then form will be processed to the same
page.
Example:
1. <form action="action.html" method="post">
2. <label>User Name:</label><br>
3. <input type="text" name="name"><br><br>
4. <label>User Password</label><br>
5. <input type="password" name="pass"><br><br>
7. </form>
Test it Now
Output:
Demo of action attribute of form element

User Name:
User Password
Submit
It will redirect to a new page "action.html" when you click on

submit button
HTML method attribute

The method attribute defines the HTTP method which browser used to
submit the form. The possible values of method attribute can be:
o post: We can use the post value of method attribute when we want
to process the sensitive data as it does not display the submitted
data in URL.
Example:
1. <form action="action.html" method="post">
o get: The get value of method attribute is default value while
submitting the form. But this is not secure as it displays data in
URL after submitting the form.
Example:
1. <form action="action.html" method="get">
When submitting the data, it will display the entered data in the form of:
1. file:///D:/HTML/action.html?name=JavaTPoint&pass=123
HTML target attribute

The target attribute defines where to open the response after submitting
the form. The following are the keywords used with the target attribute.
o _self: If we use _self as an attribute value, then the response will

display in current page only.
Example:
1. <form action="action.html" method="get" target="_self">
o _blank: If we use _blank as an attribute it will load the response in
a new page.
Example:
1. <form action="action.html" method="get" target="_blank">
HTML autocomplete attribute

The HTML autocomplete attribute is a newly added attribute of HTML5
which enables an input field to complete automatically. It can have two
values "on" and "off" which enables autocomplete either ON or OFF.
The default value of autocomplete attribute is "on".
Example:
1. <form action="action.html" method="get" autocomplete="on">
Example:
1. <form action="action.html" method="get" autocomplete="off">
Note: it can be used with <form> element and <input> element both.
HTML enctype attribute

The HTML enctype attribute defines the encoding type of form-content
while submitting the form to the server. The possible values of enctype
can be:
o application/x-www-form-urlencoded: It is default encoding type

if the enctype attribute is not included in the form. All characters
are encoded before submitting the form.
Example:
1. <form action="action.html" method="post" enctype="application/x-
www-form-urlencoded" >
o multipart/form-data: It does not encode any character. It is used
when our form contains file-upload controls.
Example:
1. <form action="action.html" method="post" enctype="multipart/form-
data">
o text/plain (HTML5): In this encoding type only space are
encoded into + symbol and no any other special character encoded.
Example:
1. <form action="action.html" method="post" enctype="text/plain" >
HTML novalidate attribute HTML5

The novalidate attribute is newly added Boolean attribute of HTML5. If
we apply this attribute in form then it does not perform any type of
validation and submit the form.
Example:
1. <form action = "action.html" method = "get" novalidate>
Test it Now
Output:
Fill the form

Enter name:
Enter age:
Enter email:
Submit
Try to change the form detials with novalidate atttribute and

without novalidate attribute and see the difference.
HTML <input> element attribute
HTML name attribute
The HTML name attribute defines the name of an input element. The
name and value attribute are included in HTTP request when we submit
the form.
Note: One should not omit the name attribute as when we submit the form the
HTTP request includes both name-value pair and if name is not available it will not
process that input field.
Example:
1. <form action = "action.html" method = "get">
2. Enter name:<br><input type="name" name="uname"><br>
3. Enter age:<br><input type="number" name="age"><br>
4. Enter email:<br><input type="email"><br>
5. <input type="submit" value="Submit">
6. </form>
Test it Now
Output:
Fill the form

Enter name:
Enter age:
Enter email:
Submit
Note: If you will not use name attribute in any input field, then that
input field will not be submitted, when submit the form.
Click on submit and see the URL where email is not included in HTTP
request as we have not used name attribute in the email input field
HTML value attribute

The HTML value attribute defines the initial value or default value of an
input field.
Example:
1. <form>
2. <label>Enter your Name</label><br>
3. <input type="text" name="uname" value="Enter Name"><br><br
>
4. <label>Enter your Email-address</label><br>
5. <input type="text" name="uname" value="Enter email"><br><br
>
7. <input type="password" name="pass" value=""><br><br>
9. </form>
Test it Now
Output:
Fill the form

Enter your Name
Ente r Na me

Ente r e ma il
Enter your password
login
Note: In password input filed the value attribute will always unclear
HTML required attribute HTML5

HTML required is a Boolean attribute which specifies that user must fill
that filed before submitting the form.
Example:
1. <form>
3. <input type="text" name="uname" required><br><br>
7. </form>
Test it Now
Output:
Fill the form

Enter your password

login
If you will try to submit the form without completing email field
then it will give an error pop up.
HTML autofocus attribute HTML5

The autofocus is a Boolean attribute which enables a field automatically
focused when a webpage loads.
Example:
1. <form>
3. <input type="text" name="uname" autofocus><br><br>
7. </form>
HTML placeholder attribute HTML5

The placeholder attribute specifies a text within an input field which
informs the user about the expected input of that filed.
The placeholder attribute can be used with text, password, email, and
URL values.
When the user enters the value, the placeholder will be automatically
removed.
Example:
1. <form>
2. <label>Enter your name</label><br>
3. <input type="text" name="uname" placeholder="Your name"><br
><br>
4. <label>Enter your Email address</label><br>
5. <input type="email" name="email" placeholder="example@gmail.
com"><br><br>
7. <input type="password" name="pass" placeholder="your password
"><br><br>
9. </form>
Test it Now
Output:
Registration form
Enter your name
Enter your Email address
Enter your password
login
HTML disabled attribute

The HTML disabled attribute when applied then it disable that input
field. The disabled field does not allow the user to interact with that
field.
The disabled input filed does not receive click events, and these input
value will not be sent to the server when submitting the form.
Example:
1. <input type="text" name="uname" disabled><br><br>
Test it Now
Output:
Registration form
Enter User name

US ER
Enter your Email address
Enter your password
login
HTML size attribute

The size attribute controls the size of the input field in typed characters.
Example:
1. <label>Account holder name</label><br>
2. <input type="text" name="uname" size="40" required><br><br>
3. <label>Account number</label><br>
4. <input type="text" name="an" size="30" required><br><br>
5. <label>CVV</label><br>
6. <input type="text" name="cvv" size="1" required><br><br>
Test it Now
Output:
Registration form with disbaled attribute
Account holder name
Account number
CVV
login
HTML form attribute

HTML form attribute allows a user to specify an input filed outside the
form but remains the part of the parent form.
Example:
1. User email: <br><input type="email" name="email" form="fcontrol"
required><br>
2. <input type="submit" form="fcontrol">
Test it Now
Output:
User Name:
User password:
The email field is outside the form but still it will remain part of the
form
User email:
Submit
HTML style using CSS

Let's suppose we have created our web page using a simple HTML code,
and we want something which can present our page in a correct format,
and visibly attractive. So to do this, we can style our web page with CSS
(Cascading Stylesheet) properties.
CSS is used to apply the style in the web page which is made up of
HTML elements. It describes the look of the webpage.
CSS provides various style properties such as background color,

padding, margin, border-color, and many more, to style a webpage.
Each property in CSS has a name-value pair, and each property is

separated by a semicolon (;).
Play Videox
Note: In this chapter, we have given a small overview of CSS. You will learn
everything in depth about CSS in our CSS tutorial.
Example:
1. <body style="text-align: center;">
2. <h2 style="color: red;">Welcome to javaTpoint</h2>
3. <p style="color: blue; font-size: 25px; font-style: italic ;">This is a g
reat website to learn technologies in very simple way. </p>
4. </body>
Test it Now
In the above example, we have used a style attribute to provide some

styling format to our code.
Output:
Welcome to javaTpoint
This is a great website to learn technologies in very
simple way.
Three ways to apply CSS
To use CSS with HTML document, there are three ways:
o Inline CSS: Define CSS properties using style attribute in the

HTML elements.
o Internal or Embedded CSS: Define CSS using <style> tag in
<head> section.
o External CSS: Define all CSS property in a separate .css file, and
then include the file with HTML file using tag in section.
Inline CSS:
Inline CSS is used to apply CSS in a single element. It can apply style
uniquely in each element.
To apply inline CSS, you need to use style attribute within HTML
element. We can use as many properties as we want, but each property
should be separated by a semicolon (;).
Example:
1. <h3 style="color: red;
2. font-style: italic;
3. text-align: center;
4. font-size: 50px;
5. padding-top: 25px;">Learning HTML using Inline CSS</h3>
Test it Now
Output:
Learning
HTML using
Inline CSS
Internal CSS:
An Internal stylesheets contains the CSS properties for a webpage in
<head> section of HTML document. To use Internal CSS, we can use
class and id attributes.
We can use internal CSS to apply a style for a single HTML page.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. /*Internal CSS using element name*/
6. body{background-color:lavender;
7. text-align: center;}
8. h2{font-style: italic;
9. font-size: 30px;
10. color: #f08080;}
11. p{font-size: 20px;}
12. /*Internal CSS using class name*/
13. .blue{color: blue;}
14. .red{color: red;}
15. .green{color: green;}
16. </style>
17. </head>
18. <body>
19. <h2>Learning HTML with internal CSS</h2>
20. <p class="blue">This is a blue color paragraph</p>
21. <p class="red">This is a red color paragraph</p>
22. <p class="green">This is a green color paragraph</p>
23. </body>
24. </html>
Test it Now
Note: In the above example, we have used a class attribute which you will learn in
the next chapter.
External CSS:
An external CSS contains a separate CSS file which only contains style
code using the class name, id name, tag name, etc. We can use this CSS
file in any HTML file by including it in HTML file using <link> tag.
If we have multiple HTML pages for an application and which use

similar CSS, then we can use external CSS.
There are two files need to create to apply external CSS
o First, create the HTML file

o Create a CSS file and save it using the .css extension (This file
only will only contain the styling code.)
o Link the CSS file in your HTML file using tag in header section of
HTML document.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <link rel="stylesheet" type="text/css" href="style.css">
5. </head>
6. <body>
7. <h2>Learning HTML with External CSS</h2>
8. <p class="blue">This is a blue color paragraph</p>
9. <p class="red">This is a red color paragraph</p>
10. <p class="green">This is a green color paragraph</p>
11. </body>
12. </html>
Test it Now
CSS file:
body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}
.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}
Commonly used CSS properties:
Properties-name Syntax Description
background-color background-color:red; It defines the background color of

color color: lightgreen; It defines the color of text of an el
padding padding: 20px; It defines the space between co
border.
margin margin: 30px; margin- It creates space around an element
left:
font-family font-family: cursive; Font-family defines a font for
element.
Font-size font-size: 50px; Font-size defines a font size fo
element.
text-align text-align: left; It is used to align the text in a sele
HTML Classes
Class Attribute in HTML
The HTML class attribute is used to specify a single or multiple class
names for an HTML element. The class name can be used by CSS and
JavaScript to do some tasks for HTML elements. You can use this class
in CSS with a specific class, write a period (.) character, followed by the
name of the class for selecting elements.
A class attribute can be defined within <style> tag or in separate file

using the (.) character.
In an HTML document, we can use the same class attribute name with
different elements.
Defining an HTML class

To create an HTML class, firstly define style for HTML class using
<style> tag within <head> section as following example:
Pause
Unmute
Current TimeÂ 0:28
DurationÂ 4:57
Loaded: 100.00%
Â
Fullscreen
x
Example:
1. <head>
2. <style>
3. .headings{
4. color: lightgreen;
5. font-family: cursive;
6. background-color: black; }
7. </style>
8. </head>
We have define style for a class name "headings", and we can use this
class name with any of HTML element in which we want to provide
such styling. We just need to follow the following syntax to use it.
1. <tag class="ghf"> content </tag>
Example 1:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .headings{
6. color: lightgreen;
7. font-family: cursive;
8. background-color: black; }
9. </style>
10. </head>
11. <body>
12. <h1 class="headings">This is first heading</h1>
13. <h2 class="headings">This is Second heading</h2>
14. <h3 class="headings">This is third heading</h3>
15. <h4 class="headings">This is fourth heading</h4>
16. </body>
17. </html>
Test it Now
Another Example with different class name

Example:
Let's use a class name "Fruit" with CSS to style all elements.
1. <style>
2. .fruit {
3. background-color: orange;
4. color: white;
5. padding: 10px;
6. }
7. </style>
8.
9. <h2 class="fruit">Mango</h2>
10. <p>Mango is king of all fruits.</p>
11.
12. <h2 class="fruit">Orange</h2>
13. <p>Oranges are full of Vitamin C.</p>
14.
15. <h2 class="fruit">Apple</h2>
16. <p>An apple a day, keeps the Doctor away.</p>
Test it Now
Here you can see that we have used the class name "fruit" with (.) to use
all its elements.
Note: You can use class attribute on any HTML element. The class name is case-
sensitive.
Class Attribute in JavaScript

You can use JavaScript access elements with a specified class name by
using the getElementsByClassName() method.
Example:
Let's hide all the elements with class name "fruit" when the user click on
the button.
1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <h2>Class Attribute with JavaScript</h2>
6. <p>Click the button, to hide all elements with the class name "fruit", wit
h JavaScript:</p>
7.
8. <button onclick="myFunction()">Hide elements</button>
9.
10.
12. <p>Mango is king of all fruits.</p>
13.
15. <p>Oranges are full of Vitamin C.</p>
16.
18. <p>An apple a day, keeps the Doctor away.</p>
19.
20. <script>
21. function myFunction() {
22. var x = document.getElementsByClassName("fruit");
23. for (var i = 0; i < x.length; i++) {
24. x[i].style.display = "none";
25. }
26. }
27. </script>
28.
29. </body>
30. </html>
Test it Now
Note: You will learn more about JavaScript in our JavaScript tutorial.
Multiple Classes
You can use multiple class names (more than one) with HTML
elements. These class names must be separated by a space.
Example:
Let's style elements with class name "fruit" and also with a class name
"center".
1. <!DOCTYPE html>
2. <html>
3. <style>
4. .fruit {
6. color: white;
7. padding: 10px;
8. }
9.
10. .center {
12. }
13. </style>
14. <body>
15.
16. <h2>Multiple Classes</h2>
17. <p>All three elements have the class name "fruit". In addition, Ma
ngo also have the class name "center", which center-aligns the text.</p>

18.
19. <h2 class="fruit center">Mango</h2>
22.
23. </body>
24. </html>
Test it Now
You can see that the first element <h2> belongs to both the "fruit" class
and the "center" class.
Same class with Different Tag

You can use the same class name with different tags like <h2> and <p>
etc. to share the same style.
Example:
1. <!DOCTYPE html>
2. <html>
3. <style>
4. .fruit {
6. color: white;
7. padding: 10px;
8. }
9. </style>
10. <body>
11. <h2>Same Class with Different Tag</h2>
13. <p class="fruit">Mango is the king of all fruits.</p>
14. </body>
15. </html>
Test it Now
HTML Id Attribute
The id attribute is used to specify the unique ID for an element of the
HTML document. It allocates the unique identifier which is used by
the CSS and the JavaScript for performing certain tasks.
Note: In the Cascading Style sheet (CSS), we can easily select an element with the
specific id by using the # symbol followed by id.
Note: JavaScript can access an element with the given ID by using the
getElementById() method.
Syntax
1. <tag id="value">
Example 1: The following example describes how to use the id attribute

in CSS document:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of Id attribute in CSS
6. </title>
7. <style>
8. #Cars {
9. padding: 40px;
10. background-color: lightblue;
11. color: black;
13. }
14.
15. #Bikes
16. {
17. padding: 50px;
18. background-color: lightGreen;
20. }
21. </style>
22. </head>
23. <body>
24. <p> Use CSS to style an element with the id: </p>
25. <h1 id="Cars"> Cars </h1>
26. <h1 id="Bikes"> Bikes </h1>
27. </body>
28. </html>
Test it Now
Output:
Example 2: The following example describes how to use the ID

attribute in JavaScript.
Play Videox
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title> Date Attribute </title>
5. <script>
6. function viewdate() {
7. var x = document.getElementById("dob").value;
8. document.getElementById("demo").innerHTML = x;
9. </script>
10. </head>
11. <body>
12. Employee Name: <input type="text" placeholder="Your Good na
me"/>
13. <br>
14. <br>
15. Date of Joining:
16. <input type="date" id="dob">
17. <br>
18. <button onclick="viewdate()"> Submit
19. </button>
20. <br>
21. <h2 id="demo"> </h2>
22. </body>
23. </html>
Test it Now
Output:
HTML iframes
HTML Iframe is used to display a nested webpage (a webpage within a
webpage). The HTML <iframe> tag defines an inline frame, hence it is
also called as an Inline frame.
An HTML iframe embeds another document within the current HTML

document in the rectangular region.
The webpage content and iframe contents can interact with each other
using JavaScript.
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
Play Videox
1. <iframe src="URL"></iframe>
Here, "src" attribute specifies the web address (URL) of the inline frame
page.
Set Width and Height of iframe

You can set the width and height of iframe by using "width" and
"height" attributes. By default, the attributes values are specified in
pixels but you can also set them in percent. i.e. 50%, 60% etc.
Example: (Pixels)
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>HTML Iframes example</h2>
5. <p>Use the height and width attributes to specify the size of the iframe:
</p>
6. <iframe src="https://www.javatpoint.com/" height="300" width
="400"></iframe>
7. </body>
8. </html>
Test it Now
Example: (Percentage)
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>HTML Iframes</h2>
5. <p>You can use the height and width attributes to specify the size of the
iframe:</p>
6. <iframe src="https://www.javatpoint.com/" height="50%" width
="70%"></iframe>
7. </body>
8. </html>
Test it Now
You can also use CSS to set the height and width of the iframe.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>HTML Iframes</h2>
5. <p>Use the CSS height and width properties to specify the size of the ifr
ame:</p>
6. <iframe src="https://www.javatpoint.com/" style
="height:300px;width:400px"></iframe>
7. </body>
8. </html>
Test it Now
Remove the border of iframe

By default, an iframe contains a border around it. You can remove the
border by using <style> attribute and CSS border property.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Remove the Iframe Border</h2>
5. <p>This iframe example doesn't have any border</p>
6. <iframe src="https://www.javatpoint.com/" style="border:none;"></
iframe>
7. </body>
8. </html>
Test it Now
You can also change the size, color, style of the iframe's border.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Custom Iframe Border</h2>
5. <iframe src="https://www.javatpoint.com/" style="border:2px solid tom
ato;"></iframe>
6. </body>
7. </html>
Test it Now
Iframe Target for a link
You can set a target frame for a link by using iframe. Your specified
target attribute of the link must refer to the name attribute of the iframe.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <h2>Iframe - Target for a Link</h2>
6. <iframe height="300px" width="100%" src="new.html" name="iframe_
a"></iframe>
7. <p><a href="https://www.javatpoint.com" target
="iframe_a">JavaTpoint.com</a></p>
8. <p>The name of iframe and link target must have same value else link w
ill not open as a frame. </p>
9.
10. </body>
11. </html>
Test it Now
Output
new.hmtl output code:
<!DOCTYPE html>
<html>
<head>
<style>
p{ font-size: 50px;
color: red;}
</style>
</head>
<body style="background-color: #c7f15e;">
<p>This is a link below the ifarme click on link to open new iframe. </p>
</body>
</html>
Embed YouTube video using iframe

You can also add a YouTube video on your webpage using the <iframe>
tag. The attached video will be played at your webpage and you can also
set height, width, autoplay, and many more properties for the video.
Following are some steps to add YouTube video on your webpage:
o Goto YouTube video which you want to embed.

o Click on SHARE ➦ under the video.
o Click on Embed <> option.
o Copy HTML code.
o Paste the code in your HTML file
o Change height, width, and other properties (as per requirement).
Example:
1. <iframe width="550" height="315" src="https://www.youtube.com/
embed/JHq3pL4cdy4" frameborder="0" allow="accelerometer; autoplay
; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style
="padding:20px;"></iframe>
2. <iframe width="550" height="315" src="https://
www.youtube.com/embed/O5hShUO6wxs" frameborder="0" allow
="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" style="padding:20px;">></iframe>
Test it Now
Output:
Attributes of <iframe>
Attribute name Value Description
allowfullscreen If true then that frame can be opened in full scree

height Pixels It defines the height of the embedded iframe, a
height is 150 px.
name text It gives the name to the iframe. The name
important if you want to create a link in one fram
frameborder 1 or 0 It defines whether iframe should have a border
supported in HTML5).
Width Pixels It defines the width of embedded frame, and de
300 px.
src URL The src attribute is used to give the path name
which content to be loaded into iframe.
sandbox
This attribute is used to apply extra restrictions f
of the frame
allow-forms It allows submission of the form if this keywor
then form submission is blocked.
allow- It will enable popups, and if not applied then n
popups open.
allow-scripts It will enable the script to run.
allow-same- If this keyword is used then the embedded res
origin treated as downloaded from the same source.
srcdoc The srcdoc attribute is used to show the HTML
inline iframe. It overrides the src attribute (
supports).
scrolling
It indicates that browser should provide a scro
iframe or not. (Not supported in HTML5)
auto Scrollbar only shows if the content of iframe is
dimensions.
yes Always shows scroll bar for the iframe.
no Never shows scrollbar for the iframe.
HTML JavaScript
A Script is a small program which is used with HTML to make web
pages more attractive, dynamic and interactive, such as an alert popup
window on mouse click. Currently, the most popular scripting language
is JavaScript used for websites.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h1>JavaScript Date and Time example</h1>
5. <button type="button"
6. onclick="document.getElementById('demo').innerHTML = Date()">
7. Click me to display Date and Time.</button>
8. <p id="demo"></p>
9. </body>
10. </html>
Test it Now
HTML <script> Tag

The HTML <script> tag is used to specify a client-side script. It may be
an internal or external JavaScript which contains scripting statements,
hence we can place <script> tag within <body> or <head> section.
It is mainly used to manipulate images, form validation and change

content dynamically. JavaScript uses document.getElementById()
method to select an HTML element.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Use JavaScript to Change Text</h2>
6. <script>
7. document.getElementById("demo").innerHTML = "Hello JavaTpoint";
8. </script>
9. </body>
10. </html>
Test it Now
HTML events with JavaScript

An event is something which user does, or browser does such as mouse
click or page loading are examples of events, and JavaScript comes in
the role if we want something to happen on these events.
HTML provides event handler attributes which work with JavaScript

code and can perform some action on an event.
Syntax:
1. <element event = "JS code">
Example:
1. <input type="button" value="Click" onclick="alert('Hi, how are you')">
Test it Now
Output:
Click Event Example
Click on the button and you csn see a pop-up window with a message
HTML can have following events such as:
o Form events: reset, submit, etc.

o Select events: text field, text area, etc.
o Focus event: focus, blur, etc.
o Mouse events: select, mouseup, mousemove, mousedown, click,
dblclick, etc.
Following are the list for Window event attributes:
Event Event Name Handler Name Occurs when
onBlur blur When form input loses focus

onClick click When the user clicks on a form elemen
onSubmit submit When user submits a form to the server
onLoad load When page loads in a browser.
onFocus focus When user focuses on an input field.
onSelect select When user selects the form input filed.
Note: You will learn more about JavaScript Events in our JavaScript tutorial.
Let's see what JavaScript can do:
1) JavaScript can change HTML content.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <p>JavaScript can change the content of an HTML element:</p>
5. <button type="button" onclick="myFunction()">Click Me!</button>
7. <script>
9. document.getElementById("demo").innerHTML = "Hello JavaTpoint
!";
10. }
11. </script>
12. </body>
13. </html>
Test it Now
2) JavaScript can change HTML style
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <p id="demo">JavaScript can change the style of an HTML element.</
p>
5. <script>
7. document.getElementById("demo").style.fontSize = "25px";
8. document.getElementById("demo").style.color = "brown";
9. document.getElementById("demo").style.backgroundColor = "lightgr
een";
10. }
11. </script>
12. <button type="button" onclick="myFunction()">Click Me!</
button>
13. </body>
14. </html>
Test it Now
3) JavaScript can change HTML attributes.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <script>
5. function light(sw) {
6. var pic;
7. if (sw == 0) {
8. pic = "pic_lightoff.png"
9. } else {
10. pic = "pic_lighton.png"
11. }
12. document.getElementById('myImage').src = pic;
13. }
14. </script>
15. <img id="myImage" src="pic_lightoff.png" width="100" height="
180">
16. <p>
17. <button type="button" onclick="light(1)">Light On</button>
18. <button type="button" onclick="light(0)">Light Off</button>
19. </p>
20. </body>
21. </html>
Test it Now
Use External Script

Suppose, you have various HTML files which should have same script,
then we can put our JavaScript code in separate file and can call in
HTML file. Save JavaScript external files using .js extension.
Note: Do not add <script> tag in the external file, and provide the complete path
where you have put the JS file.
Syntax:
1. <script type="text/javascript" src="URL "></script>
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script type="text/javascript" src="external.js"></script>
5. </head>
6. <body>
7. <h2>External JavaScript Example</h2>
8. <form onsubmit="fun()">
9. <label>Enter your name:</label><br>
10. <input type="text" name="uname" id="frm1"><br>
11. <label>Enter your Email-address:</label><br>
12. <input type="email" name="email"><br>
14. </form>
15. </body>
16. </html>
Test it Now
JavaScript code:
1. function fun() {
2. var x = document.getElementById("frm1").value;
3. alert("Hi"+" "+x+ "you have successfully submitted the details");
4. }
Output:
HTML <noscript> Tag

HTML <noscript> tag is used to write disabled script in the browser.
The text written within <noscript></noscript> tag is not displayed on the
browser.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
5. <script>
6. document.getElementById("demo").innerHTML = "Hello JavaScript!";
7. </script>
8. <noscript>This text is not visible in the browser.</noscript>
9. </body>
10. </html>
HTML Comments
Comments are some text or code written in your code to give an
explanation about the code, and not visible to the user. Comments which
are used for HTML file are known as HTML comments. Anything
written between these tags will be ignored by the browser, so comments
will not be visible on the webpage.
Comments of any code make code easy to understand and increase

readability of code.
Comments are also part of the code, which gives an explanation of the
code.
How to add comment In HTML

You can add comments in your HTML file using <! -- ... --> tag. So if
you will write anything between theses comment tag that will be treated
as comment and browser will not read it.
Syntax
1. <! -- Write commented text here -->
Note: The commented code will not be visible to a webpage, and hence you can
use comment tag for documentation purpose, and debugging purpose:
Such as:
1. 
Example:
1. <!DOCTYPE html>
2. <html>
3. 
4. <head>
5. 
6. <style>
7. body{
9. background-color: #f0f8ff;
10. font-size: 30px;
11. color: red;
12. }
13. </style>
14. </head>
15.
16. 
17. <body>
18. 
19. <h2>First WebPage</h2>
20.
21. 
22. <p>Write your Content here!!!</p>
23. </body>
24. </html>
Test it Now
Multiline Comment
In HTML code, we can also comments multiple lines at a time. In
multiline comment we can use any description about code or multiple
line code to debug, etc.
Syntax
1. 
Example:
1. <h2>Cake Gallery</h2>
2. 
5. <img src="https://static.javatpoint.com/htmlpages/images/cake.png" alt
="cake image" height="300px"
6. width="300px">
Test it Now
Output:
HTML File Paths
An HTML file path is used to describe the location of a file in a website
folder. File paths are like an address of file for a web browser. We can
link any external resource to add in our HTML file with the help of file
paths such as images, file, CSS file, JS file, video, etc.
The src or href attribute requires an attribute to link any external source
to HTML file.
Following are the different types to specify file paths:
1. <img src="picture.jpg"> It specifies that picture.jpg is located in

the same folder as the current page.
2. <img src="images/picture.jpg"> It specifies that picture.jpg is
located in the images folder in the current folder.
3. <img src="/images/picture.jpg"> It specifies that picture.jpg is
located in the images folder at the root of the current web.
4. <img src="../picture.jpg"> It specifies that picture.jpg is located
in the folder one level up from the current folder.
File paths are used on webpages to link external files like:
1. Web pages
2. Images
3. Style sheets
4. JavaScript
There are two types of File Paths:
1. Absolute File Paths

2. Relative File Paths
Absolute File Paths

Absolute file path specifies full URL address.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Using a Full URL File Path</h2>
5. <img src="https://www.javatpoint.com/images/nature-1.jpg" alt
="image" style="width:300px">
6. </body>
7. </html>
Test it Now
Relative File Paths

The relative file path specifies to a file which is related to the location of
current page.
Example:
Let's take an example to see how the file path points to a file in the
images folder located at the root of the current web.
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Using a Relative File Path</h2>
5. <img src="/images/nature-2.jpg" alt="Mountain" style="width:300px">
6. </body>
7. </html>
Test it Now
Example:
This is how a file path points to a file in the images folder located in the
current folder.
1. <!DOCTYPE html>
2. <html>
3. <body>
5. <img src="images/nature-3.jpg" alt="Mountain" style="width:300px">
6. </body>
7. </html>
Test it Now
Example:
When the images folder located in the folder one level above the current
folder.
1. <!DOCTYPE html>
2. <html>
3. <body>
5. <img src="../images/nature4.jpg" alt="Mountain" style="width:300px">
6. </body>
7. </html>
Test it Now
Important Points for File path:

o Always remember to use proper URL, file name, image name, else
it will not display on the webpage.
o Try to use relative file paths, so that your code will be independent
of URL.
HTML Head
The HTML <head> element is used as a container for metadata (data
about data). It is used between <html> tag and <body> tag.
The head of an HTML document is a part whose content is not displayed

in the browser on page loading. It just contains metadata about the
HTML document which specifies data about the HTML document.
An HTML head can contain lots of metadata information or can have
very less or no information, it depends on our requirement. But head part
has a crucial role an HTML document while creating a website.
Metadata defines the document title, character set, styles, links, scripts,
and other meta information.
Play Videox
Following is a list of tags used in metadata:
o <title>
o <style>
o <meta>
o <link>
o <script>
o <base>
HTML <title> Element

The HTML <title> element is used to define the title of the document. It
is used in all HTML/XHTML documents. The <title> element must be
placed between <head> element, and one document can only have one
title element.
What does <title> element do?

1. It defines a title in the browser tab.
2. It provides a title for the page when it is added to favorites.
3. It displays a title for the page in search engine results.
Note: The title element must be specific about the document and its recommended
length is 65 to 70 characters including spaces.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>This Page Title</title>
5. </head>
6. <body>
7. <p>The body's content is displayed in the browser window.</p>
8. <p>The content of the title element is displayed in the browser tab, in fa
vorites and in search engine results.</p>
9. </body>
10. </html>
Test it Now
HTML <style> Element

The HTML <style> element is used to style the HTML page. The
<style> element can have CSS properties for that HTML page only. If
we want to apply CSS for multiple pages then we should use separate
CSS file.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>This is Page Title</title>
5. <style>
6. body {background-color: pink;}
7. h1 {color: red;}
8. p {color: blue;}
9. </style>
10. </head>
11. <body>
12. <h1>This is a Heading</h1>
13. <p>This is a paragraph.</p>
14. </body>
15. </html>
Test it Now
HTML <link> Element

The HTML <link> element is used to link an external style sheet to your
webpage. The <link> element contains main two attributes which are
"rel" and "href". The rel attribute indicates that it is a stylesheet, and href
gives the path to that external file.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>This is title</title>
5. <link rel="stylesheet" href="style.css">
6. </head>
7. <body>
8. <h2>Web-page with external CSS</h2>
9. <p>This is looking a cool page</p>
10. </body>
11. </html>
Test it Now
HTML <meta> Element

The HTML <meta> element is used to specify the character set, page
description, keywords, authors and other metadata on the webpage.
Metadata is mainly used by browsers, search engines, and other web

services to rank your webpage better.
Let's see how to use metadata:
To define a character set:
1. <meta charset="UTF-8">
The charset attribute specifies the character encoding. In this example

we have set it to "UTF-8" which means it can handle to display any
language.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
5. </head>
6. <body>
7. <p>This is written in English language<span style="color: blue"> My fri
end's name is.......</span></p>
8. <p>This is Chinese language <span style="color: red">Wǒ de péngyǒ u j
iào</span></p>
9. </body>
10. </html>
Test it Now
Output:
To define a description of your webpage:

1. <meta name="description" content="Free Web tutorials">
If you give a meta description then it will be useful for the relevant
search to perform by search engines.
To define keywords for search engines:
1. <meta name="keywords" content="HTML, CSS, XML, JavaScript">
The keyword value is also used to provide keywords for a search engine,
but it may ignore by browser due to spammers.
To define author of the webpage:
1. <meta name="author" content="Akon">
The author value specifies the name of the person who wrote the page
content, and it is useful to automatically extract author information by
some content management systems.
To refresh document every 30 seconds:
1. <meta http-equiv="refresh" content="30">
Meta refresh is used to provide instructions to the browser to

automatically refresh the page after the given time interval. As in above
example it will automatically refresh after 30 sec
1. <meta http-equiv="refresh" content="10; url=https://
www.javatpoint.com/html-head>
If you add an URL with content value, then it will redirect to that page
after the time limit will over.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta http-equiv="refresh" content="5; url=https://
www.javatpoint.com/html-head">
5. </head>
6. <body>
7. <h2>Meta element Example</h2>
8. <p style="color: green;">Kindly wait for 5 seconds and after 5 second
s it will automatically redirect to URL specified in meta tag</p>
9. </body>
10. </html>
Test it Now
Following is an example to show how to use all Meta elements within

HTML head
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
5. <meta name="description" content="Free Web tutorials">
6. <meta name="keywords" content="HTML,CSS,XML,JavaScript">
7. <meta name="author" content="Akon">
8. </head>
9. <body>
10. <p>All the meta information are set.</p>
11. </body>
12. </html>
Test it Now
Use <meta> tag to set the Viewport

This method is introduced in HTML5 to take control over the viewport
by using <meta> tag.
Viewport is the user's visible area of a webpage. It changes from device

to device and appears smaller on mobile phones than computer screens.
Syntax for <meta> viewport element:
1. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
Here, the <meta> viewport element specifies how to control the page's

dimensions and scaling.
The width=device-width is used to set the width of the page to follow
the screen-width of the device (which will vary depending on the
device).
The initial-scale=1.0 is used to set the initial zoom level when the page
is first loaded by the browser.
Example of a web page without the viewport <meta> tag:
1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <p><b>To understand this example, you should open this page on a pho
ne or a tablet.</b></p>
6.
7. <img src="image.jpg" alt="image" width="460" height="345">
8.
9. <p>
10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
11. laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation
12. ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo conseq
uat. Duis autem vel
13. eum iriure dolor in hendrerit in vulputate velit esse molestie conseq
uat, vel illum dolore eu
14. feugiat nulla facilisis at vero eros et accumsan et iusto odio digniss
im qui blandit praesent luptatum
15. zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber te
mpor cum soluta nobis
16. eleifend option congue nihil imperdiet doming id quod mazim plac
erat facer possim assum.
17. Nam liber tempor cum soluta nobis eleifend option congue nihil im
perdiet doming id quod mazim placerat
18. facer possim assum.
19. </p>
20.
21. </body>
22. </html>
Test it Now
Example of a web page with the viewport <meta> tag:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-
scale=1.0"/>
5. <style>
6. img {
7. max-width: 100%;
8. height: auto;
9. }
10. </style>
11. </head>
12. <body>
13. <p><b>To understand this example, you should open this page on
a phone or a tablet.</b></p>
14.
15. <img src="image.jpg" alt="image" width="460" height="345">
16.
17. <p>
18. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
19. laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation
20. ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo conseq
uat. Duis autem vel
21. eum iriure dolor in hendrerit in vulputate velit esse molestie conseq
uat, vel illum dolore eu
22. feugiat nulla facilisis at vero eros et accumsan et iusto odio digniss
im qui blandit praesent luptatum
23. zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber te
mpor cum soluta nobis
24. eleifend option congue nihil imperdiet doming id quod mazim plac
erat facer possim assum.
25. Nam liber tempor cum soluta nobis eleifend option congue nihil im
perdiet doming id quod mazim placerat
26. facer possim assum.
27. </p>
28.
29. </body>
30. </html>
Test it Now
Note: To see the difference clearly, open this page on smartphone or tablet.
HTML <base> Element

The HTML <base> element is used to specify the base URL and base
target for all relative URLs in a page.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Page Title</title>
5. <base href="https://static.javatpoint.com/htmlpages/images/" target
="_blank">
6. </head>
7. <body>
8. <img src="html5.png">
9. <p>We have specified a base URL, the browser will look for the image
"html5.png"
10. at "https://static.javatpoint.com/htmlpages/images/html5.png"</p>
11. <p><a href=" https://www.javatpoint.com">JavatPoint</a></p>
12. <p>The link above will open in a new window because base target
is set to "_blank".</p>
13. </body>
14. </html>
Test it Now
HTML <script> element

HTML <script> element is used to apply client side JavaScript for the
same page or to add an external JavaScript file to current page.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script>
5. function fun() {
6. document.getElementById("p").style.color="green";
7. }
8. </script>
9. </head>
10. <body>
11. <h2>Script within Head element</h2>
12. <p id="p">This will change the color</p>
13. <button type="button" onclick="fun()">Click me</button>
14. </body>
15. </html>
Test it Now
If we want to use some external JavaScript file then it can be applied by:
1. <script src=".js file_path">
Excluding <html>, <head> and <body> elements

HTML 5 facilitates us to omit the <html>, the <body>, and the <head>
tag.
Example:
1. <!DOCTYPE html>
2. <title>Page Title</title>
3. <h1>This is a heading</h1>
4. <p>This is a paragraph.</p>
Test it Now
Note: It is not recommended to omit the <html> and <body> tags. Omitting these
tags can crash DOM or XML software and produce errors in older browsers (IE9).
However, you can omit the <head> tag.
HTML Layouts
HTML layouts provide a way to arrange web pages in well-mannered,
well-structured, and in responsive form or we can say that HTML layout
specifies a way in which the web pages can be arranged. Web-page
layout works with arrangement of visual elements of an HTML
document.
Web page layout is the most important part to keep in mind while

creating a website so that our website can appear professional with the
great look. You can also use CSS and JAVASCRIPT based frameworks
for creating layouts for responsive and dynamic website designing.
Every website has a specific layout to display content in a specific
manner.
Following are different HTML5 elements which are used to define the
different parts of a webpage.
Play Videox
o <header>: It is used to define a header for a document or a section.
o <nav>: It is used to define a container for navigation links
o <section>: It is used to define a section in a document
o <article>: It is used to define an independent self-contained article
o <aside>: It is used to define content aside from the content (like a
sidebar)
o <footer>: It is used to define a footer for a document or a section
o <details>: It is used to define additional details
o <summary>: It is used to define a heading for the <details>
element
NOTE: HTML layouts create an individual space for every part of the web page.
So that every element can arrange in a significant order.
Description of various Layout elements

HTML <header>
The <header> element is used to create header section of web pages. The
header contains the introductory content, heading element, logo or icon
for the webpage, and authorship information.
Example:
1. <header style="background-color: #303030; height: 80px; width: 100%
">
2. <h1 style="font-size: 30px; color: white;text-align: center; padding-
top: 15px;">Welcome to MyFirstWebpage</h1>
3. </header>
Test it Now
HTML <nav>
The <nav> elements is a container for the main block of navigation
links. It can contain links for the same page or for other pages.
Example:
1. <nav style="background-color:#bcdeef;">
2. <h1 style="text-align: center;">Navgation Links</h1>
3. <ul>
4. <li><a href="#">link1</a></li>
8. </ul>
9. </nav>
Test it Now
HTML <section>
HTML <section> elements represent a separate section of a web page
which contains related element grouped together. It can contain: text,
images, tables, videos, etc.
Example:
1. <section style="background-color:#ff7f50; width: 100%; border: 1px sol
id black;">
2. <h2>Introduction to HTML</h2>
3. <p>HTML is a markup language which is used for creating attractive
web pages with the help of styling, and which looks in a nice format on
a web browser..</p>
4. </section>
Test it Now
HTML <article>
The HTML
tag is used to contain a self-contained article such as big story, huge
article, etc.
Example:
1. <article style="width: 100%; border:2px solid black; background-color:
#fff0f5;">
2. <h2>History of Computer</h2>
3. <p>Write your content here for the history of computer</p>
4. </article>
Test it Now
HTML <aside>
HTML <aside> define aside content related to primary content. The
<aside> content must be related to the primary content. It can function
as side bar for the main content of web page.
Example:
1. <aside style="background-color:#e6e6fa">
2. <h2>Sidebar information</h2>
3. <p>This conatins information which will represent like a side bar for
a webpage</p>
4. </aside>
Test it Now
HTML <footer>
HTML <footer> element defines the footer for that document or web
page. It mostly contains information about author, copyright, other links,
etc.
Example:
1. <footer style="background-color: #f0f8ff; width: 100%; text-align: cente
r;">
2. <h3>Footer Example</h3>
3. <p>© Copyright 2018-2020. </p>
4. </footer>
Test it Now
HTML <details>
HTML <details> element is used to add extra details about the web page
and use can hide or show the details as per requirement.
Example:
1. <details style="background-color: #f5deb3">
2. <summary>This is visible section: click to show other details</
summary>
3. <p>This section only shows if user want to see it. </p>
4. </details>
Test it Now
HTML <summary>
HTML <summary> element is used with the <details> element in a web
page. It is used as summary, captions about the content of <details>
element.
Example:
1. <details>
2. <summary>HTML is acronym for?</summary>
3. <p style="color: blue; font-size: 20px;">Hypertext Markup Language
</p>
4. </details>

HTML Tutorials

Uploaded by

Copyright:

Available Formats

HTML Tutorials

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tutorials

Uploaded by

Copyright:

Available Formats

HTML Table

We can create a table to display data in tabular form, using <table>

HTML Table Tags

<table> It defines a table.

HTML Table Example

First_Name Last_Name Marks

In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15

HTML Table with Border

1. By border attribute of table in HTML

1) HTML Border attribute

First_Name Last_Name Marks

2) CSS Border property

You can collapse all the borders in one border by border-collapse

Name Last Name Marks

HTML Table with cell padding

1. By cellpadding attribute of table in HTML

The cellpadding attribute of HTML table tag is obselete now. It is

Name Last Name Marks

HTML Table width:

HTML Table with colspan

Let's see the example that span two columns.

Name Mobile No.

HTML Table with rowspan

Let's see the example that span two rows.

Name Ajeet Maurya

HTML table with caption

Styling HTML table even and odd cells

1. Ordered List or Numbered List (ol)

HTML Ordered List or Numbered List

HTML Unordered List or Bulleted List

Click here for full details of HTML unordered list. HTML Unordered

HTML Description List or Definition List

The definition list is very appropriate when you want to present

The HTML definition list contains following three tags:

Click here for full details of HTML description list. HTML Description

HTML Nested List

HTML Ordered List | HTML Numbered List

o Numeric Number (1, 2, 3)

To represent different ordered lists, there are 5 types of attributes in <ol>

HTML Ordered List Example

<ol type="1" start="5">: It will show numeric values starting with

<ol type="A" start="5"> : It will show capital alphabets starting with

<ol type="I" start="5"> : It will show Roman upper case value

tag then it will numbered the list in descending order (7, 6, 5,

To represent different ordered lists, there are 4 types of attributes in <ul>

HTML Unordered List Example

The 3 HTML description list tags are given below:

1. <dl> tag defines the description list.

Why use HTML Form

For example: If a user want to purchase some items on internet, he/she

HTML Form Syntax

HTML Form Tags

<form> It defines an HTML form to enter inputs by the used side.

HTML 5 Form Tags

<datalist> It specifies a list of pre-defined options for input control.

HTML <form> element

HTML TextField Control

HTML <textarea> tag in form

Label Tag in Form

HTML Password Field Control