HTML Tutorial

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>

</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
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>,
<acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>,
<del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>
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
is
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.
<caption>
It defines the table caption.
<colgroup
>
It specifies a group of one or more columns in

a table for formatting.
<col>
It is used with <colgroup> element to specify

column properties for 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.
<tfooter>
It is used to group the footer content in a

table.
HTML Table Example
Let's see the example of HTML table tag. It output is shown above.
<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><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
60
James
William
80
Swati
Sironi
82
Chetna
Singh
72
2) CSS Border property
It is now recommended to use border property of CSS to specify border in table.

<style>
table, th, td {
border: 1px solid black;
}
</style> Test it Now
You can collapse all the borders in one border by border-collapse property.
<style>
table, th, td {
border-collapse: collapse;
}
</style>
Output:
Name
Last Name
Marks
Sonoo
Jaiswal
60
James
William
80
Swati
Sironi
82
Chetna
Singh
72
HTML Table with cell padding
You can specify padding for table header and table data by two ways:
1. By cellpadding attribute of table in HTML
2. By padding property in CSS
The cellpadding attribute of HTML table tag is obselete now. It is recommended to
use CSS. So let's see the code of CSS.
<style>
table, th, td {
border: 1px solid pink;
}
th, td {
padding: 10px;
}
Output:
Name
Last Name
Marks
Sonoo
Jaiswal
60
James
William
80
Swati
Sironi
82
Chetna
Singh
72
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 {
}
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 {
}
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><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 {
}
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;
}
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.
<textarea>
It defines a multi-line input control.
<label>
It defines a label for an input element.
<fieldset>
It groups the related element in a form.
<legend>
It defines a caption for a <fieldset> element.
<select>
It defines a drop-down list.
<optgroup
>
It defines a group of related options in a dropdown list.
<option>
It defines an option in a drop-down list.
<button>
It defines a clickable button.
HTML 5 Form Tags
Let's see the list of HTML 5 form tags.
Tag
Description
<datalist
>
It specifies a list of pre-defined options for input

control.
<keygen>
It defines a key-pair generator field for forms.
<output>
It defines the result of a calculation.
HTML 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.
It
is
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.
<address>
It is used to define the contact information of

the document writer.
<bdo>
It defines the direction of the text.
<blockquote
>
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.
<define>
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.
is
HTML div element is used

to wrap large sections of
elements.
HTML
span
an inline element
is
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.
HTML pre tag example

<pre>
This is a formatted text
by using the HTML pre tag. It maintains
both space and line break.
</pre>
Output:
This is a formatted text
by using the HTML pre tag. It maintains
both space and line break.
HTML pre tag example: Java code within pre

<pre>
package com.javatpoint;
public class FirstJava{
public static void main(String args[]){
System.out.println("hello java");
}
}
</pre>
Output:
package com.javatpoint;
public class FirstJava{
public static void main(String args[]){
System.out.println("hello java");
}
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
<strong
>
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.
HTML Input Tag Example

Let's see the example of HTML input tag.
<form action="#">
First name: <input type="text" name="FirstName" placeholder="enter firstname...
"><br>
Last name: <input type="text" name="LastName" placeholder="enter lastname..."
><br>
<input type="submit" value="Submit">
</form>
Output:
First name:
Last name:
Submit
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.
be
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:

<script>
document.write("Welcome to JavaTpoint")
</script>
<noscript>Sorry! Your browser does not support JavaScript.!</noscript>
Output:
Welcome to JavaTpoint
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>
</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
<article>
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.
<canvas>
It is used to draw canvas.
<data>
It provides machine readable version of its

data.
<datalist>
It provides
textfield.
<details>
It specifies the additional information or

controls required by user.
auto
complete
feature
for
<dialog>
It defines a window or a dialog box.
<figcaption>
It is used to define a caption for a <figure>

element.
<figure>
It defines a self-contained
photos, diagrams etc.
<footer>
It defines a footer for a section.
<header>
It defines a header for a section.
<main>
It defines the main content of a document.
<mark>
It specifies
content.
<menuitem
>
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.
<progress>
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>.
<section>
It defines a section in the document.
<summary>
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
or
content
like
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
no
no
Google Chrome
yes
yes
yes
Mozilla Firefox
yes*
yes
yes
Opera
no
yes
yes
Apple Safari
yes
yes
no
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
no
no
Google Chrome
yes
yes
yes
Mozilla Firefox
yes
yes
yes
Opera
no
yes
yes
Apple Safari
yes
no
no
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">
</video>
Attributes of HTML Video Tag

Let's see the list of HTML 5 video tag attributes.
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">
</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.
<script>
var gvalue=1;
function abc(){
var progressExample = document.getElementById ('progress-javascript-example');
setInterval (function ()
{
if(gvalue<100){
gvalue++;
progressExample.value =gvalue;
}
abc();
}, 1000);
}
</script>
<progress id="progress-javascript-example" min="1" max="100"></progress>
<br/><br/>
<button onclick="abc()">click me</button>
Output:
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.
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.
HTML datalist tag example

Let's see the simple example of HTML5 datalist tag. If you press A, it will show a list
of cricketers starting with A letter.
<label>
Enter your favorite cricket player: Press any character<br />
<input type="text" id="favCktPlayer" list="CktPlayers">
<datalist id="CktPlayers">
<option value="Sachin Tendulkar">
<option value="Brian Lara">
<option value="Jacques Kallis">
<option value="Ricky Ponting">
<option value="Rahul Dravid">
<option value="Shane Warne">
<option value="Rohit Sharma">
<option value="Donald Bradman">
<option value="Saurav Ganguly ">
<option value="AB diVilliers">
<option value="Mahendra Singh Dhoni">
<option value="Adam Gilchrist">
</datalist>
</label>
Output:
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
Let's see another example of header tag with CSS code.

CSS Code:
header{
border: 1px solid pink;
background-color:pink;
padding:10px;
border-radius:5px;
}
HTML Code:
<header>
<h2>ABCOnline.com</h2>
<p> World's no.1 shopping website</p>
</header>
Output:
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.
HTML Footer Tag Example

<footer>
<p>Posted by: Sonoo Jaiswal</p>
<p>
<address> JavaTpoint, plot no. 6, near MMX Mall,Mohan Nagar, Ghaziabad Pin no.
201007
</address>
</p>
<p>Contact information:
<a href="mailto:sonoojaiswal1987@gmail.com">sonoojaiswal1987@gmail.com</a
>.
</p>
</footer>
Output:
Posted by: Sonoo Jaiswal

JavaTpoint, plot no. 6, near MMX Mall,Mohan Nagar, Ghaziabad Pin no. 201007
Contact information: sonoojaiswal1987@gmail.com.
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:
Copyright 2011-2014.
Note: The details tag is currently only supported in Opera, Chrome, and in Safari 6.
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.
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");
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>
<script>
var c = document.getElementById("myCanvasCircle");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
Output:
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");
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");
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.

<script>
function allowDrop(ev) {ev.preventDefault();}
function drag(ev) {ev.dataTransfer.setData("text/html", ev.target.id);}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
}
</script>
<p>Drag the javatpoint image into the rectangle:</p>
<div id="div1" style="width:350px;height:100px;padding:10px;border:1px solid #
aaaaaa;"
ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/htmlpages/images/javatpoint.png" alt="javatpoint image"
draggable="true" ondragstart="drag(event)"/>
In the above example, we have used ondrop and ondragover events on
div element, and ondragstart event on img tag.
Output:
Drag the javatpoint image into the rectangle:
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
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?

can insert a copyright symbol by using © or © in an HTML file.
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
1)
<div id="header">
<header>
2)
<div id="menu">
<nav>
3)
<div id="content">
<section>
4)
<div id="post">
<article>
5)
<div id="footer">
<footer>
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">

HTML Tutorial

Uploaded by

HTML Tutorial

Uploaded by

HTML Tutorial

HTML Example with HTML Editor

All HTML Tags

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

Description of HTML example

DOCTYPE: It defines the document type.

Brief History of HTML

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

<tag> content </tag>

HTML Tag Examples

<h2> Heading Tag </h2>

Unclosed HTML Tags

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

HTML Form Tags

HTML Scripting Tags

script and noscript

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

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

3) HTML Marked formatting

I want to put a Mark on your face

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

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

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

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

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

10) Inserted Text

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

11) Larger Text

12) Smaller Text

Write the paragraph in smaller font.

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

Space inside HTML Paragraph

href attribute of HTML anchor tag

Appearance of HTML anchor tag

An unvisited link is displayed underlined and blue.

Let's see an example of HTML image.

Attributes of HTML img tag

HTML Table Tags

It defines a row in a table.

It defines a header cell in a table.

It defines a cell in a table.

It defines the table caption.

It specifies a group of one or more columns in

It is used with <colgroup> element to specify

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

It is used to group the header content in a

It is used to group the footer content in a

HTML Table Example

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML

1) HTML Border attribute

2) CSS Border property

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

HTML Table with cell padding

HTML Table with colspan

HTML Table with rowspan

HTML table with caption

Styling HTML table even and odd cells

HTML Ordered List or Numbered List

HTML Unordered List or Bulleted List

HTML Description List or Definition List

HTML Ordered List | HTML Numbered List

In this type, the list items are numbered with upper

In this type, the list items are numbered with lower

case roman numbers.

In this type, the list items are numbered with upper