0% found this document useful (0 votes)

2K views101 pages

HTML Tutorial

HTML Tutorial for beginners

Uploaded by

Akhila

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

2K views101 pages

HTML Tutorial

HTML Tutorial for beginners

Uploaded by

Akhila

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 101

HTML Tutorial

HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html.
Our HTML tutorial is developed for beginners and professionals. The major points of
HTML are given below:
HTML stands for Hyper Text Markup Language.
HTML is used to create web pages.
HTML is widely used language on the web.
We can create static website by HTML only.

HTML Example with HTML Editor

In this tutorial, you will get a lot of examples, in fact one example for every
chapter. you can also edit and run these examples, with our online HTML editor.
<!DOCTYPE>
<html>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>

HTML 5 Tags

In this tutorial, we will learn HTML 5 tags such as audio tag, video tag, canvas
tag, HTML svg, HTML geolocation, HTML drag and drop etc.

All HTML Tags

At last, we will learn all HTML tags one by one for example, marquee tag,
textarea tag, br tag, hr tag, pre tag, h tag, code tag, input tag, title tag, meta tag,
script tag, style tag etc.

Problem

If you find any problem or mistake in our tutorial, you can report to us. We
assure, you will not find any problem in HTML tutorial.

What is HTML

HTML is an acronym which stands for Hyper Text Markup Language. Let's see
what is Hyper Text and what is Markup Language?
Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it,
is a hypertext. Every time when you click on a word which brings you to a new
webpage, you have clicked on a hypertext.
Markup language: A markup language is a programming language that is used
make text more interactive and dynamic. It can turn a text into images, tables, links
etc.
An HTML document is made of many HTML tags and each HTML tag contains
different content.
Let's see a simple example of HTML.
<!DOCTYPE>
<html>
<body>
<h1>Write Your First Heading</h1>

<p>Write Your First Paragraph.</p>

</body> </html>

Description of HTML example

DOCTYPE: It defines the document type.

html : Text between html tag describes the web document.
body : Text between body tag describes the body content of the page that is visible
to the end user.
h1 : Text between h1 tag describes the heading of the webpage.
p : Text between p tag describes the paragraph of the webpage.

Brief History of HTML

In the late 1980's , A physicist, Tim Berners-Lee who was a contractor at

CERN, proposed a system for CERN researchers. In 1989, he wrote a memo
proposing an internet based hypertext system.
Tim Berners-Lee is known as father of HTML. The first available description of
HTML was a document called "HTML Tags" proposed by Tim in late 1991.

Features of HTML

1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make effective presentation with HTML because it has a lot
of formatting tags.
3) It is a markup language so it provides a flexible way to design web pages along
with the text.
4) It facilitates programmers to add link on the web pages (by html anchor tag) , so
it enhances the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like
Windows, Linux and Macintosh etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web
pages which makes it more attractive and interactive.

HTML Tags

HTML tags contain three main parts: opening tag, content and closing tag.
But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom
and left to right. HTML tags are used to create HTML documents and render their
properties. Each HTML tags have different properties.

Syntax

<tag> content </tag>

HTML Tag Examples

Note: HTML Tags are always written in lowercase letters. The basic HTML tags
are given below:
<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
Test it Now

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the
webpage.

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags

HTML Link Tags

<a> and <base>

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags

legend

form, input, textarea, select, option, optgroup, button, label, fieldset and

HTML Scripting Tags

script and noscript

HTML Formatting

HTML Formatting is a process of formatting text for better look and feel.
There are many formatting tags in HTML. These tags are used to make text bold,
italicized, or underlined. There are almost 12 options available that how text appears
in HTML and XHTML.
Here, we are going to learn 12 HTML formatting tags.

1) Bold Text

If you write anything within <b>............</b> element, is shown in bold

letters.
See this example:
<p> <b>Write Your First Paragraph in bold text.</b></p>
Test it Now
Output:
Write Your First Paragraph in bold text.

2) Italic Text

If you write anything within <i>............</i> element, is shown in italic

letters.
See this example:
<p> <i>Write Your First Paragraph in italic text.</i></p>
Test it Now
Output:
Write Your First Paragraph in italic text. m

3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.
See this example:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
Test it Now
Output:

I want to put a Mark on your face

4) Underlined Text

If you write anything within <u>.........</u> element, is shown in underlined text.

See this example:
<p> <u>Write Your First Paragraph in underlined text.</u></p>
Test it Now
Output:
Write Your First Paragraph in underlined text.

5) Strike Text

Anything written within <strike>.......................</strike> element

displayed with strikethrough. It is a thin line which cross the statement.
See this example:
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Test it Now
Output:
Write Your First Paragraph with strikethrough.

6) Monospaced Font

If you want that each letter has the same width then you should write the
content within <tt>.............</tt> element.
Note: We know that most of the fonts are known as variable-width fonts because
different letters have different width. (for example: 'w' is wider than 'i'). Monospaced
Font provides similar space among every letter.
See this example:
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
Test it Now
Output:
Hello Write Your First Paragraph in monospaced font.

7) Superscript Text

If you put the content within <sup>..............</sup> element, is shown in

superscript ; means it is displayed half a character's height above the other
characters.
See this example:
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
Output:
Hello Write Your First Paragraph in superscript.

8) Subscript Text

If you put the content within <sub>..............</sub> element, is shown in subscript

; means it is displayed half a character's height below the other characters.
See this example:
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
Test it Now
Output:
Hello Write Your First Paragraph in subscript.

9) Deleted Text

Anything that puts within <del>..........</del> is displayed as deleted text.

See this example:
<p>Hello <del>Delete your first paragraph.</del></p>
Test it Now
Output:
Hello Delete your first paragraph.

10) Inserted Text

Anything that puts within <ins>..........</ins> is displayed as inserted text.

See this example:
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</i
ns></p>
Test it Now
Output:
Delete your first paragraph.Write another paragraph.

11) Larger Text

If you want to put your font size larger than the rest of the text then put the content
within <big>.........</big>. It increase one font size larger than the previous one.
See this example:
<p>Hello <big>Write the paragraph in larger font.</big></p>
Test it Now
Output:
Hello Write the paragraph in larger font.

12) Smaller Text

If you want to put your font size smaller than the rest of the text then put the
content within <small>.........</small>tag. It reduces one font size than the
previous one.
See this example:
<p>Hello <small>Write the paragraph in smaller font.</small></p>
Test it Now
Output:

Hello

Write the paragraph in smaller font.

HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want
to display on the webpage. When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold format and size of the
text depends on the number of heading.
There are six different HTML headings which are defined with the <h1> to <h6>
tags.
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most
important heading and h6 is used for least important.
See this example:
<h1>Heading
<h2>Heading
<h3>Heading
<h4>Heading
<h5>Heading
<h6>Heading

no.
no.
no.
no.
no.
no.

1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>

Output:

Heading no. 1
Heading no. 2

Heading no. 3
Heading no. 4
Heading no. 5
Heading no. 6
Heading elements (h1....h6) should be used for headings only. They should not be
used just to make text bold or big.

HTML Paragraph

HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's

take a simple example to see how it work. It is a notable point that a browser itself
add an empty line before and after a paragraph.
See this example:
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
Test it Now

Output:
This is first paragraph.
This is second paragraph.
This is third paragraph.

Space inside HTML Paragraph

If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and
extra line while displaying the page. The browser counts number of spaces and lines
as a single one.
<p>
I am
going to provide
you a tutorial on HTML
and hope that it will
be very beneficial for you.
</p>
<p>
Look, I put here a lot of spaces but I know, Browser will ignore it.
</p>
<p>
You cannot determine the display of HTML</p>
<p>because resized windows may create different result.</p> Test it Now
Output:
I am going to provide you a tutorial on HTML and hope that it will be very beneficial
for you.
Look, I put here a lot of spaces but I know, Browser will ignore it.
You cannot determine the display of HTML
because resized windows may create different result.

HTML Anchor

The HTML anchor tag defines a hyperlink that links one page to another page. The
"href" attribute is the most important attribute of the HTML a tag.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other
words, it points out the destination page.
The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>
Let's see an example of HTML anchor tag.
<a href="second.html">Click for Second Page</a>
Test it Now

Appearance of HTML anchor tag

An unvisited link is displayed underlined and blue.

A visited link displayed underlined and purple.
An active link is underlined and red.

HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty
tag that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

<h2>HTML Image Example</h2>
<img src="good_morning.jpg" alt="Good Morning Friends"/>
Output:

Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML
image tag are given below.

1) src
It is a necessary attribute that describes the source or path of the image. It
instructs the browser where to look for the image on the server.
The location of image may be on the same directory or another server.

2) alt
The alt attribute defines an alternate text for the image, if it can't be
displayed. The value of the alt attribute describe the image in words. The alt
attribute is considered good for SEO prospective.

3) width
It is an optional attribute which is used to specify the width to display the
image. It is not recommended now. You should apply CSS in place of width attribute.

4) height
It specifies the height of the image. The HTML height attribute also supports iframe,
image and object elements. It is not recommended now. You should apply CSS in
place of height attribute.

HTML Table

HTML table tag is used to display data in tabular form (row * column). There can
be many columns in a row.
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.

It defines the table caption.

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 each column.

<tbody>

It is used to group the body content in a table.

<thead>

It is used to group the header content in a

table.

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.
<table>
<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
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>
Output:
First_Name

Last_Name

Marks

Sonoo

Jaiswal

James

William

Swati

Sironi

Chetna

Singh

2) CSS Border property

It is now recommended to use border property of CSS to specify border in table.

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;

border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style> Test it Now
Output:
Name

Last Name

Marks

Sonoo

Jaiswal

James

William

Swati

Sironi

Chetna

Singh

HTML Table with colspan

If you want to make a cell span more than one column, you can use the colspan
attribute.
Let's see the example that span two columns.
CSS code:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
HTML code:
<table style="width:100%">
<tr><th>Name</th><th colspan="2">Mobile No.</th></tr>
<tr><td>Ajeet Maurya</td><td>7503520801</td><td>9555879135</td>
</tr>
</table> Test it Now
Output:
Name
Ajeet Maurya

HTML Table with rowspan

Mobile No.
7503520801

9555879135

If you want to make a cell span more than one row, you can use the rowspan
attribute.
Let's see the example that span two rows.
CSS code:
<style>
table, th, td {
border: 1px solid black;

border-collapse: collapse;
}
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.
<table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>
Test it Now

Styling HTML table even and odd cells

CSS code:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
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:

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)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers. 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

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:
Aries

Bingo
Leo
Oracle

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.

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. There can be different types of numbered list:
Numeric Number (1, 2, 3)
Capital Roman Number (I II III)
Small Romal Number (i ii iii)
Capital Alphabet (A B C)
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 numbers.

Type
"I"

In this type, the list items are numbered with upper

case roman numbers.

Type

In this type, the list items are numbered with lower

"i"

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 tha

+++t displays 4 topics in numbered list. Here we are not defining type="1" because
it is the default type.
<ol>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</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.

<ol type="I">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</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.

<ol type="i">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Test it Now
Output:
i.
HTML
ii.
Java

iii.
iv.

JavaScript
SQL

ol type="A"

Let's see the example to display list in alphabet uppercase.

<ol type="A">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</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.

<ol type="a">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</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".
<ol type="i" start="5">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Test it Now
Output:
v.
HTML
vi.
Java
vii.
JavaScript
viii.
SQL

HTML Unordered List | HTML Bulleted List

HTML Unordered List or Bulleted List displays elements in bulleted format. The
HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:
disc
circle
square
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 with bullets.

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

<ul>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Test it Now
Output:
HTML
Java
JavaScript
SQL

ul type="circle"

<ul type="circle">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Test it Now
Output:
o HTML
o Java
o JavaScript
o SQL

ul type="square"

<ul type="square">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Test it Now
Output:
HTML
Java
JavaScript
SQL

ul type="none"

<ul type="none">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Test it Now
Output:
HTML
Java
JavaScript
SQL

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).
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>
Test it Now
Output:
HTML
is a markup language
Java
is a programming language and platform
JavaScript

SQL

is a scripting language
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.

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.

HTML Form Syntax

<form action="server url" method="get|post">

//input controls e.g. textfield, textarea, radiobutton, button
</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.

It defines a multi-line input control.

<label>

It defines a label for an input element.

It groups the related element in a form.

It defines a caption for a <fieldset> element.

It defines a drop-down list.

It defines a group of related options in a dropdown list.

It defines an option in a drop-down list.

It defines a clickable button.

HTML 5 Form Tags

Let's see the list of HTML 5 form tags.

Tag

Description

It specifies a list of pre-defined options for input

control.

It defines a key-pair generator field for forms.

It defines the result of a calculation.

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.
<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>

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.
<form>
<label for="firstname">First Name: </label>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>

HTML Password Field Control

The password is not visible to the user in password field control.

<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>

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.
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>

Radio Button Control

The radio button is used to select one from multiple options. It is used in gender,
quiz questions etc.
If you use one name for all the radio buttons, only one radio button can be selected
at a time.
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male

<input type="radio" id="gender" name="gender" value="female"/>Fema

le <br/>
</form>

Checkbox Control

The checkbox control is used to check multiple options from given checkboxes.
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>

HTML Form Example

Let's see a simple example of creating HTML form.

<form action="#">
<table>
<tr>
<td class="tdLabel"><label for="register_name" class="label">Enter name:</l
abel></td>
<td><input type="text" name="name" value="" id="register_name" style="wid
th:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_password" class="label">Enter passw
ord:</label></td>
<td><input type="password" name="password" id="register_password" style="
width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_email" class="label">Enter Email:</l
abel></td>
<td
><input type="email" name="email" value="" id="register_email" style="width:16
0px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_gender" class="label">Enter Gender:
</label></td>
<td>
<input type="radio" name="gender" id="register_gendermale" value="male"/>
<label for="register_gendermale">male</label>
<input type="radio" name="gender" id="register_genderfemale" value="female"/
>
<label for="register_genderfemale">female</label>
</td>
</tr>
<tr>
<td class="tdLabel"><label for="register_country" class="label">Select Countr
y:</label></td>

<td><select name="country" id="register_country" style="width:160px">

<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><div align="right"><input type="submit" id="register_0" val
ue="register"/>
</div></td>
</tr>
</table>
</form> Test it Now

Marquee HTML
The Marquee HTML tag is a non-standard HTML element which is used to scroll a
image or text horizontally or vertically.
In simple words, you can say that it scrolls the image or text up, down, left or right
automatically.
Marquee tag was first introduced in early versions of Microsoft's Internet Explorer. It
is compared with Netscape's blink element.

Marquee HTML Example

<marquee>This is an example of html marquee </marquee>

Test it Now
Output:

HTML Marquee Attributes

Marquee's element contains several attributes that are used to control and adjust
the appearance of the marquee.

Attribute

Description

behavior

It facilitates user to set the behavior of the

marquee to one of the three different types:
scroll, slide and alternate.

direction

defines direction for scrolling content. It may

be left, right, up and down.

width

defines width of marquee in pixels or %.

height

defines height of marquee in pixels or %.

hspace

defines horizontal space in pixels around the

marquee.

vspace

defines vertical space in pixels around the

marquee.

scrolldelay

defines scroll delay in seconds.

scrollamount

defines scroll amount in number.

loop

defines loop for marquee content in number.

bgcolor

defines
background
now deprecated.

color.

HTML Scroll Marquee

It is a by default property. It is used to scroll the text from right to left, and restarts
at the right side of the marquee when it is reached to the end of left side. After the
completion of loop text disappears.
<marquee width="100%" behavior="scroll" bgcolor="pink">
This is an example of a scroll marquee...
</marquee>
Test it Now
Output:

HTML Slide Marquee

In slide marquee, all the contents to be scrolled will slide the entire length of
marquee but stops at the end to display the content permanently.
<marquee width="100%" behavior="slide" bgcolor="pink">
This is an example of a slide marquee...
</marquee>
Test it Now
Output:

HTML Alternate Marquee

It scrolls the text from right to left and goes back left to right.
<marquee width="100%" behavior="alternate" bgcolor="pink">
This is an example of a alternate marquee...
</marquee>
Test it Now
Output:

Direction in HTML marquee

This is used to change the direction of scrolling text. Let's take an example of
marquee scrolling to the right. The direction can be left, right, up and down.
<marquee width="100%" direction="right">
This is an example of a right direction marquee...
</marquee>
Test it Now
Output:

Nested marquee example

<marquee width="400px" height="100px" behavior="alternate" style="border:2px

solid red">
<marquee behavior="alternate">
Nested marquee...

</marquee>
</marquee>
Output:

Disadvantages HTML marquee

1) Marquee may be distracting because human eyes are attracted towards

movement and marquee text constantly.
2) Since Marquee text moves, so it is more difficult to click static text, depending on
the scrolling speed.
3) It is a non-standard HTML element.
4) It draws user's attention needlessly and makes the text harder to read.

HTML Textarea

The HTML <textarea> tag is used to define a multi-line text input control.
It can hold unlimited number of characters and the texts are displayed in a fixedwidth font (usually courier).
The size of the HTML textarea is defined by <cols> and <rows> attribute, or it can
also be defined through CSS height and width properties.

HTML Textarea Example

<textarea rows="9" cols="70">

JavaTpoint textarea tag example with rows and columns.
</textarea>
Test it Now
Output:

New HTML 5 Textarea Attributes

Attribute

Description

autofocus

It specifies that a text area should be

automatically get focused when the page is
loaded.

form

It specifies one or more forms the textarea

belongs to.

maxlength

It specifies the maximum number of characters

allowed in the text area.

placeholder

It specifies a short hint that describes the

expected value of a textarea.

required

It specifies that textarea must be filled out.

wrap

It specifies that how the texts in the textarea

are wrapped at the time of the submission of
the form.

HTML Textarea form attribute

The form attribute specifies one or more forms the text area belongs to.
<form action="updates.jsp" id="usrform">
Name: <input type="text" name="usrname">
<input type="submit">
</form>
<br>
<textarea rows="9" cols="70" name="comment" form="usrform">
Enter text here...</textarea>
<p>The text area above is outside the form element, but should still be a part of th
e form.</p>
<p><b>Note:</b> The form attribute is not supported in Internet Explorer.</p>
Test it Now
Output:
Name:
Submit

The textarea element above is outside the form , but it is still the part of the form.
Note: The form attribute is not supported in Internet Explorer.

HTML Quotes

HTML quotes are used to put a short quotation on your website. To do so, you need
to use HTML q tag and HTML blockquote tag.

HTML q tag

HTML q tag is used to put small quotation. To do so, write your text within
<q>.............</q> tag.
<p> Great quote on love and life.</p>
<p> Dr. Seuss once said : <q>Reality is finally better than your dreams.</q></p
>
Test it Now
Output:
Great quote on love and life.
Dr. Seuss once said : Reality is finally better than your dreams.

HTML blockquote tag

HTML blockquote tag is used to define a large quoted section. If you have a large
quotation then put the entire text within <blockquote>.............</blockquote> tag.

<p> Read this inspirational story.</p>

<blockquote> According to scientists, the bumblebee's body is too heavy and its w
ing span too small. Aerodynamically, the bumblebee cannot fly. But the bumblebee d
oesn't know that and it keeps flying. When you don't know your limitations, you g o
ut and surprise yourself. In hindsight, you wonder if you had any limitations. The onl
y limitations a person has are those that are self-imposed. Don't let education put li
mitations on you.</blockquote>
Test it Now
Output:
Read this inspirational story.
According to scientists, the bumblebee's body is too heavy and its wing span too
small. Aerodynamically, the bumblebee cannot fly. But the bumblebee doesn't know
that and it keeps flying. When you don't know your limitations, you go out and
surprise yourself. In hindsight, you wonder if you had any limitations. The only
limitations a person has are those that are self- imposed. Don't let education put
limitations on you.

HTML Tags which are used in Quotations and Citation

Tag

Description

<abbr>

It defines the abbreviation or an acronym.

It is used to define the contact information of

the document writer.

<bdo>

It defines the direction of the text.

It is used to define a section that is quoted

from another source.

<q>

It is used to put the small quotations.

<cite>

It defines the title of source from where

quotation or work is taken.

It is used to define a definition term.

HTML Style
HTML Style is used to change or add the style on existing HTML elements. There is
a default style for every HTML element e.g. background color is white, text color is
black etc.
The style attribute can by used with any HTML tag. To apply style on HTML tag, you
should have the basic knowledge of css properties e.g. color, background-color, textalign, font-family, font-size etc.
The syntax of style attribute is given below:
style= "property:value"

HTML Style color

The color property is used to define the text color.
Let's see a simple example of styling html tags by color property of css.
<h3 style="color:green">This is Green Color</h3>
<h3 style="color:red">This is Red Color</h3>
Output:

This is Green Color

This is Red Color

HTML Style background-color

The background-color property is used to define background color for the HTML tag.
Let's see an example of styling html tag by of css background-color property
<h3 style="background-color:yellow;">This is yellow background</h3>
<h3 style="background-color:red;color:white">This is red background</h3>
Output:

This is yellow background

This is red background

HTML Style font-family

The font-family property specifies the font family of the HTML tag.
Let's see an example of styling html tag by css font-family property
<h3 style="font-family:times new roman">This is times new roman font famil
y</h3>
<p style="font-family:arial">This is arial font family</p>
Output:

This is times new roman font family

This is arial font family

HTML Style font-size

The font-size property is used to define the text size of the HTML tag.
Let's see an example of font-size property
<h3 style="font-size:200%">This is 200% h3 tag</h3>
<p style="font-size:200%">This is 200% p tag</p>
Output:

This is 200% h3 tag

This is 200% p tag
HTML Style text-align
The text-align property is used to define the horizontal text alignment for the HTML
element.
Let's see an example of styling html tag by css text-align property
<h3 style="text-align:right;background-color:pink;">This text is located at right sid
e</h3>
<p style="text-align:center;background-color:pink;">This text is located at center s
ide</p>

If you want to put heading at center or left, use "text-align:center" or "textalign:left" respectively.
Output:

This text is located at right side

This text is located at center side

HTML Title

HTML title tag is used to provide a title name for your webpage. It is necessary for
Search Engine Optimization (SEO).
The HTML title tag must be used inside the <head> tag.
The title of the page is displayed on the title bar of the browser.
Let's see the example of HTML title tag.
<!DOCTYPE html>
<html>
<head>
<title>First web page.</title>
</head>
<body>
<p>Welcome to my first web page.</p>
</body>
</html> Test it Now
Here you see that we are using two elements, the head tag and the title tag. The
whole title element is within the head tag.
The head element which appears before body element just contains the information
about the page but it doesn't display on the browser window. So, to display a title
name on the web page, title element is used.
If you look at the above example, you will see that "First web page" will be displayed
on the tab/ title bar of the browser. Content(text) between <title>.............</title>
is shown on the title bar.

Doctype HTML
On the HTML document you have often seen that there is a <!DOCTYPE html>
declaration before the <html> tag. This <!DOCTYPE html> declaration is not an
HTML tag. It is used to instruct the web browser about the HTML page.
Actually, there are many type of HTML e.g. HTML 4.01 Strict, HTML 4.01 Transitional,
HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0
Frameset, XHTML 1.1 etc.
The <!DOCTYPE> declaration refers Document Type Declaration (DTD) in HTML
4.01; because HTML 4.01 was based on SGML. But HTML 5 is not SGML based
language.

DTD defines the rules for the markup languages so that the browsers recognize the
content correctly.
The doctype declaration differs between HTML versions. The HTML 5 doctype
declaration is given below.
<!DOCTYPE html>

Let's see an example of HTML document with doctype declaration.

<!DOCTYPE html>
<html>

<head>
<title>This is the title</title>
</head>
<body>
This is the content of the document.
</body>
</html>

Note: It is always a good practice to add a declaration to your HTML documents to

enable web browser to recognize that what type of document to expect.

HTML Div Tag

The HTML <div> tag is used to group the large section of HTML elements together.
We know that every tag has a specific purpose e.g. p tag is used to specify
paragraph, <h1> to <h6> tag are used to specify headings but the <div> tag is just
like a container unit which is used to encapsulate other page elements and divides
the HTML documents into sections.
The div tag is generally used by web developers to group HTML elements together
and apply CSS styles to many elements at once. For example: If you wrap a set of
paragraph elements into a div element so you can take the advantage of CSS styles
and apply font style to all paragraphs at once instead of coding the same style for
each paragraph element.
<div style="border:1px solid pink;padding:20px;font-size:20px">
<p>Welcome to Javatpoint.com, Here you get tutorials on latest technologies.</p>
<p>This is second paragraph</p>
</div>

Output:

Welcome to Javatpoint.com, Here you get tutorials on latest

technologies.
This is second paragraph.

Difference between HTML div tag and span tag

div tag

span tag

HTML
div
a block element.

HTML div element is used

to wrap large sections of
elements.

HTML
span
an inline element

HTML span element is used

to wrap small portion of
texts, image etc.

HTML div example: Login Form

In this example, we are creating box using div tag. There is a login form inside the
box. Let's see the CSS and HTML code.
CSS Code:
.loginform{
padding:10px;
border:1px solid pink;
border-radius:10px;
float:right;
margin-top:10px;
}
.formheading{
background-color:red;
color:white;
padding:4px;
text-align:center;
}
.sub{
background-color:blue;
padding: 7px 40px 7px 40px;
color:white;
font-weight:bold;
margin-left:70px;
border-radius:5px;
}
HTML Code:
<div class="loginform">
<h3 class="formheading">Please Login</h3>
<form action="LoginServlet" method="post">
<table>
<tr><td>Email:</td><td><input type="email" name="email"/></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"/></
td></tr>
<tr><td colspan="2" style="text-align:center"><input class="sub" type="submit"
value="login"/></td></tr>
</table>
</form>
</div>
Output:

Please Login
Email:
Password:
login

HTML pre tag

The HTML <pre> tag is used to specify pre formatted texts. Texts within
<pre>.......</pre> tag is displayed in a fixed-width font. Usually it is displayed in
Courier font. It maintains both space and line break.
It is widely used to display language examples e.g. Java, C#, C, C++ etc because it
displays the code as it is typed.

If you remove pre tag from the above example, all the text will be displayed in a single
line.
Output without pre:
package com.javatpoint; public class FirstJava{ public static void main(String args[])
{ System.out.println("hello java"); } }

width attribute
The HTML <pre> tag also supports the width attribute. The width attribute specifies
the desired width of the pre-formatted text. But, it is not supported in HTML 5.

HTML code tag

HTML <code> tag is used to represent computer code. It is a phrase tag which
defines a piece of computer code. By default, it is displayed in the browser's default
monospace font (also known as fixed-width font).

List of HTML phrase tags

Tag

Description

<em>

displays emphasized text

displays important text

<dfn>

defines a definition term

<code>

defines a piece of computer code

<samp>

specifies a sample output from a computer

program

<kbd>

defines keyboard input

<var>

defines a variable

HTML phrase tags example including code tag

<em>It is inside em tag.</em><br>
<strong>It is inside strong tag.</strong><br>
<dfn>It is inside dfn tag.</dfn><br>
<code>It is inside code tag.</code><br>
<samp>It is inside samp tag.</samp><br>
<kbd>It is inside kbd tag.</kbd><br>
<var>It is inside var tag.</var>

Output:
It is inside em tag.
It is inside strong tag.
It is inside dfn tag.
It is inside code tag.
It is inside samp tag.
It is inside kbd tag.
It is inside var tag.

HTML Label Tag

The <label> tag is used to specify a label for an <input> element. It adds a label to
a form control such as text, email, password, textarea etc.

HTML Label Tag Example

Let's see the example of HTML label tag.
<label for="email">EMAIL-ID:<br /> <input type="email" value="" nam
e="emailid" size="30"
placeholder="Enter a valid email address"><br /><br />
<label for="phone">PHONE NO:<br /> <input type="text" value="" name="phno
" size="30"
maxlength="10" placeholder="Enter a valid phone number" pattern="[0-9]
{10}"><br /><br />
Output:

EMAIL-ID:
PHONE NO:

HTML Input Tag

The HTML <input> tag is used to represent a form input control in HTML document.
This form input control facilitate user to input data and communicate with a website
or application. Let's take an example of an HTML form with three input fields, two
text fields and one button for submission.

Click the "Submit" button for sending the form-data to a page on the server.

Points to remember
1) Use the input element within the form element to declare input control that allow
user to enter data.
2) The input element is empty. It contains attributes only. There is no need of an
end tag in HTML.
3) If you want to define labels for input element, use the label element with each
input tag.

Difference between HTML4.01 and HTML5

HTML5 does not support "align" attribute. There are several new attributes for
<input> tag in HTML5, and the type attribute has several new values.

Difference between HTML and XHTML

In HTML, <input> tag is used without an end tag. In XHTML, the <input> tag must
be properly closed.

HTML Button Tag

The <button> tag is used to create a clickable button within HTML form on your
webpage.
You
can
put
content
like
text
or
image
within
the
<button>........</button> tag.
You should always specify the type attribute for a <button> tag. Different browsers
use different default type for the button element.
HTML Button tag can be used inside and outside the form.
If you use it inside the form, it works as the submit button. You can also use it as
reset button.
If you use it outside the form, you can call JavaScript function on it.

HTML Button Tag Example

Let's see the code to display the button.
<button name="button" type="button">Click Here</button>
Output:

Click Here

HTML Button Example: Calling JavaScript Function

Let's see the code to call JavaScript function on button click.
<button name="button" value="OK" type="button" onclick="hello()">Click Here</
button>
<script>
function hello(){
alert("hello javatpoint user");
}
</script>
Output:

Click Here

HTML Button Example: Submit Form

Let's see the code to submit form on button click.
<form>
Enter Name:<input type="text" name="name"/><br/>
<button>Submit</button>
</form>
Output:
Enter Name:
Submit

HTML Button Example: Reset Form

Let's see the code to submit form on button click.
<form>
Enter Name:<input type="text" name="name"/><br/>
<button type="reset">reset</button>
</form>
Output:
Enter Name:
Reset

Attributes of HTML Button Tag

<button> tag supports all global attributes and some specific additional attributes.
There is given a list of HTML button tag attributes.

Attribute

Description

autofocus

It
specifies
that
a
button
should
automatically get focus while the loading of
the page.

disabled

It specifies that a button shuld be disabled.

form

It specifies one or more forms that the

button belongs to.

formaction

It is used for submit type. It specifies where

to send the form data when form is
submitted.

formmethod

It specifies how to send form-data.

formenctype

It specifies how form-data should

encoded before sending it to server.

formnovalidate

It specifies that the form data should not be

validated on submission.

formtarget

It specifies that where to display

response after submitting the form.

name

It specifies the name of the button.

type

It specifies the type of the button.

value

It specifies the value of the button.

the

HTML hr tag
HTML <hr> tag is used to specify a paragraph-level thematic break in HTML
document. It is used when you abruptly change your topic in your HTML document.
It draw a horizontal line between them. It is also called a Horizontal Rule in HTML.

HTML hr tag
<h2>HTML</h2>
<p>HTML is a language for describing web pages.</p>
<hr/>
<h2>HR Tag </h2>
<p> HR tag is used to draw a horizontal line within the texts to sepate content.<p>
Output:

HTML
HTML is a language for describing web pages.

HR Tag

HR tag is used to draw a horizontal line within the texts to separate content.

HR tag in HTML 4.01 and HTML5?

In HTML 4.01, the <hr> tag represents a horizontal rule while in HTML 5, it defines a
thematic break. CSS is used in HTML5 instead of layout attributes.

HR tag in HTML and XHTML

In HTML <hr> tag need not to be closed whereas <hr> tag must be properly closed
in XHTML.

HTML br tag
HTML <br> tag or element is used to break line in a paragraph.
It is generally used in poem or address where the division of line is necessary.
It is an empty tag, means it does not need a company of end tag.

Don't use br tag for margin between two paragraphs, use CSS margin property
instead.

Difference between HTML <br> and <br/>

You can use HTML br tag two ways: <br> or <br/>. It is recommended to use
closed br tag <br/> because it is supported in HTML and XHTML both.

HTML br tag example

<p>If you want to break line<br>in a paragraph,<br>use the br element.</p>
Output:
If you want to break line
in a paragraph,
use the br element.

BR tag in HTML and XHTML

In HTML br tag need not to be closed e.g. <br> whereas br tag must be properly
closed in XHTML e.g. <br/>.

HTML Script Tag

HTML script tag is used to specify client-side script such as JavaScript. It facilitate
you to place a script within your HTML document.
JavaScript is used for image manipulation, form validation, and dynamic content.
The syntax of script tag is given below:
<script>
//code to be executed
</script>

Attributes of HTML script tag

Attrib
ute

Description

Compatibil
ity

src

It specifies the URL of an external

script file.

HTML 4.01,
HTML5

type

It specifies the media type of the

script.

HTML 4.01

async

It is a boolean value which

specifies that the script is executed
asynchronously.

HTML5

defer

It is a boolean value which is used

to indicate that script is executed
after document has been parsed.

HTML 4.01,
HTML5

Usage of script tag

There can be two usage of HTML script tag:
1. to embed script code
2. to link script file

Embed script code

The script tag can be used within <body> or <head> tag to embed the scripting
code. Let's see the example to have script tag within HTML body.
<script type="text/javascript">
document.write("JavaScript is a simple language for javatpoint learners")
</script>
Output:
JavaScript is a simple language for javatpoint learners

Let's see the example to have script tag within HTML head tag.
<script type="text/javascript">
function msg(){
alert("Hello Javatpoint");
}
</script>

Link script file

The script tag can be used to link external script file by src attribute. It must be
used within the <head> tag only.
<script type="text/javascript" src="message.js" />
Click me to see full example

HTML NoScript Tag

HTML <noscript> tag is used to define an alternate content for the users who
have disabled scripting from the browser and want to access the web page.
The <noscript> element can be used within <head> and <body> tags.
While using noscript tag inside <head> element, <noscript> must contain <link>,
<style>, and <meta> tags.
The text inside the <noscript> element will be displayed if the user's browser is not
script supporting.

The example of noscript tag is given below:

Difference between HTML4 and HTML5

In HTML 4.01, <noscript> tag can be used inside the <body> tag only but in HTML5
it can be used inside <head> and <body> tag.

Difference between HTML and XHTML

The noscript tag is not supported in XHTML.

The noscript tag supports global and event attributes in HTML.

HTML bold tag

HTML bold tag is represented by <b> tag.
HTML <b> tag is used to display the written text in bold format. It is strictly a
presentational element. If you want to show your text in bold letters and not have
real semantic meaning, then put it within <b>.......</b> tag.

Difference between HTML <b> and <strong> tag

The b tag is explicit whereas strong tag is semantic.The <strong> tag adds extra
semantic meaning to the HTML document.
It is recommended to use strong tag for bold format now.

HTML bold tag example

<p> Hello guys, <b>this is the method to write bold text.</b></p>
Output:
Hello guys, this is the method to write bold text.

Note: According to HTML5 specification, b tag should be used only if no other tag is
appropriate. For example: If you want to write a heading, you must use the header tag
<h1> to <h6>. Important statement should be denoted within <strong>.....</strong>
tag, and the text you want to mark or highlight, must be put within <mark>...</mark>
tag.
There is also a CSS 'font-weight' property to set bold text.

Note: HTML b tag also supports the global and event attribute in HTML.

HTML5 Tutorial
HTML5 tutorial provides details of all 40+ HTML tags including audio, video,
header, footer, data, datalist, article etc. This HTML tutorial is designed for beginners
and professionals.
HTML5 is a next version of HTML. Here, you will get some brand new features which
will make HTML much easier. These new introducing features make your website
layout clearer to both website designers and users. There are some elements like
<header>, <footer>, <nav> and <article> that define the layout of a website.

Why use HTML5

It is enriched with advance features which makes it easy and interactive for
designer/developer and users.
It allows you to play a video and audio file.
It allows you to draw on a canvas.
It facilitate you to design better forms and build web applications that work offline.
It provides you advance features for that you would normally have to write
JavaScript to do.

The most important reason to use HTML 5 is, we believe it is not going anywhere. It
will be here to serve for a long time according to W3C recommendation.

HTML 5 Example
Let's see a simple example of HTML5.
<!DOCTYPE>
<html>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>

HTML 5 Tags
There is a list of newly included tags in HTML 5. These HTML 5 tags (elements)
provide a better document structure. This list shows all HTML 5 tags in alphabetical
order with description.

List of HTML 5 Tags

Tag

Description

This element is used to define an independent

piece of content in a document, that may be a
blog, a magazine or a newspaper article.

<aside>

It specifies that article is slightly related to

the rest of the whole page.

<audio>

It is used to play audio file in HTML.

<bdi>

The bdi stands for bi-directional isolation. It

isolates a part of text that is formatted in
other direction from the outside text
document.

It is used to draw canvas.

<data>

It provides machine readable version of its

data.

It provides
textfield.

It specifies the additional information or

controls required by user.

auto

complete

feature

for

It defines a window or a dialog box.

It is used to define a caption for a <figure>

element.

It defines a self-contained
photos, diagrams etc.

It defines a footer for a section.

It defines a header for a section.

<main>

It defines the main content of a document.

<mark>

It specifies
content.

It defines a command that the user can

invoke from a popup menu.

<meter>

It is used to measure the scalar value within a

given range.

<nav>

It is used to define the navigation link in the

document.

It specifies the progress of the task.

<rp>

It defines what to show in browser that don't

support ruby annotation.

<rt>

It defines an explanation/pronunciation of
characters.

<ruby>

It defines ruby annotation along with <rp>

and <rt>.

It defines a section in the document.

It specifies a visible heading for <detailed>

element.

<svg>

It is used to display shapes.

<time>

It is used to define a date/time.

<video>

It is used to play video file in HTML.

<wbr>

It defines a possible line break.

the

marked

content

highlighted

HTML Audio Tag

HTML audio tag is used to define sounds such as music and other audio clips.
Currently there are three supported file format for HTML 5 audio tag.
1. mp3
2. wav

3. ogg
HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar
technologies are used to play the multimedia items.
This table defines that which web browser supports which audio file format.

Browser

mp3

wav

ogg

Internet Explorer

yes

Google Chrome

yes

Mozilla Firefox

yes*

yes

Opera

yes

Apple Safari

yes

HTML Audio Tag Example

Let's see the code to play mp3 file using HTML audio tag.
<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
Your browser does not support the html audio tag.
</audio>
Output:
Let's see the example to play ogg file using HTML audio tag.
<audio controls>
<source src="koyal.ogg" type="audio/ogg">
Your browser does not support the html audio tag.
</audio>

Attributes of HTML Audio Tag

There is given a list of HTML audio tag.

Attribut Description
e
controls

It defines the audio controls which is displayed

with play/pause buttons.

autoplay

It specifies that the audio will start playing as soon

as it is ready.

loop

It specifies that the audio file will start over again,

every time when it is completed.

muted

It is used to mute the audio output.

preload

It specifies the author view to upload audio file

when the page loads.

src

It specifies the source URL of the audio file.

HTML Audio Tag Attribute Example

Here we are going to use controls, autoplay, loop and src attributes of HTML audio
tag.
<audio controls autoplay loop>
<source src="koyal.mp3" type="audio/mpeg"></audio>

MIME Types for HTML Audio format

The available MIME type HTML audio tag is given below.

Audio Format

MIME Type

mp3

audio/mpeg

ogg

audio/ogg

wav

audio/wav

HTML Video Tag

HTML 5 supports <video> tag also. The HTML video tag is used for streaming video
files such as a movie clip, song clip on the web page.
Currently, there are three video formats supported for HTML video tag:
1. mp4
2. webM
3. ogg
Let's see the table that defines which web browser supports video file format.

Browser

mp4

web
M

ogg

Internet Explorer

yes

Google Chrome

yes

Mozilla Firefox

yes

Opera

yes

Apple Safari

yes

Android also supports mp4 format.

HTML Video Tag Example

Let's see the code to play mp4 file using HTML video tag.
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>
Let's see the example to play ogg file using HTML video tag.
<video controls>
<source src="movie.ogg" type="video/ogg">
Your browser does not support the html video tag.
</video>

Attributes of HTML Video Tag

Let's see the list of HTML 5 video tag attributes.

Attribut Description
e
controls

It defines the video controls which is displayed with play/pause

buttons.

height

It is used to set the height of the video player.

width

It is used to set the width of the video player.

poster

It specifies the image which is displayed on the screen when the

video is not played.

autoplay

It specifies that the video will start playing as soon as it is ready.

loop

It specifies that the video file will start over again, every time
when it is completed.

muted

It is used to mute the video output.

preload

It specifies the author view to upload video file when the page
loads.

src

It specifies the source URL of the video file.

HTML Video Tag Attribute Example

Let's see the example of video tag in HTML where are using height, width, autoplay,
controls and loop attributes.
<video width="320" height="240" controls autoplay loop>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>

MIME Types for HTML Video format

The available MIME type HTML video tag is given below.

Video Format

MIME Type

mp4

video/mp4

Ogg

video/ogg

webM

video/webM

HTML Progress Tag

HTML <progress> tag is used to display the progress of a task. It provides an
easy way for web developers to create progress bar on the website. It is mostly used
to show the progress of a file uploading on the web page.
The HTML progress tag is new in HTML5 so you must use new browsers.

Attributes of HTML Progress Tag

HTML <progress> tag supports the global and event attributes as well as 2 specific
attributes.

Tag

Description

value

It defines that how much work the task has been

completed.

max

It defines that how much work the task requires in

total.

The progress tag should be used to represent progress of a task only, not for just a
gauge (disk pace usage). For such purpose, <meter> element is used.

HTML Progress Tag Example

Let's see HTML progress example without attribute.
<progress></progress>
Output:

Let's see the progress example with value and max attributes.
Downloading progress:
<progress value="43" max="100"></progress>
Output:
Downloading progress:

Styling Progress Bar

You can apply CSS code on progress tag.
progress{
width: 300px;
height: 30px;
}
Output:

HTML Progress Tag with JavaScript

The <progress> tag should be used in conjunction with JavaScript to display the
progress of a task.

click me

HTML Meter Tag

HTML <meter> tag is used to measure data within a given range. It defines a
scalar measurement with range. It is also known as a gause.
It should be used to display disk usage, voting population etc.
The HTML meter tag is new in HTML5 so you must use new browsers.

Attributes of HTML Meter Tag

HTML <meter> tag supports the global and event attributes as well as some specific
attributes.

Attribut Description
es
value

It is a mandatory attribute which is used to

specify a value in numbers. The number may be
integer or floating point number.

form

It specifies one or more forms to which meter

element belongs to.

high

It specifies a range that is considered as high

value.

low

It specifies a range that is considered as low

value.

max

It specifies the maximum value defined in the

range.

min

It specifies the minimum value defined in the

range.

optimum

It specifies the optimum value for the gauge.It is

an optional attribute.

HTML Meter Tag Example

Let's see the progress example with min, max and value attributes.
<p>Display a gauge:</p>
<meter value="30" min="1" max="100">30 out of 100</meter><br>
<meter value="0.8">80%</meter>
Output:
Display a gauge:

Styling Meter
You can apply CSS code on meter tag.
meter{
width: 300px;
height: 30px;
}
Output:

HTML Data Tag

The HTML <data> tag is used to provide a machine readable version of its own
contents. It displays the data in a special format. It is useful in the case where your

data needs to be in a certain format because it may be processed by a script, but

this might not be the format that you'd like your users to see.
Let?s take a scenario to understand it well:
Suppose you have to represent some numbers to your users with letter (i.e. one,
two, three and so on) but you have script that sorts the numbers in ascending or
descending orders. So your script needs numbers in a format like 1, 2, 3... etc.
The <data> tag is here to solve your problem.
For the users: Write within the <data>....>/data> tag.
For the script: Use value attribute.
<data value="1">One </data>

HTML data tag attribute

There is only one required attribute. The data tag supports global and event
attributes also.

Attrib
ute

Description

value

It is required attribute. It is used to provide the

machine-readable version of tag's content.

HTML data tag example

<ul>
<li><data value="101">Java Tutorial</data></li>
<li><data value="111">SQL tutorial</data></li>
<li><data value="121">HTML tutorial</data></li>
</ul>
Output:

Java Tutorial
SQL tutorial
HTML tutorial

HTML Datalist Tag

The HTML <datalist> tag is is used to provide an auto complete feature on form
element. It provides a list of predefined options to the users to select data.
The datalist tag is introduced in HTML5.
The <datalist> tag should be used with an <input< element that contains a "list"
attribute. The value of "list" attribute is linked with the datalist id.

The HTML datalist tag supports global and event attributes also.

Enter your favorite cricket player: Press any character

HTML Header Tag

HTML <header> tag is used as a container of introductory content or navigation
links. Generally a <header> element contains one or more heading elements, logo
or icons or author's information.
You can use several <header> elements in one document, but a <header> element
cannot be placed within a <footer>, <address> or another <header> element.

HTML Header Tag Example

<header>
<h2>ABCOnline.com</h2>
<p> World's no.1 shopping website</p>
</header>
Output:

ABCOnline.com

World's no.1 shopping website

ABCOnline.com

World's no.1 shopping website

HTML Footer Tag

HTML <footer> tag is used to define a footer for a document or a section. It is
generally used in the last of the section (bottom of the page).
The footer tag is included in HTML5.

HTML <footer> tag contains information about its containing elements for example:

author information
contact information
copyright information
sitemap
back to top links
related documents etc.

Note: You can have one or many footer elements in one document.
If you want to put information like address, e-mail etc. about the author on your
web page, all the relevant elements should be included into the footer element.

Posted by: Sonoo Jaiswal

JavaTpoint, plot no. 6, near MMX Mall,Mohan Nagar, Ghaziabad Pin no. 201007
Contact information: [email protected].

HTML figure tag

HTML <figure> tag is used to mark up a photo in the document on a web page.
As we know image tag is already available in HTML to display the pictures on web
pages. But HTML 5 <figure> tag is used to handle the group of diagrams, photos,
code listing etc. with some embedded content. You can also add a caption for the
photo with the help of <figcaption> tag.

HTML figure is new a new tag introduced in HTML5.

HTML figure tag example

<p>The Taj Mahal is widely recognized as "the jewel of Muslim art in India and
one of the universally admired masterpieces of the world's heritage". It is regarded
by many as the finest example of Mughal architecture, a style that combines eleme
nts
from Islamic, Persian, Ottoman, Turkish and Indian architectural styles.</p>
<figure>
<img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
</figure>
Output:
The Taj Mahal is widely recognized as "the jewel of Muslim art in India and one of
the universally admired masterpieces of the world's heritage". It is regarded by
many as the finest example of Mughal architecture, a style that combines elements
from Islamic, Persian, Ottoman, Turkish and Indian architectural styles.

Note: The content you put within <figure>.......</figure> tag is related to the main flow,
but its position is independent of the main flow and does not affect the flow the
document when removed.

HTML figcaption tag

The <figcaption> element is used to provide a caption to an image.
It is an optional tag and can appear before or after the content within the <figure>
tag.
Only one <figcaption> element can be nested within a <figure> tag although the
<figure> element itself may contain multiple other elements like <img> or <code>.
The <figcaption> element is used with <figure> element and it can be placed as the
first or last child of the <figure> element.

HTML figure tag example

<figure>
<img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
<figcaption>Fig.1.1 - A front view of the great Taj Mahal in Agra.</figcaption>
</figure>
Output:

Fig.1.1 - A front view of the great Taj Mahal in Agra.

Note: HTML figcaption tag also supports the global and event attribute in HTML.

HTML Article Tag

The HTML <article> tag defines an independent self-contained content in a
document, page, application or a site.
The article tag content makes sense on its own. It is independent and complete from
other content shown on the page. This tag is generally used on Forum post, Blog
post, News story, comment etc.

HTML article tag example

<article>
<h2>Narendra Modi</h2>
<i>(Naam to suna hi hoga) </i>
<p>Narendra DamodarDas Modi is the 15th and current Prime Minister of India,
Modi, a leader of the Bharatiya Janata Party (BJP), previously served as the Chief M
inister
of Gujarat state from 2001 to 2014. He is currently the Member of Parliament (MP)
from Varanasi. </p>
</article>
Output:

Narendra Modi
(Naam to suna hi hoga)

Narendra DamodarDas Modi is the 15th and current Prime Minister of India, Modi, a leader
of the Bharatiya Janata Party (BJP), previously served as the Chief Minister of Gujarat state
from 2001 to 2014. He is currently the Member of Parliament (MP) from Varanasi.

HTML Aside Tag

The HTML <aside> tag provides information about the main content. According to
W3C definition, the <aside> element represents content that forms the main textual
flow of a document.
HTML aside is a new tag introduced in HTML5.

HTML aside tag example

<p>I don't want to live in Ghaziabad, I wish; I could buy a flat in New Delhi.</p>
<aside>
<h3>New Delhi</h3>
<p>New Delhi is the capital of India.</p>
</aside>
Output:
I don't want to live in Ghaziabad, I wish; I could buy a flat in New Delhi.

New Delhi

New Delhi is the capital of India.

HTML aside tag also supports global and event attributes in HTML.

HTML Dialog Tag

HTML <dialog> tag to create a new popup dialog on a web page. This tag
represents a dialog box or other interactive component like window.
The <dialog> element uses a boolean attribute called open that activate element
and facilitate user to interact with it.
HTML dialog is a new tag introduced in HTML5.

HTML dialog tag example

<div>
<dialog id="myFirstDialog" style="width:50%;backgroundcolor:#F4FFEF;border:1px dotted black;">
<p><q>I am so clever that sometimes I don't understand a single word of what I a
m saying.
</q> - <cite>Oscar Wilde</cite></p>
<button id="hide">Close</button>
</dialog>
<button id="show">Show Dialog</button>
</div>

<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('myFirstDialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
Output:
Show Dialog

HTML dialog tag also supports global and event attributes in HTML.

HTML Details Tag

HTML <details> tag is used to specify the additional details on the web page that
the user can view or hide on demand.
According to W3C HTML specification, it is used as a disclosure widget from which
user can retrieve additional information or control.
It is used together with a relevant tag known as <summary>. Technically, there is
no need of summary tag, but if you ignore this then the browser will use some
default text.
The <details> tag wraps all the content which you want to show or hide and the
<summary> tag contains the summary and the title of the section.
HTML details is a new tag introduced in HTML5.
Let's take an example to understand this clearly.

HTML details tag attribute

HTML details tag also supports global and event attributes in HTML.
The details tag provides one specific attribute open.

Attribu Description
te
open

It specifies that the details will be displayed (open) to the user.

HTML details tag example

<details>
<summary>Copyright 2011-2014.</summary>
<p> - by JavaTpoint. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the javatpoint.com
</p>
</details>
<p><b>Note:</b> The details tag is currently only supported in Opera, Chrome,
and in Safari 6.</p>
Output:

HTML Summary Tag

The HTML <summary> tag is used with <details> tag. It is used as a summary,
caption or legend for the content of a <details> element.
It is used within the <details> tag. It must have a closing tag.
The <summary> tag is new and introduced in HTML 5.

HTML summary tag example

<details>
<summary>JavaTpoint Summary</summary>
<p> JavaTpoint is a popular tutorial website.</p>

<p>You can learn various tutorials on JavaTpoint such as HTML, CSS, JavaScript, Ja
va, Android.</p>
</details>
Output:

JavaTpoint Summary
Let's see another example of HTML summary tag.
<details>
<summary>MacBook Pro Specification</summary>
<ul>
<li><strong>13.3-inch LED-backlit glossy widescreen display</strong> with
edge-to-edge, uninterrupted glass (1280 x 800-pixel resolution).</li>
<li><strong>2.4 GHz Intel Core i5 dual-core processor</strong> with 3 MB
shared L3 cache for excellent multitasking.</li>
<li><strong>Intel HD Graphics 3000</strong> with 384 MB of DDR3 SDRAM
shared with main memory.</li>
<li><strong>500 GB Serial ATA hard drive</strong> (5400 RPM)</li>
<li><strong>4 GB installed RAM</strong> (1333 MHz DDR3; supports up to
8 GB)</li>
</ul>
</details>
Output:

MacBook Pro Specification

The <summary> tag supports only Global attributes in HTML 5. There are no other
specific attributes used with <summary> tag.

HTML Section Tag

The HTML <section> tag is used to define sections in a document. When you put
your content on a web page, it may contains many chapters, headers, footers, or
other sections on a web page that is why HTML <section> tag is used.
HTML <section> is a new tag introduced in HTML5.

HTML section tag example

CSS code:
section{

border:1px solid pink;

padding:15px;
margin:10px;
}
HTML code:
<h2> Indian Leader</h2>
<section>
<h3> Jawaharlal Nehru </h3>
<p> Jawaharlal Nehru was the first Prime Minister of India and a central figure in
Indian politics for much of the 20th century. He emerged as the paramount leader of
the Indian independence movement under the tutelage of Mahatma Gandhi.Source
Wikipedia </p>
</section>
<section>
<h3>Subhas Chandra Bose </h3>
<p>Subhas Chandra Bose was an Indian nationalist whose attempt during World Wa
r II to rid India of British rule with the help of Nazi Germany and Japan left a trouble
d legacy.
The honorific Netaji (Hindustani language: "Respected Leader"), first applied to Bose
in Germany,by the Indian soldiers of the Indische Legion and by the German and Ind
ian officials in the Special Bureau for India in Berlin, in early 1942, is now used widel
y throughout India. -source Wikipedia</p>
</section>
Output:

Indian Leader
Jawaharlal Nehru

Jawaharlal Nehru was the first Prime Minister of India and a central figure in Indian politics
for much of the 20th century. He emerged as the paramount leader of the Indian
independence movement under the tutelage of Mahatma Gandhi. -Source Wikipedia
Subhas Chandra Bose

Subhas Chandra Bose was an Indian nationalist whose attempt during World War II to rid
India of British rule with the help of Nazi Germany and Japan left a troubled legacy. The
honorific Netaji (Hindustani language: "Respected Leader"), first applied to Bose in
Germany, by the Indian soldiers of the Indische Legion and by the German and Indian
officials in the Special Bureau for India in Berlin, in early 1942, is now used widely
throughout India. -source Wikipedia

The <section> tag supports global and event attributes in HTML 5.

HTML Time Tag

HTML <time> tag is used to define date and time. It displays time value in a 24
hour clock or a precise date in a Gregorian calendar in HTML.
It is used to encode dates and times in a machine-readable way to make easy to
mark or schedule your task.
It also helps search engines to produce smarter search results.
HTML <time> is a new tag and introduced in HTML5.
Let's see the syntax to define date and time.
<time>Define Time and Date here</time>

Attribute
There is only one specific attribute of HTML5 time tag.

Attribut Description
e
Datetim
e

It is used to define machine-readable date/time

within the time element.

HTML time tag example

<p>We open our shop at <time>09:00</time> am.</p>
<p>The business meeting is scheduled on <time datetime="2009-02-18">next we
dnesday</time>.</p>
<p>The wedding of Salman's sister was scheduled at <time datetime="2014-1119 T0 7:00-09:00">7pm last wednesday </time>.</p>
Output:
We open our shop at 09:00 am.
The business meeting is scheduled on next wednesday.
The wedding of Salman's sister was scheduled at 7pm last wednesday .

In this example, First line in the body tag defines basic usage of time tag.
Second line shows how to use the datetime attribute to provide contents in a
machine-readable format.
Third line uses the datetime attribute to provide an even more specific date and
time.

The <time> tag also supports global attributes and event attributes in HTML 5.

HTML Main Tag

HTML <main> tag is used to represent the main content of the <body> tag.
The <main> tag is written within <body> tag. It is used to accurately describe the
primary content of a page.
The content of the main tag is directly related to the central topic of the document.
HTML <main> is a new tag and introduced in HTML5.

Points to remember:
Author should not include more than one <main> tag within a document.
The <main> element should not used as a child of an <article>, <aside>,
<header>, <footer>, or <nav> element.

HTML main tag and its sub elements can be easily styled by CSS.

HTML main tag example

<main>
<h2>Apples</h1>
<p>The apple is a red color pomaceous fruit of the apple tree. It is a very famous s
aying about apple.

</br> "An apple in a day, keeps the Doctor away".</p>

<article>
<h3>Red Delicious</h3>
<p>These bright red apples are the most common found in many supermarkets.<
/p>
</article>
<article>
<h3>Granny Smith</h3>
<p>These juicy, green apples make a great filling for apple pies.</p>
</article>
</main>
Output:

Apples

The apple is a red color pomaceous fruit of the apple tree. It is a very famous saying about
apple.
"An apple in a day, keeps the Doctor away".
Red Delicious

These bright red apples are the most common found in many supermarkets.
Granny Smith

These juicy, green apples make a great filling for apple pies.

The <main> tag also supports global attributes and event attributes in HTML 5.

HTML Wbr Tag

HTML <wbr> tag is used to specify a line break opportunity within an HTML
document.
Without wbr tag, it is very difficult to read a long single word or a sentence. Without
wbr tag, single long word can wrap or not wrap at all, it creates problem for the
layout of the page.
Without <wbr> tag, users will have to scroll right to read a long complete word or
sentence.
The <wbr> tag is new and introduced in HTML 5.

The wbr tag doesn't break line.

Difference between <wbr> and <br> tag

The <br> tag forces a line break while <wbr> tag only represents a line break
opportunity. It only facilitate the browser to line break if necessary (for example at
the end of page .

How to test <wbr> tag

To test HTML wbr tag, write too many characters without wbr tag, it will enable a
scroll bar for you. But if you write too many characters within wbr tag, it will not
enable a scroll bar but break the line.

HTML wbr tag example

<p> This is a world record for the largest word,
a 45-letter word appears in a major dictionary
<i>pneumonoultramicroscopicsilicovolcanoconiosis</i>
</p>
<p>Here's what it looks like without using the <code>wbr</code> tag...<br/>
<i> pneumonoultramicroscopicsilicovolcanoconiosis </i></p>
<p> It will look like this after using wbr tag. </p>
<i> pneu<wbr>monoultra<wbr>microsc<wbr>opicsili<wbr>covolcan<wbr>iosi
s</i>
Output:
This is a world record for the largest word, a 45-letter word appears in a major
dictionarypneumonoultramicroscopicsilicovolcanoconiosis
Here's
what
it
looks
like
without
pneumonoultramicroscopicsilicovolcanoconiosis

using

It will look like this after using wbr tag.

pneumonoultramicroscopicsilicovolcaniosis

The <wbr> tag supports global and event attributes in HTML 5.

HTML Canvas Tag

the wbr tag...

The HTML canvas element provides HTML a bitmapped surface to work with. It is
used to draw graphics on the web page.
The HTML 5 <canvas> tag is used to draw graphics using scripting language like
JavaScript.
The <canvas> element is only a container for graphics, you must need a scripting
language to draw the graphics. The <canvas> element allows for dynamic and
scriptable rendering of 2D shapes and bitmap images.
It is a low level, procedural model that updates a bitmap and does not have a builtin scene. There are several methods in canvas to draw paths, boxes, circles, text
and add images.

How to create a HTML canvas?

A canvas is a rectangle like area on an HTML page. It is specified with canvas
element. By default, the <canvas> element has no border and no content, it is like a
container.
<canvas id = "mycanvas" width ="200" height ="100"> </canvas>

HTML 5 Canvas Tag Example

<canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">
Your browser does not support the HTML5 canvas tag.
</canvas>
Output:

Note: It is always necessary to specify the id attribute and the height & width attribute
to define the size of the canvas. You can have multiple canvas elements on one HTML
page.

HTML Canvas Tag with JavaScript

A canvas is a two dimensional grid.
Coordinates (0,0) defines the upper left corner of the canvas. The parameters
(0,0,200,100) is used for fillRect() method. This parameter will fill the rectangle
start with the upper-left corner (0,0) and draw a 200 * 100 rectangle.
<canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c3
c3;">
Your browser does not support the HTML5 canvas tag.

</canvas>
<script>
var c = document.getElementById("myCanvas");
var cctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,200,100);
</script>
Output:

Drawing Line on Canvas

If you want to draw a straight line on the canvas, you can use the following two
methods.
moveTo(x,y): It is used to define the starting point of the line.
lineTo(x,y): It is used to define the ending point of the line.
If you draw a line which starting point is (0,0) and the end point is (200,100), use
the stroke method to draw the line.
<canvas id="myCanvasLine" width="200" height="100" style="border:1px solid #d
3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasLine");
var cctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
Output:

Drawing Circle on Canvas

If you want to draw a circle on the canvas, you can use the arc() method:
arc(x, y, r, start, stop)
To sketch circle on HTML canvas, use one of the ink() methods, like stroke() or fill().
<canvas id="myCanvasCircle" width="200" height="100" style="border:1px solid
#d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

Drawing text on canvas

There are property and methods used for drawing text on the canvas.
font property: It is used to define the font property for the text.
fillText(text,x,y) method: It is used to draw filled text on the canvas. It looks like
bold font.
strokeText(text,x,y) method: It is also used to draw text on the canvas, but the
text is unfilled.
Let's see fillText() method example.
<canvas id="myCanvasText1" width="300" height="100" style="border:1px solid #
d3d3d3;">
Sorry! Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasText1");
var cctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello JavaTpoint",10,50);
</script>
Output:
Let's see strokeText() method example.
<canvas id="myCanvasText2" width="300" height="100" style="border:1px solid #
d3d3d3;">
Sorry!Upgrade your browser. It does not support the HTML5 canvas tag
.</canvas>
<script>
var c = document.getElementById("myCanvasText2");
var cctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello JavaTpoint",10,50);
</script>

Output:

HTML SVG
The HTML SVG is an acronym which stands for Scalable Vector Graphics.
HTML SVG is a modularized language which is used to describe graphics in XML. It
describe two-dimensional vector and mixed vector/raster graphics in XML. It is a
W3C recommendation. SVG images and their behaviors are defined in XML text files.
So as XML files, you can create and edit an SVG image with text editor, but generally
drawing programs like inkspace are preferred to create it.
SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in
an X,Y coordinate system etc.
The <svg> element specifies the root of a SVG fragment. You can animate every
element and every attribute in SVG files.

HTML SVG Circle Example

Let's see the example to draw circle by svg tag.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>
Here, we are using cx, cy and r attributes of circle tag. These attributes can't be
used with svg rect tag.

Output:

HTML SVG Rectangle Example

Let's see the example to draw rectangle by svg tag.
<svg width="200" height="100">
<rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" />
</svg>
Here, we are using width and height attributes of rect tag.

Output:

HTML SVG polygon Example

Let's see the example to draw polygon by svg tag.
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:red;stroke:yellow;stroke-width:5;fill-rule:nonzero;" />
</svg>
Here, we are using points attribute of polygon tag.
Output:

Why SVG is preferred over other image formats?

SVG images can be saved as the smallest size possible. Unlike bitmap image formats
like JPG or PNG, it does not contain a fixed set of dots. So it is also easy to print with
high quality at any resolution.
SVG images can be zoomed to a certain level without degradation of the picture
quality.
SVG images and their behaviors are defined in XML text files, so they can be created
and edited with any text editor.

HTML Drag and Drop

HTML Drag and Drop (DnD) is a feature of HTML5. It is a powerful user interface
concept which is used to copy, reorder and delete items with the help of mouse. You
can hold the mouse button down over an element and drag it to another location. If
you want to drop the element there, just release the mouse button.
If you want to achieve the Drag and Drop functionality in traditional HTML4, you
must either have to use complex JavaScript programming or other JavaScript
frameworks like jQuery etc.

Events for Drag and Drop feature

Event

Description

Drag

It fires every time when the mouse is moved

while the object is being dragged.

Dragstart

It is a very initial stage. It fires when the user

starts dragging object.

Dragenter

It fires when the user moves his/her mouse

cursur over the target element.

Dragover

This event is fired when the mouse moves over

an element.

Dragleave

This event is fired when the mouse leaves an

element.

Drop

Drop It fires at the end of the drag operation.

Dragend

It fires when user releases the mouse button to

complete the drag operation.

HTML5 Drag and Drop Example

Let's see an example of HTML 5 drag and drop feature.

To understand this example, you must have the knowledge of JavaScript.

Note: MouseEvent is not fired during drag operation.

Stages during Drag and Drop operations

1) Make an element draggable
If you want to make an element draggable, set the draggable attribute to "true" on
the element. For example:
<img draggable = "true">
2) What to drag:
Use ondragstart and setData () methods.
Specify what should happen when the element is dragged.
3) Where to Drop:
Use ondragover event.
4) Do the Drop:
Use ondrop event.

500+ HTML Color Names

There is given a list of all HTML color names with hexadecimal code alphabetically.
It is arranged from A to Z.
It is recommended to use hex values than html color names because it occupies less
space. Whenever you minify your css file, it uses hex color value replacing html color
names.
Let's see the list of 500+ html color names.

ABCDFGHIKLMNOPRSTVWY

A color names
There is given a list of 13 color names that starts with A letter.

Color Name Color

Color
Code

AliceBlue

#f0f8ff

AntiqueWhite

#faebd7

AntiqueWhite1

#ffefdb

AntiqueWhite2

#eedfcc

AntiqueWhite3

#cdc0b0

AntiqueWhite4

#8b8378

aquamarine1

#7fffd4

aquamarine2

#76eec6

aquamarine4

#458b74

azure1

#f0ffff

azure2

#e0eeee

azure3

#c1cdcd

azure4

#838b8b

B color names
There is given a list of 21 color names that starts with B letter.

Color Name

Color

Color
Code

Beige

#f5f5dc

bisque1

#ffe4c4

bisque2

#eed5b7

bisque3

#cdb79e

bisque4

#8b7d6b

Black

#000000

BlanchedAlmond

#ffebcd

blue1

#0000ff

blue2

#0000ee

blue4

#00008b

BlueViolet

#8a2be2

brown

#a52a2a

brown1

#ff4040

brown2

#ee3b3b

brown3

#cd3333

brown4

#8b2323

burlywood

#deb887

burlywood1

#ffd39b

burlywood2

#eec591

burlywood3

#cdaa7d

burlywood4

#8b7355

C color names
There is given a list of 27 color names that starts with C letter.

Color Name

Color

Color
Code

CadetBlue

#5f9ea0

CadetBlue1

#98f5ff

CadetBlue2

#8ee5ee

CadetBlue3

#7ac5cd

CadetBlue4

#53868b

chartreuse1

#7fff00

chartreuse2

#76ee00

chartreuse3

#66cd00

chartreuse4

#458b00

chocolate

#d2691e

chocolate1

#ff7f24

chocolate2

#ee7621

chocolate3

#cd661d

coral

#ff7f50

coral1

#ff7256

coral2

#ee6a50

coral3

#cd5b45

coral4

#8b3e2f

CornflowerBlu
e

#6495ed

cornsilk1

#fff8dc

cornsilk2

#eee8cd

cornsilk3

#cdc8b1

cornsilk4

#8b8878

cyan1

#00ffff

cyan2

#00eeee

cyan3

#00cdcd

cyan4

#008b8b

D color names
There is given a list of 49 color names that starts with D letter.

Color Name

Color

Color
Code

DarkGoldenrod

#b8860b

DarkGoldenrod1

#ffb90f

DarkGoldenrod2

#eead0e

DarkGoldenrod3

#cd950c

DarkGoldenrod4

#8b6508

DarkGreen

#006400

DarkKhaki

#bdb76b

DarkOliveGreen

#556b2f

DarkOliveGreen1

#caff70

DarkOliveGreen2

#bcee68

DarkOliveGreen3

#a2cd5a

DarkOliveGreen4

#6e8b3d

DarkOrange

#ff8c00

DarkOrange1

#ff7f00

DarkOrange2

#ee7600

DarkOrange3

#cd6600

DarkOrange4

#8b4500

DarkOrchid

#9932cc

DarkOrchid1

#bf3eff

DarkOrchid2

#b23aee

DarkOrchid3

#9a32cd

DarkOrchid4

#68228b

DarkSalmon

#e9967a

DarkSeaGreen

#8fbc8f

DarkSeaGreen1

#c1ffc1

DarkSeaGreen2

#b4eeb4

DarkSeaGreen3

#9bcd9b

DarkSeaGreen4

#698b69

DarkSlateBlue

#483d8b

DarkSlateGray

#2f4f4f

DarkSlateGray1

#97ffff

DarkSlateGray2

#8deeee

DarkSlateGray3

#79cdcd

DarkSlateGray4

#528b8b

DarkTurquoise

#00ced1

DarkViolet

#9400d3

DeepPink1

#ff1493

DeepPink2

#ee1289

DeepPink3

#cd1076

DeepPink4

#8b0a50

DeepSkyBlue1

#00bfff

DeepSkyBlue2

#00b2ee

DeepSkyBlue3

#009acd

DeepSkyBlue4

#00688b

DimGray

#696969

DodgerBlue1

#1e90ff

DodgerBlue2

#1c86ee

DodgerBlue3

#1874cd

DodgerBlue4

#104e8b

F color names
There is given a list of 7 color names that starts with F letter.

Color
Name

Color

Color
Code

Firebrick

#b22222

firebrick1

#ff3030

firebrick2

#ee2c2c

firebrick3

#cd2626

firebrick4

#8b1a1a

FloralWhite

#fffaf0

ForestGreen

#228b22

G color names
There is given a list of 115 color names that starts with G letter.

Color
Name

Color

Color
Code

Gainsboro

#dcdcdc

GhostWhite

#f8f8ff

gold1

#ffd700

gold2

#eec900

gold3

#cdad00

gold4

#8b7500

goldenrod

#daa520

goldenrod1

#ffc125

goldenrod2

#eeb422

goldenrod3

#cd9b1d

goldenrod4

#8b6914

gray

#bebebe

gray1

#030303

gray10

#1a1a1a

gray11

#1c1c1c

gray12

#1f1f1f

gray13

#212121

gray14

#242424

gray15

#262626

gray16

#292929

gray17

#2b2b2b

gray18

#2e2e2e

gray19

#303030

gray2

#050505

gray20

#333333

gray21

#363636

gray22

#383838

gray23

#3b3b3b

gray24

#3d3d3d

gray25

#404040

gray26

#424242

gray27

#454545

gray28

#474747

gray29

#4a4a4a

gray3

#080808

gray30

#4d4d4d

gray31

#4f4f4f

gray32

#525252

gray33

#545454

gray34

#575757

gray35

#595959

gray36

#5c5c5c

gray37

#5e5e5e

gray38

#616161

gray39

#636363

gray4

#0a0a0a

gray40

#666666

gray41

#696969

gray42

#6b6b6b

gray43

#6e6e6e

gray44

#707070

gray45

#737373

gray46

#757575

gray47

#787878

gray48

#7a7a7a

gray49

#7d7d7d

gray5

#0d0d0d

gray50

#7f7f7f

gray51

#828282

gray52

#858585

gray53

#878787

gray54

#8a8a8a

gray55

#8c8c8c

gray56

#8f8f8f

gray57

#919191

gray58

#949494

gray59

#969696

gray6

#0f0f0f

gray60

#999999

gray61

#9c9c9c

gray62

#9e9e9e

gray63

#a1a1a1

gray64

#a3a3a3

gray65

#a6a6a6

gray66

#a8a8a8

gray67

#ababab

gray68

#adadad

gray69

#b0b0b0

gray7

#121212

gray70

#b3b3b3

gray71

#b5b5b5

gray72

#b8b8b8

gray73

#bababa

gray74

#bdbdbd

gray75

#bfbfbf

gray76

#c2c2c2

gray77

#c4c4c4

gray78

#c7c7c7

gray79

#c9c9c9

gray8

#141414

gray80

#cccccc

gray81

#cfcfcf

gray82

#d1d1d1

gray83

#d4d4d4

gray84

#d6d6d6

gray85

#d9d9d9

gray86

#dbdbdb

gray87

#dedede

gray88

#e0e0e0

gray89

#e3e3e3

gray9

#171717

gray90

#e5e5e5

gray91

#e8e8e8

gray92

#ebebeb

gray93

#ededed

gray94

#f0f0f0

gray95

#f2f2f2

gray97

#f7f7f7

gray98

#fafafa

gray99

#fcfcfc

green1

#00ff00

green2

#00ee00

green3

#00cd00

green4

#008b00

GreenYellow

#adff2f

H color names
There is given a list of 9 color names that starts with H letter.

Color
Name

Color

Color
Code

honeydew1

#f0fff0

honeydew2

#e0eee0

honeydew3

#c1cdc1

honeydew4

#838b83

HotPink

#ff69b4

HotPink1

#ff6eb4

HotPink2

#ee6aa7

HotPink3

#cd6090

HotPink4

#8b3a62

I color names
There is given a list of 9 color names that starts with I letter.

Color
Name

Color

Color
Code

IndianRed

#cd5c5c

IndianRed1

#ff6a6a

IndianRed2

#ee6363

IndianRed3

#cd5555

IndianRed4

#8b3a3a

ivory1

#fffff0

ivory2

#eeeee0

ivory3

#cdcdc1

ivory4

#8b8b83

K color names
There is given a list of 5 color names that starts with K letter.

Color
Name

Color

Color
Code

Khaki

#f0e68c

khaki
1

#fff68f

khaki
2

#eee685

khaki
3

#cdc673

khaki
4

#8b864e

L color names
There is given a list of 55 color names that starts with L letter.

Color Name

Color

Color
Code

Lavender

#e6e6fa

LavenderBlush1

#fff0f5

LavenderBlush2

#eee0e5

LavenderBlush3

#cdc1c5

LavenderBlush4

#8b8386

LawnGreen

#7cfc00

LemonChiffon1

#fffacd

LemonChiffon2

#eee9bf

LemonChiffon3

#cdc9a5

LemonChiffon4

#8b8970

light

#eedd82

LightBlue

#add8e6

LightBlue1

#bfefff

LightBlue2

#b2dfee

LightBlue3

#9ac0cd

LightBlue4

#68838b

LightCoral

#f08080

LightCyan1

#e0ffff

LightCyan2

#d1eeee

LightCyan3

#b4cdcd

LightCyan4

#7a8b8b

LightGoldenrod1

#ffec8b

LightGoldenrod2

#eedc82

LightGoldenrod3

#cdbe70

LightGoldenrod4

#8b814c

LightGoldenrodYellow

#fafad2

LightGray

#d3d3d3

LightPink

#ffb6c1

LightPink1

#ffaeb9

LightPink2

#eea2ad

LightPink3

#cd8c95

LightPink4

#8b5f65

LightSalmon1

#ffa07a

LightSalmon2

#ee9572

LightSalmon3

#cd8162

LightSalmon4

#8b5742

LightSeaGreen

#20b2aa

LightSkyBlue

#87cefa

LightSkyBlue1

#b0e2ff

LightSkyBlue2

#a4d3ee

LightSkyBlue3

#8db6cd

LightSkyBlue4

#607b8b

LightSlateBlue

#8470ff

LightSlateGray

#778899

LightSteelBlue

#b0c4de

LightSteelBlue1

#cae1ff

LightSteelBlue2

#bcd2ee

LightSteelBlue3

#a2b5cd

LightSteelBlue4

#6e7b8b

LightYellow1

#ffffe0

LightYellow2

#eeeed1

LightYellow3

#cdcdb4

LightYellow4

#8b8b7a

LimeGreen

#32cd32

linen

#faf0e6

M color names
There is given a list of 34 color names that starts with M letter.

Color Name

Color

Color
Code

magenta

#ff00ff

magenta2

#ee00ee

magenta3

#cd00cd

magenta4

#8b008b

maroon

#b03060

maroon1

#ff34b3

maroon2

#ee30a7

maroon3

#cd2990

maroon4

#8b1c62

medium

#66cdaa

MediumAquamarine

#66cdaa

MediumBlue

#0000cd

MediumOrchid

#ba55d3

MediumOrchid1

#e066ff

MediumOrchid2

#d15fee

MediumOrchid3

#b452cd

MediumOrchid4

#7a378b

MediumPurple

#9370db

MediumPurple1

#ab82ff

MediumPurple2

#9f79ee

MediumPurple3

#8968cd

MediumPurple4

#5d478b

MediumSeaGreen

#3cb371

MediumSlateBlue

#7b68ee

MediumSpringGreen

#00fa9a

MediumTurquoise

#48d1cc

MediumVioletRed

#c71585

MidnightBlue

#191970

MintCream

#f5fffa

MistyRose1

#ffe4e1

MistyRose2

#eed5d2

MistyRose3

#cdb7b5

MistyRose4

#8b7d7b

moccasin

#ffe4b5

N color names
There is given a list of 5 color names that starts with N letter.

Color Name Color

NavajoWhite1

Color
Code
#ffdead

NavajoWhite2

#eecfa1

NavajoWhite3

#cdb38b

NavajoWhite4

#8b795e

NavyBlue

#000080

O color names
There is given a list of 18 color names that starts with O letter.

Color
Name

Color

Color
Code

OldLace

#fdf5e6

OliveDrab

#6b8e23

OliveDrab1

#c0ff3e

OliveDrab2

#b3ee3a

OliveDrab4

#698b22

orange1

#ffa500

orange2

#ee9a00

orange3

#cd8500

orange4

#8b5a00

OrangeRed1

#ff4500

OrangeRed2

#ee4000

OrangeRed3

#cd3700

OrangeRed4

#8b2500

orchid

#da70d6

orchid1

#ff83fa

orchid2

#ee7ae9

orchid3

#cd69c9

orchid4

#8b4789

P color names
There is given a list of 38 color names that starts with P letter.

Color Name

Color

Code
pale

#db7093

PaleGoldenrod

#eee8aa

PaleGreen

#98fb98

PaleGreen1

#9aff9a

PaleGreen2

#90ee90

PaleGreen3

#7ccd7c

PaleGreen4

#548b54

PaleTurquoise

#afeeee

PaleTurquoise1

#bbffff

PaleTurquoise2

#aeeeee

PaleTurquoise3

#96cdcd

PaleTurquoise4

#668b8b

PaleVioletRed

#db7093

PaleVioletRed1

#ff82ab

PaleVioletRed2

#ee799f

PaleVioletRed3

#cd6889

PaleVioletRed4

#8b475d

PapayaWhip

#ffefd5

PeachPuff1

#ffdab9

PeachPuff2

#eecbad

PeachPuff3

#cdaf95

PeachPuff4

#8b7765

pink

#ffc0cb

pink1

#ffb5c5

pink2

#eea9b8

pink3

#cd919e

pink4

#8b636c

plum

#dda0dd

plum1

#ffbbff

plum2

#eeaeee

plum3

#cd96cd

plum4

#8b668b

PowderBlue

#b0e0e6

purple

#a020f0

purple1

#9b30ff

purple2

#912cee

purple3

#7d26cd

purple4

#551a8b

R color names
There is given a list of 14 color names that starts with R letter.

Color
Name

Color

Color
Code

red1

#ff0000

red2

#ee0000

red3

#cd0000

red4

#8b0000

RosyBrown

#bc8f8f

RosyBrown1

#ffc1c1

RosyBrown2

#eeb4b4

RosyBrown3

#cd9b9b

RosyBrown4

#8b6969

RoyalBlue

#4169e1

RoyalBlue1

#4876ff

RoyalBlue2

#436eee

RoyalBlue3

#3a5fcd

RoyalBlue4

#27408b

S color names
There is given a list of 48 color names that starts with S letter.

Color Name Color

Color
Code

SaddleBrown

#8b4513

salmon

#fa8072

salmon1

#ff8c69

salmon2

#ee8262

salmon3

#cd7054

salmon4

#8b4c39

SandyBrown

#f4a460

SeaGreen1

#54ff9f

SeaGreen2

#4eee94

SeaGreen3

#43cd80

SeaGreen4

#2e8b57

seashell1

#fff5ee

seashell2

#eee5de

seashell3

#cdc5bf

seashell4

#8b8682

sienna

#a0522d

sienna1

#ff8247

sienna2

#ee7942

sienna3

#cd6839

sienna4

#8b4726

SkyBlue

#87ceeb

SkyBlue1

#87ceff

SkyBlue2

#7ec0ee

SkyBlue3

#6ca6cd

SkyBlue4

#4a708b

SlateBlue

#6a5acd

SlateBlue1

#836fff

SlateBlue2

#7a67ee

SlateBlue3

#6959cd

SlateBlue4

#473c8b

SlateGray

#708090

SlateGray1

#c6e2ff

SlateGray2

#b9d3ee

SlateGray3

#9fb6cd

SlateGray4

#6c7b8b

snow1

#fffafa

snow2

#eee9e9

snow3

#cdc9c9

snow4

#8b8989

SpringGreen
1

#00ff7f

SpringGreen
2

#00ee76

SpringGreen
3

#00cd66

SpringGreen
4

#008b45

SteelBlue

#4682b4

SteelBlue1

#63b8ff

SteelBlue2

#5cacee

SteelBlue3

#4f94cd

SteelBlue4

#36648b

T color names
There is given a list of 19 color names that starts with T letter.

Color
Name

Color

Color
Code

tan

#d2b48c

tan1

#ffa54f

tan2

#ee9a49

tan3

#cd853f

tan4

#8b5a2b

thistle

#d8bfd8

thistle1

#ffe1ff

thistle2

#eed2ee

thistle3

#cdb5cd

thistle4

#8b7b8b

tomato1

#ff6347

tomato2

#ee5c42

tomato3

#cd4f39

tomato4

#8b3626

turquoise

#40e0d0

turquoise1

#00f5ff

turquoise2

#00e5ee

turquoise3

#00c5cd

turquoise4

#00868b

V color names
There is given a list of 6 color names that starts with V letter.

Color
Name

Color

Color
Code

Violet

#ee82ee

VioletRed

#d02090

VioletRed1

#ff3e96

VioletRed2

#ee3a8c

VioletRed3

#cd3278

VioletRed4

#8b2252

W color names
There is given a list of 7 color names that starts with W letter.

Color
Name

Color

Color
Code

Wheat

#f5deb3

wheat1

#ffe7ba

wheat2

#eed8ae

wheat3

#cdba96

wheat4

#8b7e66

White

#ffffff

WhiteSmoke

#f5f5f5

Y color names
There is given a list of 5 color names that starts with A letter.

Color
Name

Color

Color
Code

yellow1

#ffff00

yellow2

#eeee00

yellow3

#cdcd00

yellow4

#8b8b00

YellowGreen

#9acd32

HTML Interview Questions

A list of top frequently asked HTML interview questions and answers are given
below.

1) What is HTML?
HTML stands for Hyper Text Markup Language. It is a language of World Wide Web.
It is a standard text formatting language which is used to create and display pages
on the Web. More details...

2) What are Tags?

HTML tags are composed of three things: opening tag, content and ending tag.
Some tags are unclosed tags.
HTML documents are made of two things:
o
o

content, and
tags

Content is placed between tags to display data on the web page. More details...

3) Do all HTML tags have end tag?

No. There are some HTML tags that don't need a closing tag. For example: <image>
tag, <br> tag. More details...

4) What are some common lists that are used when designing a page?
There are many common lists which are used to design a page. You can choose any
or a combination of the following list types:
o
o
o
o
o
More

Ordered list
Unordered list
Menu list
Directory list
Definition list
details...

5) What is the difference between HTML elements and tags?

HTML elements communicate to the browser to render text. When the elements are
surrounded by brackets <>, they form HTML tags. Most of the time, tags come in
pair and surround content.

6) What is semantic HTML?

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the
semantics or meaning of the content. For example: In semantic HTML <b> </b> tag
is not used for bold statement as well as <i> </i> tag is used for italic. Instead of
these we use <strong></strong> and <em></em> tags.

7) What is image map?

Image map facilitates you link many different web pages using a single image. You
can define shapes in images that you want to make part of an image mapping.

8) How to insert a copyright symbol on a browser page?

9) How do you keep list elements straight in an HTML file?

You can keep the list elements straight by using indents.

10) Does a hyperlink only apply to text?

No, you can use hyperlinks on text and images both. More details...

11) What is a style sheet?

A style sheet is used to build a consistent, transportable, and well designed style
template. You can add these templates on several different web pages.

12) Can you create a multi colored text on a web page?

Yes. To create a multicolor text on a web page you can use <font color ="color">
</font> for the specific texts you want to color.

13) Is it possible to change the color of the bullet?

The color of the bullet is always the color of the first text of the list. So, if you want
to change the color of the bullet, you must change the color of the text.

14) What is a marquee?

Marquee is used to put the scrolling text on a web page. You should put the text
which you want to scroll within the <marquee>......</marquee> tag. More details...

15) How many tags can be used to separate section of texts?

There are three tags used to separate the texts. i.e. usually <br> tag is used to
separate line of texts. Other tags are<p> tag and <blockquote> tag.

16) How to make a picture a background image of a web page?

To make a picture a background image on a web page, you should put the following
tag code after the </head> tag.
<body background = "image.gif">

Here, replace the "image.gif" with the name of your image file which you want to
display on your web page.

17) What are empty elements?

HTML elements with no content are called empty elements. For example: <br>,
<hr> etc.

18) What is the use of span tag? Give one example.

The span tag is used for following things:
o
o
o

For adding color on text

For adding background on text
Highlight any color text etc.

Example:
<p>
<span style="color:#ffffff;">
In this page we use span.
</span>
</p>

19) What is the use of iframe tag?

An iframe is used to display a web page within a web page.
Syntax:
<iframe src="URL"></iframe>
Example:
<iframe src="demo_iframe.html" width="200px" height="200px"></iframe>
Target to a link:
<iframe src="http://www.javatpoint.com" name="iframe_a"></iframe>

HTML5 Interview Questions

Let's see a list of top HTML5 interview questions and answers.

20) What is canvas in HTML5?

Canvas is an HTML area which is used to draw graphics. More details...

21) What is SVG?

HTML SVG is used to describe the two dimensional vector and vector/raster
graphics. More details...

22) What are the different new form element types in HTML 5?
Following is a list of 10 important new elements in HTML 5:
o
o
o
o
o
o
o
o
o
o

Color
Date
Datetime-local
Email
Time
Url
Range
Telephone
Number
Search

23) Is there any need to change the web browsers to support HTML5?
No. Almost all browsers (updated versions) support HTML 5. For example: Chrome,
Firefox, Opera, Safari, IE etc.

24) Which video formats are supported by HTML5?

HTML 5 supports three types of video format:
o
o
o
More

mp4
webm
ogg
details...

25) Is audio tag supported in HTML 5?

Yes. It is used to add sound or music files on the web page. More details...

26) What is the difference between progress and meter tag?

The progress tag is used to represent the progress of the task only while the meter
tag is used to measure data within a given range. More details...

27) What is the use of figure tag in HTML 5?

The figure tag is used to add a photo in the document on the web page. More
details...

28) What is button tag?

The button tag is used in HTML 5. It is used to create a clickable button within HTML
form on the web page. It is generally used to create a "submit" or "reset"
button. More details...

29) What does details and summary tag?

The details tag is used to specify some additional details on the web page. It can be
viewed or hidden on demand. The summary tag is used with details tag. More
details...

30) What is datalist tag?

The HTML 5 datalist tag provides an auto complete feature on form element. It
facilitates users to choose the predefined options. More details...

31) How tags are migrated from HTML4 to HTML5?

No.

Typical HTML4

Typical HTML5

<nav>

Header and Footer Example

HTML 4 Header and Footer:

<div id="header">
<h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
<p>© JavaTpoint. All rights reserved.</p>
</div>
HTML 5 Header and Footer:
<header>
<h1>Monday Times</h1>
</header>
.
.
.
<footer>
<p> JavaTpoint. All rights reserved.</p>
</footer>

Menu Example
HTML 4 Menu:
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
HTML 5 Menu:
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>

32) If I do not put <!DOCTYPE html> will HTML 5 work?

No, browser will not be able to identify that it is a HTML document and HTML 5 tags
will not function properly.

33) What is the use of required attribute in HTML5?

It forces user to fill text on textfield or textarea before submitting form. It is used
for form validation.
Example:
Name: <input type="text" name="name" required>

34) What are the new <input> types for form validation in HTML5?
The new input types for form validation are email, url, number, tel and date.
Example:
<input type="email">

FS1-Episode 6 & 7
92% (12)
FS1-Episode 6 & 7
12 pages
Master Frontend Ebook
No ratings yet
Master Frontend Ebook
733 pages
Introduction To HTML5
100% (1)
Introduction To HTML5
23 pages
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
No ratings yet
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
8 pages
HTML Notes
No ratings yet
HTML Notes
96 pages
Hyper Text Markup Language (HTML) : Unit 5
No ratings yet
Hyper Text Markup Language (HTML) : Unit 5
12 pages
Assignment No 3
No ratings yet
Assignment No 3
2 pages
WT Practical
No ratings yet
WT Practical
55 pages
I. Introduction To Cascading Style Sheet:: Css / Css 3
No ratings yet
I. Introduction To Cascading Style Sheet:: Css / Css 3
30 pages
Unit Ii: Advanced Concepts in HTML
No ratings yet
Unit Ii: Advanced Concepts in HTML
26 pages
Css Intro2023
100% (1)
Css Intro2023
29 pages
Introduction To HTML
No ratings yet
Introduction To HTML
45 pages
Project On HTML
100% (1)
Project On HTML
15 pages
Chapter 2 Introduction To HTML
No ratings yet
Chapter 2 Introduction To HTML
20 pages
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
No ratings yet
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
98 pages
HTML 4
No ratings yet
HTML 4
13 pages
WEB Tech
No ratings yet
WEB Tech
122 pages
CSIT128 All Slides
No ratings yet
CSIT128 All Slides
421 pages
HTML5 Introduction by W3Schools
No ratings yet
HTML5 Introduction by W3Schools
3 pages
HTML Codes Foa Website
100% (1)
HTML Codes Foa Website
180 pages
HTML Interview Questions and Answers
No ratings yet
HTML Interview Questions and Answers
56 pages
HTML Quiz
No ratings yet
HTML Quiz
5 pages
HTML
No ratings yet
HTML
144 pages
STD: 11th Year: 2020-21 Subject: Information Technology Chapter: Impressive Web Designing Subtopic: Introduction
No ratings yet
STD: 11th Year: 2020-21 Subject: Information Technology Chapter: Impressive Web Designing Subtopic: Introduction
17 pages
HTML Notes
No ratings yet
HTML Notes
171 pages
Dheeraj Vasisth HTML PracticaL
No ratings yet
Dheeraj Vasisth HTML PracticaL
23 pages
1.HTML Tutorial
No ratings yet
1.HTML Tutorial
1 page
HTML Tutorials - I-Tech Software Education
100% (1)
HTML Tutorials - I-Tech Software Education
50 pages
Javascript Dom
No ratings yet
Javascript Dom
20 pages
HTML-Chapter 1 - 4
No ratings yet
HTML-Chapter 1 - 4
111 pages
Web Technologies Notes7
No ratings yet
Web Technologies Notes7
79 pages
CSS Lab
No ratings yet
CSS Lab
5 pages
Chapter 7-WebApplication PDF
100% (1)
Chapter 7-WebApplication PDF
48 pages
HTML
No ratings yet
HTML
76 pages
Introduction To Web Technology: Unit 3 HTML
No ratings yet
Introduction To Web Technology: Unit 3 HTML
49 pages
WTL Assignment No.2
No ratings yet
WTL Assignment No.2
7 pages
More Elements in HTML: A. Multiple Choice Questions
100% (1)
More Elements in HTML: A. Multiple Choice Questions
5 pages
Assignment of Software Lab. On: (HTML, Java, Visual Basic & Site)
No ratings yet
Assignment of Software Lab. On: (HTML, Java, Visual Basic & Site)
44 pages
HTML Notes
No ratings yet
HTML Notes
54 pages
HTML Notes by HEERA
No ratings yet
HTML Notes by HEERA
111 pages
P2S1 It RM
No ratings yet
P2S1 It RM
129 pages
CSS Lab Material
No ratings yet
CSS Lab Material
49 pages
HTML MCQ
No ratings yet
HTML MCQ
61 pages
HTML Interview Questions - Javatpoint
No ratings yet
HTML Interview Questions - Javatpoint
10 pages
The Practical Programmer's Guide To HTML & CSS
No ratings yet
The Practical Programmer's Guide To HTML & CSS
128 pages
Lecture 1 HTML & Css
No ratings yet
Lecture 1 HTML & Css
92 pages
CSS Notes & HTML Notes
100% (1)
CSS Notes & HTML Notes
5 pages
2 HTML Assin
No ratings yet
2 HTML Assin
115 pages
Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
100% (1)
Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
12 pages
Introduction To HTML
No ratings yet
Introduction To HTML
63 pages
HTML Handbook
No ratings yet
HTML Handbook
74 pages
Java Web Development Course: Writing CSS Codes
100% (1)
Java Web Development Course: Writing CSS Codes
50 pages
Chap 2 PDF
No ratings yet
Chap 2 PDF
17 pages
Introduction, Using Styles, Simple Examples, Your Own Styles, Properties and Values in Styles, Style Sheet, Formatting Blocks of Information, Layers
No ratings yet
Introduction, Using Styles, Simple Examples, Your Own Styles, Properties and Values in Styles, Style Sheet, Formatting Blocks of Information, Layers
10 pages
HTML Question Paper
No ratings yet
HTML Question Paper
3 pages
Complete HTML XML JS CSS WT-Course-Material
No ratings yet
Complete HTML XML JS CSS WT-Course-Material
174 pages
803 Java Scirpt Class XII.
No ratings yet
803 Java Scirpt Class XII.
14 pages
JavaScript I Lesson Plan
No ratings yet
JavaScript I Lesson Plan
8 pages
C & Data Structures
From Everand
C & Data Structures
Prof. P. Padmanabham
No ratings yet
DBMS Lab Manual
From Everand
DBMS Lab Manual
Jitendra Patel
1.5/5 (3)
HTML Only
No ratings yet
HTML Only
47 pages
Đề 3 - 5
No ratings yet
Đề 3 - 5
18 pages
Youth Leadership: and Global Citizenship
No ratings yet
Youth Leadership: and Global Citizenship
26 pages
XTRO Marik
100% (3)
XTRO Marik
31 pages
Albert v. University Publishing Co., 13 SCRA 84 (1965)
No ratings yet
Albert v. University Publishing Co., 13 SCRA 84 (1965)
5 pages
Mobilizing People
No ratings yet
Mobilizing People
23 pages
Case Study Analysis
No ratings yet
Case Study Analysis
9 pages
Jadual Kuliah - BM & Bi 6014
No ratings yet
Jadual Kuliah - BM & Bi 6014
2 pages
Canara HSBC (10 - 15)
No ratings yet
Canara HSBC (10 - 15)
4 pages
Check List For Refractory Job
No ratings yet
Check List For Refractory Job
5 pages
Paper 1 Chapter 4 Important Questions
No ratings yet
Paper 1 Chapter 4 Important Questions
2 pages
Endocrin System 110835
No ratings yet
Endocrin System 110835
104 pages
I Know My Numbers Sample
0% (1)
I Know My Numbers Sample
3 pages
E360 Low Engine Oil Pres
No ratings yet
E360 Low Engine Oil Pres
2 pages
HRMS Updatation of Pro File Data
No ratings yet
HRMS Updatation of Pro File Data
3 pages
Keynesian Cross Model
No ratings yet
Keynesian Cross Model
13 pages
Renewing Female Balance Pms Breast Uterine Ovarian Annas Archive
No ratings yet
Renewing Female Balance Pms Breast Uterine Ovarian Annas Archive
52 pages
Imlog 2025 06 08 08 40
No ratings yet
Imlog 2025 06 08 08 40
3 pages
Fatkur Rohman PDF
No ratings yet
Fatkur Rohman PDF
98 pages
BPD Case Study
No ratings yet
BPD Case Study
6 pages
Gallo Vs Cordero
No ratings yet
Gallo Vs Cordero
5 pages
Screenshot 2023-08-10 at 8.45.47 PM
No ratings yet
Screenshot 2023-08-10 at 8.45.47 PM
1 page
Lesson 2 Puposive Communication
No ratings yet
Lesson 2 Puposive Communication
8 pages
IGCSE Revision - Urban Environments
No ratings yet
IGCSE Revision - Urban Environments
7 pages
David Wilcock Scientific Blueprint For Ascension
100% (1)
David Wilcock Scientific Blueprint For Ascension
41 pages
Macroeconomics Syllabus 2
No ratings yet
Macroeconomics Syllabus 2
3 pages
Poem 1
No ratings yet
Poem 1
5 pages
Spherical Trigonometry
No ratings yet
Spherical Trigonometry
9 pages
Quest 3 Workbook 56f4532f6af47
No ratings yet
Quest 3 Workbook 56f4532f6af47
12 pages
Ralph Shapey
No ratings yet
Ralph Shapey
3 pages