0% found this document useful (0 votes)

12 views367 pages

HTML

This HTML tutorial provides a comprehensive guide for both beginners and professionals, covering basic to advanced concepts of HTML. It includes step-by-step instructions, examples, and explanations of HTML tags, attributes, and elements, as well as practical tips for creating web pages. The tutorial also outlines the history and versions of HTML, emphasizing the importance of HTML in web development.

Uploaded by

Arvind Biradar

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

Available Formats

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

0% found this document useful (0 votes)

12 views367 pages

HTML

Uploaded by

Arvind Biradar

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

Available Formats

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

HTML Tutorial

HTML tutorial or HTML 5 tutorial provides basic and advanced concepts

of HTML. Our HTML tutorial is developed for beginners and professionals.
In our tutorial, every topic is given step-by-step so that you can learn it in
a very easy way. If you are new in learning HTML, then you can learn
HTML from basic to a professional level and after learning HTML with CSS
and JavaScript you will be able to create your own interactive and
dynamic website. But Now We will focus on HTML only in this tutorial.

The major points of HTML are given below:

o HTML stands for HyperText Markup Language.

o HTML is used to create web pages and web applications.
o HTML is widely used language on the web.
o We can create a static website by HTML only.
o Technically, HTML is a Markup language rather than a programming
language.

HTML Example with HTML Editor

In this tutorial, you will get a lot of HTML examples, at least one example
for each topic with explanation. You can also edit and run these examples,
with our online HTML editor. Learning HTML is fun, and it's very easy to
learn.

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
Test it Now

HTML Index

HTML Tutorial

o Introduction to HTML
o What is HTML
o HTML tags
o HTML Formatting
o HTML Heading
o HTML Paragraph
o HTML Anchor
o HTML Image
o HTML Table
o HTML Lists
o HTML Ordered List
o HTML Unordered List
o HTML Description List
o HTML Form
o HTML Classes
o HTML Id
o HTML Iframes
o HTML JavaScript
o HTML File Path
o HTML Head
o HTML Layout
o HTML Responsive
o HTML Computercode
o HTML Entities
o HTML Symbols
o HTML Charset
o HTML URL Encode

HTML Tags

o HTML Marquee
o HTML Textarea
o HTML Quotes
o HTML Style
o HTML Title
o HTML DOCTYPE
o HTML Div Tag
o HTML Pre Tag
o HTML Code Tag
o HTML Label Tag
o HTML Input Tag
o HTML Button Tag
o HTML HR Tag
o HTML BR Tag
o HTML Script Tag
o HTML NoScript Tag
o HTML b Tag

HTML5 Tutorial

o HTML5 tutorial
o HTML5 User Manual
o HTML 5 Tags
o HTML Audio
o HTML Video
o HTML Progress
o HTML Meter
o HTML Data Tag
o HTML Datalist Tag
o HTML Header Tag
o HTML Footer Tag
o HTML Figure Tag
o HTML Figcaption Tag
o HTML Article Tag
o HTML Aside Tag
o HTML Dialog Tag
o HTML Details Tag
o HTML Summary Tag
o HTML Section Tag
o HTML Time Tag
o HTML Main Tag
o HTML Wbr Tag
o HTML Canvas
o HTML SVG
o HTML Drag & Drop
o HTML Google Maps
o HTML5 Semantics
o HTML5 Migration

HTML Color Names

o HTML Color Names

Interview Questions

o HTML Interview Questions

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.

Prerequisite
Before learning HTML, you must have the basic knowledge of Computer
Fundamental.

Audience
Our HTML tutorial is designed to help beginners and professionals both.

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

What is HTML
HTML is an acronym which stands for Hyper Text Markup
Language which is used for creating web pages and web applications.
Let's see what is meant by Hypertext Markup Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link
within it, is a hypertext. Whenever you click on a link which brings you to
a new webpage, you have clicked on a hypertext. HyperText is a way to
link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is

used to apply layout and formatting conventions to a text document.
Markup language makes text more interactive and dynamic. It can turn
text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in
HTML and translated by a web browser. A web page can be identified by
entering an URL. A Web page can be of the static or dynamic type. With
the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive

web pages with the help of styling, and which looks in a nice format on a
web browser. An HTML document is made of many HTML tags and each
HTML tag contains different content.

Let's see a simple example of HTML.

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10.</html>
Test it Now

Description of HTML Example

<!DOCTYPE>: It defines the document type or it instruct the browser
about the version of HTML.

<html > :This tag informs the browser that it is an HTML document. Text
between html tag describes the web document. It is a container for all
other elements of HTML except <!DOCTYPE>

<head>: It should be the first element inside the <html> element, which
contains the metadata(information about the document). It must be
closed before the body tag opens.

<title>: As its name suggested, it is used to add title of that HTML page
which appears at the top of the browser window. It must be placed inside
the head tag and should close immediately. (Optional)

ADVERTISEMENT
<body> : Text between body tag describes the body content of the page
that is visible to the end user. This tag contains the main content of the
HTML document.

<h1> : Text between <h1> tag describes the first level 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 the father of HTML. The first available

description of HTML was a document called "HTML Tags" proposed by Tim
in late 1991. The latest version of HTML is HTML5, which we will learn later
in this tutorial.

HTML Versions
Since the time HTML was invented there are lots of HTML versions in
market, the brief introduction about the HTML version is given below:

HTML 1.0: The first version of HTML was 1.0, which was the barebones
version of HTML language, and it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it
was standard language version for website design. HTML 2.0 was able to
support extra features such as form-based file upload, form elements such
as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This
version was capable of creating tables and providing support for extra
options for form elements. It can also support a web page with complex
mathematical equations. It became an official standard for any browser till
January 1997. Today it is practically supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is
a very stable version of HTML language. This version is the current official
standard, and it provides added support for stylesheets (CSS) and
scripting ability for various multimedia elements.
HTML5 : HTML5 is the newest version of HyperText Markup language.
The first draft of this version was announced in January 2008. There are
two major organizations one is W3C (World Wide Web Consortium), and
another one is WHATWG( Web Hypertext Application Technology Working
Group) which are involved in the development of HTML 5 version, and still,
it is under development.

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 an 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 a 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.

7) HTML is a case-insensitive language, which means we can use tags

either in lower-case or upper-case.

NOTE: It is recommended to write all tags in lower-case for consistency,

readability, etc.

HTML text Editors

o An HTML file is a text file, so to create an HTML file we can use any text
editors.
o Text editors are the programs which allow editing in a written text, hence
to create a web page we need to write our code in some text editor.
o There are various types of text editors available which you can directly
download, but for a beginner, the best text editor is Notepad (Windows) or
TextEdit (Mac).
o After learning the basics, you can easily use other professional text editors
which are, Notepad++, Sublime Text, Vim, etc.
o In our tutorial, we will use Notepad and sublime text editor. Following are
some easy ways to create your first web page with Notepad, and sublime
text.

A. HTML code with Notepad. (Recommended for Beginners)

Notepad is a simple text editor and suitable for beginners to learn HTML. It
is available in all versions of Windows, from where you easily access it.

Step 1: Open Notepad (Windows)

Step 2: Write code in HTML

Step 3: Save the HTML file with .htm or .html extension.

Step 4: Open the HTML page in your web browser.

To run the HTML page, you need to open the file location, where you have
saved the file and then either double-click on file or click on open with
option
B. HTML code with Sublime Text-editor.(Recommended after
learning basics of HTML)
When you will learn the basics of HTML, then you can use some
professional text editors, which will help you to write an efficient and fast
code. So to use Sublime Text editors, first it needs to download and install
from internet. You can easily download it from
this [Link] link and can install in your PC.
When installation of Sublime text editor done then you can follow the
simple steps to use it:

Step 1: Open Sublime Text editor(Windows 8):

To open Sublime Text editor go to Start screen ⤏ type Sublime Text⤏
Open it. To open a new page press CTRL+N.

Step 2: Save the page before writing any code.

To save your page in Sublime Text press Ctrl+S or go to File option ⤏

save, to save a file use extension .htm or .html. We recommend to save
the file first then write the code because after saving the page sublime
text editor will give you suggestions to write code.

Step 3: Write the code in Sublime Text editor

Step 4: Open the HTML page in your Browser

To execute or open this page in Web browser just right click by mouse
on sublime text page and click on Open in Browser.
Note: You can execute HTML file in any browser, but there are some tags which
are not supported by Some Web browser.

Building blocks of HTML

An HTML document consist of its basic building blocks which are:

o Tags: An HTML tag surrounds the content and apply meaning to it.
It is written between < and > brackets.
o Attribute: An attribute in HTML provides extra information about
the element, and it is applied within the start tag. An HTML attribute
contains two fields: name & value.

Syntax
1. <tag name attribute_name= " attr_value"> content </ tag name>

o Elements: An HTML element is an individual component of an HTML

file. In an HTML file, everything written within tags are termed as
HTML elements.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>The basic building blocks of HTML</title>
5. </head>
6. <body>
7. <h2>The building blocks</h2>
8. <p>This is a paragraph tag</p>
9. <p style="color: red">The style is attribute of paragraph tag</
p>
10. <span>The element contains tag, attribute and content<
/span>
11. </body>
12. </html>
Test it Now

Output:

The building blocks

This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content

HTML Tags
HTML tags are like keywords which defines that how web browser will
format and display the content. With the help of tags, a web browser can
distinguish between an HTML content and a simple content. 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.

An HTML file must have some essential tags so that web browser can
differentiate between a simple text and HTML text. You can use as many
tags you want as per your code requirement.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag
</tag> (except some tags)

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>

<i> Italic Tag </i>

<u> Underline Tag</u>

Test it Now

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line
across the webpage.

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags

HTML Image and Object Tags

HTML List Tags

HTML Table Tags

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

HTML Form Tags

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

HTML Scripting Tags

script and noscript

Note: We will see examples using these tags in later charters.

HTML Tags List

Following is the complete list of HTML tags with the description which are
arranged alphabetically.

Note: Here represents newly added Elements in HTML5.

HTML Tags by Alphabets
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Tag name Description

This tag is used to apply comment in an HTML document.

<! This tag is used to specify the version of HTML

DOCTYPE>

A
<a> It is termed as anchor tag and it creates a hyperlink or link.

<abbr> It defines an abbreviation for a phrase or longer word.

<acronym> It defines acronym for a word. (Not supported in HTML5)

<address> It defines the author's contact information of the HTML article

<applet> It defines an embedded Java applet. (Not supported in HTML5)

<area> It defines the area of an image map.

<article> It defines the self-contained content.

<aside> It defines content aside from main content. Mainly represented as sidebar.

<audio> It is used to embed sound content in HTML document.

B
<b> It is used to make a text bold.

<base> This tag defines the base URL for all relative URL within the document.

<basefont> This tag is used to set default font, size and color for all elements
document. (Not supported in HTML5)
<bdi> This tag is used to provide isolation for that part of text which may be formatt
in different directions from its surrounding text.

<bdo> It is used to override the current text direction.

<big> This tag is used to make font size one level larger than its surroundi
content. (Not supported in HTML5)

<blockquote It is used to define a content which is taken from another source.

<body> It is used to define the body section of an HTML document.

<br> It is used to apply single line break.

<button> It is used to represent a clickable button

C
<canvas> It is used to provide a graphics space within a web document.

<caption> It is used to define a caption for a table.

<center> It is used to align the content in center. (Not supported in HTML5)

<cite> It is used to define the title of the work, book, website, etc.

<code> It is used to display a part of programming code in an HTML document.

<col> It defines a column within a table which represent common properties

columns and used with the <colgroup> element.

<colgroup> It is used to define group of columns in a table.

D
<data> It is used to link the content with the machine-readable translation.

<datalist> It is used to provide a predefined list for input option.

<dd> It is used to provide definition/description of a term in description list.

<del> It defines a text which has been deleted from the document.

<details> It defines additional details which user can either view or hide.

<dfn> It is used to indicate a term which is defined within a sentence/phrase.

<dialog> It defines a dialog box or other interactive components.

<dir> It is used as container for directory list of files. (Not supported in HTML5)

<div> It defines a division or section within HTML document.

<dl> It is sued to define a description list.

<dt> It is used to define a term in description list.

E
<em> It is used to emphasis the content applied within this element.

<embed> It is used as embedded container for external file/application/media, etc.

F
<fieldset> It is used to group related elements/labels within a web form.

<figcaption> It is used to add a caption or explanation for the <figure> element.

<figure> It is used to define the self-contained content, and s mostly refer as single unit

<font> It defines the font, size, color, and face for the content. (Not supported
HTML5)
<footer> It defines the footer section of a webpage.

<form> It is used to define an HTML form.

<frame> It defines a particular area of webpage which can contain another HT

file. (Not supported in HTML5)

<frameset> It defines group of Frames. (Not supported in HTML5)

H
<h1> to It defines headings for an HTML document from level 1 to level 6.
<h6>

<head> It defines the head section of an HTML document.

<header> It defines the header of a section or webpage.

<hr> It is used to apply thematic break between paragraph-level elements.

<html> It represents root of an HTML document.

I
<i> It is used to represent a text in some different voice.

<iframe> It defines an inline frame which can embed other content.

<img> It is used to insert an image within an HTML document.

<input> It defines an input field within an HTML form.

<ins> It represent text that has been inserted within an HTML document.

<isindex> It is used to display search string for current document. (Not supported
HTML5)

K
<kbd> It is used to define keyboard input.

L
<label> It defines a text label for the input field of form.

<legend> It defines a caption for content of <fieldset>

<li> It is used to represent items in list.

<link> It represents a relationship between current document and an external resourc

M
<main> It represents the main content of an HTML document.

<map> It defines an image map with active areas.

<mark> It represents a highlighted text.

<marquee> It is used to insert the scrolling text or an image either horizontally

vertically. (Not supported in HTML5)

<menu> It is used for creating a menu list of commands.

<meta> It defines metadata of an HTML document.

<meter> It defines scalar measurement with known range or fractional value.

N
<nav> It represents section of page to represent navigation links.

<noframes> It provides alternate content to represent in browser which does not support t
<frame> elements. (Not supported in HTML5)

<noscript> It provides an alternative content if a script type is not supported in browser.

O
<object> It is used to embed an object in HTML file.

<ol> It defines an ordered list of items.

<optgroup> It is used to group the options of a drop-down list.

<option> It is used to define options or items in a drop-down list.

<output> It is used as container element which can show result of a calculation.

P
<p> It represents a paragraph in an HTML document.

<param> It defines parameter for an <object> element

<picture> It defines more than one source element and one image element.

<pre> It defines preformatted text in an HTML document.

<progress> It defines the progress of a task within HTML document.

Q
<q> It defines short inline quotation.

R
<rp> It defines an alternative content if browser does not supports ruby annotations

<rt> It defines explanations and pronunciations in ruby annotations.

<ruby> It is used to represent ruby annotations.

S
<s> It render text which is no longer correct or relevant.

<samp> It is used to represent sample output of a computer program.

<script> It is used to declare the JavaScript within HTML document.

<section> It defines a generic section for a document.

<select> It represents a control which provides a menu of options.

<small> It is used to make text font one size smaller than document?s base font size.

<source>> It defines multiple media recourses for different media element such
<picture>, <video>, and <audio> element.

<span> It is used for styling and grouping inline.

<strike> It is used to render strike through the text. (Not supported in HTML5)

<strong> It is used to define important text.

<style> It is used to contain style information for an HTML document.

<sub> It defines a text which displays as a subscript text.

<summary> It defines summary which can be used with <details> tag.

<sup> It defines a text which represent as superscript text.

<svg> It is used as container of SVG (Scalable Vector Graphics).

T
<table> It is used to present data in tabular form or to create a table within HT
document.
<tbody> It represents the body content of an HTML table and used along with <thea
and <tfoot>.

<td> It is used to define cells of an HTML table which contains table data

<template> It is used to contain the client side content which will not display at time of pa
load and may render later using JavaScript.

<textarea> It is used to define multiple line input, such as comment, feedback, and revie
etc.

<tfoot> It defines the footer content of an HTML table.

<th> It defines the head cell of an HTML table.

<thead> It defines the header of an HTML table. It is used along with <tbody> a
<tfoot> tags.

<time> It is used to define data/time within an HTML document.

<title> It defines the title or name of an HTML document.

<tr> It defines the row cells in an HTML table

<track> It is used to define text tracks for <audio> and <video> elements.

<tt> It is used to define teletype text. (Not supported in HTML5)

U
<u> It is used to render enclosed text with an underline.

<ul> It defines unordered list of items.

V
<var> It defines variable name used in mathematical or programming context.
<video> It is used to embed a video content with an HTML document

W
<wbr> It defines a position within text where break line is possible.

HTML Attribute
ADVERTISEMENT

o HTML attributes are special words which provide additional information

about the elements or attributes are the modifier of the HTML element.
o Each element or tag can have attributes, which defines the behaviour of
that element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is recommended
by W3C that it should be written in Lowercase only.
o You can add multiple attributes in one HTML element, but need to give
space between two attributes.

Syntax
1. <element attribute_name="value">content</element>

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1> This is Style attribute</h1>
7. <p style="height: 50px; color: blue">It will add style property in e
lement</p>
8. <p style="color: red">It will change the color of content</p>
9. </body>
10.</html>
Test it Now

Output:

Explanation of above example:

1. <p style="height: 50px; color: blue">It will add style property in ele
ment</p>
Test it Now

In the above statement, we have used paragraph tags in which we have

applied style attribute. This attribute is used for applying CSS property on
any HTML element. It provides height to paragraph element of 50px and
turns it colour to blue.

1. <p style="color: red">It will change the color of content</p>

In the above statement we have again used style attribute in paragraph

tag, which turns its colour red.

Note: There are some commonly used attributes are given below, and the
complete list and explanation of all attributes are given in HTML attributes List.

The title attribute in HTML

Description: The title attribute is used as text tooltip in most of the
browsers. It display its text when user move the cursor over a link or any
text. You can use it with any text or link to show the description about
that link or text. In our example, we are taking this with paragraph tag
and heading tag.

Example
With <h1> tag:

1. <h1 title="This is heading tag">Example of title attribute</h1>

Test it Now

With <p> tag:

1. <p title="This is paragraph tag">Move the cursor over the heading

and paragraph, and you will see a description as a tooltip</p>
Test it Now

Code:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <h1 title="This is heading tag">Example of title attribute</h1>
8. <p title="This is paragraph tag">Move the cursor over the heading and
paragraph, and you will see a description as a tooltip</p>
9.
10.</body>
11. </html>
Test it Now

Output:
The href attribute in HTML
Description: The href attribute is the main attribute of <a> anchor tag.
This attribute gives the link address which is specified in that link. The
href attribute provides the hyperlink, and if it is blank, then it will
remain in same page.

Example
With link address:

1. <a href="[Link] is a lin

k</a>
Test it Now

Without link address:

1. <a href="">This is a link</a>

Test it
Now

The src Attribute

The src attribute is one of the important and required attribute
of <img> element. It is source for the image which is required to display
on browser. This attribute can contain image in same directory or another
directory. The image name or source should be correct else browser will
not display the image.

Example
1. <img src="[Link]" height="400" width="600">
Test it Now

Note: The above example also have height and width attribute, which define the
height and width of image on web page.

Output:
Quotes: single quotes or double quotes?
In this chapter you have seen that, we have used attribute with double
quotes, but some people might use single quotes in HTML. So use of
single quotes with HTML attribute, is also allowed. The following both
statements are absolutely fine.

1. <a href="[Link] link to HTML.</a>

2. <a href='[Link] link to HTML.</a>
Test it Now

IN HTML5, you can also omit use of quotes around attribute values.

1. <a href=[Link] link to HTML.</a>

HTML Elements
An HTML file is made of elements. These elements are responsible for
creating web pages and define content in that webpage. An element in
HTML usually consist of a start tag <tag name>, close tag </tag name>
and content inserted between them. Technically, an element is a
collection of start tag, attributes, end tag, content between them.

Note: Some elements does not have end tag and content, these elements are
termed as empty elements or self-closing element or void elements.

Such as:

1. <p> Hello world!!! </p>

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>WebPage</title>
5. </head>
6. <body>
7. <h1>This is my first web page</h1>
8. <h2> How it looks?</h2>
9. <p>It looks Nice!!!!!</p>
10.</body>
11. </html>
Test it
Now

o All the content written between body elements are visible on web page.
Void element: All the elements in HTML do not require to have start tag
and end tag, some elements does not have content and end tag such
elements are known as Void elements or empty elements. These
elements are also called as unpaired tag.

Some Void elements are <br> (represents a line break) ,

<hr>(represents a horizontal line), etc.

Nested HTML Elements: HTML can be nested, which means an element

can contain another element.

Block-level and Inline HTML elements

For the default display and styling purpose in HTML, all the elements are
divided into two categories:

o Block-level element
o Inline element

Block-level element:
o These are the elements, which structure main part of web page, by
dividing a page into coherent blocks.
o A block-level element always start with new line and takes the full width of
web page, from left to right.
o These elements can contain block-level as well as inline elements.

Following are the block-level elements in HTML.

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>,

<dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>,
<h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>,
<output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and
<video>.

Note: All these elements are described in later chapters.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <div style="background-color: lightblue">This is first div</div>
7. <div style="background-color: lightgreen">This is second div</
div>
8. <p style="background-color: pink">This is a block level element</p>
9. </body>
10.</html>
Test it Now

Output:

In the above example we have used

tag, which defines a section in a web page, and takes full width of page.

We have used style attribute which is used to styling the HTML content,
and the background color are showing that it's a block level element.

Inline elements:
o Inline elements are those elements, which differentiate the part of a given
text and provide it a particular function.
o These elements does not start with new line and take width as per
requirement.
o The Inline elements are mostly used with other elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>,

<cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>,
<map>, <object>, <q>, <samp>, <script>, <select>, <small>,
<span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <a href="[Link] on link</a>
7. <span style="background-color: lightblue">this is inline elemen
t</span>
8. <p>This will take width of text only</p>
9. </body>
10.</html>
Test it Now

Output:

Following is the list of the some main elements used in HTML:

Start tag Content End tag Description

<h1> ...... These are headings </h1>??..</ These elements are used to provide t
<h6> of HTML h6> headings of page.

<p> This is the </p> This element is used to display a content

paragraph form of paragraph.

<div> This is div section </div> This element is used to provide a section
web page.
<br> This element is used to provide a li
break. ( void element)

<hr> This element is used to provide a horizon

line. (void element)

HTML Formatting
HTML Formatting is a process of formatting text for better look and feel.
HTML provides us ability to format text without using CSS. There are many
formatting tags in HTML. These tags are used to make text bold, italicized,
or underlined. There are almost 14 options available that how text
appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to the
text.
o Logical tag: These tags are used to add some logical or semantic value to
the text.

NOTE: There are some physical and logical tags which may give same visual
appearance, but they will be different in semantics.

Here, we are going to learn 14 HTML formatting tags. Following is the list
of HTML formatting text.

Element name Description

<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<tt> This tag is used to appear a text in teletype. (not supported in HTML5)

<strike> This tag is used to draw a strikethrough on a section of text. (Not supported
HTML5)

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.

1) Bold Text
HTML<b> and <strong> formatting elements

The HTML <b> element is a physical tag which display text in bold font,
without any logical importance. If you write anything within
<b>............</b> element, is shown in bold letters.

See this example:

1. <p> <b>Write Your First Paragraph in bold text.</b></p>

Test it Now

Output:

Write Your First Paragraph in bold text.

The HTML <strong> tag is a logical tag, which displays the content in bold
font and informs the browser about its logical importance. If you write
anything between <strong>???????. </strong>, is shown important text.

See this example:

1. <p><strong>This is an important content</strong>, and this is n

ormal content</p>
Test it Now

Output:

This is an important content, and this is normal content

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of formatting element</h1>
8. <p><strong>This is an important content</strong>, and this is normal
content</p>
9. </body>
10.</html>
Test it Now

2) Italic Text
HTML <i> and <em> formatting elements

The HTML <i> element is physical element, which display the enclosed
content in italic font, without any added importance. If you write anything
within <i>............</i> element, is shown in italic letters.

See this example:

1. <p> <i>Write Your First Paragraph in italic text.</i></p>

Test it Now

Output:

Write Your First Paragraph in italic text.

The HTML <em> tag is a logical element, which will display the enclosed
content in italic font, with added semantics importance.

See this example:

1. <p><em>This is an important content</em>, which displayed in it
alic font.</p>
Test it Now

Output:

This is an important content, which displayed in italic font.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of italic formatting element</h1>
8. <p><em>This is an important content</em>, which displayed in italic fo
nt.</p>
9. </body>
10.</html>
Test it Now

3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.

See this example:

1. <p> <del>Delete your first paragraph.</del><ins>Write another

paragraph.</ins></p>
Test it Now

Output:

Delete your first [Link] another paragraph.

11) Larger Text

2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>
Test it Now

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.
o HTML headings can also be used with nested elements. Following
are different codes to display the way to use heading elements.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Heading elements</title>
5. </head>
6. <body>
7. <h1>This is main heading of page. </h1>
8. <p>h1 is the most important heading, which is used to display the key
word of page </p>
9. <h2>This is first sub-heading</h2>
10. <p>h2 describes the first sub heading of page. </p>
11. <h3>This is Second sub-heading</h3>
12. <p>h3 describes the second sub heading of page.</p>
13. <p>We can use h1 to h6 tag to use the different sub-
heading with their paragraphs if
14. required.
15. </p>
16. </body>
17. </html>

Output:
Supporting Browsers

Element Chrome IE Firefox Opera Safari

<h1> to <h6> Yes Yes Yes Yes Yes

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.
An HTML <p> tag indicates starting of new paragraph.

Note: If we are using various <p> tags in one HTML file then browser
automatically adds a single blank line between the two paragraphs.

See this example:

1. <p>This is first paragraph.</p>

2. <p>This is second paragraph.</p>
3. <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.

1. <p>
2. I am
3. going to provide
4. you a tutorial on HTML
5. and hope that it will
6. be very beneficial for you.
7. </p>
8. <p>
9. Look, I put here a lot
[Link] spaces but I know, Browser will ignore it.
11. </p>
12.<p>
13. You cannot determine the display of HTML</p>
14.<p>because resized windows may create different result.
15. </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.

As you can see, all the extra lines and unnecessary spaces are removed
by the browser.
How to Use <br> and <hr> tag with paragraph?
An HTML <br> tag is used for line break and it can be used with
paragraph elements. Following is the example to show how to use <br>
with <p> element.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Use of line break with pragraph tag</h2>
7. <p><br>Papa and mama, and baby and Dot,
8. <br>Willie and me?the whole of the lot
9. <br>Of us all went over in Bimberlie's sleigh,
10. <br>To grandmama's house on Christmas day.
11. </p>
12. </body>
13. </html>
Test it Now

Output:
An HTML <hr> tag is used to apply a horizontal line between two
statements or two paragraphs. Following is the example which is showing
use of <hr> tag with paragraph.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Example to show a horizontal line with paragraphs</h2>
7. <p> An HTML hr tag draw a horizontal line and separate two par
agraphs with that line.<hr> it will start a new paragraph.
8. </p>
9. </body>
10.</html>
Test it Now

Output:

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<p> Yes Yes Yes Yes Yes

HTML Phrase tag

The HTML phrase tags are special purpose tags, which defines the
structural meaning of a block of text or semantics of text. Following is the
list of phrase tags, some of which we have already discussed in HTML
formatting.

1. Text Abbreviation tag

This tag is used to abbreviate a text. To abbreviate a text, write text
between <abbr> and </abbr> tag.

Example
1. <p>An <abbr title = "Hypertext Markup language">HTML </
abbr>language is used to create web pages. </p>
Test it Now

Output:
2. Marked tag:
The content written between <mark> and </mark> tag will show as
yellow mark on browser. This tag is used to highlight a particular text.

Example
1. <p>This tag will <mark>highlight</mark> the text.</p>
Test it Now

Output:
3. Strong text:
This tag is used to display the important text of the content. The text
written between <strong> and </strong> will be displayed as important
text.

Example
1. <p>In HTML it is recommended to use <strong>lower-case</
strong>, while writing a code. </p>
Test it Now

Output:

4. Emphasized text
This tag is used to emphasize the text, and displayed the text in italic
form. The text written between <em> and </em> tag will italicized the
text.

Example
1. <p>HTML is an <em>easy </em>to learn language.</p>
Test it Now

Output:
5. Definition tag:
When you use the <dfn> and </dfn> tags, it allow to specify the keyword
of the content. Following is the example to show how to definition
element.

Example
1. <p><dfn>HTML </dfn> is a markup language. </p>
Test it Now

Output:
6. Quoting text:
The HTML <blockquote> element shows that the enclosed content is
quoted from another source. The Source URL can be given using the cite
attribute, and text representation of source can display using <cite> .....
</cite>element.

Example
1. <blockquote cite="[Link]
quotes/"><p>?The first step toward success is taken when you refu
se to be a captive of the environment in which you first find yourself
.?</p></blockquote>
2. <cite>-Mark Caine</cite>
Test it Now

Output:

7. Short Quotations:
An HTML <q> ....... </q> element defines a short quotation. If you will put
any content between <q> ....... </q>, then it will enclose the text in
double quotes.

Example:
1. <p>Steve Jobs said: <q>If You Are Working On Something That You
Really Care About, You Don?t Have To Be Pushed. The Vision Pulls Y
ou.</q>?</p>
Test it Now

Output:

8. Code tags
The HTML <code> </code> element is used to display the part of
computer code. It will display the content in monospaced font.

1. <p>First Java program</p>

2. <p><code>class Simple{ public static void main(String args[])
{
3. [Link]("Hello Java"); }} </code>
4. </p>
Test it Now

Output:
9. Keyboard Tag
In HTML the keyboard tag, <kbd>, indicates that a section of content is a
user input from keyboard.

1. <p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> +

t<kbd></kbd> to restore page on chrome.</p>
Test it Now

Output:

10. Address tag

An HTML <address> tag defines the contact information about the author
of the content. The content written between <address> and </address>
tag, then it will be displayed in italic font.

1. <address> You can ask your queries by contact us on <a href="">

example123@[Link]</a>
2. <br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, G
A 30187.
3. </address>
Test it Now

Output:
HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another
page. It can create hyperlink to other web page as well as files, location,
or any URL. The "href" attribute is the most important attribute of the
HTML a tag. and which links to destination page or URL.

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.

1. <a href="[Link]">Click for Second Page</a>

Test it Now

Specify a location for Link using target attribute

If we want to open that link to another page then we can use target
attribute of <a> tag. With the help of this link will be open in next page.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title></title>
5. </head>
6. <body>
7. <p>Click on <a href="[Link] targe
t="_blank"> this-link </a>to go on home page of JavaTpoint.</p>
8. </body>
9. </html>
Test it Now

Output:

Note:

o The target attribute can only use with href attribute in anchor tag.
o If we will not use target attribute then link will open in same page.

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.

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<a> Yes Yes Yes Yes Yes

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.

1. <h2>HTML Image Example</h2>

2. <img src="good_morning.jpg" alt="Good Morning Friends"/>
Test it Now

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 h3 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.

Use of height and width attribute with img tag

You have learnt about how to insert an image in your web page, now if we
want to give some height and width to display image according to our
requirement, then we can set it with height and width attributes of image.

Example:
1. <img src="[Link]" height="180" width="300" alt="animal ima
ge">
Test it Now

Output:
Note: Always try to insert the image with height and width, else it may flicker while
displaying on webpage.

Use of alt attribute

We can use alt attribute with tag. It will display an alternative text in
case if image cannot be displayed on browser. Following is the example
for alt attribute:

1. <img src="[Link]" height="180" width="300" alt="animal ima

ge">

Output:

How to get image from another directory/folder?

To insert an image in your web, that image must be present in your same
folder where you have put the HTML file. But if in some case image is
available in some other directory then you can access the image like this:

1. <img src="E:/images/[Link]" height="180" width="300" al

t="animal image">

In above statement we have put image in local disk E------>images

folder------>[Link].
Note: If src URL will be incorrect or misspell then it will not display your image on
web page, so try to put correct URL.

Use <img> tag as a link

We can also link an image with other page or we can use an image as a
link. To do this, put <img> tag inside the <a> tag.

Example:
1. <a href="[Link] sr
c="[Link]" height="100" width="100"></a>
Test it Now

Output:
Supporting Browsers

Element Chrome IE Firefox Opera Safari

<img> Yes Yes Yes Yes Yes

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

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

element, with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header
section, navigation bar, body content, footer section etc. But it is
recommended to use div tag over table to manage the layout of the
page .

HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for ea

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.

1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
Test it Now

Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

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

values.

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML

2. By border property in CSS

1) HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But it
is not recommended now.

1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
Test it Now

Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

2) CSS Border property

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

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>
Test it Now

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

property. It will collapse the border into one.

1. <style>
2. table, th, td {
3. border: 2px solid black;
4. border-collapse: collapse;
5. }
6. </style>
Test it Now
Output:

Name Last Name Marks

Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

HTML Table with cell padding

You can specify padding for table header and table data by two ways:

1. By cellpadding attribute of table in HTML

2. By padding property in CSS

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

recommended to use CSS. So let's see the code of CSS.

1. <style>
2. table, th, td {
3. border: 1px solid pink;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
Test it Now

Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72
HTML Table width:
We can specify the HTML table width using the CSS width property. It
can be specify in pixels or percentage.

We can adjust our table width as per our requirement. Following is the
example to display table with width.

1. table{
2. width: 100%;
3. }

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>table</title>
5. <style>
6. table{
7. border-collapse: collapse;
8. width: 100%;
9. }
10. th,td{
11. border: 2px solid green;
12. padding: 15px;
13. }
14.
15. </style>
16. </head>
17. <body>
18. <table>
19. <tr>
20. <th>1 header</th>
21. <th>1 header</th>
22. <th>1 header</th>
23. </tr>
24. <tr>
25. <td>1data</td>
26. <td>1data</td>
27. <td>1data</td>
28. </tr>
29. <tr>
30. <td>2 data</td>
31. <td>2 data</td>
32. <td>2 data</td>
33. </tr>
34. <tr>
35. <td>3 data</td>
36. <td>3 data</td>
37. <td>3 data</td>
38. </tr>
39. </table>
40. </body>
41. </html>
Test it Now

Output:

HTML Table with colspan

If you want to make a cell span more than one column, you can use the
colspan attribute.
It will divide one cell/row into multiple columns, and the number of
columns depend on the value of colspan attribute.

Let's see the example that span two columns.

CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 5px;
8. }
9. </style>

HTML code:

1. <table style="width:100%">
2. <tr>
3. <th>Name</th>
4. <th colspan="2">Mobile No.</th>
5. </tr>
6. <tr>
7. <td>Ajeet Maurya</td>
8. <td>7503520801</td>
9. <td>9555879135</td>
10. </tr>
11. </table>
Test it Now

Output:

Name Mobile No.

Ajeet Maurya 7503520801 9555879135

HTML Table with rowspan

If you want to make a cell span more than one row, you can use the
rowspan attribute.

It will divide a cell into multiple rows. The number of divided rows will
depend on rowspan values.

Let's see the example that span two rows.

CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>

HTML code:

1. <table>
2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>
3. <tr><th rowspan="2">Mobile No.</th><td>7503520801</
td></tr>
4. <tr><td>9555879135</td></tr>
5. </table>
Test it Now

Output:

Name Ajeet Maurya

7503520801
Mobile No.
9555879135

HTML table with caption

HTML caption is diplayed above the table. It must be used after table tag
only.

1. <table>
2. <caption>Student Records</caption>
3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>
6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>
7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
8. </table>
Test it Now

Styling HTML table even and odd cells

CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. table#alter tr:nth-child(even) {
10. background-color: #eee;
11. }
12. table#alter tr:nth-child(odd) {
13. background-color: #fff;
14. }
15. table#alter th {
16. color: white;
17. background-color: gray;
18. }
19. </style>
Test it Now
Output:

NOTE: You can also create various types of tables using different CSS properties in
your table.

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<table> Yes Yes Yes Yes Yes

HTML <tbody> tag

HTML <tbody> tag is used to group the table rows (<tr>) together, which
indicates that this is body part of a table (<table>).

The <tbody> tag must be a child of <table> element.

The <tbody> is used along with <thead> and <tfoot> which shows the
different part of the table that are table head, table body, and table
footer, however, it does not affect the layout of the table.

These elements can be used for providing semantic information which can
be helpful in accessibility purpose, or rendering the header at top and
footer at the bottom while printing a large table.

Tips: The <tbody> tag must contain one or more <tr> elements.
Syntax
1. <tbody>............</tbody>

Following are some specifications about the HTML <tbody> tag

Display Inline

Start tag/End tag Both Start and End tag

Usage Table body

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML tbody tag</title>
5. <style>
6. body{
7. margin-left: 195px;"
8. }
9. </style>
10.</head>
11. <body>
12. <h2>Example of the tbody tag</h2>
13. <table border="1" bgcolor="#98f5ff">
14. <thead>
15. <tr>
16. <th>EmpId</th>
17. <th>Name</th>
18. <th>Email-Id</th>
19. </tr>
20. </thead>
21. <tbody>
22. <tr>
23. <td>121</td>
24. <td>John</td>
25. <td>john123@[Link]</td>
26. </tr>
27.
28. <tr>
29. <td>122</td>
30. <td>William </td>
31. <td>william56@[Link]</td>
32. </tr>
33.
34. <tr>
35. <td>123</td>
36. <td>Amit</td>
37. <td>amitk98@[Link]</td>
38. </tr>
39. </tbody>
40.</table>
41. </body>
42.</html>
Test it Now

Output:

Attribute:
Tag-specific attributes:
Attribute Value Description

align right It determines the alignment of the content inside the <tbod
left element. (Not Supported in HTML5)
center
justify
char

char charact It specifies the alignment of the <tbody> content to the character. (N
er Supported in HTML5)

charoff Number It specifies the number of characters the content will be aligned from t
character specified by the char attribute. (Not Supported in HTML5)

valign top It determines the vertical alignment of the content inside the <tbod
middle element. (Not Supported in HTML5)
bottom
baselin
e

Global attribute:
The <tbody> tag supports the Global attributes in HTML.

Event attribute:
The <tbody> tag supports the Event attributes in HTML.

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<tbody> Yes Yes Yes Yes Yes

HTML <td> tag

HTML <td> tag is used to specify the cells of an HTML table which contain
data of the table. The <td> tag must be the child element of <tr> (table
row) tag. Each table row can contain multiple <td> data elements.

The grouped <td> elements of a <tr> tag renders as a single row in the
table. The content of the <td> elements is regular and left-aligned in the
table by default.

Syntax
1. <td>.......</td>

Display Inline

Start tag/End tag Start and End tag

Usage Table content

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML td tag</title>
5. <style>
6. th{
7. background-color: #6495ed;
8. }
9. th,td{
10. border: 1px solid black;
11. padding: 10px;
12. }
13. </style>
14.</head>
15. <body>
16. <h2>Example of td Tag</h2>
17. <table style=" border-collapse: collapse; background-
color:#dcdcdc;">
18. <tr>
19. <th>Product</th>
20. <th>Quantity</th>
21. <th>Price</th>
22. </tr>
23.
24. <tr>
25. <td>Books</td>
26. <td>5</td>
27. <td>589</td>
28. </tr>
29.
30. <tr>
31. <td>T-shirt</td>
32. <td>5</td>
33. <td>3500</td>
34. </tr>
35.
36. <tr>
37. <td>Jeans</td>
38. <td>2</td>
39. <td>5000</td>
40. </tr>
41. </table>
42.</body>
43. </html>
Test it Now

Output:

Fixed column width using <td> tag in a table

In an HTML table, the dimensions of the rows and columns in a table are
automatically adjusted by the browser so that the contents fit in the row.
However, there can be a situation where the width of the columns needs
to be fixed or equal-sized. So there are various techniques to fix the width
of the column.

<td> tag width attribute: The <td> tag width attribute is used to fix
the width of a particular column. With this, we can assign a numeric value
to this attribute or in terms of percentage.

Following is an example of fixing the column width using the <td>

tag width attribute.

Example 1
1. <! DOCTYPE html>
2. <html>
3. <head>
4. <title> HTML td tag with fixed width </title>
5. <meta charset = "UTF-8" />
6. <meta name = "viewport" content = "width=device-width,
7. initial-scale = 1.0" />
8. <style>
9. @import url([Link]
10. body {
11. text-transform: uppercase;
12. text-align: center;
13. white-space: nowrap;
14. color: #fff;
15. background-color: #E1332D;
16.}
17. [Link] {
18. margin-left: auto;
19. margin-right: auto;
20.}
21. th {
22. background-color: #6495ed;
23. }
24. th,td {
25. border: 1px solid red;
26. padding: 10px;
27. }
[Link] {
29. display: table-header-group;
[Link]: green;
31. font-weight: bold;
32.}
33. h2 {
34. text-align: center;
35. font-weight: normal;
36. color: #fff;
37. text-transform: uppercase;
38. font-size: 1em;
39. white-space: nowrap;
40. font-size: 4vw;
41. z-index: 1000;
42. font-family: 'Bangers', cursive;
43. text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
44. @include skew(0, -6.7deg, false);
45. @include transition-property(font-size);
46. @include transition-duration(0.5s);
47.
48.}
49. thead {
50. border-top: 1px solid #ccc;
51. padding:10px;
52. width: 120px;
53. background-color: #004496;
54. color: #fff;
55. font-family: arial;
56. font-size: 12px;
57.
58. }
59. td {
60. border-top: 1px solid #ccc;
61. padding:10px;
62. width: 120px;
63. background-color: #004496;
64. color: #fff;
65. font-family: arial;
66. font-size: 12px;
67.
68. }
69. th {
70. border-top: 1px solid #ccc;
71. padding:10px;
72. width: 120px;
73. background-color: #004496;
74. color: #fff;
75. font-family: arial;
76. font-size: 12px;
77.
78. }
79. h3 {
80. text-align: center;
81. font-weight: normal;
82. color: #fff;
83. text-transform: uppercase;
84. font-size: 1em;
85. white-space: nowrap;
86. font-size: 3vw;
87. z-index: 1000;
88. font-family: 'Bangers', cursive;
89. text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
90. @include skew(0, -6.7deg, false);
91. @include transition-property(font-size);
92. @include transition-duration(0.5s);
93.
94.}
95. </style>
96.</head>
97. <body>
98. <h2> Example </h2>
99. <h3> Fixed column width using td Tag </h3>
100. <table class = "center" style = " border-collapse: collapse; backgr
ound-color:#dcdcdc;">
101. <thead>
102. <tr>
103. <td width = "10%" style = "color:red;"> Sr. No </td>
104. <td width = "40%"> Product </td>
105. <td width = "20%"> Quantity </td>
106. <td width = "30%"> Price </td>
107. </tr>
108. </thead>
109.
110. <tr>
111. <td style = "color:red;"> 1 </td>
112. <td> Books </td>
113. <td> 5 </td>
114. <td> 589 </td>
115. </tr>
116.
117. <tr>
118. <td style = "color:red;"> 2 </td>
119. <td> T-shirt </td>
120. <td> 5 </td>
121. <td> 3500 </td>
122. </tr>
123. <tr>
124. <td style = "color:red;"> 3 </td>
125. <td> Jeans </td>
126. <td> 2 </td>
127. <td> 5000 </td>
128. </tr>
129. <tr>
130. <td style = "color:red;"> 4 </td>
131. <td> Suits </td>
132. <td> 3 </td>
133. <td> 6000 </td>
134. </tr>
135.
136. </table>
137. </body>
138. </html>

Explanation:

In the above example, we have created an example of fixing the column

width using the <td> tag width attribute.

Output:

Following is the output of this example.

Example 2:
1. <! DOCTYPE html>
2. <html>
3. <head>
4. <title> HTML td tag with Equal width column </title>
5. <meta charset = "UTF-8" />
6. <meta name = "viewport" content = "width=device-width,
7. initial-scale = 1.0" />
8. <style>
9. body {
10. font-family: "Open Sans", sans-serif;
11. line-height: 1.25;
12.}
13. table {
14. border: 1px solid #ccc;
15. border-collapse: collapse;
16. table-layout: fixed;
17. width: 100%;
18.}
19. table caption {
20. font-size: 1.5em;
21. margin: .5em 0 .75em;
22.}
23. table tr {
24. border: 1px solid #ddd;
25. padding: .35em;
26.}
27. table tr:nth-child(even) {
28. background: #f8f8f8;
29. }
[Link] th {
31. padding: .625em;
32. text-align: left;
33. }
[Link] td {
35. padding: .625em;
36. text-align: left;
37. }
[Link] th {
39. background: #999;
40. color: #fff;
41. font-size: 1.85em;
42. letter-spacing: .1em;
43. text-transform: uppercase;
44.}
45. table td {
46. white-space: nowrap;
47. overflow: hidden;
48. text-overflow: ellipsis;
49. }
50.@import url([Link]
51. body {
52. text-transform: uppercase;
53. text-align: center;
54. white-space: nowrap;
55. color: #fff;
56. background-color: #E1332D;
57. }
58.h2 {
59. text-align: center;
60. font-weight: normal;
61. color: #fff;
62. text-transform: uppercase;
63. font-size: 1em;
64. white-space: nowrap;
65. font-size: 3vw;
66. z-index: 1000;
67. font-family: 'Bangers', cursive;
68. text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
69. @include skew(0, -6.7deg, false);
70. @include transition-property(font-size);
71. @include transition-duration(0.5s);
72.
73. }
[Link] {
75. border-top: 1px solid #ccc;
76. padding:10px;
77. width: 120px;
78. background-color: #004496;
79. color: #fff;
80. font-family: arial;
81. font-size: 12px;
82.
83. }
84. td {
85. border-top: 1px solid #ccc;
86. padding:10px;
87. width: 120px;
88. background-color: #004496;
89. color: #fff;
90. font-family: arial;
91. font-size: 12px;
92.
93. }
94. th {
95. border-top: 1px solid #ccc;
96. padding:10px;
97. width: 120px;
98. background-color: #004496;
99. color: #fff;
100. font-family: arial;
101. font-size: 18px;
102.
103. }
104. h3 {
105. text-align: center;
106. font-weight: normal;
107. color: #fff;
108. text-transform: uppercase;
109. font-size: 1em;
110. white-space: nowrap;
111. font-size: 2vw;
112. z-index: 1000;
113. font-family: 'Bangers', cursive;
114. text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
115. @include skew(0, -6.7deg, false);
116. @include transition-property(font-size);
117. @include transition-duration(0.5s);
118.
119. }
120. </style>
121. </head>
122. <body>
123. <h2> Example </h2>
124. <h3> Equal Sized column width using td Tag </h3>
125. <table>
126. <thead>
127. <tr>
128. <th scope = "col"> Sr. No </th>
129. <th scope = "col"> Product </th>
130. <th scope = "col"> Quantity </th>
131. <th scope = "col"> Price </th>
132. </tr>
133. </thead>
134. <tbody>
135. <tr>
136. <td style = "color:red;"> 1 </td>
137. <td> Books </td>
138. <td> 5 </td>
139. <td> 589 </td>
140. </tr>
141.
142. <tr>
143. <td style = "color:red;"> 2 </td>
144. <td> T-shirt </td>
145. <td> 5 </td>
146. <td> 3500 </td>
147. </tr>
148. <tr>
149. <td style = "color:red;"> 3 </td>
150. <td> Jeans </td>
151. <td> 2 </td>
152. <td> 5000 </td>
153. </tr>
154. <tr>
155. <td style = "color:red;"> 4 </td>
156. <td> Suits </td>
157. <td> 3 </td>
158. <td> 6000 </td>
159. </tr>
160. </tbody>
161. </table>
162. </body>
163. </html>

Explanation:

In the above example, we have created an example of equal size column

width using <td> tag.

Output:

Following is the output of this example.

Fixed column width using <col> tag in a table
<col> tag: The <col> tag in a table is used to fix the width of a
particular column. With this, we can assign a numeric value to this
attribute or in terms of percentage.

Following is an example of how to fix the column width using the

<col> tag.

Example 1:
1. <! DOCTYPE html>
2. <html>
3. <head>
4. <title> Html fixed width using col tag </title>
5. <meta charset = "UTF-8" />
6. <meta name = "viewport"
7. content = "width=device-width,
8. initial-scale = 1.0" />
9. <style>
10. @import url([Link]
11. body {
12. text-transform: uppercase;
13. text-align: center;
14. white-space: nowrap;
15. color: #fff;
16. background-color: #E1332D;
17. }
[Link] {
19. border: 1px solid black;
20. border-collapse: collapse;
21. margin-left: auto;
22. margin-right: auto;
23. }
[Link] {
25. border: 1px solid black;
26. border-collapse: collapse;
27. margin-left: auto;
28. margin-right: auto;
29. }
[Link] {
31. border: 1px solid black;
32. border-collapse: collapse;
33. margin-left: auto;
34. margin-right: auto;
35. }
36.
37. table {
38. width: 50%;
39. }
40. [Link] {
41. table-layout: fixed;
42. }
43. [Link] td {
44. overflow: hidden;
45. }
46. thead {
47. display: table-header-group;
[Link]: green;
49. font-weight: bold;
50.}
51. h2 {
52. text-align: center;
53. font-weight: normal;
54. color: #fff;
55. text-transform: uppercase;
56. font-size: 1em;
57. white-space: nowrap;
58. font-size: 4vw;
59. z-index: 1000;
60. font-family: 'Bangers', cursive;
61. text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
62. @include skew(0, -6.7deg, false);
63. @include transition-property(font-size);
64. @include transition-duration(0.5s);
65.
66.}
67. thead {
68. border-top: 1px solid #ccc;
69. padding:10px;
70. width: 120px;
71. background-color: #004496;
72. color: #fff;
73. font-family: arial;
74. font-size: 12px;
75.
76. }
77. td {
78. border-top: 1px solid #ccc;
79. padding:10px;
80. width: 120px;
81. background-color: #004496;
82. color: #fff;
83. font-family: arial;
84. font-size: 12px;
85.
86. }
87. th {
88. border-top: 1px solid #ccc;
89. padding:10px;
90. width: 120px;
91. background-color: #004496;
92. color: #fff;
93. font-family: arial;
94. font-size: 12px;
95.
96. }
97. h3 {
98. text-align: center;
99. font-weight: normal;
100. color: #fff;
101. text-transform: uppercase;
102. font-size: 1em;
103. white-space: nowrap;
104. font-size: 3vw;
105. z-index: 1000;
106. font-family: 'Bangers', cursive;
107. text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
108. @include skew(0, -6.7deg, false);
109. @include transition-property(font-size);
110. @include transition-duration(0.5s);
111.
112. }
113. </style>
114. </head>
115. <body>
116. <h2> Example </h2>
117. <h3> Fixed column width using col Tag </h3>
118. <div style = "overflow-x: auto;">
119. <table>
120. <col style = "width: 10%;" />
121. <col style = "width: 40%;" />
122. <col style = "width: 20%;" />
123. <col style = "width: 30%;" />
124. <tr>
125. <th> Sr. No </th>
126. <th> Product </th>
127. <th> Quantity </th>
128. <th> Price </th>
129. </tr>
130. <tr>
131. <td style = "color:red;"> 1 </td>
132. <td> Books </td>
133. <td> 5 </td>
134. <td> 589 </td>
135. </tr>
136. <tr>
137. <td style = "color:red;"> 2 </td>
138. <td> T-shirt </td>
139. <td> 5 </td>
140.
141. <td> 3500 </td>
142. </tr>
143. <tr>
144. <td style = "color:red;"> 3 </td>
145. <td> Jeans </td>
146. <td> 2 </td>
147. <td> 5000 </td>
148. </tr>
149. <tr>
150. <td style = "color:red;"> 4 </td>
151. <td> Suits </td>
152. <td> 3 </td>
153. <td> 6000 </td>
154. </tr>
155. </table>
156. </div>
157. </body>
158. </html>

Explanation:

In the above example, we have created an example of fixing the column

width using the <col> tag.
Output:

Following is the output of this example.

Attribute:
Tag-specific attributes:
Attribute Value Description

abbr text It defines the abbreviated version of content of the cell. (N

Supported in HTML5)

align left It specifies the alignment of the content of the cell. (N

right Supported in HTML5)
center
justify
char

axis category_na It Categorizes Cells. . (Not Supported in HTML5)

bgcolor rgb(x,x,x) It sets the background color of the cell. (Not Supported
#xxxxxx HTML5)
Color_name
char character It specifies the alignment of the content of cell to t
character. (Not Supported in HTML5)

charoff number It determines the number of characters the content aligned from t
character specified by the char attribute. (Not Supported
HTML5)

colspan number It determines the number of columns a cell should span.

headers header_id It determines one or more header cells to which a cell is related.

height % It determines the height of a table cell. (Not Supported in HTML

pixels

nowrap nowrap If it sets then content inside the cell should not wrap. (N
Supported in HTML5)

rowspan number It determines the number of rows a cell should span.

scope col It specifies the cells that the header element relates to. (N
colgroup Supported in HTML5)
row
rowgroup

valign top It determines the vertical alignment of the cell content. (N

middle Supported in HTML5)
bottom
baseline

width % It determines the width of the cell.(Not Supported in HTML5)

pixels

Global attribute:
The <td> tag supports the Global attributes in HTML.

Event attribute:
The <td> tag supports the Event attributes in HTML.

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<td> Yes Yes Yes Yes Yes

HTML <template> tag

Either the client side or the server side is where templates are created.
Nowadays, most websites use some kind of template. When a request
enters the server, the server's templating engine puts the necessary
templates together and sends the built page down to the browser. A front-
end framework that supports templates or a specific templating library is
used for any client-side templating that isn't done on the server side.

Since React and other contemporary JavaScript frameworks are so well-

liked, many people disregard HTML and plain JavaScript. Today, JavaScript
and plain HTML are still used to build the majority of websites. The HTML5
element known as "template" gives developers a reliable method for
managing templates in the browser. The HTML5 <template> element
gives developers a powerful method for managing templates in the
browser, simplifying and improving the maintainability of the whole web
writing process.

In this article, we'll learn about HTML template tags, how to use them, and
their advantages and disadvantages.

Meaning and Examples

When the website loads, certain HTML material that is concealed from the
user is placed within the <template> tag as a container.

JavaScript can be used subsequently to render the content inside the

<template> tag.

If we have reusable HTML code, we can utilize the <template> element

only after we specifically request it. If we want to accomplish this without
using the template element, we must write the HTML code in JavaScript to
stop the browser from rendering it.

What does the Tag <template> Mean?

An HTML5 element called "template" is used to hold HTML code fragments
that aren't immediately visible once a website loads. We may copy and
paste this element into an HTML page. Since it is kept on the client side,
the content of the <template> is concealed from clients. The rendering of
templates in the browser doesn't begin until we use JavaScript to activate
them. JavaScript is employed to add content to a web page from a
template to a web page from a template, JavaScript is employed.

It can also be helpful if we want to reuse the same material in our HTML
document repeatedly without making any changes.

Anywhere within the <head>, <body>, <frameset>, or <table> elements

is acceptable for the <template> tag.

In HTML5, the template> tag is a brand-new element.

Syntax:

1. <template>.........</template>

Web Template Types

Website templates can be downloaded as standalone zip files, as a
custom web builder interface component, or as part of an HTML editor
program. They could have a responsive, adaptive, static, or mobile-
specific design. File extensions include .html, .htm, .php, and .asp. They
will all be created using HTML and CSS code. Whether it's a desktop
computer, tablet, or smartphone, the layout will adapt in width if it's
marked as "responsive" to accommodate the unique device viewing
screen.

What can be Included in a Web Template?

The features that may be included in a design include text,.jpg,.png, [Link]
pictures, jQuery and CSS3 animation, shopping carts, contact forms,
dynamic image galleries and slideshows, a PDF download links page, and
video players (including embedded Youtube videos).

When choosing a website template, make sure it already has the features,
scripts, and apps we need for our web development project because web
template styles and code differ greatly from vendor to vendor. The pre-
made pages may be customized by adding text, stock images, scripts, and
third-party plugins. The provided stock photos can be altered or swapped
out with the user's [Link] files as needed for the project.

Templates for the HTML markup are stored in a built-in <template>

element. The browser ignores the content, which just validates the syntax,
but we may access it and utilize it in JavaScript to generate new
components.
Theoretically, we could design any invisible element in HTML and use it to
store HTML markup. What makes <template> unique?

First of all, even though it typically requires a correct surrounding tag, its
content can be any acceptable HTML.

For instance, we could insert the following table row <tr>:

1. <template>
2. <tr>
3. <td>Contents</td>
4. </tr>
5. </template>
An Example for Template
1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <h1>Template Element Example</h1>
6.
7. <p>To view the template element's concealed content, click the bu
tton below.</p>
8.
9. <button onclick="showContent()">show content</button>
10.
11. <template>
12. <h2>Flower</h2>
13. <img src="C:\Users\Maram Ujwala\Pictures\Saved Pictures\
Images\Flower [Link]" width="60" height="40">
14.</template>
15.
16.<script>
17. function showContent() {
18. let temp = [Link]("template")[0];
19. let clon = [Link](true);
20. [Link](clon);
21. }
22.</script>
23.
24.</body>
25. </html>

Output:

When we click on show content, a flower image is displayed as shown

below.
Another Example of a Template Element
1. <!doctype html>
2. <html>
3. <head>
4. <title>HTML Page</title>
5. <meta name="description" content="HTML page">
6. <meta name="keywords" content="html example">
7. </head>
8. <body>
9. HTML content
10.</body>
11. </html>

Output:
Let's deconstruct it:

1. Line 1: This special tag, which appears at the beginning of the page and
specifies the kind of code being used, is used to identify the type of code.
2. The HTML page is opened and closed by the HTML tags on lines 2 and
12. The paper includes all of its contents.
3. The head tags on lines 3 and 7 specify where the document's head will
appear. Items below are supplemental information that goes with the
paper.
4. The title tag in line 4 specifies the document's title. It will be shown at the
very top of the browser window.
5. The meta tags on lines 5 and 6 are used to describe the document.
6. The body tags on lines 9 and 11 enclose the document's actual content.

The Doctype
This tag should always be the first one on a page. It ought to be placed
just before the html tag at the top. You'll see that this tag starts with an
exclamation point (!) as opposed to the other tags.

1. <!doctype html>

Technically speaking, it is not a tag but rather a directive to the browser

for how to read the remaining text. We just use the term "HTML" to
describe HTML 5. Since several varieties of HTML may be used, it was
crucial to identify which.

The Head
1. <head> </head>

Ancillary data is placed in the HTML document's head section. While not a
part of the text, this information relates to it. There are several things.

However, the aforementioned template covers the fundamental elements

that any page needs.

The Title
We may give the document a title by using the title tag. This is employed
several times:

1. It will be shown at the top of the browser's window.

2. The title from your bookmarked version of this page will be utilized.
3. When listing your page in their search results, search engines take into
account the title.
4. When someone connects to your page from another website, the title may
be used.
5. Given all the locations it is used, the title tag may be rather significant.
Spend some time making sure it is both brief and detailed.

Meta Tags
1. <meta name="description" value=" ">
2. <meta name="keywords" value=" ">

The two meta tags for the description and keywords follow in the head.
These can be utilized by other systems (like when your page is linked to
social networking and other sharing sites) and are used by search engines
(to varying degrees).

The description serves as a summary of the subject matter of the page.

This will often appear on the results pages of search engines beneath your
title.

The keywords meta tag is used to offer a list of terms that would fit the
subject matter of the page. Previously, search engines gave this feature of
your page some weight, but because of misuse, it currently carries very
little weight. However, you should still include it for completeness' sake
and also because you could get black-listed by some search engines if you
don't include it. They argue that the quality of your page will be lower if
you are lazy and can't be bothered to include this tag since you are likely
to be lazy in other areas as well.

The Body
1. <body> < /body>

The actual content of your page goes here. All of this stuff would typically
be included in tags that describe the sort of content it is. To keep things
simple, we omitted this form from the previous example. We'll begin
demonstrating the many types of tags that may be applied in the next
section.

Advantages of <template> Element

1. The HTML event and global attributes are both supported.
2. It aids in the development of reusable markups.
3. It supports a wide range of browsers.
4. It applies to front-end frameworks.
5. Site performance and speed are enhanced because it only operates when
engaged.

Disadvantages of <template> Element

1. It just uses Javascript. The template element's output won't be seen by
users whose browsers have Javascript disabled.
2. Accessibility issues; certain older screen readers are affected.

Summary to Sum Up
Any syntactically sound HTML can be used as <template> content.

Content within a <template> is regarded as being "out of the document"

and has no bearing on anything.

We can use JavaScript to access [Link] and copy it so we can

reuse it in another component.

The <template> tag is quite distinctive because:

1. As an alternative to utilizing a template string within a script, the browser

validates HTML syntax within it.
2. Nevertheless permits the usage of any top-level HTML elements, including
ones that are useless without the appropriate wrappers (such as <tr>).
3. When put into the document, the material becomes interactive: scripts
run, <videos autoplay>, etc.
4. There are no iteration mechanisms, data binding, or variable replacements
built into the <template> element, but we can add things on top of it.

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 fixed-width 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

1. <textarea rows="9" cols="70">
2. JavaTpoint textarea tag example with rows and columns.
3. </textarea>
Test it Now

Output:

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<textarea> Yes Yes Yes Yes Yes

New HTML 5 Textarea Attributes

Attribute Description
autofocus It specifies that a text area should be automatically get focused when t
page is loaded.

form It specifies one or more forms the textarea belongs to.

maxlengt It specifies the maximum number of characters allowed in the text area.
h

placehold It specifies a short hint that describes the expected value of a textarea.
er

required It specifies that textarea must be filled out.

wrap It specifies that how the texts in the textarea are wrapped at the time
the submission of the form.

HTML Textarea form attribute

The form attribute specifies one or more forms the text area belongs to.

1. <form action="[Link]" id="usrform">

2. Name: <input type="text" name="usrname">
3. <input type="submit">
4. </form>
5. <br>
6. <textarea rows="9" cols="70" name="comment" form="usrform"
>
7. Enter text here...</textarea>
8. <p>The text area above is outside the form element, but should stil
l be a part of the form.</p>
9. <p><b>Note:</b> The form attribute is not supported in Internet
Explorer.</p>
Test it Now

Output:

Name:

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 <tfoot> tag

HTML <tfoot> tag is used to define the set of rows which represents
footer of an HTML table. The <tfoot> tag must contain one or more <tr>
element.

The <tfoot> tag is used as a child element of HTML table (<table>) along
with <thead> and <tbody> elements, where <thead> defines table
header and <tbody> defines the table body.

Tips: The <thead>, <tbody>, and <tfoot> elements do not affect the table layout,
and if you want to apply the change in table layout then use CSS properties.
Syntax
1. <tfoot>
2. <tr></tr>
3. <tr></tr>
4. lt;/tfoot>

Following are some specifications about the HTML <tfoot> tag

Display None

Start tag/End tag Start and End tag

Usage HTML Tables

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML tfoot Tag</title>
5. <style>
6. table{
7. border-collapse: collapse;
8. }
9. thead,tfoot{
10. background-color:#3f87a6;
11. }
12. tbody{
13. background-color:#97ffff;
14. }
15. </style>
16. </head>
17. <body>
18. <h1>Example of tfoot tag</h1>
19. <table border="1" >
20. <thead>
21. <tr>
22. <th>Items</th>
23. <th>Quantity</th>
24. <th>Expenditure</th>
25. </tr>
26. </thead>
27. <tfoot>
28. <tr>
29. <th>Total</th>
30. <th>90</th>
31. <th>4175</th>
32. </tr>
33. </tfoot>
34. <tbody>
35. <tr>
36. <td>Books</td>
37. <td>5</td>
38. <td>1500</td>
39. </tr>
40. <tr>
41. <td>Drawing-Paper</td>
42. <td>50</td>
43. <td>800</td>
44. </tr>
45. <tr>
46. <td>Marker</td>
47. <td>35</td>
48. <td>1875</td>
49. </tr>
50. </tbody>
51. </table>
52.</body>
53. </html>
Test it Now

Output:

Backward Skip 10sPlay VideoForward Skip 10s

Attribute:
Tag-specific attributes:
Attribute Value Description

align right It determines the alignment of the content inside the <tfoo
left element. (Not Supported in HTML5)
center
justify
char

char Charact It specifies the alignment of the content inside the <tfoot> element
er the character. (Not Supported in HTML5)

charoff Number It specifies the number of characters the content will be aligned from t
character specified by the char attribute. (Not Supported in HTML5)

valign top It determines the vertical alignment of the content inside the <tfoo
middle element. (Not Supported in HTML5)
bottom
baseline

Global attribute:
The <tfoot> tag supports the Global attributes in HTML.

Event attribute:
The <tfoot> tag supports the Event attributes in HTML.

HTML <th> tag

In an HTML table there are two types of cells:

o Header cell - It contains the header information (created using <th>

element)
o Data Cells - It contains the main data of the table (created using <td>
element).

HTML <th> tag is used to define the header cells of an HTML table. The
header cell renders as bold and centered by default on the browser, but
you can change its default style using CSS properties.

The <th> tag must be used as a child element of the <tr> element within
<table> element. The size of the table is auto-adjustable as per the
content size.

Syntax
1. <th>Content....... </th>

Following are some specifications about the HTML <th> tag

Display None

Start tag/End tag Both Start and End tag

Usage HTML Tables

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML th Tag</title>
5. <style>
6. table{
7. border-collapse: collapse;
8. width: 70%;}
9. th,td{
10. background-color: #528b8b;
11. padding: 10px;
12. }
13. </style>
14.</head>
15. <body>
16. <h2>Example of th tag</h2>
17. <table border="1">
18. <tr>
19. <th>Month</th>
20. <th>Date</th>
21. </tr>
22. <tr>
23. <td>January</td>
24. <td>20.01.2018</td>
25. </tr>
26. <tr>
27. <td>February</td>
28. <td>01.02.2018</td>
29. </tr>
30. <tr>
31. <td>March</td>
32. <td>15.03.2018</td>
33. </tr>
34. </table>
35. </body>
36.</html>
Test it Now

Output:

Attribute:
Tag-specific attributes:
Attribute Value Description

abbr text It defines the abbreviated version of content of the header cell. (N
Supported in HTML5)

align left It specifies the alignment of the content of the header cell. (N
right Supported in HTML5)
center
justify
char

axis category_na It Categorizes header Cells(Not Supported in HTML5)

me
bgcolor rgb(x,x,x) It sets the background color of the header cell. (Not Supported
#xxxxxx HTML5)
Color_name

char character It specifies the alignment of the content of the header cell to t
character. (Not Supported in HTML5)

charoff number It specifies the number of characters the header cell content will
aligned from the character specified by the char attribute. (N
Supported in HTML5)

colspan number It determines the number of columns a header cell should span.

headers header_id It determines a space-separated list of header cells which conta

information of the cells is related.

height % It determines the height of a table header cell. (Not Supported

pixels HTML5)

nowrap nowrap If it sets then content inside the header cell should not wrap. (N
Supported in HTML5)

rowspan number It determines the number of rows a cell should span.

scope col It specifies the cells that the header element relates to. (N
colgroup Supported in HTML5)
row
rowgroup

valign top It determines the vertical alignment of the cell content. (N

middle Supported in HTML5)
bottom
baseline

width % It determines the width of the header cell.(Not Supported

pixels HTML5)

Global attribute:
The <th> tag supports the Global attributes in HTML.

Event attribute:
The <th> tag supports the Event attributes in HTML.
HTML <thead> tag
HTML <thead> elements is used to define header of an HTML table. The
<thead> tag is used along with <tbody> and <tfoot> tags which defines
table header, table body, and table footer in an HTML table.

The <thead> tag must be child of <table> element, and it must be used
before any <tbody>, <tr>, or <tfoot> elements.

The <thead> tag should contain at least one row <tr> element inside it.

Syntax
1. <thead>
2. <tr>
3. </tr>
4. lt;/thead>

Following are some specifications about the HTML <thead> tag

Display Inline

Start tag/End tag Start and End tag

Usage Table header

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML thead Tag</title>
5. <style>
6. table{
7. border-collapse: collapse;
8. margin: 15px;}
9. thead{
10. background-color:#005cb9;}
11. tbody{
12. background-color: #d4caca;}
13. th,td{
14. padding: 12px;}
15. </style>
16.</head>
17. <body>
18. <h2>Example of thead tag</h2>
19. <table border="1">
20. <caption>Population of India</caption>
21. <thead>
22. <tr>
23. <th>Year</th>
24. <th>Population</th>
25. </tr>
26. </thead>
27. <tbody>
28. <tr>
29. <td>2015</td>
30. <td>1,309,053,980</td>
31. </tr>
32. <tr>
33. <td>2016</td>
34. <td>1,324,171,354</td>
35. </tr>
36. <tr>
37. <td>2017</td>
38. <td>1,339,180,127</td>
39. </tr>
40. <tr>
41. <td>2018</td>
42. <td>1,354,051,854</td>
43. </tr>
44. </tbody>
45. </table>
46.</body>
47. </html>
Test it Now

Output:
Attribute:
Tag-specific attributes:
Attribute Value Description

align right It determines the alignment of the content inside the <thea
left element. (Not Supported in HTML5)
center
justify
char

char Charact It specifies the alignment of the content inside the <thead> element
er the character. (Not Supported in HTML5)

charoff Number It specifies the number of characters the content that will be aligned fro
the character specified by the char attribute. (Not Supported
HTML5)

valign top It determines the vertical alignment of the content inside the <thea
middle element. (Not Supported in HTML5)
bottom
baseline
Global attribute:
The <thead> tag supports the Global attributes in HTML.

Event attribute:
The <thead> tag supports the Event attributes in HTML.

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.

1. <time>Define Time and Date here</time>

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

Attribute Description

datetime It is used to define machine-readable date/time within the time element.

HTML time tag example

1. <p>We open our shop at <time>09:00</time> am.</p>
2. <p>The business meeting is scheduled on <time datetime="2009-
02-18">next wednesday</time>.</p>
3. <p>The wedding of Salman's sister was scheduled at <time dateti
me="2014-11-19 T0 7:00-09:00">7pm last wednesday </
time>.</p>
Test it Now

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

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.

HTML <tr> tag

HTML <tr> tag is used to define the rows in the table. The <tr> tag can
consist one or more <th> head cells and <td> data cells to define a
single row of HTML table.

The <tr> tag must be a direct child of <table> element or it can be

nested child of <thead>, <tbody>, and <tfoot> elements.

Syntax
1. <tr>.......</tr>

Following are some specifications about the HTML <tr> tag

Display Inline

Start tag/End tag Start and End tag

Usage Table content

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML tr tag</title>
5. <style>
6. table{
7. border-collapse: collapse;
8. margin-left: 350px;
9. }
10. th,td{
11. padding: 25px;}
12. th{
13. background-color: #005cb9;}
14. td{
15. background-color:#98f5ff;}
16. </style>
17. </head>
18.<body>
19. <h2>Example of tr tag</h2>
20. <table border="1">
21. <caption><b>Top Three performers of Winter Olympic Me
dals</b></caption>
22. <tr>
23. <th>Rank</th>
24. <th>Country</th>
25. <th>Total medals</th>
26. </tr>
27. <tr>
28. <td>1</td>
29. <td>Norway</td>
30. <td>329</td>
31. </tr>
32. <tr>
33. <td>2</td>
34. <td>United State</td>
35. <td>282</td>
36. </tr>
37. <tr>
38. <td>3</td>
39. <td>Germany</td>
40. <td>228</td>
41. </tr>
42. </table>
43. </body>
44.</html>
Test it Now

Output:

Attribute:
Tag-specific attributes:
Attribute Value Description

align right It determines the alignment of the content in the table row. (N
left Supported in HTML5)
center
justify
char

bgcolor rgb(x,x,x) It defines the background color of the table row. (Not Supported
#xxxxx HTML5)
color_na
me

char character It specifies the alignment of content to the character. (Not Support
in HTML5)

charoff number It specifies the number of character the table row content will
aligned from the character, and which is specified by ch
attribute. (Not Supported in HTML5)
valign Top It specifies the vertical alignment of the table row content. (N
Middle Supported in HTML5)
Bottom
baseline

Global attribute:
The <tr> tag supports the Global attributes in HTML.

Event attribute:
The <tr> tag supports the Event attributes in HTML.

HTML <track> tag

HTML <track> tag is used to define time-based text tracks for a media
file. The <track> tag must use as child element of <audio> and <video>
elements.

The <track> tag is used to add subtitle, caption, or any other form of text
which displayed when a media file plays.

HTML <track> is new tag in HTML5.

Syntax
1. <track src=" " kind=" " srclang=" " label=" ">

Following are some specifications about the HTML <track> tag

Display None

Start tag/End tag Only start tag(End tag forbidden)

Usage HTML media

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML track Tag</title>
5. </head>
6. <body>
7. <h2>Example of track tag</h2>
8. <video controls="controls">
9. <source src="flower.mp4" type="video/mp4">
10. <track src="[Link]" kind="subtitles" srclang="en" label="English">

11. Sorry!Your browser does not support the track

12. </video>
13. </body>
14.</html>
Test it Now

In the above example, we have used [Link] file to add subtitle in the
video file. Following is the [Link] file:

How to create WEBVTT file:

Following are some basic steps to create WEBVTT file for <track> tag:

1. Open text editor in your PC such as Notepad

2. Write WEBVTT as the first line in the editor
3. Leave a blank line
4. Specify the time duration in the proper format (you can also provide
numbering and add CSS).
5. Enter and write your text which you want to add a subtitle or caption, and
repeat step 3 to 5 until you finish it.
6. Save it using .vtt extension.

Now your WEBVTT file is ready to use.

Attribute:
Tag-specific attributes:
Attribute Value Description

default default It specifies that the track should be enabled unless the use
preferences indicate that another track is more important.

kind captions It specifies that which type of text track you want to add.
chapters
descriptions
metadata
subtitles

label text It specifies the title of the text track.

src URL It defines the URL of the track file.

srclang language_co It defines the language of the track text content, such as Engli
de Germany, etc.

Global attribute:
The <track> tag supports the Global attributes in HTML.

Event attribute:
The <track> tag supports the Event attributes in HTML.

HTML <tt> tag (Not supported in HTML5)

HTML <tt> tag was used to define text in monospaced font or fixed-width
fonts so that it would render as teletype, text-only screen, or line printer
on the browser.
Note: Do not use HTML <tt> tag, as it is not supported in HTML5,
instead of you can use following tags for better use:

o <code>: To represent the computer programming code

o <pre>: To preserve line break and indentation in plain text.
o <kbd>: To represent keyboard input.
o <var>: To represent variables in an equation
o <samp>: To represent the text as sample output.

Syntax
Following are some specifications about the HTML <tt> tag

Display Inline

Start tag/End tag Start and End tag

Usage Formatting

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML tt tag</title>
5. </head>
6. <body>
7. <h2>Example of tt tag</h2>
8. <p>This is paragraph with default font</p>
9. <p><tt>This is teletype paragraph</tt></p>
10.</body>
11. </html>
Test it Now

Output:
Attribute:
Tag-specific attributes:
The <tt> tag does not contain any specific attribute.

HTML <u> tag

HTML <u> tag is used to define a span of inline text with a non-textual
annotation. It rendered as an solid underlined text, but it can be changed
using CSS properties. This tag was deprecated in HTML 4.0 and redefined
in HTML5.

In HTML5, <u> tag is used to represent the text that is stylistically

different with normal text.

Tips: The use of <u> tag should be ignored as it may generate confusion for a
hyperlinked text.
Syntax
Following are some specifications about the HTML <u> tag

Display Inline

Output:

Attribute:
Tag-specific attributes:
The <u> tag does not contain any specific attribute.

Global attribute:
The <u> tag supports the Global attributes in HTML.
Event attribute:
The <u> tag supports the Event attributes in HTML.

HTML Unordered List | HTML Bulleted List

HTML Unordered List or Bulleted List displays elements in bulleted
format . We can use unordered list where we do not need to display items
in any particular order. The HTML ul tag is used for the unordered list.
There can be 4 types of bulleted list:

o disc
o circle
o square

HTML Description List | HTML Definition List

HTML Description List or Definition List displays elements in definition
form like in dictionary. The <dl>, <dt> and <dd> tags are used to define
description list.

The 3 HTML description list tags are given below:

1. <dl> tag defines the description list.

2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).

1. <dl>
2. <dt>HTML</dt>
3. <dd>is a markup language</dd>
4. <dt>Java</dt>
5. <dd>is a programming language and platform</dd>
6. <dt>JavaScript</dt>
7. <dd>is a scripting language</dd>
8. <dt>SQL</dt>
9. <dd>is a query language</dd>
10.</dl>
Test it Now

Output:
HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language

HTML Form
An HTML form is a section of a document which contains controls such as
text fields, password fields, checkboxes, radio buttons, submit button,
menus etc.

An HTML form facilitates the user to enter data that is to be sent to the
server for processing such as name, email address, password, phone
number, etc. .

Why use HTML Form

HTML forms are required if you want to collect some data from of the site
visitor.

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

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

HTML Form Syntax

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

HTML Form Tags

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

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

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags

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

Tag Description

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

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML <form> element

The HTML <form> element provide a document section to take input from
user. It provides various interactive controls for submitting information to
web server such as text field, text area, password field, etc.

Note: The <form> element does not itself create a form but it is container to
contain all required form elements, such as <input>, <label>, etc.

Syntax:

1. <form>
2. //Form elements
3. </form>

HTML <input> element

The HTML <input> element is fundamental form element. It is used to
create form fields, to take input from user. We can apply different input
filed to gather different information form user. Following is the example to
show the simple text input.

Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>

Output:
HTML TextField Control
The type="text" attribute of input tag creates textfield control also known
as single line textfield control. The name attribute is optional, but it is
required for the server side component such as JSP, ASP, PHP etc.

1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>

Output:

Note: If you will omit 'name' attribute then the text filed input will not be submitted
to server.

HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form.
The size of <textarea> can be specify either using "rows" or "cols"
attribute or by CSS.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12.</html>

Output:

Label Tag in Form

It is considered better to have label in form. As it makes the code
parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you
need to have for attribute in label tag that must be same as id attribute of
input tag.

NOTE: It is good to use <label> tag with form, although it is optional but if you will
use it, then it will provide a focus when you tap or click on label tag. It is more
worthy with touchscreens.
1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/>
<br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/>
<br/>
6. </form>

Output:

HTML Password Field Control

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

1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password
"/> <br/>
4. </form>

Output:
HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct email
address. You must use @ and . in this field.

1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>

It will display in browser like below:

Note: If we will not enter the correct email, it will display error like:

Radio Button Control

The radio button is used to select one option from multiple options. It is
used for selection of gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can be
selected at a time.

Using radio buttons for multiple options, you can only choose a single
option at a time.

1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="
male"/>Male
4. <input type="radio" id="gender" name="gender" value="femal
e"/>Female <br/>
5. </form>

Checkbox Control
The checkbox control is used to check multiple options from given
checkboxes.

1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" valu
e="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" val
ue="football"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" val
ue="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>
Note: These are similar to radio button except it can choose multiple options at a
time and radio button can select one button at a time, and its display.

Output:

Submit button control

HTML <input type="submit"> are used to add a submit button on web
page. When user clicks on submit button, then form get submit to the
server.

Syntax:

1. <input type="submit" value="submit">

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web

page.

The name attribute can be omit here.

Example:

1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>

Output:

HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information
of a form. This element is used with <legend> element which provide
caption for the grouped elements.

Example:

1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
[Link];/form>
Output:

HTML Form Example

Following is the example for a simple form of registration.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/
>Male <br>
21. <input type="radio" id="gender" name="gender" value
="female"/>Female <br/>
22. <input type="radio" id="gender" name="gender" value="others"/
>others <br/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>
Test it Now

Output:

HTML Form Example

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

1. <form action="#">
2. <table>
3. <tr>
4. <td class="tdLabel"><label for="register_name" class="label">Enter
name:</label></td>
5. <td><input type="text" name="name" value="" id="register_n
ame" style="width:160px"/></td>
6. </tr>
7. <tr>
8. <td class="tdLabel"><label for="register_password" class="label">En
ter password:</label></td>
9. <td><input type="password" name="password" id="register_p
assword" style="width:160px"/></td>
10.</tr>
11. <tr>
12. <td class="tdLabel"><label for="register_email" class="label">Enter
Email:</label></td>
13. <td
14.><input type="email" name="email" value="" id="register_email" style
="width:160px"/></td>
15. </tr>
16.<tr>
17. <td class="tdLabel"><label for="register_gender" class="
label">Enter Gender:</label></td>
18. <td>
19. <input type="radio" name="gender" id="register_gendermal
e" value="male"/>
20.<label for="register_gendermale">male</label>
21. <input type="radio" name="gender" id="register_genderfem
ale" value="female"/>
22.<label for="register_genderfemale">female</label>
23. </td>
24.</tr>
25. <tr>
26. <td class="tdLabel"><label for="register_country" class="label">Sele
ct Country:</label></td>
27. <td><select name="country" id="register_country" style
="width:160px">
28. <option value="india">india</option>
29. <option value="pakistan">pakistan</option>
30. <option value="africa">africa</option>
31. <option value="china">china</option>
32. <option value="other">other</option>
33. </select>
34.</td>
35. </tr>
36.<tr>
37. <td colspan="2"><div align="right"><input type="subm
it" id="register_0" value="register"/>
38.</div></td>
39. </tr>
40.</table>
41. </form>

HTML Form Input Types

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

Following is a list of all types of <input> element of HTML.

type=" " Description

text Defines a one-line text input field

password Defines a one-line password input field

submit Defines a submit button to submit the form to server

reset Defines a reset button to reset all values in the form.

radio Defines a radio button which allows select one option.

checkbox Defines checkboxes which allow select multiple options form.

button Defines a simple push button, which can be programmed to perform a task on
event.

file Defines to select the file from device storage.

image Defines a graphical submit button.

HTML5 added new types on <input> element. Following is the list
of types of elements of HTML5

type=" " Description

color Defines an input field with a specific color.

date Defines an input field for selection of date.

datetime-local Defines an input field for entering a date without time zone.

email Defines an input field for entering an email address.

month Defines a control with month and year, without time zone.

number Defines an input field to enter a number.

url Defines a field for entering URL

week Defines a field to enter the date with week-year, without time zone.

search Defines a single line text field for entering a search string.

tel Defines an input field for entering the telephone number.

Following is the description about types of <input> element with

examples.

1. <input type="text">:
<input> element of type "text" are used to define a single-line input text
field.

Example:
1. <form>
2. <label>Enter first name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter last name</label><br>
5. <input type="text" name="lastname"><br>
6. <p><strong>Note:</strong>The default maximum cahracter lenght i
s 20.</p>
7. </form>
Test it Now

Output:

Input "text" type:

The "text"field defines a sinlge line input text field.

Enter first name

Enter last name

Note:The default maximum cahracter lenght is 20.

2. <input type="password">:
The <input> element of type "password" allow a user to enter the
password securely in a webpage. The entered text in password filed
converted into "*" or ".", so that it cannot be read by another user.

Example:
1. <form>
2. <label>Enter User name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>
Test it Now

Output:

Input "password" type:

The "password"field defines a sinlge line input password field to enter

the password securely.

Enter User name

Enter Password
3. <input type="submit">:
The <input> element of type "submit" defines a submit button to submit
the form to the server when the "click" event occurs.

Example:
1. <form action="[Link]
2. <label>Enter User name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>
Test it Now

Output:

Input "submit" type:

Enter User name

Enter Password

After clicking on submit button, this will submit the form to server and will
redirect the page to action [Link] will learn about "action" attribute in
later chapters

4. <input type="reset">:
The <input> type "reset" is also defined as a button but when the user
performs a click event, it by default reset the all inputted values.

Example:
1. <form>
2. <label>User id: </label>
3. <input type="text" name="user-id" value="user">
4. <label>Password: </label>
5. <input type="password" name="pass" value="pass"><br><br
>
6. <input type="submit" value="login">
7. <input type="reset" value="Reset">
8. </form>
Test it Now

Output:

Input "reset" type:

User id: Password:

Try to change the input values of user id and password, then when you
click on reset, it will reset input fields with default values.

5. <input type="radio">:
The <input> type "radio" defines the radio buttons, which allow choosing
an option between a set of related options. At a time only one radio
button option can be selected at a time.

Example:
1. <form>
2. <p>Kindly Select your favorite color</p>
3. <input type="radio" name="color" value="red"> Red <br>
4. <input type="radio" name="color" value="blue"> blue <br>
5. <input type="radio" name="color" value="green">green <br>
6. <input type="radio" name="color" value="pink">pink <br>
7. <input type="submit" value="submit">
8. </form>
Test it Now

Output:

Input "radio" type

Kindly Select your favorite color

Red
blue
green
pink

6. <input type="checkbox">:
The <input> type "checkbox" are displayed as square boxes which can be
checked or unchecked to select the choices from the given options.

Note: The "radio" buttons are similar to checkboxes, but there is an important
difference between both types: radio buttons allow the user to select only one
option at a time, whereas checkbox allows a user to select zero to multiple
options at a time.
Example:
1. <form>
2. <label>Enter your Name:</label>
3. <input type="text" name="name">
4. <p>Kindly Select your favourite sports</p>
5. <input type="checkbox" name="sport1" value="cricket">Crick
et<br>
6. <input type="checkbox" name="sport2" value="tennis">Tennis<br>

7. <input type="checkbox" name="sport3" value="football">Foot

ball<br>
8. <input type="checkbox" name="sport4" value="baseball">Baseball
<br>
9. <input type="checkbox" name="sport5" value="badminton">
Badminton<br><br>
10. <input type="submit" value="submit">
11. </form>
Test it Now

Output:

Input "checkbox" type

Registration Form
Enter your Name:
Kindly Select your favorite sports

Cricket
Tennis
Football
Baseball
Badminton

7. <input type="button">:
The <input> type "button" defines a simple push button, which can be
programmed to control a functionally on any event such as, click event.

Note: It mainly works with JavaScript.

Example:
1. <form>
2. <input type="button" value="Clcik me " onclick="alert('you are learni
ng HTML')">
3. </form>
Test it Now

Output:

Input "button" type.

Click the button to see the result:

Note: In the above example we have used the "alert" of JS, which you will learn in
our JS tutorial. It is used to show a pop window.

8. <input type="file">:
The <input> element with type "file" is used to select one or more files
from user device storage. Once you select the file, and after submission,
this file can be uploaded to the server with the help of JS code and file API.

Example:
1. <form>
2. <label>Select file to upload:</label>
3. <input type="file" name="newfile">
4. <input type="submit" value="submit">
5. </form>
Test it Now

Output:

Input "file" type.

We can choose any type of file until we do not specify it! The selected file
will appear at next to "choose file" option

Select file to upload:

9. <input type="image">:
The <input> type "image" is used to represent a submit button in the
form of image.

Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Input "image" type.</h2>
5. <p>We can create an image as submit button</p>
6. <form>
7. <label>User id:</label><br>
8. <input type="text" name="name"><br><br>
9. <input type="image" alt="Submit" src="[Link]" width="100
px">
10. </form>
11.
12. </body>
13. </html>

HTML5 newly added <input> types element

1. <input type="color">:
The <input> type "color" is used to define an input field which contains a
colour. It allows a user to specify the colour by the visual colour interface
on a browser.

Note: The "color" type only supports color value in hexadecimal format, and the
default value is #000000 (black).
Example:
1. <form>
2. Pick your Favorite color: <br><br>
3. <input type="color" name="upclick" value="#a52a2a"> Upclick
<br><br>
4. <input type="color" name="downclick" value="#f5f5dc"> Downclick
5. </form>
Test it Now

Output:

Input "color" types:

Pick your Favorite color:

Up-click

Down-click

Note:The default value of "color" type is #000000 (black). It only

supports color value in hexadecimal format.

2. <input type="date">:
The <input> element of type "date" generates an input field, which allows
a user to input the date in a given format. A user can enter the date by
text field or by date picker interface.

Example:
1. <form>
2. Select Start and End Date: <br><br>
3. <input type="date" name="Startdate"> Start date:<br><br>
4. <input type="date" name="Enddate"> End date:<br><br>
5. <input type="submit">
6. </form>
Test it Now

Output:

Input "date" type

Select Start and End Date:

Start date:

End date:

3. <input type="datetime-local">:
The <input> element of type "datetime-local" creates input filed which
allow a user to select the date as well as local time in the hour and minute
without time zone information.

Example:
1. <form>
2. <label>
3. Select the meeting schedule: <br><br>
4. Select date & time: <input type="datetime-local" nam
e="meetingdate"> <br><br>
5. </label>
6. <input type="submit">
7. </form>
Test it Now

Example:
1. <form>
2. <label>Enter your age: </label>
3. <input type="number" name="num" min="50" max="80">
4. <input type="submit">
5. </form>
Test it Now

Output:

Input "number" type

Enter your age:

Note:It will allow to enter number in range of 50-80. If you want to enter
number other than range, it will show an error.

7. <input type="url">:
The <input> element of type "url" creates an input filed which enables
user to enter the URL.

Example:
1. <form>
2. <label>Enter your website URL: </label>
3. <input type="url" name="website" placeholder="http://
[Link]"><br>
4. <input type="submit" value="send data">
5. </form>
Test it Now

Output:

Input "url" type

Enter your website URL:

8. <input type="week">:
The <input> type week creates an input field which allows a user to select
a week and year form the drop-down calendar without time zone.

Example:
1. <form>
2. <label><b>Select your best week of year:</b></label><br><br>
3. <input type="week" name="bestweek">
4. <input type="submit" value="Send data">
5. </form>
Test it Now

Output:

Input "week" type

Select your best week of year:

9. <input type="search">:
The <input> type "search" creates an input filed which allows a user to
enter a search string. These are functionally symmetrical to the text input
type, but may be styled differently.

Example:
1. <form>
2. <label>Search here:</label>
3. <input type="search" name="q">
4. <input type="submit" value="search">
5. </form>
Test it Now

Output:

Input "search" type

Search here:

10. <input type="tel">:

The <input> element of type ?tel? creates an input filed to enter the
telephone number. The "tel" type does not have default validation such as
email, because telephone number pattern can vary worldwide.

Example:
1. <form>
2. <label><b>Enter your Telephone Number(in format of xxx-xxx-
xxxx):</b></label>
3. <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]
{3}-[0-9]{4}" required>
4. <input type="submit"><br><br>
5. </form>
Test it Now

Output:

Input "tel" type

Enter your Telephone Number(in format of xxx-xxx-xxxx):

Note: Here we are using two attributes that are "pattern" and"required"
which will allow user to enter the number in given format and it is
required to enter the number in input field.

HTML form Attribute

HTML <form> element attributes
In HTML there are various attributes available for <form> element which
are given below:
HTML action attribute
The action attribute of <form> element defines the process to be
performed on form when form is submitted, or it is a URI to process the
form information.

The action attribute value defines the web page where information
proceed. It can be .php, .jsp, .asp, etc. or any URL where you want to
process your form.

Note: If action attribute value is blank then form will be processed to the same
page.
Example:
1. <form action="[Link]" method="post">
2. <label>User Name:</label><br>
3. <input type="text" name="name"><br><br>
4. <label>User Password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit">
7. </form>
Test it Now

Output:

Demo of action attribute of form element

User Name:

User Password

It will redirect to a new page "[Link]" when you click on

submit button

HTML method attribute

The method attribute defines the HTTP method which browser used to
submit the form. The possible values of method attribute can be:
o post: We can use the post value of method attribute when we want to
process the sensitive data as it does not display the submitted data in
URL.

Example:
1. <form action="[Link]" method="post">
o get: The get value of method attribute is default value while submitting
the form. But this is not secure as it displays data in URL after submitting
the form.

Example:
1. <form action="[Link]" method="get">

When submitting the data, it will display the entered data in the form of:

1. [Link]

HTML target attribute

The target attribute defines where to open the response after submitting
the form. The following are the keywords used with the target attribute.

o _self: If we use _self as an attribute value, then the response will display
in current page only.

Example:
1. <form action="[Link]" method="get" target="_self">
o _blank: If we use _blank as an attribute it will load the response in a new
page.

Example:
1. <form action="[Link]" method="get" target="_blank">

HTML autocomplete attribute

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

HTML enctype attribute

The HTML enctype attribute defines the encoding type of form-content
while submitting the form to the server. The possible values of enctype
can be:

o application/x-www-form-urlencoded: It is default encoding type if the

enctype attribute is not included in the form. All characters are encoded
before submitting the form.

Example:
1. <form action="[Link]" method="post" enctype="application/
x-www-form-urlencoded" >
o multipart/form-data: It does not encode any character. It is used when
our form contains file-upload controls.

Example:
1. <form action="[Link]" method="post" enctype="multipart/
form-data">
o text/plain (HTML5): In this encoding type only space are encoded into +
symbol and no any other special character encoded.

Example:
1. <form action="[Link]" method="post" enctype="text/plain" >

HTML novalidate attribute HTML5

The placeholder attribute can be used with text, password, email, and URL
values.

When the user enters the value, the placeholder will be automatically
removed.

Example:
1. <form>
2. <label>Enter your name</label><br>
3. <input type="text" name="uname" placeholder="Your name"
><br><br>
4. <label>Enter your Email address</label><br>
5. <input type="email" name="email" placeholder="example@g
[Link]"><br><br>
6. <label>Enter your password</label><br>
7. <input type="password" name="pass" placeholder="your pas
sword"><br><br>
8. <input type="submit" value="login">
9. </form>
Test it Now

Output:

Registration form
Enter your name
Enter your Email address

Enter your password

HTML disabled attribute

The HTML disabled attribute when applied then it disable that input field.
The disabled field does not allow the user to interact with that field.

The disabled input filed does not receive click events, and these input
value will not be sent to the server when submitting the form.

Example:
1. <input type="text" name="uname" disabled><br><br>
Test it Now

Output:

Registration form
Enter User name

Enter your Email address

Enter your password

HTML size attribute

The size attribute controls the size of the input field in typed characters.

Example:
1. <label>Account holder name</label><br>
2. <input type="text" name="uname" size="40" required><br><br>
3. <label>Account number</label><br>
4. <input type="text" name="an" size="30" required><br><br>
5. <label>CVV</label><br>
6. <input type="text" name="cvv" size="1" required><br><br>
Test it Now

Output:

Registration form with disbaled attribute

Account holder name

Account number

CVV

HTML form attribute

HTML form attribute allows a user to specify an input filed outside the
form but remains the part of the parent form.

Example:
1. User email: <br><input type="email" name="email" form="fcont
rol" required><br>
2. <input type="submit" form="fcontrol">
Test it Now

Output:

User Name:

User password:

The email field is outside the form but still it will remain part of the form

User email:

HTML style using CSS

Let's suppose we have created our web page using a simple HTML code,
and we want something which can present our page in a correct format,
and visibly attractive. So to do this, we can style our web page with CSS
(Cascading Stylesheet) properties.

CSS is used to apply the style in the web page which is made up of HTML
elements. It describes the look of the webpage.

CSS provides various style properties such as background color, padding,

margin, border-color, and many more, to style a webpage.

Each property in CSS has a name-value pair, and each property is

separated by a semicolon (;).

Note: In this chapter, we have given a small overview of CSS. You will learn
everything in depth about CSS in our CSS tutorial.
Example:
1. <body style="text-align: center;">
2. <h2 style="color: red;">Welcome to javaTpoint</h2>
3. <p style="color: blue; font-size: 25px; font-style: italic ;">This is
a great website to learn technologies in very simple way. </p>
4. </body>
Test it Now

In the above example, we have used a style attribute to provide some

styling format to our code.

Output:

Welcome to javaTpoint
This is a great website to learn technologies in
very simple way.

Three ways to apply CSS

To use CSS with HTML document, there are three ways:

o Inline CSS: Define CSS properties using style attribute in the HTML
elements.
o Internal or Embedded CSS: Define CSS using <style> tag in <head>
section.
o External CSS: Define all CSS property in a separate .css file, and then
include the file with HTML file using tag in section.

Inline CSS:
Inline CSS is used to apply CSS in a single element. It can apply style
uniquely in each element.

To apply inline CSS, you need to use style attribute within HTML element.
We can use as many properties as we want, but each property should be
separated by a semicolon (;).

Example:
1. <h3 style="color: red;
2. font-style: italic;
3. text-align: center;
4. font-size: 50px;
5. padding-top: 25px;">Learning HTML using Inline CSS</h3>
Test it Now

Output:

Learning HTML using

Inline CSS
Internal CSS:
An Internal stylesheets contains the CSS properties for a webpage in
<head> section of HTML document. To use Internal CSS, we can use class
and id attributes.

We can use internal CSS to apply a style for a single HTML page.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. /*Internal CSS using element name*/
6. body{background-color:lavender;
7. text-align: center;}
8. h2{font-style: italic;
9. font-size: 30px;
10. color: #f08080;}
11. p{font-size: 20px;}
12. /*Internal CSS using class name*/
13. .blue{color: blue;}
14. .red{color: red;}
15. .green{color: green;}
16. </style>
17. </head>
18. <body>
19. <h2>Learning HTML with internal CSS</h2>
20. <p class="blue">This is a blue color paragraph</p>
21. <p class="red">This is a red color paragraph</p>
22. <p class="green">This is a green color paragraph</p>
23. </body>
24.</html>
Test it Now

Note: In the above example, we have used a class attribute which you will learn in
the next chapter.

External CSS:
An external CSS contains a separate CSS file which only contains style
code using the class name, id name, tag name, etc. We can use this CSS
file in any HTML file by including it in HTML file using <link> tag.

If we have multiple HTML pages for an application and which use similar
CSS, then we can use external CSS.

There are two files need to create to apply external CSS

o First, create the HTML file

o Create a CSS file and save it using the .css extension (This file only will
only contain the styling code.)
o Link the CSS file in your HTML file using tag in header section of HTML
document.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <link rel="stylesheet" type="text/css" href="[Link]">
5. </head>
6. <body>
7. <h2>Learning HTML with External CSS</h2>
8. <p class="blue">This is a blue color paragraph</p>
9. <p class="red">This is a red color paragraph</p>
10. <p class="green">This is a green color paragraph</p>
11. </body>
12.</html>
Test it Now

CSS file:

body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}

.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}
Commonly used CSS properties:

Properties-name Syntax Description

background-color background-color:red; It defines the background color of that element

color color: lightgreen; It defines the color of text of an element

padding padding: 20px; It defines the space between content and t

border.

margin margin: 30px; margin- It creates space around an element.

left:

font-family font-family: cursive; Font-family defines a font for a particu

element.

Font-size font-size: 50px; Font-size defines a font size for a particu

element.

text-align text-align: left; It is used to align the text in a selected position

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

1. <ul>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now

Output:

o HTML
o Java
o JavaScript
o SQL

ul type="circle"
1. <ul type="circle">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now

Output:

o HTML
o Java
o JavaScript
o SQL

ul type="square"
1. <ul type="square">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now

Output:

o HTML
o Java
o JavaScript
o SQL

ul type="none"
1. <ul type="none">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now

Output:

o HTML
o Java
o JavaScript
o SQL

Note: The type attribute is not supported in HTML5, instead of type you can use
CSS property of list-style-type. Following is the example to show the CSS
property for ul tag.
1. <ul style="list-style-type: square;">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

Code:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2>The type attribute with CSS property</h2>
7. <ul style="list-style-type: square;">
8. <li>HTML</li>
9. <li>Java</li>
10. <li>JavaScript</li>
11. <li>SQL</li>
12. </ul>
13. </body>
14.</html>
Test it Now

Output:

HTML <var> tag

HTML <var> tag is a phrase tag which is used to define the variable for a
mathematical equation, or in the programming context.

The content within <var> tag renders in italic font in most of the
browsers, but it can be overridden using appropriate CSS.

Following are some related elements of <var> tag, which can also be
used for the same context:

o <code>: To determine the computer programming code.

o <kbd>: To determine the keyboard input.
o <samp>: To determine the sample output.

Syntax
1. <var>........</var>

Following are some specifications about the HTML <var> tag

Display Inline

Start tag/End tag Start and End tag

Usage Formatting

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML var tag</title>
5. </head>
6. <body>
7. <h2>Example of var tag</h2>
8. <p>Following is equation for distributive law</p>
9. <p><var>a</var>(<var>b</var>+<var>c</
var>)=<var>ab</var>+<var>ac</var></p>
10.</body>
11. </html>
Test it Now

Output:
Attribute:
Tag-specific attributes:
The <var> tag does not contain any specific attribute in HTML.

Global attribute:
The <var> tag supports the Global attributes in HTML.

Event attribute:
The <var> tag supports the Event attributes in HTML.

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 webM 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.

1. <video controls>
2. <source src="movie.mp4" type="video/mp4">
3. Your browser does not support the html video tag.
4. </video>
Test it Now

Let's see the example to play ogg file using HTML video tag.

1. <video controls>
2. <source src="[Link]" type="video/ogg">
3. Your browser does not support the html video tag.
4. </video>

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<video> Yes Yes Yes Yes Yes

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

Attribute Description

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 n
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
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.

1. <video width="320" height="240" controls autoplay loop>

2. <source src="movie.mp4" type="video/mp4">
3. Your browser does not support the html video tag.
4. </video>
Test it Now

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

1. <svg width="100" height="100">

2. <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4"
fill="red" />
3. </svg>

Here, we are using cx, cy and r attributes of circle tag. These attributes
can't be used with svg rect tag.

Test it Now
Output:

HTML SVG Rectangle Example

Let's see the example to draw rectangle by svg tag.

1. <svg width="200" height="100">

2. <rect width="200" height="100" stroke="yellow" stroke-
width="4" fill="red" />
3. </svg>

Here, we are using width and height attributes of rect tag.

Test it Now

Output:

HTML SVG polygon Example

Let's see the example to draw polygon by svg tag.

1. <svg height="210" width="500">

2. <polygon points="100,10 40,198 190,78 10,78 160,198"
3. style="fill:red;stroke:yellow;stroke-width:5;fill-rule:nonzero;" />
4. </svg>

Here, we are using points attribute of polygon tag.

Test it Now

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 Canvas 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 built-in 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.

1. <canvas id = "mycanvas" width ="200" height ="100"> </

canvas>

HTML 5 Canvas Tag Example

1. <canvas id="myCanvas1" width="300" height="100" style="borde
r:2px solid;">
2. Your browser does not support the HTML5 canvas tag.
3. </canvas>
Test it Now

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.

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<canvas> Yes Yes Yes Yes Yes

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.

1. <canvas id="myCanvas" width="250" height="150" style="border:

1px solid #c3c3c3;">
2. Your browser does not support the HTML5 canvas tag.
3. </canvas>
4. <script>
5. var c = [Link]("myCanvas");
6. var cctx = [Link]("2d");
7. [Link] = "#FF0000";
8. [Link](0,0,200,100);
9. </script>

Output:

Drawing Line on Canvas

If you want to draw a straight line on the canvas, you can use the
following two methods.

ADVERTISEMENT
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.

1. <canvas id="myCanvasLine" width="200" height="100" style="bo

rder:1px solid #d3d3d3;">
2. Your browser does not support the HTML5 canvas tag.</canvas>
3. <script>
4. var c = [Link]("myCanvasLine");
5. var cctx = [Link]("2d");
6. [Link](0,0);
7. [Link](200,100);
8. [Link]();
9. </script>

Output:

Drawing Circle on Canvas

If you want to draw a circle on the canvas, you can use the arc() method:

1. arc(x, y, r, start, stop)

To sketch circle on HTML canvas, use one of the ink() methods, like
stroke() or fill().

1. <canvas id="myCanvasCircle" width="200" height="100" style="b

order:1px solid #d3d3d3;">
2. Your browser does not support the HTML5 canvas tag.</canvas>
3. <script>
4. var c = [Link]("myCanvasCircle");
5. var cctx = [Link]("2d");
6. [Link]();
7. [Link](95,50,40,0,2*[Link]);
8. [Link]();
9. </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.

1. <canvas id="myCanvasText1" width="300" height="100" style="b

order:1px solid #d3d3d3;">
2. Sorry! Your browser does not support the HTML5 canvas tag.</canvas>
3. <script>
4. var c = [Link]("myCanvasText1");
5. var cctx = [Link]("2d");
6. [Link] = "30px Arial";
7. [Link]("Hello JavaTpoint",10,50);
8. </script>

Output:

Let's see strokeText() method example.

1. <canvas id="myCanvasText2" width="300" height="100" style="b

order:1px solid #d3d3d3;">
2. Sorry!Upgrade your browser. It does not support the HTML5 canvas tag
.</canvas>
3. <script>
4. var c = [Link]("myCanvasText2");
5. var cctx = [Link]("2d");
6. [Link] = "30px Arial";
7. [Link]("Hello JavaTpoint",10,50);
8. </script>

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.

1. <script>
2. function allowDrop(ev) {[Link]();}
3. function drag(ev) {[Link]("text/html", [Link])
;}
4. function drop(ev) {
5. [Link]();
6. var data = [Link]("text/html");
7. [Link]([Link](data));
8. }
9. </script>
10.<p>Drag the javatpoint image into the rectangle:</p>
11. <div id="div1" style="width:350px;height:100px;padding:10p
x;border:1px solid #aaaaaa;"
[Link]="drop(event)" ondragover="allowDrop(event)"></div>
13. <br>
14.<img id="drag1" src="/htmlpages/images/[Link]" alt="javatpoint
image"
15. 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.

Test it Now

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:

1. <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.

HTML5 Geolocation
The Geolocation is one of the best HTML5 API which is used to identify the
user's geographic location for the web application.

This new feature of HTML5 allows you to navigate the latitude and
longitude coordinates of the current website's visitor. These coordinates
can be captured by JavaScript and send to the server which can show your
current location on the website

Most of the geolocation services use Network routing addresses such as IP

addresses, RFID, WIFI and MAC addresses or internal GPS devices to
identify the user's location.

Tips: To completely understand the concept of Geolocation API you must have
some knowledge of JavaScript.

User privacy:
The user's location is the privacy concern, so geolocation API protects the
user's privacy by taking the user's permission before getting the location.
Geolocation API sends a notification prompt box which user can allow or
deny, and if the user allows then only his location will be identified.

Note: Your browser must support the geolocation to use it for the web application.
Although most of the browsers and mobile devices support the Geolocation API,
and this API is only available for HTTPS request.

Geolocation object
The Geolocation API is work with the [Link] object. Its
read-only property returns a Geolocation object which identifies the
location of the user and can generate a customized result based on user
location.

Syntax:
1. geo=navigator. geolocation;
If this object is present, then you can get the geolocation services.

Geolocation Methods
The Geolocation API uses three methods of Geolocation interface which
are given following:

Methods Description

getCurrentPositio It identifies the device or the user's current location and returns a positi
n() object with data.

watchPosition() Return a value whenever the device location changes.

clearWatch() It cancels the previous watchPosition() call

Checking for browser support:

The geolocation property of [Link] object helps to
determine the browser support for the Geolocation API.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Geolocation API</title>
5. </head>
6. <body>
7. <h1>Find your Current location</h1>
8. <button onclick="getlocation()">Click me</button>
9. <div id="location"></div>
10.<script>
11. var x= [Link]("location");
12.

13. function getlocation() {

14. if([Link]){
15. alert("your browser is supporting Geolocation API")
16. }
17. else
18. {
19. alert("Sorry! your browser is not supporting")
20. }
21. }
22.</script>
23. </body>
24.</html>
Test it Now

Getting the User's current position:

To get the user's current location, getCurrentPosition() method of the
[Link] object is used. This method accepts three
parameters:

o success: A success callback function to get the location of the user

o error: An error callback function which takes "Position Error" object as
input.
o options: It defines various options for getting the location.

The below example will return the longitude and latitude of the visitor's
current location.

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Geolocation API</title>
5. </head>
6. <body>
7. <h1>Find your Current location</h1>
8. <button onclick="getlocation()">Click me</button>
9. <div id="location"></div>
10.<script>
11. var x= [Link]("location");
12. function getlocation() {
13. if([Link]){
14. [Link](showPosition)
15. }
16. else
17. {
18. alert("Sorry! your browser is not supporting")
19. }}
20.
21. function showPosition(position){
22. var x = "Your current location is (" + "Latitude: " + [Link]
tude + ", " + "Longitude: " + [Link] + ")";
23. [Link]("location").innerHTML =
x;
24. }
25. </script>
26.</body>
27. </html>
Test it Now

Explanation:
o First checking the browser support
o Getting current position with getCurrentPosition()
o Getting latitude and longitude values with showPosition() method which is
call back method of getCurrentPosition().

Handling Errors and Rejections: Using an Error

callback function
The second parameter of getCurrentPosition is an error Callback function.
It is an optional parameter and used to handle errors and user rejection
while getting the user's location.

Following are the possible options for invoking the error call back function:

o Unknown random error Occurred

o If the user has denied for sharing location
o Location information is not available
o Request for location is timed-out.

Example
1. function showError(error) {
2. switch([Link]){
3. case error.PERMISSION_DENIED:
4. alert("User denied the request for Geolocation API.");
5. break;
6. case error.POSITION_UNAVAILABLE:
7. alert("USer location information is unavailable.");
8. break;
9. case [Link]:
10. alert("The request to get user location timed out.");
11. break;
12. case error.UNKNOWN_ERROR:
13. alert("An unknown error occurred.");
14. break;
15. }
16. }
Test it Now

Displaying location on Google Map

Till now, we have seen how to show your location using latitude and
longitude values, but it is not sufficient. Hence we can also show the exact
location on Google map with this API.

Following example showing the location using Google Map.

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Geolocation API</title>
5. </head>
6. <body>
7. <h2>Find Your Location in below Map</h2>
8. <button onclick="getlocation();"> Show Position</button>
9. <div id="demo" style="width: 600px; height: 400px; margin-
left: 200px;"></div>
10.
11. <script src="[Link]
sensor=false"> </script>
12.
13. <script type="text/javascript">
14. function getlocation(){
15. if([Link]){
16. [Link](showPos, showErr);
17. }
18. else{
19. alert("Sorry! your Browser does not support Geoloca
tion API")
20. }
21. }
22. //Showing Current Poistion on Google Map
23. function showPos(position){
24. latt = [Link];
25. long = [Link];
26. var lattlong = new [Link](latt, long);
27. var myOptions = {
28. center: lattlong,
29. zoom: 15,
30. mapTypeControl: true,
31. navigationControlOptions: {style:[Link]
[Link]}
32. }
33. var maps = new [Link]([Link]
entById("demo"), myOptions);
34. var markers =
35. new [Link]({position:lattlong, map:maps
, title:"You are here!"});
36. }
37.
38. //Handling Error and Rejection
39. function showErr(error) {
40. switch([Link]){
41. case error.PERMISSION_DENIED:
42. alert("User denied the request for Geolocation API.");
43. break;
44. case error.POSITION_UNAVAILABLE:
45. alert("USer location information is unavailable.");
46. break;
47. case [Link]:
48. alert("The request to get user location timed out.");
49. break;
50. case error.UNKNOWN_ERROR:
51. alert("An unknown error occurred.");
52. break;
53. }
54. } </script>
55. </body>
56.</html>
Test it Now

To learn more about Google Maps JavaScript API, you can click on the
following link:

[Link]

Location properties
The getCurrentPosition() method of Geolocation API returns callback
methods which retrieve the user location information. This callback
method returns a Position Object which contains all location information
and specifies different properties. It always returns latitude and longitude
properties, but the following table describes some other properties of
Position object.

Properties Description

[Link] It returns latitude of user location as a decimal number.

[Link] It returns longitude of user location as a decimal number.

[Link] It returns altitude in meters above the sea level (Only if available).
[Link] It returns the accuracy of the user's position.

[Link] It returns the altitude accuracy of user location. (If available)

[Link] It returns headings as degree clockwise from North. (If available)

[Link] It returns the speed in meter per seconds. (If available).

timestamp It returns data or time of response. (If available).

Watching the current location:

If we want to know the user location while he is moving and want accurate
location at every changed position, then it can be achieved by using
watchPosition() callback function.

This function has all three parameters which getCurrentPosition()

contains.

Syntax:
1. var id = [Link](success[, error[, option
s]])

The watchPosition() method returns an ID that can be used to uniquely

identifying the user?s position, and this ID can also be used with
clearWatch() method to stop watching the location.

Syntax:
1. [Link](id);

Browser Support:

API Chrome IE Firefox Opera Safari

Geolocation 5.0 - 49.0 (http) 9.0 3.5 16.0 5.0

50.0 (https)

HTML Web Storage

The Web Storage is one of the great features of HTML5. With the Web
Storage feature, web applications can locally store data within the
browser on the client side. It stores data in the form of key/value pair on
the browser. Web Storage sometimes also known as DOM storage.

Storing data with the help of web storage is similar to cookies, but it is
better and faster than cookies storage.

In compared to cookies Web Storage has Following Advantages:

o Web Storage can use storage space upto 5MB per domain. (The browser
software may prompt the user if the space limit is reached).
o It will not send data to the server side, hence it is faster than cookies
storage.
o The data stored by local Storage never expires, but cookies data expires
after some time or session.
o Web Storage is more secure than cookies.

Types of Web Storage

There are two types of web storage with different scope and lifetime.

o Local Storage: Local Storages uses [Link] object which

stores data and available for every page. But data persist even if the
browser is closed and reopened (Stores data with no Expiration).
o Session Storage: Session Storage uses [Link] object
which stores data for one session and data will be lost if the window or
browser tab will be closed.

Note: For both storage type, web storage data will not be available for different
browsers, and Storage size may vary from browser to browser.

Browser support for Web Storage

Before learning for web Storage we must check whether our browser is
supporting the web Storage or not. So you can check by executing the
following code:

1. <!DOCTYPE html>
2. <html>
3. <body>
4. <div id="result"></div>
5. <script>
6. if(typeof(Storage)!=="undefined") {
7. [Link]("result").innerHTML = "Hey, Your brow
ser supports the Web Storage.";
8. }
9. else{
[Link]("result").innerHTML = "Sorry, your browser doe
s not support Web Storage";
11. }
12.</script>
13. </body>
14.</html>
Test it Now

The localStorage Object

The localStorage object stores data locally within the browser. The data
stored by localStroage object does not have any expiration date. Hence
the stored data will not be deleted if the browser is closed or reopened.

Each piece of data is stored in simple key-value pairs. The key/values are
always stored as String, and can be accessed with [Link]()
and [Link]() methods.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Web Storage API</title>
5. <style>
6. body{
7. color: green;
8. text-align: center;
9. font-size: 30px;
10. margin-top: 30px;
11. font-style: italic;
12. }
13. </style>
14.</head>
15. <body>
16.<script>
17. if(typeof(Storage)!=="undefined") {
18. [Link]("name","Harshita");
19. [Link]("Country", "India");
20. [Link]("Hi"+" "+[Link]+" "+"from" +" "+ localStor
[Link]);
21. }
22. else{
23. alert("Sorry! your browser is not supporting the browser")
24. }
25. </script>
26.</body>
27. </html>
Test it Now

Example Explanation:
o In the above example, we have used typeof(Storage)!
=="undefined" to check browser support.
o [Link]("name","Harshita") is used to set the key and
value data where "name" is key and "Harshita" is value.
o The [Link] is used to retrieve the values using key. You can
also use another method:
[Link] to retrieve the value.

Note: You can check the local storage items in the form of key/value pair by
inspecting elements on the web page and then go to the Application option where
you will find the local storage and Session storage and can check stored items in
the list.

You can check the following screenshot with key/value pairs.

Example 2:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: pink;
7. height: 50px;
8. }
9. </style>
10.</head>
11. <body>
12. <h2>Example of counter Using Local Storage</h2>
13. <button onclick="counter();">click me</button>
14. <div id="output">See the result here :</div>
15. <script type="text/javascript">
16. function counter() {
17. if([Link]){
18. [Link]=Number([Link])+1;
19. }
20. else{
21. [Link]=1;
22. }
23. [Link]('output').innerHTML= "You have cl
icked counter button for"+ " "+ [Link] +" "+"times";
24.}
25. </script>
26. <p>click the counter button to see the total counts. </p>
27. <p>If you will close the browser still it will not reset. </p>
28.</body>
29. </html>
Test it Now

Example Explanation:
In the above example, we have shown a counter which will increase as
you will click on the counter button.

We have used [Link] to set a counter

Note: It will show the total number of count even if you close the browser.

The sessionStorage Object:

The sessionStorage object is same as the localStorage object, but the
difference is that it stores data only for one session. If you close the
browser, then data will be lost or deleted.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: pink;
7. height: 50px;
8. }
9. </style>
10.</head>
11. <body>
12. <h2>Example of counter Using Session Storage</h2>
13. <button onclick="counter();">click me</button>
14. <div id="output">See the result here:</div>
15. <script type="text/javascript">
16. function counter() {
17. if([Link]){
18. [Link]=Number([Link])+1;
19. }
20. else{
21. [Link]=1;
22. }
23. [Link]('output').innerHTML= "You have cl
icked counter button for"+ " "+ [Link] +" "+"times";
24.}
25. </script>
26. <p>Click the counter button to see the total counts. </p>
27. <p>Now, if you close the browser then it will reset to initial v
alue. </p>
28.</body>
29. </html>
Test it Now

Example Explanation:
The above example is working same as local storage counter example,
but the difference is we have used [Link] for session
storage.

Here the counter will reset if you close the browser and it will start from
the initial value.

Tips: You can make these examples more attractive and useful by using jQuery
with JavaScript.

Remove Web Storage:

As we have seen the session storage data will automatically be deleted,
when you close the browser but the data saved by local storage will
remain in the browser even if you close it.

Hence to delete the local storage data, you need to call two methods:

o [Link]('key'): If you want to delete the value on a

particular key, then you can use the "key," and that value will be deleted.
o [Link](): If you want to delete or clear all settings with
key/value pair, then you can call this method.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Web Storage API</title>
5. <style>
6. body{
7. color: green;
8. text-align: center;
9. font-size: 30px;
10. margin-top: 30px;
11. font-style: italic;
12. }
13. </style>
14.</head>
15. <body>
16.<button onclick="remove();">Remove item</button>
17. <div id="output"></div>
18.
19. <script>
20. if(typeof(Storage)!=="undefined") {
21. [Link]("name","Harshita");
22. [Link]("Country", "India");
23. [Link]('output').innerHTML= "Hii, my na
me is"+ " "+ [Link] +" "+"and i belongs to"+" "+localSt
[Link];
24. }
25. else{
26. alert("Sorry! your browser is not supporting the browser")
27. }
28. function remove() {
29. [Link]("name");
30. [Link]('output').innerHTML= "Hii, my name is"+ " "+
[Link] +" "+"and i belongs to"+" "+[Link];
31. }
32.</script>
33. </body>
34.</html>
Test it Now

Example Explanation:
In the above example we have
used [Link]("name"); Which will delete the value
for the key "name".

You can remove id for a particular key, or you can also remove all data
using [Link]() method.

Browser Support:

API Chrome IE Firefox Opera Safari

Web Storage Yes Yes Yes Yes Yes

HTML5 Web Workers

The Web Workers are the separate JavaScript code which runs in the
background of the web page without affecting the user Interface.

What is Web Worker?

Everyone wants a website or application which work fast and can execute
multiple operations simultaneously without affecting the performance of
the page. However, sometimes we experience some delay response or
degraded performance of page while executing some large operations. So
this problem can be solved using the Web Workers.

Web Workers are the multithreaded object which can execute multiple
JavaScript in parallel without affecting the performance of the application
or webpage.

Following are some key features of the Web Workers:

o Web-workers are threaded JavaScript.

o Web-workers are the kernel-level thread.
o Web-workers requires more space and CPU time.
o Web-workers enhances the speed of a website.
o Web-worker executes codes on the client side (not server-side).
o Web worker threads communicate with each other using postMessage()
callback method

Tips: Before working with HTML Web Workers you must have knowledge of
JavaScript as the Web Worker depends on JavaScript.

Types of Web Workers:

In HTML5 Web Workers are of two types:

o Dedicated Web Workers:

The dedicated worker can be accessed by only one script which has called
it. The dedicated worker thread end as its parent thread ends. Dedicated
workers are only used by one or single main thread.

o Shared Web Workers:

It can be shared by multiple scripts and can communicate using the port.
Shared workers can be accessed by different windows, iframes or workers.

Note: In this section, we will use dedicated Web Workers.

Web Workers Browser Support:

Before learning the web Workers first, we need to check about the
browser support. So following is the code which checks whether your
browser is supporting or not.

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Web Worker API</title>
5. </head>
6. <body>
7. <h2>Example to check the browser support of Web Workers</h2>
8. <div id="supported"></div>
9. <div id="unsupported"></div>
10.<button onclick="worker();">click me</button>
11. <script type="text/javascript">
12. function worker()
13. {
14. if(typeof(Worker)!=="undefined"){
15. [Link]("supported").innerHTML="Supp
orting the browser";
16. }
17. else
18. {
19. [Link]("unsupported").innerHTML="N
ot supporting";}
20. }
21. </script>
22.</body>
23. </html>
Test it Now

Creation of Web worker file:

To create a Web Worker file we need to create an external JavaScript file.

Here we have created a web worker file for calculating the square of the
number. And saved it with the name "[Link]".

Creating the Web Worker Object:

In above "[Link]" file, we have created the JS file for web Worker now it
needs to call on an HTML file. To create the web worker object, you need
to call the Worker() constructor.
Following is the syntax to call and create the object of Web Worker:

1. var worker= new Worker('[Link]');

Sending messages between the Worker thread and

main thread:
All the communication of Worker thread depends on
the postMessage() method and onmessage event handler.

Terminating the Web Worker:

If you want to immediately terminate the currently running worker in the
main thread, then you can terminate it by calling the terminate() method
of Web Worker. Here is the syntax for web worker termination:

1. [Link]();

Web Worker can be terminate in worker thread also by calling

the close() method.

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .div1{
6. margin-left: 350px;
7. }
8. </style>
9. </head>
10.<body>
11. 
12.<div class="div1">
13. <h2>Example of Web Worker</h2>
14.<label>Enter the number to find the square</label>
15. <br><input type="text" name="num" id="num"><br>
16.<br><button id="submit">Submit</button>
17. <button id="other">Wait</button>
18.<div id="text"></div>
19. </div>
20.<script type="text/javascript">
21.
[Link]("other").onclick=function() {
23. alert("Hey! Web Worker is working, and you can wait for the
result.");
24.}
25.
26.//Web-worker Code.....
27. var worker= new Worker("[Link]");
28. [Link]= function(event){
29. [Link]("text").innerText= [Link];}
30. [Link]("submit").onclick= function(){
31. var num= [Link]("num").value;
32. [Link](num);
33. }
34.</script>
35. <p><b>Note:Try to enter a big number, and then click on oth
er button. The page will respond properly</b></p>
36.</body>
37. </html>
Test it Now

[Link] file:

1. onmessage=function(event){
2. var num= [Link];
3. var sqr=num*num;
4. var result="";
5. for(var i=1;i<=sqr; i++)
6. {
7. result= "Sqaure result is:"+ " "+i;
8. }
9. postMessage(result);
10.}
Example Explanation:
In the above example in HTML file we have used
o var worker= new Worker("[Link]"); To create the web Worker
object.
o [Link]= function(event): It is used to send the message
between the main thread and Worker thread.
o [Link](num); This is the method used to communicate
between the Worker thread and main thread. Using this method Worker
thread return the result to the main thread.

HTML5 Server-Sent Event

The HTML5 server-sent event enables a browser to receive automatic
updates and data from a server via HTTP connections.

What are the Server-Sent Events?

Whenever we perform some event and send it to the server such as by
submitting the form to the server. So such type of event which flows from
web browser to web-server are called as a client-side events. But if the
server sent some updates or information to the browser, then such events
are called server-sent events. Hence A server sent event occurs when
the browser automatically updated from the Server.

The Server-sent events are mono-directional (always come from server to

client). Or it may be called as one-way messaging.

Receiving events from the server

The Server sent event uses the EventSource object to receive events
from the server. It specifies the URI of the script which generates the
events.

Example:
1. if(typeof(EventSource) !== "undefined") {
2. var source = new EventSource("[Link]");
3. [Link] = function(event) {
4. [Link]("output").innerHTML += [Link] + "<br
>";
5. }
Code Explanation:
o First, create the new EventSource object, and define the URI of
the page which sends server updates. Here we have taken
[Link] for sending the updates to the web browser.
o Each time when an update occurs from the server, then the onmessage
event occurs and print the message on the web page.
o The occurred message can be displayed on div using id "output".

Check browser support for Server-sent Event

First we need to check the browser support for server-sent event. So to
check the browser support for Server-sent event we will check the
EventSource object is true or not. If it is true then it will give alert for
supporting else it will give alert for not supporting.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML5 SSE API</title>
5. </head>
6. <body>
7. <div id="output"></div>
8. <script type="text/javascript">
9.
10. if(typeof(EventSource)!=="undefined"){
11. alert("Hey! Your browser is supporting.");
12. }
13. else{
14. alert("Sorry! Your browser is not supporting.");
15. }
16. </script>
17. </body>
18.</html>
Test it Now

Sending events from the server:

To work with server-sent, we need a server which can send data updates
to the web browser. For this, we need to create a file in ASP, PHP or any
dynamic language.

Following is the example to show the server updates:

[Link]:

Example:
1. <?php
2. header('Content-Type: text/event-stream');
3. header('Cache-Control: no-cache');
4. /Get the current time of server
5. $time = date('r');
6. echo "data: The Current Server time is: {$time}\n\n";
7. flush();
8. ?>
Code Explanation:
o In the first line of the code, we have set the "Content-type" header to
"text/event-stream". It is required for server-side event standard.
o The second line informs the server to turn off the caching else the server
updates may be cached.
o echo "data: The Current Server time is: {$time}\n\n"; It creates the output
of data to send, and it must always start with data: .
o Then, we have used the flush () method, which makes sure that data is
sent right away to the web page.

Complete Example:
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style type="text/css">
5. div{
6. text-align: center;
7. background-color: #98f5ff;
8. }
9. </style>
10.</head>
11. <body>
12.
13. <h1 align="center">Dynamic Server Updates</h1>
14.<div id="output"></div>
15. <script>
[Link](typeof(EventSource) !== "undefined") {
17. var source = new EventSource("[Link]");
18. [Link] = function(event) {
19. [Link]("output").innerHTML += event.d
ata + "<br>";
20. }
21. } else {
22. alert("Sorry, your browser does not support the server sent updates");}
23. </script>
24.</body>
25. </html>
Test it Now

Note: To execute the above code on your browser, you need a server installed on
your system, and then run this on localhost. You can install any server such as
MYSQL, XAMPP, etc.

Browser Support:

API Chrome IE Firefox Opera Safari

SSE 6.0 Not Supported 6.0 11.5 5.0

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

CornflowerBlue #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

khaki1 #fff68f

khaki2 #eee685

khaki3 #cdc673

khaki4 #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 Color Code

NavajoWhite1 #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

SpringGreen1 #00ff7f

SpringGreen2 #00ee76

SpringGreen3 #00cd66

SpringGreen4 #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 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

Why SVG is preferred over other image formats?

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 Lists
HTML Lists are used to specify lists of information. All lists may contain
one or more list elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

Note: We can create a list inside another list, which will be termed as nested List.

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by
default. It is known as numbered list also. The ordered list starts with
<ol> tag and the list items start with <li> tag.

1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>
Test it Now

Output:

1. Aries
2. Bingo
3. Leo
4. Oracle

Click here for full details of HTML ordered list. HTML Ordered List

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.

1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>
Test it Now

Output:

o Aries
o Bingo
o Leo
o Oracle

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

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and
XHTML. It is also known as definition list where entries are listed like a
dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary,
list of terms or other name-value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10.</dl>
Test it Now

Output:

Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.

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

HTML Nested List

A list within another list is termed as nested list. If you want a bullet list
inside a numbered list then such type of list will called as nested list.

Code:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Nested list</title>
5. </head>
6. <body>
7. <p>List of Indian States with thier capital</p>
8. <ol>
9. <li>Delhi
10. <ul>
11. <li>NewDelhi</li>
12. </ul>
13. </li>
14. <li>Haryana
15. <ul>
16. <li>Chandigarh</li>
17. </ul>
18. </li>
19. <li>Gujarat
20. <ul>
21. <li>Gandhinagar</li>
22. </ul>
23. </li>
24. <li>Rajasthan
25. <ul>
26. <li>Jaipur</li>
27. </ul>
28. </li>
29. <li>Maharashtra
30. <ul>
31. <li>Mumbai</li>
32. </ul>
33. </li>
34. <li>Uttarpradesh
35. <ul>
36. <li>Lucknow</li></ul>
37. </li>
38.</ol>
39. </body>
40.</html>
Test it Now

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

o Numeric Number (1, 2, 3)

o Capital Roman Number (I II III)
o Small Romal Number (i ii iii)
o Capital Alphabet (A B C)
o Small Alphabet (a b c)

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

tag.

Type Description

Type "1" This is the default type. In this type, the list items are numbered with numbers.

Type "I" In this type, the list items are numbered with upper case roman numbers.

Type "i" In this type, the list items are numbered with lower case roman numbers.

Type "A" In this type, the list items are numbered with upper case letters.
Type "a" In this type, the list items are numbered with lower case letters.

HTML Ordered List Example

Let's see the example of HTML ordered list that displays 4 topics in
numbered list. Here we are not defining type="1" because it is the default
type.

1. <ol>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

1. HTML
2. Java
3. JavaScript
4. SQL

ol type="I"
Let's see the example to display list in roman number uppercase.

1. <ol type="I">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

I. HTML
II. Java
III. JavaScript
IV. SQL

ol type="i"
Let's see the example to display list in roman number lowercase.

1. <ol type="i">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

i. HTML
ii. Java
iii. JavaScript
iv. SQL

ol type="A"
Let's see the example to display list in alphabet uppercase.

1. <ol type="A">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:
ADVERTISEMENT

A. HTML
B. Java
C. JavaScript
D. SQL

ol type="a"
Let's see the example to display list in alphabet lowercase.

1. <ol type="a">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

a. HTML
b. Java
c. JavaScript
d. SQL

start attribute
The start attribute is used with ol tag to specify from where to start the
list items.

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

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

"E".

<ol type="a" start="5"> : It will show lower case alphabets starting

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

<ol type="i" start="5"> : It will show Roman lower case value starting
with "v".

1. <ol type="i" start="5">

2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:

v. HTML
vi. Java
vii. JavaScript
viii. SQL

reversed Attribute:
This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5
version. If you use the reversed attribute with

tag then it will numbered the list in descending order (7, 6, 5, 4......1).

Example:
1. <ol reversed>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now

Output:
HTML style using CSS
Let's suppose we have created our web page using a simple HTML code,
and we want something which can present our page in a correct format,
and visibly attractive. So to do this, we can style our web page with CSS
(Cascading Stylesheet) properties.

CSS is used to apply the style in the web page which is made up of HTML
elements. It describes the look of the webpage.

CSS provides various style properties such as background color, padding,

margin, border-color, and many more, to style a webpage.

Each property in CSS has a name-value pair, and each property is

separated by a semicolon (;).

In the above example, we have used a style attribute to provide some

styling format to our code.
Output:

Welcome to javaTpoint
This is a great website to learn technologies in
very simple way.

Three ways to apply CSS

To use CSS with HTML document, there are three ways:

Inline CSS:
Inline CSS is used to apply CSS in a single element. It can apply style
uniquely in each element.

To apply inline CSS, you need to use style attribute within HTML element.
We can use as many properties as we want, but each property should be
separated by a semicolon (;).

Example:
1. <h3 style="color: red;
2. font-style: italic;
3. text-align: center;
4. font-size: 50px;
5. padding-top: 25px;">Learning HTML using Inline CSS</h3>
Test it Now

Output:
ADVERTISEMENT

Learning HTML using

Inline CSS
Internal CSS:
An Internal stylesheets contains the CSS properties for a webpage in
<head> section of HTML document. To use Internal CSS, we can use class
and id attributes.

We can use internal CSS to apply a style for a single HTML page.

Note: In the above example, we have used a class attribute which you will learn in
the next chapter.

If we have multiple HTML pages for an application and which use similar
CSS, then we can use external CSS.

There are two files need to create to apply external CSS

o First, create the HTML file

o Create a CSS file and save it using the .css extension (This file only will
only contain the styling code.)
o Link the CSS file in your HTML file using tag in header section of HTML
document.

CSS file:
body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}

.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}

Commonly used CSS properties:

Properties-name Syntax Description

background-color background-color:red; It defines the background color of that element

color color: lightgreen; It defines the color of text of an element

padding padding: 20px; It defines the space between content and t

border.

margin margin: 30px; margin- It creates space around an element.

left:

font-family font-family: cursive; Font-family defines a font for a particu

element.

Font-size font-size: 50px; Font-size defines a font size for a particu

element.
text-align text-align: left; It is used to align the text in a selected position

HTML Classes
Class Attribute in HTML
The HTML class attribute is used to specify a single or multiple class
names for an HTML element. The class name can be used by CSS and
JavaScript to do some tasks for HTML elements. You can use this class in
CSS with a specific class, write a period (.) character, followed by the
name of the class for selecting elements.

A class attribute can be defined within <style> tag or in separate file

using the (.) character.

In an HTML document, we can use the same class attribute name with
different elements.

Defining an HTML class

To create an HTML class, firstly define style for HTML class using <style>
tag within <head> section as following example:

Example:
1. <head>
2. <style>
3. .headings{
4. color: lightgreen;
5. font-family: cursive;
6. background-color: black; }
7. </style>
8. </head>

We have define style for a class name "headings", and we can use this
class name with any of HTML element in which we want to provide such
styling. We just need to follow the following syntax to use it.

1. <tag class="ghf"> content </tag>

Example 1:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .headings{
6. color: lightgreen;
7. font-family: cursive;
8. background-color: black; }
9. </style>
10.</head>
11. <body>
12.<h1 class="headings">This is first heading</h1>
13. <h2 class="headings">This is Second heading</h2>
14.<h3 class="headings">This is third heading</h3>
15. <h4 class="headings">This is fourth heading</h4>
16.</body>
17. </html>
Test it Now

Another Example with different class name

Example:
Let's use a class name "Fruit" with CSS to style all elements.

1. <style>
2. .fruit {
3. background-color: orange;
4. color: white;
5. padding: 10px;
6. }
7. </style>
8.
9. <h2 class="fruit">Mango</h2>
10.<p>Mango is king of all fruits.</p>
11.
12.<h2 class="fruit">Orange</h2>
13. <p>Oranges are full of Vitamin C.</p>
14.
15. <h2 class="fruit">Apple</h2>
16.<p>An apple a day, keeps the Doctor away.</p>
Test it Now

Here you can see that we have used the class name "fruit" with (.) to use
all its elements.

Note: You can use class attribute on any HTML element. The class name is case-
sensitive.

Class Attribute in JavaScript

You can use JavaScript access elements with a specified class name by
using the getElementsByClassName() method.

Example:
Let's hide all the elements with class name "fruit" when the user click on
the button.

1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <h2>Class Attribute with JavaScript</h2>
6. <p>Click the button, to hide all elements with the class name "fruit", with
JavaScript:</p>
7.
8. <button onclick="myFunction()">Hide elements</button>
9.
10.
11. <h2 class="fruit">Mango</h2>
12.<p>Mango is king of all fruits.</p>
13.
14.<h2 class="fruit">Orange</h2>
15. <p>Oranges are full of Vitamin C.</p>
16.
17. <h2 class="fruit">Apple</h2>
18.<p>An apple a day, keeps the Doctor away.</p>
19.
20.<script>
21. function myFunction() {
22. var x = [Link]("fruit");
23. for (var i = 0; i < [Link]; i++) {
24. x[i].[Link] = "none";
25. }
26.}
27. </script>
28.
29. </body>
30.</html>
Test it Now

Note: You will learn more about JavaScript in our JavaScript tutorial.

Multiple Classes
You can use multiple class names (more than one) with HTML elements.
These class names must be separated by a space.

Example:
Let's style elements with class name "fruit" and also with a class name
"center".

1. <!DOCTYPE html>
2. <html>
3. <style>
4. .fruit {
5. background-color: orange;
6. color: white;
7. padding: 10px;
8. }
9.
10..center {
11. text-align: center;
12.}
13. </style>
14.<body>
15.
16.<h2>Multiple Classes</h2>
17. <p>All three elements have the class name "fruit". In addition
, Mango also have the class name "center", which center-aligns the t
ext.</p>
18.
19. <h2 class="fruit center">Mango</h2>
20.<h2 class="fruit">Orange</h2>
21. <h2 class="fruit">Apple</h2>
22.
23. </body>
24.</html>
Test it Now

You can see that the first element <h2> belongs to both the "fruit" class
and the "center" class.

Same class with Different Tag

You can use the same class name with different tags like <h2> and <p>
etc. to share the same style.

Example:
1. <!DOCTYPE html>
2. <html>
3. <style>
4. .fruit {
5. background-color: orange;
6. color: white;
7. padding: 10px;
8. }
9. </style>
10.<body>
11. <h2>Same Class with Different Tag</h2>
12.<h2 class="fruit">Mango</h2>
13. <p class="fruit">Mango is the king of all fruits.</p>
14.</body>
15. </html>
HTML Id Attribute
The id attribute is used to specify the unique ID for an element of the
HTML document. It allocates the unique identifier which is used by
the CSS and the JavaScript for performing certain tasks.

Note: In the Cascading Style sheet (CSS), we can easily select an element with the
specific id by using the # symbol followed by id.
Note: JavaScript can access an element with the given ID by using the
getElementById() method.
Syntax
1. <tag id="value">

Example 1: The following example describes how to use the id attribute

in CSS document:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of Id attribute in CSS
6. </title>
7. <style>
8. #Cars {
9. padding: 40px;
[Link]-color: lightblue;
11. color: black;
[Link]-align: center;
13. }
14.
15. #Bikes
16.{
17. padding: 50px;
[Link]-color: lightGreen;
19. text-align: center;
20.}
21. </style>
22.</head>
23. <body>
24.<p> Use CSS to style an element with the id: </p>
25. <h1 id="Cars"> Cars </h1>
26.<h1 id="Bikes"> Bikes </h1>
27. </body>
28.</html>
Test it Now

Output:

Example 2: The following example describes how to use the ID attribute

in JavaScript.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title> Date Attribute </title>
5. <script>
6. function viewdate() {
7. var x = [Link]("dob").value;
8. [Link]("demo").innerHTML = x;
9. </script>
10.</head>
11. <body>
[Link] Name: <input type="text" placeholder="Your Good name"/>
13. <br>
14.<br>
15. Date of Joining:
16.<input type="date" id="dob">
17. <br>
18.<button onclick="viewdate()"> Submit
19. </button>
20.<br>
21. <h2 id="demo"> </h2>
22.</body>
23. </html>
Test it Now

Output:
HTML
List Box
The list box is a graphical control element in the HTML document that
allows a user to select one or more options from the list of options.

Syntax
To create a list box, use the HTML element <select> which contains two
attributes Name and Size. The Name attribute is used to define the
name for calling the list box, and size attribute is used to specify the
numerical value that shows the how many options it contains.

1. <select Name="Name_of_list_box" Size="Number_of_options">

2. <option> List item 1 </option>
3. <option> List item 2 </option>
4. <option> List item 3 </option>
5. <option> List item N </option>
6. </select>
Examples:
Example 1: Consider the below example that creates a simple list box.

1. <!DOCTYPE html>
2. <html>
3. <title>
4. Example of List Box
5. </title>
6. <body>
7. Customer Name: <input type="text" Placeholder="Enter the Custo
mer Name"/>
8. <br>
9. <br>
10.<select name="Cars" size="5">
11. <option value="Merceders"> Merceders </option>
12. <option value="BMW"> BMW </option>
13. <option value="Jaguar"> Jaguar </option>
14. <option value="Lamborghini"> Lamborghini </option>
15. <option value="Ferrari"> Ferrari </option>
16. <option value="Ford"> Ford </option>
17. </select>
18.</body>
19. </html>
Test it Now

Output:
Example 2: Below example uses the multiple attribute for selecting the
multiple options in a list. We can select multiple options from list box by
holding the ctrl key.

1. <!DOCTYPE html>
2. <html>
3. <title>
4. Example of List Box with multiple attribute
5. </title>
6. <body>
7. Customer Name: <input type="text" Placeholder="Enter the Custo
mer Name"/>
8. <br>
9. <br>
10.<select name="Cars" size="5" multiple="multiple">
11. <option value="Merceders"> Merceders </option>
12. <option value="BMW"> BMW </option>
13. <option value="Jaguar"> Jaguar </option>
14. <option value="Lamborghini"> Lamborghini </option>
15. <option value="Ferrari"> Ferrari </option>
16. <option value="Ford"> Ford </option>
17. </select>
18.</body>
19. </html>
Test it Now

Output:

Add
JavaScript to HTML
There are following three ways through which we can add the JavaScript
code into the HTML document:

1. Include the JavaScript code in <head>…</head> tag.

2. Include the JavaScript code between the <Body> …</Body> tag and after
the closing of the body tag.
3. Link the separate file of JavaScript in HTML

Include the JavaScript Code in <head> tag.

In this section, you will learn to include the JavaScript code between the
<head> and </head> tag.

Syntax

1. <html>
2. <head>
3. <script>
4. JavaScript Code
5. Statement 1
6. Statement 2
7. ......
8. Statement N
9. </script>
10.</head>
11. <body>
12.</body>
13. </html>

In the above syntax, the JavaScript code written between the

Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title>
6. Include JavaScript in head tag
7. </title>
8.
9. <script>
[Link] check()
11. {
12./* The following statement is used to display a Confirm dialog box on a we
bpage with the statement which is enclosed in the brackets. */
13. confirm("Your JavaScript Code Run");
14.}
15. </script>
16.<style>
17. /* The following tag selector button use the different propertie
s for the Button. */
[Link] {
19. background-color: red;
[Link]: 16px 20px;
21. margin: 8px 0;
22. border: none;
23. cursor: pointer;
24. color: white;
25. width: 100%;
26. opacity: 0.9;
27. }
28./* The following tag selector hover use the opacity property for the Button
which select button when you mouse over it. */
29. button:hover {
[Link]: 1;
31. }
32.</style>
33. </head>
34.<body>
35. <form>
36.
37. <button type="button" onclick="check()"> Click Me for runni
ng a JavaScript Code </button>
38.
39. </form>
40.</body>
41. </html>
Test it Now

Output:
2. i) Include the JavaScript code in the <body> tag.
In this section, you will learn about how to include the JavaScript code in-
between the <body> and </body> tag.

Syntax

1. <html>
2. <head>
3. </head>
4. <body>
5.
6. <script>
7. JavaScript Code
8. Statement 1
9. Statement 2
10.......
11. Statement N
12.</script>
13. </body>
14.</html>
In the above syntax, the JavaScript code written between the
<script>……. </script> tag is put in-between of the <body> and </body>
tag in HTML file.

Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title>
6. Include JavaScript in body tag
7. </title>
8. <style>
9. /* The following tag selector button use the different properties for t
he Button. */
[Link] {
11. background-color: red;
12. padding: 16px 20px;
13. margin: 8px 0;
14. border: none;
15. cursor: pointer;
16. color: white;
17. width: 100%;
18. opacity: 0.9;
19. }
20./* The following tag selector hover use the opacity property for the Button
which select button when you mouse over it. */
21. button:hover {
[Link]: 1;
23. }
24.</style>
25. </head>
26.<body>
27. <form>
28.<script>
29. function bdy_JS ()
30.{
31. /* The following statement is used to display a Confirm dialog
box on a webpage with the statement which is enclosed in the brack
ets. */
[Link]("Your JavaScript Code Run which is used in the Body tag");
33. }
34.</script>
35.
36.
37. <button type="button" onclick="bdy_JS()"> Click Me for runn
ing a JavaScript Code </button>
38.</form>
39. </body>
40.</html>
Test it Now

Output:

ii) Include the JavaScript code after the <body> tag.

In this section, you will learn to include the JavaScript code after the
<body> tag.

Syntax

1. <html>
2. <head>
3. </head>
4. <body>
5. </body>
6. <script>
7. JavaScript Code
8. Statement 1
9. Statement 2
10.......
11. Statement N
12.</script>
13.
14.</html>

In the above syntax, the JavaScript code written between the

Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title>
6. Include JavaScript code after the body tag
7. </title>
8. <style>
9. /* The following tag selector button use the different properties for t
he Button. */
[Link] {
11. background-color: red;
12. color: white;
13. margin: 8px 0;
14. border: none;
15. cursor: pointer;
16. width: 100%;
17. padding: 16px 20px;
18. opacity: 0.9;
19. }
20./* The following tag selector hover use the opacity property for the Button
which select button when you mouse over it. */
21. button:hover {
[Link]: 1;
23. }
24.</style>
25. </head>
26.<body>
27. <form>
28.
29. <button type="button" onclick="bdy_JS()"> Click Me for runn
ing a JavaScript Code </button>
30.
31. </form>
32.</body>
33. <script>
[Link] bdy_JS ()
35. {
36./* The following statement is used to display a Confirm dialog box on a we
bpage with the statement which is enclosed in the brackets. */
37. confirm("Your JavaScript Code Run which is used after the Bod
y tag");
38.}
39. </script>
40.</html>
Test it Now

Output:
Link the Separate file of JavaScript in HTML
In this section, you will learn to include the file of JavaScript code in the
HTML file.

Syntax

1. <html>
2. <head>
3. <script src="Name_of_JavaScript_file>
4. </script>
5. </head>
6. <body>
7. </body>
8. </html>

In the above syntax, the src is an attribute of <script> tag used for
specifying the name of the JavaScript file.
Example

The following code is written in JavaScript (inc), which is saved

by .js extension.

1. function funcjs ()
2. {
3. /* The following statement displays a Confirm dialog box on a webpa
ge with the statement which is enclosed in the brackets. */
4. confirm("Your JavaScript Code Run which is used after the Body tag");
5. }

The following code is written in an HTML file which uses the src attribute
in the <script> tag to specify the above JavaScript file.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title>
6. Include JavaScript file in head tag of HTML file
7. </title>
8. <script src="[Link]">
9. </script>
10.<style>
11. /* The following tag selector button use the different propertie
s for the Button. */
[Link] {
13. background-color: red;
14. color: white;
15. margin: 8px 0;
16. border: none;
17. cursor: pointer;
18. width: 100%;
19. padding: 16px 20px;
20. opacity: 0.9;
21. }
22./* The following tag selector hover use the opacity property for the Button
which select button when you mouse over it. */
23. button:hover {
[Link]: 1;
25. }
26.</style>
27. </head>
28.<body>
29. <form>
30.
31.
32.<button type="button" onclick="funcjs()"> Click Me for running a JavaScr
ipt Code </button>
33. </form>
34.</body>
35. </html>
Test it Now

Output:
HTML Background Image
The <background> attribute in the HTML document is used to specify
the background image on a HTML page or a table. You can pass the path
of an image as a value of background attribute to set the image of your
HTML page or table.

Syntax
1. <tag background="Path_of_an_image">
Note: The Background attribute is not supported in HTML5. Use the following
syntax of CSS:
1. <tag style="background-image:Path_of_an_image)">

Examples: The following examples set the background image in different

styles:

Example 1: This example uses the background attribute with the body
tag for displaying the image as a background of the web page.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of Background image
6. </title>
7. </head>
8. <body background="[Link]
kotenko1403/kotenko140300008/26854631-snowy-winter-in-a-mountain-
forest-sunny-cold-day-with-snow-covered-trees-carpathian-mountains-
[Link]">
9.
10.<font color="red">
11. <h1> click on this <a href="[Link] li
nk </a> for the Home page of Our Website </h1>
12.</font>
13. </body>
14.</html>
Test it Now

Output:

Example 2: This example uses the background attribute with the table
tag for displaying the image as a background of html table.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of Background image
6. </title>
7. </head>
8. <body>
9. <center>
10.
11. In this example, we use the background attribute with the tabl
e tag, which displays the image as a background of the HTML table.
12.
13. <table background="[Link]
237272/[Link]?
auto=compress&cs=tinysrgb&dpr=1&w=500" height="300" border
="1" width="500">
14.
15. <tr>
16. <td> Roll No. </td>
17. <td> Name </td>
18. </tr>
19. <tr>
20. <td> 101 </td>
21. <td> Abhay </td>
22. </tr>
23. <tr>
24. <td> 102 </td>
25. <td> Chetan </td>
26. </tr>
27. <tr>
28. <td> 103 </td>
29. <td> Manpreet </td>
30. </tr>
31. <tr>
32. <td> 104 </td>
33. <td> Rakesh </td>
34. </tr>
35. <tr>
36. <td> 105 </td>
37. <td> Sumit </td>
38. </tr>
39. </table>
40.</center>
41. </body>
42.</html>
Test it Now

Output:
Example 3: This example uses the CSS syntax for the background-
image property of the style attribute with the body tag.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of Background image
6. </title>
7. </head>
8.
9. <body style="background-image:url('[Link]
images/kotenko/kotenko1403/kotenko140300008/26854631-snowy-
winter-in-a-mountain-forest-sunny-cold-day-with-snow-covered-
[Link]');">
10.
11. <font size="4" color="green">
12.
13. In this example, we use the <b> background-image </b> pro
perty in the <b>style</b> attribute with the <b> body tag </b> w
hich display the image as a background on the web page.
14.
15. </font>
16.<center>
17. <font size="4" color="red">
18.<table height="300" border="1" width="500">
19. <tr>
20. <td> Roll No. </td>
21. <td> Name </td>
22. </tr>
23. <tr>
24. <td> 101 </td>
25. <td> Abhay </td>
26. </tr>
27. <tr>
28. <td> 102 </td>
29. <td> Chetan </td>
30. </tr>
31. <tr>
32. <td> 103 </td>
33. <td> Manpreet </td>
34. </tr>
35. <tr>
36. <td> 104 </td>
37. <td> Rakesh </td>
38. </tr>
39. <tr>
40. <td> 105 </td>
41. <td> Sumit </td>
42. </tr>
43. </table>
44.</font>
45. </center>
46.</body>
47. </html>
Test it Now

Output:

Example 4: This example uses the CSS syntax for the background-image
property in the style attribute with the table tag.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of Background image
6. </title>
7. </head>
8. <body>
9. <font size="4" color="orange">
[Link] this example, we use the <b> background-image property </b> in the
<b> style attribute </b> with the <b> table tag </b> which display the i
mage as a background of HTML table.
11. </font>
12.<font size="4" color="red">
13. <center>
14.
15. <table style="background-image:url('https://
[Link]/photos/237272/[Link]?
auto=compress&cs=tinysrgb&dpr=1&w=500');">
16. <tr>
17. <td> Roll No. </td>
18. <td> Name </td>
19. </tr>
20.
21. <tr>
22. <td> 101 </td>
23. <td> Abhay </td>
24. </tr>
25. <tr>
26. <td> 102 </td>
27. <td> Chetan </td>
28. </tr>
29. <tr>
30. <td> 103 </td>
31. <td> Manpreet </td>
32. </tr>
33. <tr>
34. <td> 104 </td>
35. <td> Rakesh </td>
36. </tr>
37. <tr>
38. <td> 105 </td>
39. <td> Sumit </td>
40. </tr>
41. </table>
42.</center>
43. </font>
44.</body>
45. </html>
Test it Now

Output:

Example 5: This example uses the CSS syntax for the background-
repeat and background-size property of the style attribute with the
body tag.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of Background image
6. </title>
7. </head>
8.
9. <body style="background-image:url('[Link]
photos/237272/[Link]?
auto=compress&cs=tinysrgb&dpr=1&w=500');
[Link]-repeat:no-repeat; background-size: 100% 100%">
11.
12.<font size="4" color="green">
13.
[Link] this example, we use the <b> background-repeat and background-size
property </b> in the <b> style attribute </b> with the <b> body </b> t
ag
15. which display the image without repeatition.
16.
17. </font>
18.<center>
19.
20.<font size="4" color="red">
21. <table height="300" border="1" width="500">
22. <tr>
23. <td> Roll No. </td>
24. <td> Name </td>
25. </tr>
26. <tr>
27. <td> 101 </td>
28. <td> Abhay </td>
29. </tr>
30. <tr>
31. <td> 102 </td>
32. <td> Chetan </td>
33. </tr>
34. <tr>
35. <td> 103 </td>
36. <td> Manpreet </td>
37. </tr>
38. <tr>
39. <td> 104 </td>
40. <td> Rakesh </td>
41. </tr>
42. <tr>
43. <td> 105 </td>
44. <td> Sumit </td>
45. </tr>
46.</table>
47. </font>
48.</center>
49. </body>
50.</html>

Test it Now HTML Hide Element

You can hide an element by using the Boolean attribute hidden with the
element. When you specify the hidden attribute in the HTML file, then the
browser will not display that element, which is specified with this
attribute.

Syntax
1. <element or tag hidden> Any statement or content </element or
tag>
Examples:T he following examples are specified to understand easily
how to use the hidden attribute with different elements or tags:

Example 1: This example uses the hidden attribute with the paragraph
tag.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. First Example of Hidden attribute
6. </title>
7. </head>
8. <body>
9. <center>
10.<h1> JavaTpoint </h1>
11. </center>
12.<p hidden> This paragraph should be hidden.
13. </p>
14.</body>
15. </html>
Test it Now

Output:

Example 2: The following example uses the hidden attribute with the
<input type=text> element.
In this example, we have used the hidden attribute with two input tags.
These input fields will not display on the web page, when the following
program executes.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title>
6. Example of Hidden attribute in input tag
7. </title>
8. <style>
9. /* The following tag selector body use the font-family and backgroun
d-color properties for body of a page*/
[Link] {
11. font-family: Calibri, Helvetica, sans-serif;
[Link]-color: pink;
13. }
14./* Following container class used padding for generate space around it, an
d also use a background-color for specify the color lightblue as a backgrou
nd */
15. .container {
[Link]: 50px;
17. background-color: lightblue;
18.}
19. /* The following tag selector input use the different properties
for the text filed. */
[Link][type=text] {
21. width: 100%;
22. padding: 15px;
23. margin: 5px 0 22px 0;
24. border: none;
25. background: #f1f1f1;
26.}
27.
[Link][type=text]:focus {
29. background-color: orange;
[Link]: none;
31. }
32./* The following div tag selector is used to provide the space or gap betwe
en the content or elements on a web page. */
33. div {
34. padding: 10px 0;
35. }
[Link] {
37. border: 1px solid #f1f1f1;
38. margin-bottom: 25px;
39. }
40.</style>
41. </head>
42.<body>
43. <form>
44.<div class="container">
45. <center> <h1> Registration Form</h1> </center>
46.
47. <hr>
48.<label for="fn"> Firstname: </label>
49. 
50.<input hidden type="text" name="firstname" id= "fn" size="15" require
d />
51. <div>
52.<label for="mn"> Middlename: </label>
53. <input type="text" name="middlename" id="mn" size="15"
required />
54.</div>
55. <label for="Ln"> Lastname: </label>
56.<input type="text" name="lastname" id="Ln" size="15"required />
57.
58.<label for="pn">
59. Phone :
60.</label>
61. <input type="text" name="country code" placeholder="Cou
ntry Code" value="+91" size="2"/>
62.
63. <input hidden type="text" name="phone" id="pn" size="10
"/ required>
64.</hr>
65. </div>
66.</form>
67. </body>
68.</html>
Test it Now

Output:
HTML
Reset Button
The Reset is the value of the type attribute of the <Button> element. It
is used to reset the filled values of a form to its initial values.

Syntax
1. <Button type="reset">
Example
Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title>
6. Example of Reset Button
7. </title>
8. <style>
9. /* The following tag selector body use the font-family and backgroun
d-color properties for body of a page*/
10.
11. body {
[Link]-family: Calibri, Helvetica, sans-serif;
13. background-color: pink;
14.}
15. /* Following container class used padding for generate space a
round it, and also use a background-color for specify the color lightbl
ue as a background */
16..container {
17. padding: 50px;
[Link]-color: lightblue;
19. }
20./* The following tag selector input use the different properties for the text
filed. */
21. input[type=text] {
22. width: 100%;
23. padding: 15px;
[Link]: 5px 0 22px 0;
25. display: inline-block;
26. border: none;
27. background: #f1f1f1;
28.}
29. input[type=text]:focus {
[Link]-color: orange;
31. outline: none;
32.}
33. div {
34. padding: 10px 0;
35. }
[Link] {
37. border: 1px solid #f1f1f1;
38. margin-bottom: 25px;
39. }
40./* The following tag selector button use the different properties for the But
ton. */
41. button {
42. background-color: #4CAF50;
43. color: white;
[Link]: 8px 0;
45. border: none;
46. cursor: pointer;
47.
48. padding: 16px 20px;
49. width: 100%;
50. opacity: 0.9;
51. }
52./* The following tag selector hover use the opacity property for the Button
which select button when you mouse over it. */
53. button:hover {
[Link]: 1;
55. }
56.
57. </style>
58.</head>
59. <body>
60.<form>
61. <div class="container">
62.<center> <h1> Form</h1> </center>
63.
64.<hr>
65. <label for="fn"> Firstname </label>
66.<input type="text" id="fn" name="firstname" placeholder= "Firstname"
size="15" required />
67. <label for="mn"> Middlename: </label>
68.<input type="text" id="mn" name="middlename" placeholder="Middlen
ame" size="15" required />
69. <label for="ln"> Lastname: </label>
70.<input type="text" id="ln" name="lastname" placeholder="Lastname" si
ze="15"required />
71.
72.<div>
73. <label>
[Link] :
75. </label><br>
76.<input type="radio" value="Male" name="gender" checked > Male
77. <input type="radio" value="Female" name="gender"> Fema
le
78.<input type="radio" value="Other" name="gender"> Other
79.
80.</div>
81. <label for="phn">
[Link] :
83. </label>
84.<input type="text" name="country code" placeholder="Country Code" v
alue="+91" size="2"/>
85. <input type="text" id="phn" name="phone" placeholder="p
hone no." size="10"/ required/>
86.
87.
88.<label for="em">
89. Email
90.</label>
91. <input type="text" id="em" placeholder="Enter Email" nam
e="email" required>
92.
93. The below button displays as the reset button which is used to
reset the filled values of a form to its initial values.
94.<button type="reset" value="submit">Reset</button>
95. </form>
96.</body>
97. </html>
Test it Now

Output:
HTML
Search Box
The HTML Search Box allows a user to search the content.
The Search is a value of type attribute of an <input> element.

Syntax
1. <input type="search">

Examples: The following examples have used the different CSS codes for
displaying the different Search boxes on the web page.

Example 1:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of search box
6. </title>
7. <style>
8. /* The following tag selector body use the text-align and background-color
properties. The text-align property is used to align the text as center, and t
he background-color is used to specify the blue colour as a background of
a page*/
9. body {
[Link]-align: center;
11. background-color: blue;
12.}
13. /* The following tag selector form uses the different properties
for displaying a form. */
14.
15. form{
16. display: block;
17. left: 30%;
18. position: absolute;
19. top: 30%;
20.}
21. /* The following tag selector input uses the different properties
for the search box. */
22. input[type=search]{
23. border: 5px orange;
24. box-sizing: border-box;
25. font-size:1em;
26. height: 2em;
27. margin-left: 10vw;
28. padding: .5em;
29. transition: all 2s ease-in;
30. width: 30vw;
31. z-index:1;
32. &:focus {
33. border: solid 3px #09f;
34. outline: solid #fc0 2000px;
35. }
36. }
37. </style>
38.</head>
39. <body>
40.<form>
41. <input type="search" placeholder="Search for any site"/>
42.</form>
43. </body>
44.</html>
Test it Now

Output:
Example 2: In this example, we have not used the search value of the
type attribute of an input element. But we have used the text input field
using CSS, which is working as a search field.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Second Example of search box
6. </title>
7. <style>
8. *
9. {
10. outline: none;
11. }
12./* The following tag selector form uses one property for specifying the heig
ht of a form. */
13.
[Link]
15. {
16. height: 96px;
17. }
18./* The following tag selector input use the different properties for specifyin
g the text field. */
19.
[Link][type="text"]
21. {
22. width: 100%;
23. height: 80px;
24. font-size: 40px;
25. line-height: 1;
26.}
27. /* The following tag selector uses the color of placeholder as o
range for the input text field. */
[Link][type="text"]::placeholder
29. {
30. color: orange;
31. }
32.
33. .tb
34.{
35. display: table;
36. width: 100%;
37. }
38..td
39. {
40. display: table-cell;
41. vertical-align: middle;
42.}
43. /* The following tag selector uses the different properties for s
pecifying all the inputs and buttons used in the body tag in this html
file. */
44.
45. input, button
46.{
47. color: #fff;
48. font-family: Arial;
49. padding: 0;
50. margin: 0;
51. border: 0;
52. background-color: transparent;
53. }
54./* the following id selector cover uses the different attribute which are use
d between the body tag */
55. #cover
56.{
57. position: absolute;
58. top: 50%;
59. width: 550px;
60. padding: 35px;
61. margin: -83px auto 0 auto;
62. background-color: #ff7575;
63. border-radius: 20px;
64. left: 0;
65. right: 0;
66. box-shadow: 0 10px 40px #ff7c7c, 0 0 0 20px #ffffffeb;
67. transform: scale(0.6);
68.}
69. /* The following tag selector button uses the different proprtie
s for specifying the button on a web page. */
[Link]
71. {
72. position: relative;
73. display: block;
74. width: 84px;
75. height: 96px;
76. cursor: pointer;
77. }
78./* The following id selector uses the different properties for searching butt
on */
79. #s-circle
80.{
81. position: relative;
82. top: -8px;
83. left: 0;
84. width: 43px;
85. height: 43px;
86. margin-top: 0;
87. border-width: 15px;
88. border: 15px solid #fff;
89. background-color: transparent;
90. border-radius: 50%;
91. transition: 0.5s ease all;
92.}
93. button span
94.{
95. position: absolute;
96. top: 68px;
97. left: 43px;
98. display: block;
99. width: 45px;
100. height: 15px;
101. background-color: transparent;
102. border-radius: 10px;
103. transform: rotateZ(52deg);
104. transition: 0.5s ease all;
105. }
106. button span:before, button span:after
107. {
108. content: '';
109. position: absolute;
110. bottom: 0;
111. right: 0;
112. width: 45px;
113. height: 15px;
114. background-color: #fff;
115. border-radius: 10px;
116. transform: rotateZ(0);
117. transition: 0.5s ease all;
118. }
119. #s-cover:hover #s-circle
120. {
121. top: -1px;
122. width: 67px;
123. height: 15px;
124. border-width: 0;
125. background-color: #fff;
126. border-radius: 20px;
127. }
128. /* The following hover effect use the different properties when you t
ake mouse to that element where thr s-cover is selector is used. */
129. #s-cover:hover span
130. {
131. top: 50%;
132. left: 56px;
133. width: 25px;
134. margin-top: -9px;
135. transform: rotateZ(0);
136. }
137. #s-cover:hover button span:before
138. {
139. bottom: 11px;
140. transform: rotateZ(52deg);
141. }
142. #s-cover:hover button span:after
143. {
144. bottom: -11px;
145. transform: rotateZ(-52deg);
146. }
147. #s-cover:hover button span:before, #s-cover:hover button sp
an:after
148. {
149. right: 6px;
150. width: 40px;
151. background-color: #fff;
152. }
153. </style>
154. </head>
155. <body>
156. <div id="cover">
157. <form method="get" action="">
158. <div class="tb">
159. <div class="td">
160. 
161. <input type="text" placeholder="Search" required></div>
162. <div class="td" id="s-cover">
163. <button type="submit">
164. <div id="s-circle"> </div>
165. <span> </span>
166. </button>
167. </div>
168. </div>
169. </form>
170. </div>
171. </body>
172. </html>
Test it Now

Output:
HTML Selected Attribute
The Selected is an attribute of the <option> element, which is used to
define the default selection in a dropdown-list.

When any option uses this attribute, then that option should be pre-
selected and displayed first, when the web page loads.

Syntax
1. <option selected>

Example: The following example uses the Selected attribute in

the <option> tag with the Jaguar value.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of selected attribute
6. </title>
7. </head>
8. <body>
9. <h4> Select Your favourite Car from the following given options: </
h4>
10.<br>
11. <select name="cars">
12. <option value="Mercedes"> Mercedes </option>
13. <option value="Lamborghini"> Lamborghini </option>
14.
15. <option value="Jaguar" selected> Jaguar </option>
16. <option value="BMW" > BMW </option>
17. <option value="Audi"> Audi </option>
18.</select>
19. </body>
20.</html>
Test it Now

Output:
Example 2: The following example uses the Selected attribute in
the <option> tag with the Pomegranate value.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Second Example of selected attribute
6. </title>
7. </head>
8. <body>
9. <h4> Select Your favourite fruit from the following list of fruits: </
h4>
10.<br>
11. <select name="fruits">
12. <option value="Apple"> Apple </option>
13. <option value="Banana"> Banana </option>
14. <option value="Orange"> Orange </option>
15. 
16. <option value="Pomegranate" selected> Pomegranate </option>
17. <option value="Grapes"> Grapes </option>
18. <option value="Mango"> Mango </option>
19. </select>
20.</body>
21. </html>
Test it Now

Output:
Simple
HTML Pages
There are the following different examples implemented for
creating the simple HTML pages using the different basic tags:

Example 1: This example creates a simple page without any content,

which helps in understanding how to use the Html, Head, and Body tag in
the HTML page.

In the following example, we have not specified the title of the web page
in the Head tag, so it will display the name of Html file as its title.

1. <Html> 
2. <Head>
3. 
4. </Head>
5. <Body>
6. 
7. </Body>
8. </Html>
Test it Now

Output:
Example 2: This example creates a page which helps in understanding
how to give a title to a web page.

1. <Html>
2. <Head>
3. 
4. <title>
5. Example of Title tag
6. </title>
7. </Head>
8. <Body>
9. </Body>
10.</Html>
Test it Now

Output:
Example 3: This example creates a web page which helps in
understanding how to make the text bold, italic, and underline.

1. <Html>
2. <Head>
3. <title>
4. Example of make a text B,I,U
5. </title>
6. </Head>
7. <Body>
8. <b> [This text is Bold......] </b>
9. <I> [This text is Italic......] </I>
10.<U> [This text is Underline......] </U>
11. </Body>
12.</Html>
Test it Now

Output:
Example 4: This example creates a web page which helps in
understanding how to use the <p> tag.

1. <Html>
2. <Head>
3. <title>
4. Example of Paragraph tag
5. </title>
6. </Head>
7. <Body>
8. <p> 
9. <b> HTML </b> stands for <i> <u> Hyper Text Markup Language.
</u> </i> It is used to create a web pages and applications. This la
nguage
[Link] easily understandable by the user and also be modifiable. It is actually a
Markup language, hence it provides a flexible way for designing the
11. web pages along with the text.
12.</p>
13. HTML file is made up of different elements. <b> An element <
/b> is a collection of <i> start tag, end tag, attributes and the text
between them</i>.
14.</p>
15. </Body>
16.</Html>
Test it Now
Output:

Example 5: This example creates a web page which helps in

understanding how to define all header levels.

In HTML, there are 6 header levels from h1 to h6.

1. <Html>
2. <Head>
3. <title>
4. Example of Header-levels
5. </title>
6. </Head>
7. <Body>
8.
9. <h6> JavaTpoint </h6>
10.<h5> JavaTpoint </h5>
11. <h4> JavaTpoint </h4>
12.<h3> JavaTpoint </h3>
13. <h2> JavaTpoint </h2>
14.<h1> JavaTpoint </h1>
15. </Body>
16.</Html>
Test it Now

Output:
Example 6: This example creates a web page which helps in
understanding how to align the text in center, and how to break a line.

1. <Html>
2. <Head>
3. <title>
4. Example of center and BR tag
5. </title>
6. </Head>
7. <Body>
8. 
9. <center>
[Link] tutorial in JavaTpoint <br> 
[Link] tutorial in JavaTpoint <br>
15. </Body>
16.</Html>
Test it Now

Output:

Example 7: The following example describe how to link one page to

another.

1. <Html>
2. <Head>
3. <title>
4. Example of anchor or hyperlink
5. </title>
6. </Head>
7. <Body>
8.

10.<center> Click on <a href="[Link] t

his link </a> for reading about HTML favicon in JavaTpoint.
11. </center>
12.</Body>
13. </Html>
Test it Now

Output:

Create
Html Page
You can create your first HTML page by the following steps:

Step 1: Open the Text Editor

In this step, we have to open any text editor such as Notepad or
Notepad++ for writing an HTML code. The following image is the
screenshot of the text editor (notepad++) for writing the HTML code.
Step 2: Type the HTML code.
In this step, we have to type the HTML code in the text editor. The HTML
code is composed of various tags and always begins with the opening tag
of HTML and complete with the closing tag of HTML.

The following block describes the syntax for creating any HTML page:

1. <HTML>
2. <HEAD>
3. 
4. </HEAD>
5. <BODY>
6. 
7. </BODY>
8. </HTML> 
In the above syntax, some important tags or elements are used, which are
given below:

<HTML>: It is the opening tag of any HTML code.

<HEAD>: The Head tag is used to create a title of the web page, CSS
syntax for a web page, and helps in written a JavaScript code The <head>
must be closed before the opening of <body> tag.

<BODY>: The Body tag is used to display the content or text on a web
page, which is specified between the body tag.-->

</HTML>: It is the Closing tag of any HTML code.

Example: The following example creates a simple HTML page as an

example through which you can understand easily:

1. <HTML>

2. <HEAD>
3. 
4. <title> 
5. Simple HTML Page
6. </title>
7. <script>
8. 
9. </script>
10.<style>. 2
11. /* This tag is used to create a Cascading Style Sheet for displa
ying the attractive web page. */
12.</style>
13. </HEAD>
14.<BODY>
15. <center> 
[Link]
17. 
18.</center>
19. </BODY>
20.</HTML>
Test it Now
Step 3: Save the HTML code.
After typing the complete HTML code, we have to save that file in a folder
with .html extension. We can easily save the html file by clicking on
the File menu and then click on Save As option. After that, type the file
name with .html extension. The following screenshot describes how we
save the above html code in a text editor.

Step 4: Run the HTML file.

At the last step, we have to execute or run an HTML file from the location
where we saved the file. The file will run on a default browser. Consider
the below output:
HTML
Button Disabled
The 'disabled' is an attribute of <button> tag in HTML, which is used to
denote that the button is disabled. It is a Boolean attribute. The disabled
button cannot be used for clicking, and it appears as a grey color.

Syntax
1. <button disabled> Text you want to show on the button </
button>

Examples: The following examples are using different buttons and make
them disabled.

Example 1: The following example disables the submit button.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title>
6. Example of Submit Disabled
7. </title>
8. <style>
9. /* The following tag selector body use the font-family and backgroun
d-color properties for body of a page*/
10.
11. body {
[Link]-family: Calibri, Helvetica, sans-serif;
13. background-color: pink;
14.}
15. /* Following container class used padding for generate space a
round it, and also use a background-color for specify the color lightbl
ue as a background */
16..container {
17. padding: 50px;
[Link]-color: lightblue;
19. }
20./* The following tag selector input uses the different properties for the text
filed. */
21.
[Link][type=text] {
23. width: 100%;
24. padding: 15px;
25. margin: 5px 0 22px 0;
[Link]: inline-block;
27. border: none;
28. background: #f1f1f1;
29. }
[Link][type=text]:focus {
31. background-color: orange;
[Link]: none;
33. }
34. div {
35. padding: 10px 0;
36. }
37. /* The following tag selector button uses the different properti
es for the Button. */
38.
39. button {
40. color: red;
41. padding: 16px 20px;
42. margin: 8px 0;
43. border: none;
44. cursor: pointer;
45. width: 100%;
46.
47. opacity: 0.9;
48.}
49. </style>
50.</head>
51. <body>
52.<form>
53. <div class="container">
54.<center>
55. <h1> Registration Form </h1>
56.</center>
57. <label> Firstname: </label>
58.<input type="text" name="firstname" placeholder= "Enter your Firstnam
e" size="15" required />
59. <label> Middlename: </label>
60.<input type="text" name="middlename" placeholder="Enter your Middle
name" size="15" />
61. <label> Lastname: </label>
62.<input type="text" name="lastname" placeholder="Enter your Lastname
" size="15"required />
63. <div>
64.<label>
65. Gender :
66.</label><br>
67. <input type="radio" value="Male" name="gender" checked
> Male
68.<input type="radio" value="Female" name="gender"> Female
69. <input type="radio" value="Other" name="gender"> Other
70.</div>
71. <label for="email"> Email: <label>
72.<input type="text" placeholder="Enter Your Email ID" name="email" req
uired>
73.
[Link] this example, the disabled attribute is used to disable the Submit button
. If you click on the "Submit Form" button, without filling the values, then it
will not show the constraints included.
75.
76.<button type="submit" value="submit" disabled> Submit Form </
button>
77. </form>
78.</body>
79. </html>
Test it Now

Output:
Example 2: The following example disables the reset button.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <title>
6. Example of Reset button disabled
7. </title>
8. <style>
9. /* The following tag selector body use the font-family and backgroun
d-color properties for body of a page*/
10.
11. body {
[Link]-family: Calibri, Helvetica, sans-serif;
13. background-color: pink;
14.}
15. /* Following container class used padding for generate space a
round it, and also use a background-color for specify the color lightbl
ue as a background */
16.
17. .container {
[Link]: 50px;
19. background-color: lightblue;
20.}
21. /* The following tag selector input uses the different properties
for the text filed. */
[Link][type=text] {
23. width: 100%;
24. padding: 15px;
25. margin: 5px 0 22px 0;
[Link]: inline-block;
27. border: none;
28. background: #f1f1f1;
29. }
[Link][type=text]:focus {
31. background-color: orange;
[Link]: none;
33. }
34. div {
35. padding: 10px 0;
36. }
37. /* The following tag selector button uses the different properti
es for the Button. */
[Link] {
39. color: red;
40. padding: 16px 20px;
41. margin: 8px 0;
42. border: none;
43. cursor: pointer;
44. width: 100%;
45. opacity: 0.9;
46.}
47. </style>
48.</head>
49. <body>
50.<form>
51. <div class="container">
52.<center>
53. <h1> Registration Form </h1>
54.</center>
55. <label> Firstname: </label>
56.<input type="text" name="firstname" placeholder= "Enter your Firstnam
e" size="15" required />
57. <label> Middlename: </label>
58.<input type="text" name="middlename" placeholder="Enter your Middle
name" size="15" />
59. <label> Lastname: </label>
60.<input type="text" name="lastname" placeholder="Enter your Lastname
" size="15"required />
61. <div>
62.<label>
63. Gender :
64.</label><br>
65. <input type="radio" value="Male" name="gender" checked
> Male
66.<input type="radio" value="Female" name="gender"> Female
67. <input type="radio" value="Other" name="gender"> Other
68.</div>
69. <label for="email"> Email: <label>
70.<input type="text" placeholder="Enter Your Email ID" name="email" req
uired>
71.
[Link] this example, the disabled attribute is used to disable the Reset button.
If you fill the form and then click on the 'Reset a form' button, then it will n
ot reset the values of the above form.
73.
74.<button type="reset" value="submit" disabled> Reset a Form </
button>
75.
76.</form>
77. </body>
78.</html>
Test it Now

Output:
HT
ML font color
The Color is an attribute of <font> tag, which specifies the text color.

Syntax
1. <font color="Color_name|rgb_number|hex_number">

We can specify the text color with the following different attribute values:
o Color_name: This value sets the color of a text by the name of a color.

Example:

1. <font Color="Blue">
o Rgb_number: This value sets the color of a text by the RGB code.

Example:

1. <font color="rgb(128,128,0)"
o Hex_number: This value sets the color of a text by the hex code.

1. <font color="#00FF00">

Examples: The following examples use the different value

of color attribute:

Example 1: The following example uses the name of a color:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of color attribute
6. </title>
7. </head>
8. <body>
9. <font color="orange">
10.
11. <center>
12.<h1>
13. javaTpoint
14.</h1>
15. </center>
16.</font>
17. </body>
18.</html>
Test it Now

Output:
Example 2: The following example uses the hex code for defining the
text color:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of color attribute
6. </title>
7. </head>
8. <body>
9. <font color="#ff00ff">
10.
11. <center>
12.<h1>
13. javaTpoint
14.</h1>
15. </center>
16.</font>
17. </body>
18.</html>
Test it Now

Output:

Example 3: The following example uses the rgb number for defining the
text color:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of color attribute
6. </title>
7. </head>
8. <body>
9. <font color="rgb(0,1,0)">
10.
11. <center>
12.<h1>
13. javaTpoint
14.</h1>
15. </center>
16.</font>
17. </body>
18.</html>
Test it Now

Output:

Example 4: The following example uses all the attribute values for the
font color.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of color attribute
6. </title>
7. </head>
8. <body>
9. <center>
10.<h2> The color attribute of font tag sets the color 'maroon' for the followi
ng paragraph by using the RGB Number "rgb(0,1,0)" </h2>
11. </center>
12.<font color="rgb(0,1,0)">
13. <p>
[Link] is an acronym which stands for Hyper Text Markup Language which i
s used for creating web pages and web applications. Let's see what is mea
nt by Hypertext Markup Language, and Web page.
15. </p>
16.</font>
17. <center>
18. <h2> The color attribute of font tag sets the color 'orange' for the followi
ng paragraph by using the name of colour </h2>
19. </center>
20.<font color="orange">
21. <p>
[Link] is an acronym which stands for Hyper Text Markup Language which i
s used for creating web pages and web applications. Let's see what is mea
nt by Hypertext Markup Language, and Web page.
23. </p>
24.</font>
25. <center>
26. <h2> The color attribute of font tag sets the color 'magenta' for the follo
wing paragraph by busing the Hex code "#ff00ff" </h2>
27. </center>
28.<font color="#ff00ff">
29. <p>
[Link] is an acronym which stands for Hyper Text Markup Language which i
s used for creating web pages and web applications. Let's see what is mea
nt by Hypertext Markup Language, and Web page.
31. </p>
32.</font>
33. </body>
34.</html>
Test it Now

Output:
HTML Image Button
The image buttons in the HTML document can be created by using
the type attribute of an <input> element. Image buttons also perform
the same function as submit buttons, but the only difference between
them is that you can keep the image of your choice as a button.

Syntax
1. <input type="image" name="Name of image button" src="Path of
the Image file? border="Specfiy Image Border " alt="text">
Examples
Example 1: This example is used to specify the image button without
using CSS.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title>
6. Example of image button
7. </title>
8. <style>
9. /* The following tag selector body use the font-family and backgroun
d-color properties for body of a page*/
[Link] {
11. font-family: Calibri, Helvetica, sans-serif;
12. background-color: pink;
13. }
14./* Following container class used padding for generate space around it, an
d also use a background-color for specifying the lightblue color as a backgr
ound */
15. .container {
16. padding: 50px;
17. background-color: lightblue;
18.}
19. /* The following tag selector input uses the different properties
for specifying the text field. */
[Link][type=text] {
21. width: 100%;
22. padding: 15px;
23. margin: 5px 0 22px 0;
24. display: inline-block;
25. border: none;
26. background: #f1f1f1;
27. }
[Link][type=text]:focus {
29. background-color: orange;
30. outline: none;
31. }
32. div {
33. padding: 10px 0;
34. }
35. hr {
36. border: 1px solid #f1f1f1;
37. margin-bottom: 25px;
38.}
39. </style>
40.</head>
41. <body>
42.<form>
43. <div class="container">
44.<center> <h1> Registration Form</h1> </center>
45. <hr>
46.<label> Firstname: </label>
47. <input type="text" name="firstname" placeholder= "Firstna
me" size="15" required />
48.<label> Middlename: </label>
49. <input type="text" name="middlename" placeholder="Middl
ename" size="15" required />
50.<label> Lastname: </label>
51. <input type="text" name="lastname" placeholder="Lastnam
e" size="15"required />
52.<div>
53. <label>
[Link] :
55. </label>
56.<select>
57. <option value="Course">Course</option>
58.<option value="BCA">BCA</option>
59. <option value="BBA">BBA</option>
60.<option value="[Link]">[Link]</option>
61. <option value="MBA">MBA</option>
62.<option value="MCA">MCA</option>
63. <option value="[Link]">[Link]</option>
64.</select>
65. </div>
66.<div>
67. <label>
[Link] :
69. </label>
70.<br>
71. <input type="radio" value="Male" name="gender" checked
> Male
72.<input type="radio" value="Female" name="gender"> Female
73. <input type="radio" value="Other" name="gender"> Other
74.</div>
75. 
76.<input type="image" src="[Link]
submit_button/[Link]" name="submit" widt
h="100" height="48" alt="submit"/>
77.
78.</form>
79. </body>
80.</html>
Test it Now

Output:
Example 2: This example is used to specify the image button using CSS
style. Its output is also same as the above example but the
implementation is different.

In the following example, we are using the <button> tag for specifying
the image button on a web page.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title>
6. Example of image button
7. </title>
8. <style>
9. /* The following tag selector body use the font-family and backgroun
d-color properties for body of a page*/
[Link] {
11. font-family: Calibri, Helvetica, sans-serif;
12. background-color: pink;
13. }
14./* Following container class used padding for generate space around it, an
d also use a background-color for specifying the lightblue color as a backgr
ound */
15. .container {
16. padding: 50px;
17. background-color: lightblue;
18.}
19. /* The following tag selector input uses the different properties
for specifying the text field. */
[Link][type=text] {
21. width: 100%;
22. padding: 15px;
23. margin: 5px 0 22px 0;
24. display: inline-block;
25. border: none;
26. background: #f1f1f1;
27. }
28./* The following tag selector button uses the different properties for specif
ying the image button on a page. */
29. button {
30. background-image: url(
31. '[Link]
%3AANd9GcTP6zIlxzaUIA_CPMpDXoJXporQUagBpwplwm3tUro3BQD
ZgNaa');
32. width: 230px;
33. height: 150px;
34. }
35.
[Link][type=text]:focus {
37. background-color: orange;
38. outline: none;
39. }
40. div {
41. padding: 10px 0;
42. }
43. hr {
44. border: 1px solid #f1f1f1;
45. margin-bottom: 25px;
46.}
47. </style>
48.</head>
49. <body>
50.<form>
51. <div class="container">
52.<center> <h1> Registration Form</h1> </center>
53. <hr>
54.<label> Firstname: </label>
55. <input type="text" name="firstname" placeholder= "Firstna
me" size="15" required />
56.<label> Middlename: </label>
57. <input type="text" name="middlename" placeholder="Middl
ename" size="15" required />
58.<label> Lastname: </label>
59. <input type="text" name="lastname" placeholder="Lastnam
e" size="15"required />
60.<div>
61. <label>
[Link] :
63. </label>
64.<select>
65. <option value="Course">Course</option>
66.<option value="BCA">BCA</option>
67. <option value="BBA">BBA</option>
68.<option value="[Link]">[Link]</option>
69. <option value="MBA">MBA</option>
70.<option value="MCA">MCA</option>
71. <option value="[Link]">[Link]</option>
72.</select>
73. </div>
74.<div>
75. <label>
[Link] :
77. </label>
78.<br>
79. <input type="radio" value="Male" name="gender" checked
> Male
80.<input type="radio" value="Female" name="gender"> Female
81. <input type="radio" value="Other" name="gender"> Other
82.</div>
83. <button type="submit"> </Button>
84.
85. </form>
86.</body>
87. </html>
Test it Now

Output:
Browser Support

Element Chrome IE Firefox Opera Safari

Image Button Yes Yes Yes Yes Yes

Attributes
Alt:

This attribute is used to specify the alternate text, which is to be displayed

when the image cannot be displayed on the user?s screen.

Border:

This attribute is used to specify the image border. If you put its value as 0,
then no border will be displayed.

Height:

This attribute is used to define the pixels of the height of an image.

Name:

This attribute is used to define the name of an image.

Src:

This attribute is used to specify the image path which needs to appear as
a button.

Width:

This attribute is used to define the pixels of the width of an image.

HTML Nested Table

The nested table in HTML means creating a table on a webpage inside
another table on the same web page.

Note: The inner table always has to be placed between the <td> .......... </td> of the
outer table.

Example: The following example describes how to create a nested table.

In this example we create a table, which contains another table in the
2nd cell of first row.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of Nested Table
6. </title>
7. </head>
8. <body>
9. <!?The following table tag is used to create outer table on a webpag
e.
[Link] table tag contains two attributes border and bordercolor.
11. The border attribute is used to specify the border (4) of the o
uter table, and the bordercolor is used to specify the green colour of
border of an outer table. -->
12.<table border="4" bordercolor="green">
13. <tr>
14.<td> It is a 1st Cell of 1st row in the 1st Table. </td>
15. <td> It is a 2nd Cell of 1st row in the 1st Table.
16.
17. <!?The following table tag is used to create an inner table whi
ch is shown in the second cell of the first row in the outer table on a
webpage.
[Link] table tag also contains two attributes border and bordercolor.
19. The border attribute is used to specify the border (6) of the in
ner table, and the bordercolor is used to specify the blue colour of b
order of an inner table. -->
20.<table border="6" bordercolor="blue">
21. <tr>
22.<td> It is a 1st Cell of 1st row in the 2nd Table. </td>
23. </tr>
24.<tr>
25. <td> It is a 2nd Cell of 2nd row in the 2nd Table. </td></tr>

26.</table>
27. </td>
28.</tr>
29. <tr>
30.<td> It is a 3rd Cell of 2nd row in the 1st Table. </td>
31. <td> It is a 4th Cell of 2nd row in the 1st Table. </td>
32.</tr>
33. </table>
34.</body>
35. </html>
Test it Now
Output:

HT
ML Interview Questions
A list of top frequently asked HTML interview questions and HTML5
interview questions and answers are given below.

o HTML5 Interview Questions

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. It makes the text more interactive
and dynamic. It can turn text into images, tables, links. More details.

2) What are Tags?

HTML tags are composed of three things: an opening tag, content and
ending tag. Some tags are unclosed tags.

HTML documents contain two things:

ADVERTISEMENT
o content, and
o tags

When a web browser reads an HTML document, the 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
1. <tag> content </tag>

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

More details.

3) Do all HTML tags have an 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 is formatting in HTML?

The HTML formatting is a process of format the text for a better look and
feel. It uses different tags to make text bold, italicized, underlined. More
details.

5) How many types of heading does an HTML contain?

The HTML contains six types of headings which are defined with the <h1>
to <h6> tags. Each type of heading tag displays different text size from
another. So, <h1> is the largest heading tag and <h6> is the smallest
one. For example:

1. <h1>Heading no. 1</h1>

2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>
More details.
6) How to create a hyperlink in HTML?
The HTML provides an anchor tag to create a hyperlink that links one page
to another page. These tags can appear in any of the following ways:

o Unvisited link - It is displayed, underlined and blue.

o Visited link - It is displayed, underlined and purple.
o Active link - It is displayed, underlined and red.

More details.

7) Which HTML tag is used to display the data in the

tabular form?
The HTML table tag is used to display data in tabular form (row *
column). It also manages the layout of the page, e.g., header section,
navigation bar, body content, footer section. Here is the list of tags used
while displaying the data in the tabular form:

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 colum

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

8) 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 Ordered list - The ordered list displays elements in numbered format. It is

represented by <ol> tag.
o Unordered list - The unordered list displays elements in bulleted format. It
is represented by <ul> tag.
o Definition list - The definition list displays elements in definition form like
in dictionary. The <dl>, <dt> and <dd> tags are used to define
description list.

More details.

9) What is the difference between HTML elements and

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

10) 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.

11) What is an image map?

Image map facilitates you to link many different web pages using a single
image. It is represented by <map> tag. You can define shapes in images
that you want to make part of an image mapping.
12) How to insert a copyright symbol on a browser page?
You can insert a copyright symbol by using © or © in an HTML
file.

13) How to create a nested webpage in HTML?

The HTML iframe tag is used to display a nested webpage. In other words,
it represents a webpage within a webpage. The HTML <iframe> tag
defines an inline frame. For example:

1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>HTML Iframes example</h2>
5. <p>Use the height and width attributes to specify the size of the ifr
ame:</p>
6. <iframe src="[Link] height="300" widt
h="400"></iframe>
7. </body>
8. </html>

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

You can keep the list elements straight by using indents.

15) Does a hyperlink only apply to text?

No, you can use hyperlinks on text and images both. 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 anchor tag.

Syntax
1. <a href = "..........."> Link Text </a>
More details.
16) 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. It describes the look and formatting of a document written in
markup language.

17) 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.

18) 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.

19) Explain the layout of HTML?

HTML layout specifies a way in which the web page is arranged.

Every website has a specific layout to display content in a specific
manner.

Following are different HTML5 elements which are used to define the
different parts of a webpage.

o <header>: It is used to define a header for a document or a section.

o <nav>: It is used to define a container for navigation links
o <section>: It is used to define a section in a document
o <article>: It is used to define an independent, self-contained article
o <aside>: It is used to define content aside from the content (like a
sidebar)
o <footer>: It is used to define a footer for a document or a section

20) What is a marquee?

Marquee is used to put the scrolling text on a web page. It scrolls the
image or text up, down, left or right automatically. You should put the text
which you want to scroll within the <marquee>......</marquee> tag. More
details.

21) How many tags can be used to separate a section of

texts?
Three tags are used to separate the texts.

o <br> tag - Usually <br> tag is used to separate the line of text. It breaks
the current line and conveys the flow to the next line
o <p> tag - The <p> tag contains the text in the form of a new paragraph.
o <blockquote> tag - It is used to define a large quoted section. If you have
a large quotation, then put the entire text within
<blockquote>.............</blockquote> tag.

22) How to make a picture of 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.

1. <body background = "[Link]">

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

23) What are empty elements?

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

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

The span tag is used for following things:

o For adding color on text

o For adding background on text
o Highlight any color text

Example:

1. <p>
2. <span style="color:#ffffff;">
3. In this page we use span.
4. </span>
5. </p>

25) What is the use of an iframe tag?

An iframe is used to display a web page within a web page.

Syntax:

1. <iframe src="URL"></iframe>

Example:

1. <iframe src="demo_iframe.html" width="200px" height="200px">

</iframe>

Target to a link:

1. <iframe src="[Link] name="iframe_a"></

iframe>

26) What are the entities in HTML?

The HTML character entities are used as a replacement for reserved
characters in HTML. You can also replace characters that are not present
on your keyboard by entities. These characters are replaced because
some characters are reserved in HTML.

27) Why is a URL encoded in HTML?

An URL is encoded to convert non-ASCII characters into a format that can
be used over the Internet because a URL is sent over the Internet by using
the ASCII character-set only. If a URL contains characters outside the ASCII
set, the URL has to be converted. The non-ASCII characters are replaced
with a "%" followed by hexadecimal digits.
28) Does a <!DOCTYPE html> tag is a HTML tag?
No, the <!DOCTYPE html> declaration is not an HTML tag. 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. So, <!DOCTYPE html> is used to instruct the web browser
about the HTML page.

HTML5 Interview Questions

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

29) What is the canvas element in HTML5?

The <canvas> element is a container that is used to draw graphics on the
web page using scripting language like JavaScript. It allows for dynamic
and scriptable rendering of 2D shapes and bitmap images. There are
several methods in canvas to draw paths, boxes, circles, text and add
images. For Example:

1. <canvas id="myCanvas1" width="300" height="100" style="borde

r:2px solid;">
2. Your browser does not support the HTML5 canvas tag.
3. </canvas>
More details.

30) What is SVG?

HTML SVG is used to describe the two-dimensional vector and
vector/raster graphics. SVG images and their behaviors are defined in XML
text files. So as XML files, you can create and edit an SVG image with the
text editor. It is mostly used for vector type diagrams like pie charts, 2-
Dimensional graphs in an X, Y coordinate system.

1. <svg width="100" height="100">

2. <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fil
l="red" />
3. </svg>
More details.
31) What are the different new form element types in HTML
5?
Following is a list of 10 frequently used new elements in HTML 5:

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

32) 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.

33) Which type of video formats are supported by HTML5?

HTML 5 supports three types of video format:

o mp4
o WebM
o Ogg

More details.

34) Is audio tag supported in HTML 5?

Yes. It is used to add sound or music files on the web page. There are
three supported file formats for HTML 5 audio tag.
1. mp3
2. WAV
3. Ogg

Let's see the code to play mp3 file using HTML audio tag.

1. <audio controls>
2. <source src="koyal.mp3" type="audio/mpeg">
3. Your browser does not support the html audio tag.
4. </audio>

Instead of koyal.mp3, you can pass any mp3 file name.

More details.

35) 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.

36) 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. It
is used to handle the group of diagrams, photos, code listing with some
embedded content.

1. <p>The Taj Mahal is widely recognized as "the jewel of Muslim art i

n India and one of the universally admired masterpieces of the worl
d's heritage."</p>
2. <figure>
3. <img src="htmlpages/images/[Link]" alt="Taj Mahal"/>
4. </figure>
More details.

37) What is the use of figcaption tag in HTML 5?

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. The <figcaption> element is used with <figure> element
and it can be placed as the first or last child of the <figure> element.

1. <figure>
2. <img src="htmlpages/images/[Link]" alt="Taj Mahal"/>
3. <figcaption>Fig.1.1 - A front view of the great Taj Mahal in Agra.</
figcaption>
4. </figure>
More details.

38) What is button tag?

The button tag is used in HTML 5. It is used to create a clickable button
within the HTML form on the web page. It is generally used to create a
"submit" or "reset" button. Let's see the code to display the button.

1. <button name="button" type="button">Click Here</button>

More details.

39) What is the use of 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.

40) What is datalist tag?

The HTML 5 datalist tag provides an autocomplete feature on the form
element. It facilitates users to choose the predefined options to the users
to select data.

1. <label>
2. Enter your favorite cricket player: Press any character<br />
3. <input type="text" id="favCktPlayer" list="CktPlayers">
4. <datalist id="CktPlayers">
5. <option value="Sachin Tendulkar">
6. <option value="Brian Lara">
7. <option value="Jacques Kallis">
8. <option value="Ricky Ponting">
9. <option value="Rahul Dravid">
10. <option value="Shane Warne">
11. <option value="Rohit Sharma">
12. <option value="Donald Bradman">
13. <option value="Saurav Ganguly ">
14. <option value="AB diVilliers">
15. <option value="Mahendra Singh Dhoni">
16. <option value="Adam Gilchrist">
17. </datalist>
18.</label>
More details.

41) How are tags 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:

1. <div id="menu">
2. <ul>
3. <li>News</li>
4. <li>Sports</li>
5. <li>Weather</li>
6. </ul>
7. </div>

HTML 5 Menu:

1. <nav>
2. <ul>
3. <li>News</li>
4. <li>Sports</li>
5. <li>Weather</li>
6. </ul>
7. </nav>

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

No, the browser will not be able to identify that it is an HTML document
and HTML 5 tags do not function properly..
43) What is the use of the required attribute in HTML5?
It forces a user to fill text on the text field or text area before submitting
the form. It is used for form validation.

Example:

1. Name: <input type="text" name="name" required>

44) 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:

1. <input type="email">

 Home
 HTML
 XHTML
 CSS
 JavaScript
 Bootstrap
 jQuery
 PHP
 XML
 JSON
 Python
 C++
 Java
 C#
 SQL
 Interview Q

HTML Tutorial
Introduction to HTMLWhat is HTML HTML Text EditorsHTML Building BlocksHTML
tagsHTML AttributesHTML ElementsHTML FormattingHTML HeadingHTML ParagraphHTML
Phrase TagsHTML AnchorHTML ImageHTML TableHTML ListsHTML Ordered ListHTML
Unordered ListHTML Description ListHTML FormHTML Form InputHTML Form
AttributeHTML with CSSHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML
CommentsHTML File PathHTML HeadHTML LayoutHTML Layout TechniquesHTML
ResponsiveHTML ComputercodeHTML EntitiesHTML SymbolsHTML CharsetHTML URL
Encode

HTML Attributes
HTML Global AttributesHTML Event Attributes

HTML Tags List

HTML 5 Tags

HTML <!DOCTYPE> Tag

HTML <a> Tag

HTML <abbr> Tag

HTML <acronym> Tag

HTML <address> Tag

HTML <applet> Tag

HTML <area> Tag

HTML <article> Tag

HTML <aside> Tag

HTML <audio> Tag

HTML <b> Tag

HTML <base> Tag

HTML <basefont> Tag

HTML <bdi> Tag

HTML <bdo> Tag

HTML <big> Tag

HTML <blockquote> Tag

HTML <body> Tag

HTML <br> Tag

HTML <button> Tag

HTML <canvas> Tag

HTML <caption> Tag

HTML <center> Tag

HTML <cite> Tag

HTML <code> Tag

HTML <col> Tag

HTML <colgroup> Tag

HTML <data> Tag

HTML <datalist> Tag

HTML <dd> Tag

HTML <del> Tag

HTML <details> Tag

HTML <dfn> Tag

HTML <dialog> Tag

HTML <dir> Tag

HTML <div> Tag

HTML <dl> Tag

HTML <dt> Tag

HTML <em> Tag

HTML <embed> Tag

HTML <fieldset> Tag

HTML <figcaption> Tag

HTML <figure> Tag

HTML <font> Tag

HTML <footer> Tag

HTML <form> Tag

HTML <frame> Tag

HTML <frameset> Tag

HTML <h1> to <h6> Tag

HTML <head> Tag

HTML <header> Tag

HTML <hr> Tag

HTML <html> Tag

HTML <i> Tag

HTML <iframe> Tag

HTML <img> Tag

HTML <input> Tag

HTML <ins> Tag

HTML <isindex> Tag

HTML <kbd> Tag

HTML <label> Tag

HTML <legend> Tag

HTML <li> Tag

HTML <link> Tag

HTML <main> Tag

HTML <map> Tag

HTML <mark> Tag

HTML <marquee> Tag

HTML <menu> Tag

HTML <meta> Tag

HTML <meter> Tag

HTML <nav> Tag

HTML <noframes> Tag

HTML <noscript> Tag

HTML <object> Tag

HTML <ol> Tag

HTML <optgroup> Tag

HTML <option> Tag

HTML <output> Tag

HTML <p> Tag

HTML <param> Tag

HTML <picture> Tag

HTML <pre> Tag

HTML <progress> Tag

HTML <q> Tag

HTML <rp> Tag

HTML <rt> Tag

HTML <ruby> Tag

HTML <s> Tag

HTML <samp> Tag

HTML <script> Tag

HTML <section> Tag

HTML <select> Tag

HTML <small> Tag

HTML <source> Tag

HTML <span> Tag

HTML <strike> Tag

HTML <strong> Tag

HTML <style> Tag

HTML <sub> Tag

HTML <summary> Tag

HTML <sup> Tag

HTML <svg> Tag

HTML <table> Tag

HTML <tbody> Tag

HTML <td> Tag

HTML <template> Tag

HTML <textarea> Tag

HTML <tfoot> Tag

HTML <th> Tag

HTML <thead> Tag

HTML <time> Tag

HTML <title> Tag

HTML <tr> Tag

HTML <track> Tag

HTML <tt> Tag

HTML <u> Tag

HTML <ul> Tag

HTML <var> Tag

HTML <video> Tag

HTML <wbr> Tag

HTML5 Advance
HTML5 tutorial

HTML5 User Manual

HTML 5 Tags

HTML5 New Elements

HTML Event Attributes

HTML Google Maps

HTML5 Semantics

HTML5 Migration
HTML Audio

HTML Video

HTML SVG

HTML Canvas

HTML API
HTML Drag & Drop

HTML Geolocation

HTML Web Storage

HTML Web Workers

HTML SS Event

HTML Color Names

HTML Misc
HTML Button onClick

HTML Checkbox Tag

HTML code Tag

HTML favicon

HTML Login Form

HTML Radio Tag

HTML Registration Form

HTML Required Attribute

HTML Space Code

HTML Text Tag

HTML Background-color

HTML Date

HTML Form Action

HTML Id Attribute

HTML List Box

Add JavaScript to HTML

HTML Background Image

HTML Button Type

HTML Hide Element

HTML Reset Button

HTML Search Box

HTML Selected Attribute

Simple HTML Pages

Create HTML Page

HTML Button Disabled

HTML Font Color

HTML Font Size

HTML Image Button

HTML Nested Table

What Does HTML Stand ForHow to Insert Image in HTMLHow to Change Font in HTMLHow
to Change Text Color in HtmlHow to Change Background Color in HtmlHow to Comment in
HtmlHow to Link CSS to HtmlHow to add Background Image in HtmlHow to Convert Html
to PDFHow to add Link in HtmlHow to Make a Table in HtmlHow to Change Font Size in
HtmlHow to make a Button in HtmlHow to Add a Favicon in HtmlHow to Change Image
Size in HtmlHow to align text in HtmlHow to align image in HtmlHow to add Video in
HtmlHow to Change Link color in HtmlHow to make an Image a Link in HtmlHow to add
Space in HtmlHow to Embed Youtube Video in HtmlHow to add a Line in HtmlHow to Make
a Dropdown Menu in HtmlHow to call a JavaScript Function in HtmlHow to Create a Form
in HtmlHow to make a List in HtmlHow to Rotate Image in HtmlHow to add jQuery to
HtmlHow to Move Image in HtmlHow to Create Text Box in HtmlHow to move a Text in
HtmlWhat does br mean in htmlHow to add border in HtmlWhat does Div mean in
HtmlHow to Wrap text in HtmlWhat does span do in HtmlHow to make a Navigation Bar in
HtmlHow to use PHP in HtmlHow to Highlight text in HtmlWhat does p mean in HtmlHow
to add Padding in HtmlWhat does ul mean in HtmlHow to add Social Media Icons in
HtmlHow to make a Footer in HtmlHow to make a Search bar in HtmlHow to Wrap Text
around an image in HtmlHTML vs HTML5HTML CounterIntermediate Excel TestDownload
pdf file using HTMLPassword hide in HTMLHTML CalculatorHow to sort table data in HTML
using JavaScriptHTML Color PickerHow to include image in HTMLHTML5 signature pad to
imagehidden vs aria-hidden attributes in HTMLHow to mute video in HTMLHTML vs
ASPHTML 5 Spellcheck attributeHTML 5 accept attributeHTML Color StylesHow to add a
Vertical Line in HtmlHow to create an Email Newsletter using HTML and CSSHow to align
a placeholder text in HTMLHow to Create Browsers Window using HTML and CSSConvert
an Image into Grayscale Image using HTML/CSSHide or Show Elements in HTML using
Display PropertyHow to Add a Login Form to an Image using HTML and CSS How to Set
the Margins of a Paragraph Element using CSSHow to Add Google Translate Button on
Your Webpagebody alink Attribute in HTMLBasics of AnimationDesign a Tribute Page using
HTML and CSSHow to Make Smooth Bounce Animation Using CSSHTML blink TagHow to
Create A Discord BOTHow to Divide Html Page Into Two Parts Vertically And
HorizontallyHow to Make A Responsive Website For All DevicesHow to create a simple
webpage using [Link]? (For Beginners)Simple Calculator in HTML using eval() in
JavaScript and CSSAdd and Delete rows of a table on button clicksHow to submit a HTML
form using JavaScriptSimple Calculator in HTML using for loopsCalculator using Shunting
yard algorithm in HTML using JavaScriptDifferent ways to build a calculator in HTML using
JavaScriptPublishing your Calculator website using Github pages (Beginner level) Move an
image on button clicks in HTML using CSS and JavaScript What is Public_html
directoryHow to hide scrollbar in htmlHow to Login [Link] Basics TagHTML
Code for WebsiteHTML CSSHTML to JPGHow Web 3 Will Transform Our LivesTop web 3.0
benefits

MCQ
HTML MCQ

Interview Questions
HTML Interview Questions

HTML Font Size

The Size is an attribute of <font> tag, which specifies the text size.

Syntax
1. <font size="number">

In the above syntax, the number is a value of the Size attribute, which
denotes the text size. The number for the font size is lies between the 1
and 7. By default, the font size of a text on a web page is 3.

Note: The size attribute of <font> tag is not supported in HTML5. We can use CSS
instead of it.

Example 1: The following example uses the different numbers from 1 to

7 as the size of a text:

1. <!DOCTYPE html>
2. <html>
3. <title>
4. Example of Size attribute
5. </title>
6. <body>
7. <Center>
8. <font size="1">
9. JavaTpoint Size = "1"
10.</font>
11. <br>
12.<font size="2">
13. JavaTpoint Size = "2"
14.</font>
15. <br>
16.<font size="3">
17. JavaTpoint Size = "3"
18.</font>
19. <br>
20.<font size="4">
21. JavaTpoint Size = "4"
22.</font>
23. <br>
24.<font size="5">
25. JavaTpoint Size = "5"
26.</font>
27. <br>
28.<font size="6">
29. JavaTpoint Size = "6"
30.</font>
31. <br>
32.<font size="7">
33. JavaTpoint Size = "7"
34.</font>
35. </Center>
36.</body>
37. </html>
Test it Now

Output:
Output:

Html <Button> Type

The type is an attribute of <button> element, which sets the type of the
button as described in the following syntax:

1. <button type="button|submit|reset">

Following are the three values of type attribute:

1. Button: The button value is used for the clickable button.

2. Submit: The submit value is used for submitting the form-data.
3. Reset: The reset value is used to reset the values of a form to its initial
values.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">

5. <title>
6. Example of Button Type
7. </title>
8. <style>
9. /* The following tag selector body use the font-family and backgroun
d-color properties for body of a page*/
10.
11. body {
[Link]-family: Calibri, Helvetica, sans-serif;
13. background-color: pink;
14.}
15. /* Following container class used padding for generate space a
round it, and also use a background-color for specify the color lightbl
ue as a background */
16.
17. .container {
[Link]: 50px;
19. background-color: lightblue;
20.}
21. /* The following tag selector input use the different properties
for the text filed. */
[Link][type=text] {
23. width: 100%;
24. padding: 15px;
25. margin: 5px 0 22px 0;
[Link]: inline-block;
27. border: none;
28. background: #f1f1f1;
29. }
30.
31. input[type=text]:focus {
[Link]-color: orange;
33. outline: none;
34.}
35. div {
36. padding: 10px 0;
37. }
[Link] {
39. border: 1px solid #f1f1f1;
40. margin-bottom: 25px;
41. }
42./* The following tag selector button use the different properties for the But
ton. */
43. button {
44. background-color: #4CAF50;
45. padding: 16px 20px;
46. margin: 8px 0;
47. border: none;
48. cursor: pointer;
49. color: white;
50. width: 100%;
51. opacity: 0.9;
52.}
53. /* The following tag selector hover use the opacity property fo
r the Button which select button when you mouse over it. */
[Link]:hover {
55. opacity: 1;
56.}
57. </style>
58.</head>
59. <body>
60.<form>
61. <div class="container">
62.<center> <h1> Registration Form</h1> </center>
63.
64.<hr>
65. <label > Firstname </label>
66.<input type="text" name="firstname" placeholder= "Firstname" size="1
5" required />
67. <label> Middlename: </label>
68.<input type="text" name="middlename" placeholder="Middlename" size
="15" required />
69. <label> Lastname: </label>
70.<input type="text" name="lastname" placeholder="Lastname" size="15
"required />
71.
72.<div>
73. <label>
[Link] :
75. </label><br>
76.<input type="radio" value="Male" name="gender" checked > Male
77. <input type="radio" value="Female" name="gender"> Fema
le
78.<input type="radio" value="Other" name="gender"> Other
79.
80.</div>
81. <label>
[Link] :
83. </label>
84.<input type="text" name="country code" placeholder="Country Code" v
alue="+91" size="2"/>
85. <input type="text" name="phone" placeholder="phone no."
size="10"/ required>
86.
87.
88.<label for="email"><b>Email</b></label>
89. <input type="text" placeholder="Enter Email" id="email" na
me="email" required>
90.
91. The below button displays as the submit button, which is used
to submit the form.
92.
93. <button type="submit" value="submit">Submit</button>
94.
95. The below button displays the reset button, which is used to r
eset the form to its initial values.
96.
97. <button type="reset" value="reset">Reset</button>
98.
99. The below button displays a message on a web page when yo
u click on it. After clicking on a button, a function is called from the s
cript tag.
100.
101. <button type="button" onclick="sfun()"> Print a Simple Mes
sage </button>
102. <script>
103. function sfun()
104. {
105. [Link]("Hello Javatpoint");
106. }
107. </script>
108. </form>
109. </body>
110. </html>
Test it Now

Output:

Home Economics 9
No ratings yet
Home Economics 9
9 pages
Strategic Allai MSA NMIMS
No ratings yet
Strategic Allai MSA NMIMS
4 pages
Wireless Lans: Chapter Four
0% (1)
Wireless Lans: Chapter Four
11 pages
Java 2D Graphics and Drawing Guide
No ratings yet
Java 2D Graphics and Drawing Guide
35 pages
CAN Shift Engineer Area Visit Checklist Rev-01
No ratings yet
CAN Shift Engineer Area Visit Checklist Rev-01
2 pages
Pre-APRF101 Lab 4 - Part 1 Evaporator & Air-Cooled Condensing Unit
No ratings yet
Pre-APRF101 Lab 4 - Part 1 Evaporator & Air-Cooled Condensing Unit
6 pages
Quality Management in Garment Industry of Bangladesh: June 2009
No ratings yet
Quality Management in Garment Industry of Bangladesh: June 2009
9 pages
Biology 1201A
No ratings yet
Biology 1201A
5 pages
The Global Economy
No ratings yet
The Global Economy
17 pages
Winter Cozy Comfort List
No ratings yet
Winter Cozy Comfort List
3 pages
Linguaphone French Coursebook
100% (4)
Linguaphone French Coursebook
241 pages
KRA Income Tax Return Acknowledgment
No ratings yet
KRA Income Tax Return Acknowledgment
1 page
Upsconline - Gov.in Marksheet Exam Marksheet System View Detail - PHP Tikl YUdjPTE2NTczOTg5ZTU2MDIyMDk5NmJlZWRlOTdkZjg0MzA3OTZkZjhlOTQxOWQ
No ratings yet
Upsconline - Gov.in Marksheet Exam Marksheet System View Detail - PHP Tikl YUdjPTE2NTczOTg5ZTU2MDIyMDk5NmJlZWRlOTdkZjg0MzA3OTZkZjhlOTQxOWQ
1 page
Paul Ivan T. Bautista, Gerome M. Fevidal, and Daniel V. Tuazon High School Department, Diliman Preparatory School
No ratings yet
Paul Ivan T. Bautista, Gerome M. Fevidal, and Daniel V. Tuazon High School Department, Diliman Preparatory School
1 page
Eye Contact During Sex
No ratings yet
Eye Contact During Sex
3 pages
URSC National Science Day 2025 Events
No ratings yet
URSC National Science Day 2025 Events
15 pages
Parallel Port: Strobe Strobe
No ratings yet
Parallel Port: Strobe Strobe
11 pages
Geological Evolution of Java's Pleistocene
No ratings yet
Geological Evolution of Java's Pleistocene
8 pages
Socio-Economic Empowerment in Embu Youth
No ratings yet
Socio-Economic Empowerment in Embu Youth
202 pages
Thesis on Courage in To Kill a Mockingbird
100% (3)
Thesis on Courage in To Kill a Mockingbird
6 pages
EQ Placement
No ratings yet
EQ Placement
3 pages
Planning 2: Urban Design Fundamentals
67% (6)
Planning 2: Urban Design Fundamentals
4 pages
Chapter 12 Evaluation
No ratings yet
Chapter 12 Evaluation
7 pages
Science 4 Reviewer
No ratings yet
Science 4 Reviewer
4 pages
Wisdom Orayer - Google Search
No ratings yet
Wisdom Orayer - Google Search
1 page
Group Assignment of Group 15B
100% (1)
Group Assignment of Group 15B
15 pages
PHD in Deep Learning Motivation Statement
No ratings yet
PHD in Deep Learning Motivation Statement
2 pages
Community Health Nursing Overview
No ratings yet
Community Health Nursing Overview
9 pages
Compliance Matrix - GIGW
No ratings yet
Compliance Matrix - GIGW
6 pages
Sparks and The 40 Developmental Assets
No ratings yet
Sparks and The 40 Developmental Assets
2 pages