0% found this document useful (0 votes)

232 views

HTML Notes

HTML is the standard markup language used to create web pages. It was created by Tim Berners-Lee in 1991. HTML uses tags to define the structure and layout of a web page. Some key tags are <html> <head> <title> and <body>. HTML pages have a basic structure with a doctype declaration, html, head, title and body elements. HTML is not a programming language but a markup language that helps add structure and semantics to web pages.

Uploaded by

babu

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

232 views

HTML Notes

Uploaded by

babu

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 171

HTML

HTML stands for Hyper Text Markup Language, which is the most widely used language on Web
to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995
It is used to design web pages using the markup language. HTML is the combination
of Hypertext and Markup language. Hypertext defines the link between the web pages and markup
language defines the text document within t
he tag that define the structure of web pages.

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.

Tags vs Attributes in HTML(Building blocks of HTML)

HTML Tags: Tags are the starting and ending parts of an HTML element. They
begin with < symbol and end with > symbol. Whatever written inside < and > are
called tags. Example : <b> </b>

Tags are divided into three groups:

1. Document structure
2. Block
3. inline

HTML Attributes: It is used to define the character of an HTML element. It

always placed in the opening tag of an element. It generally provides additional
styling (attribute) to the element.
Example: <p align="center">This is paragraph.</p>
Golden Rules To Remember
 The vast majority of tags must be opened (<tag>) and closed (</tag>)
with the element information such as a title or text resting between the
tags.
 When using multiple tags, the tags must be closed in the order in which
they were opened. For example:
Example: <strong><em>This is really important!</em></strong>

HTML Basic Format Page Structure

The basic structure of an HTML page is laid out below. It contains the essential building-block
elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web
pages are created.
<DOCTYPE! html> – A doctype or document type declaration is an instruction

that tells the web browser about the markup language in which the current page is
written. It is not an element or tag. The doctype declaration is not case-sensitive.
 <html> – This tag is used to define the root element of HTML document. This tag
tells the browser that it is an HTML document. It is the second outer container
element that contains all other elements within it.
 <head> – This tag is used to define the head portion of the HTML document that
contains information related to the document. Elements within the head tag are not
visible on the front-end of a webpage.
 <body> – The body tag is used to enclose all the visible content of a webpage. In
other words, the body content is what the browser will show on the front end.
Example 1: This is the basic example of HTML that display the heading and paragraph
content.

 HTML
<!DOCTYPE html>
<html>

<head>

<title>Basic Web Page</title>
</head>

<body>

<h1>Welcome to JMIETI</h1>

<p>A computer science portal for College</p>
</body>

</html>

Characteristics of HTML:
 Easy to understand: It is the most straightforward language you can say,
very easy to grasp this language and easy to develop.
 Flexibility: This language is so much flexible that you can create
whatever you want, a flexible way to design web pages along with the text.
 Linkable: You can make linkable text like users can connect from one
page to another page or website through these characteristics.
 Limitless features: You can add videos, GIFs, pictures, or sound
anything you want that will make the website more attractive and
understandable.
 Support: You can use this language to display the documents on any
platform like Windows, Linux, or Mac.
 Not a Programming Language: HTML is not a programming language
as it is only concerned with presenting the information on the web. It is not
used to program any logic but to give structure and semantically meaning
to our website. Though we can link JavaScript code to it which is a
programming language.
 Language Support: HTML can support various other languages
like JavaScript, Ruby, PHP, Perl, and many more. You can also able to
run embed python during the runtime.
Advantages of HTML:
 HTML is easy to learn, easy to apply and it’s totally free you will just need
a text editor and a browser.
 HTML is supported by all the browsers and it is the most friendly search
engine.
 HTML can easily integrate with other languages and is easy to develop.
 It is the basic of all programming languages and the lightest language ever.
 In HTML, the display changes frequently depending on the window size or
the device size making it comfortable to read by the user.
Disadvantages of HTML:
 HTML can be used to create only static Web-page, it can not create
dynamic web-page.
 There is a lack of security in HTML.
 Creating a simple Web-page required so many tags.
 HTML language is not centralised i.e. all the web pages that are connected,
you have to design them separately else need to use CSS.
 HTML becomes complex when you try to create a huge website.
HTML Editors
HTML text editors are used to create and modify web pages. HTML codes can be
written in any text editors including the notepad. One just needs to write HTML in
any text editor and save the file with an extension “.html” or “.htm”. Some of the
popular HTML text editors are given below:
 Notepad
 Notepad++
 Sublime Text 3
 Atom
Notepad
Notepad is a simple text editor. It is an inbuilt desktop application available in
Windows OS.

Brackets
Brackets is an open-source software primarily used for Web development. It
provides live HTML, CSS, JavaScript editing functionality.
Sublime Text 3
Sublime is a cross platform code editor tool. It supports all markup languages.

Atom
Atom is an open source code editor tool for MAC, Linux and Windows.
Steps to write HTML code in Editor:
1. Open any of the text editors of your choice. Here we are using
the notepad text editor.
2. Create new file: File->New File or Ctrl+N.

3. Write HTML code in text editor.

4. Save the file with a suitable name of your choice and .html extension.
5. Open the saved HTML file in your favourite browser (double click on the
file, or right-click – and choose “Open with”).

Core HTML Attributes:

The four core attributes that can be used on the majority of HTML elements (although not all)
are −

 Id
 Title
 Class
 Style
The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML
page. There are two primary reasons that you might want to use an id attribute on an element −
 If an element carries an id attribute as a unique identifier, it is possible to identify
just that element and its content.
 If you have two elements of the same name within a Web page (or style sheet),
you can use the id attribute to distinguish between elements that have the same
name.
We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish
between two paragraph elements as shown below.
Example
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>
The title Attribute
The title attribute gives a suggested title for the element. They syntax for the title attribute is
similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it, although it is often
displayed as a tooltip when cursor comes over the element or while the element is loading.
Example

<!DOCTYPE html>
<html>

<head>
<title>The title Attribute Example</title>
</head>

<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>

</html>
This will produce the following result −
Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever
title you used in your code is coming out as a tooltip of the cursor.
The class Attribute
The class attribute is used to associate an element with a style sheet, and specifies the class of
element. You will learn more about the use of the class attribute when you will learn Cascading
Style Sheet (CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names. For example −
class = "className1 className2 className3"
The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>
<html>

<head>
<title>The style Attribute</title>
</head>

</html>
This will produce the following result −
At this point of time, we are not learning CSS, so just let's proceed without bothering much
about CSS. Here, you need to understand what are HTML attributes and how they can be used
while formatting content.

Internationalization Attributes
There are three internationalization attributes, which are available for most (although not all)
XHTML elements.

 dir
 lang
 xml:lang
The dir Attribute
The dir attribute allows you to indicate to the browser about the direction in which the text
should flow. The dir attribute can take one of two values, as you can see in the table that follows
−

Value Meaning

ltr Left to right (the default value)

rtl Right to left (for languages such as Hebrew or Arabic that are read
right to left)

Example

<!DOCTYPE html>
<html dir = "rtl">

<head>
<title>Display Directions</title>
</head>

<body>
This is how IE 5 renders right-to-left directed text.
</body>

</html>
This will produce the following result −
When dir attribute is used within the <html> tag, it determines how text will be presented
within the entire document. When used within another tag, it controls the text's direction for
just the content of that tag.
The lang Attribute
The lang attribute allows you to indicate the main language used in a document, but this
attribute was kept in HTML only for backwards compatibility with earlier versions of HTML.
This attribute has been replaced by the xml:lang attribute in new XHTML documents.
The values of the lang attribute are ISO-639 standard two-character language codes.
Check HTML Language Codes: ISO 639 for a complete list of language codes.
Example

<!DOCTYPE html>
<html lang = "en">

<head>
<title>English Language Page</title>
</head>

<body>
This page is using English Language
</body>

</html>
This will produce the following result −

The xml:lang Attribute

The xml:lang attribute is the XHTML replacement for the lang attribute. The value of
the xml:lang attribute should be an ISO-639 country code as mentioned in previous section.
Generic Attributes
Here's a table of some other attributes that are readily usable with many of the HTML tags.

Attribute Options Function

align right, left, center Horizontally aligns tags

valign top, middle, bottom Vertically aligns tags within an HTML

element.

bgcolor numeric, hexidecimal, RGB Places a background color behind an

values element
background URL Places a background image behind an
element

id User Defined Names an element for use with Cascading

Style Sheets.

class User Defined Classifies an element for use with

Cascading Style Sheets.

width Numeric Value Specifies the width of tables, images, or

table cells.

height Numeric Value Specifies the height of tables, images, or

table cells.

title User Defined "Pop-up" title of the elements.

We will see related examples as we will proceed to study other HTML tags. For a complete list
of HTML Tags and related attributes please check reference to HTML Tags List.

HTML - Header
We have learnt that a typical HTML document will have following structure −

Document declaration tag

<html>

<head>
Document header related tags
</head>

<body>
Document body related tags
</body>
</html>
This chapter will give a little more detail about header part which is represented by HTML
<head> tag. The <head> tag is a container of various important tags like <title>, <meta>,
<link>, <base>, <style>, <script>, and <noscript> tags.

The HTML <title> Tag

The HTML <title> tag is used for specifying the title of the HTML document. Following is an
example to give a title to an HTML document −

<!DOCTYPE html>
<html>

<head>
<title>HTML Title Tag Example</title>
</head>

<body>
<p>Hello, World!</p>
</body>

</html>
This will produce the following result −

The HTML <meta> Tag

The HTML <meta> tag is used to provide metadata about the HTML document which includes
information about page expiry, page author, list of keywords, page description etc.
Following are few of the important usages of <meta> tag inside an HTML document −

<!DOCTYPE html>
<html>

<head>
<title>HTML Meta Tag Example</title>

<meta name = "robots" content = "noindex, nofollow">

</head>

<body>
<p>Hello, World!</p>
</body>

</html>
This will produce the following result −

The HTML <base> Tag

The HTML <base> tag is used for specifying the base URL for all relative URLs in a page,
which means all the other URLs will be concatenated into base URL while locating for the
given item.
For example, all the given pages and images will be searched after prefixing the given URLs
with base URL http://www.tutorialspoint.com/ directory −

<!DOCTYPE html>
<html>

<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>

<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>
This will produce the following result −
But if you change base URL to something else, for example, if base URL is
http://www.tutorialspoint.com/home then image and other given links will become like
http://www.tutorialspoint.com/home/images/logo.png and
http://www.tutorialspoint.com/html/index.htm

The HTML <link> Tag

The HTML <link> tag is used to specify relationships between the current document and
external resource. Following is an example to link an external style sheet file available
in css sub-directory within web root −

<!DOCTYPE html>
<html>

<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>

<body>
<p>Hello, World!</p>
</body>

</html>
This will produce the following result −

The HTML <style> Tag

The HTML <style> tag is used to specify style sheet for the current HTML document.
Following is an example to define few style sheet rules inside <style> tag −

<!DOCTYPE html>
<html>

<head>
<title>HTML style Tag Example</title> #00aa77
<base href = "https://www.tutorialspoint.com/" />

<style type = "text/css">

.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>

<body>
<p class = "myclass">Hello, World!</p>
</body>

</html>
This will produce the following result −
Note − To learn about how Cascading Style Sheet works, kindly check a separate tutorial
available at css

The HTML <script> Tag

The HTML <script> tag is used to include either external script file or to define internal script
for the HTML document. Following is an example where we are using JavaScript to define a
simple JavaScript function −

<!DOCTYPE html>
<html>

<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />

<script type = "text/JavaScript">

function Hello() {
alert("Hello, World");
}
</script>
</head>

</html>
This will produce the following result, where you can try to click on the given button –

OK
HTML - Formatting
If you use a word processor, you must be familiar with the ability to make text bold, italicized,
or underlined; these are just three of the ten options available to indicate how text can appear
in HTML and XHTML.
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Bold Text Example</title>
</head>

<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>

</html>
This will produce the following result −

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Italic Text Example</title>
</head>

<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>

</html>
This will produce the following result −

Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown below
−
Example
<!DOCTYPE html>
<html>

<head>
<title>Underlined Text Example</title>
</head>

<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>

</html>
This will produce the following result −

Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Strike Text Example</title>
</head>

<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>

</html>
This will produce the following result −

Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths (for example, the
letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same
width.
Example
<!DOCTYPE html>
<html>

<head>
<title>Monospaced Font Example</title>
</head>

<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>

</html>
This will produce the following result −

Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the same
size as the characters surrounding it but is displayed half a character's height above the other
characters.
Example
<!DOCTYPE html>
<html>

<head>
<title>Superscript Text Example</title>
</head>

<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>

</html>
This will produce the following result −

Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the same
as the characters surrounding it, but is displayed half a character's height beneath the other
characters.
Example
<!DOCTYPE html>
<html>

<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>

</html>
This will produce the following result −

Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
Example
<!DOCTYPE html>
<html>

<head>
<title>Inserted Text Example</title>
</head>

<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>

</html>
This will produce the following result −

Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Example

<!DOCTYPE html>
<html>

<head>
<title>Deleted Text Example</title>
</head>

<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>

</html>
This will produce the following result −

Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of the
text surrounding it as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Larger Text Example</title>
</head>

<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>

</html>
This will produce the following result −

Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the rest
of the text surrounding it as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Smaller Text Example</title>
</head>

<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>

</html>
This will produce the following result −

Grouping Content
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div> element to
indicate that all of the elements within that <div> element relate to the footnotes. You might
then attach a style to this <div> element so that they appear using a special set of style rules.
Example
<!DOCTYPE html>
<html>

<head>
<title>Div Tag Example</title>
</head>

<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>

<div id = "content" align = "left" >

<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>

</html>
This will produce the following result −
The <span> element, on the other hand, can be used to group inline elements only. So, if you
have a part of a sentence or paragraph which you want to group together, you could use the
<span> element as follows.
Example
<!DOCTYPE html>
<html>

<head>
<title>Span Tag Example</title>
</head>

<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>
This will produce the following result −
These tags are commonly used with CSS to allow you to attach a style to a section of a page.

HTML - Comments
Comment is a piece of code which is ignored by any web browser. It is a good practice to add
comments into your HTML code, especially in complex documents, to indicate sections of a
document, and any other notes to anyone looking at the code. Comments help you and others
understand your code and increases code readability.
HTML comments are placed in between  tags. So, any content placed with-in  tags will be treated as comment and will be completely ignored by the browser.
Example
<!DOCTYPE html>
<html>

<head>

<title>This is document title</title>
</head>

<body>
<p>Document content goes here.....</p>
</body>

</html>
This will produce the following result without displaying the content given as a part of
comments –

Valid vs Invalid Comments

Comments do not nest which means a comment cannot be put inside another comment. Second
the double-dash sequence "--" may not appear inside a comment except as part of the closing -
-> tag. You must also make sure that there are no spaces in the start-of comment string.
Example
Here, the given comment is a valid comment and will be wiped off by the browser.
<!DOCTYPE html>
<html>

<head>
<title>Valid Comment Example</title>
</head>

<body>

<p>Document content goes here.....</p>
</body>

</html>
This will produce the following result −
But, following line is not a valid comment and will be displayed by the browser. This is because
there is a space between the left angle bracket and the exclamation mark.

<!DOCTYPE html>
<html>

<head>
<title>Invalid Comment Example</title>
</head>

<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>

</html>
This will produce the following result −

Multiline Comments
So far we have seen single line comments, but HTML supports multi-line comments as well.
You can comment multiple lines by the special beginning tag  placed
before the first line and end of the last line as shown in the given example below.
Example
<!DOCTYPE html>
<html>

<head>
<title>Multiline Comments</title>
</head>

<p>Document content goes here.....</p>

</body>

</html>
This will produce the following result −

Conditional Comments
Conditional comments only work in Internet Explorer (IE) on Windows but they are ignored
by other browsers. They are supported from Explorer 5 onwards, and you can use them to give
conditional instructions to different versions of IE.
Example
<!DOCTYPE html>
<html>

<head>
<title>Conditional Comments</title>

</head>

<body>
<p>Document content goes here.....</p>
</body>

</html>
You will come across a situation where you will need to apply a different style sheet based on
different versions of Internet Explorer, in such situation conditional comments will be helpful.

Using Comment Tag

There are few browsers that support <comment> tag to comment a part of HTML code.
Note − The <comment> tag deprecated in HTML5. Do not use this element.
Example
<!DOCTYPE html>
<html>

<head>
<title>Using Comment Tag</title>
</head>

<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>

</html>
If you are using IE, then it will produce following result −
But if you are not using IE, then it will produce following result −

Commenting Script Code

Though you will learn JavaScript with HTML, in a separate tutorial, but here you must make a
note that if you are using Java Script or VB Script in your HTML code then it is recommended
to put that script code inside proper HTML comments so that old browsers can work properly.
Example
<!DOCTYPE html>
<html>

<head>
<title>Commenting Script Code</title>

<body>
<p>Hello , World!</p>
</body>

</html>
This will produce the following result −
Commenting Style Sheets
if you are using Cascading Style Sheet (CSS) in your HTML code then it is recommended to
put that style sheet code inside proper HTML comments so that old browsers can work
properly.
Example
<!DOCTYPE html>
<html>

<head>
<title>Commenting Style Sheets</title>

<body>
<div class = "example">Hello , World!</div>
</body>

</html>
This will produce the following result −

HTML Phrase tag(Logical Tag)

The HTML phrase tags are special purpose tags, which defines the structural meaning of a
block of text or semantics of text. i.e. Logical tags are used to tell the browser what kind
of text is written inside the tags.

Some cases when we could use logical tags are:

 When we want to write code on our website.
 When we want to Emphasize some text.
 When we want to display the abbreviation on the Web page.
 When we want to display some famous quotation on our web page.
 When we want to write some mathematical formula in terms of variables.

Following is the list of phrase tags, some of which we have already discussed in HTML
formatting.
o Abbreviation tag : <abbr>
o Acronym tag: <acronym> (not supported in HTML5)
o Marked tag: <mark>
o Strong tag: <strong>
o Emphasized tag : <em>
o Definition tag: <dfn>
o Quoting tag: <blockquote>
o Short quote tag : <q>
o Code tag: <code>
o Keyboard tag: <kbd>
o Address tag: <address>

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>

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.

Play Video

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

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>

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>

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>

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="https://www.keepinspiring.me/famous-
quotes/"><p>?The first step toward success is taken when you refuse to be a captive o
f the environment in which you first find yourself.?</p></blockquote>
2. <cite>-Mark Caine</cite>

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 A
bout, You Don?t Have To Be Pushed. The Vision Pulls You.</q>?</p>

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. System.out.println("Hello Java"); }} </code>
4. </p>

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>

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@new

domain.com</a>
2. <br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187.
3. </address>

Output:

Tag Description

<abbr> Defines the abbreviation of text.

<acronym> Defines the acronym.

<address> contact information of a person or an organization.

<cite> Defines citation. It displays the text in italic format.

<code> Defines the piece of computer code.

<blockquote> Defines a long quotation.

Defines the deleted text and is used to mark a portion of text which
<del> has been deleted from the document.
Tag Description

Defines the definition element and is used to representing a defining

<dfn> instance in HTML.

<ins> Defines inserted text.

<kbd> Defines keyboard input text.

Defines the block of preformatted text which preserves the text

spaces, line breaks, tabs, and other formatting characters which are
<pre> ignored by web browsers.

<q> Defines the short quotation.

<samp> Defines the sample output text from a computer program.

<strong> Defines strong text i.e. show the importance of the text.

Defines the variable in a mathematical equation or in the computer

<var> program.

Now let’s implement some above-listed tags through examples

1. <bdo> Tag: The <bdo> tag stands for Bi-Directional Override. This tag is used to
change the direction of the text. It takes a “dir” attribute which decides the direction of
the text.
Syntax:
<bdo> Statements... </bdo>

 HTML
<!DOCTYPE html>

<html>

<body>

<p>This text will go right-to-left</p>

<bdo dir="rtl">Hello</bdo>

<p>This text will go left-to-right</p>

<bdo dir="ltr">Hello</bdo>

</body>

</html>

Output:
This text will go right-to-left
Hello
This text will go left-to-right
Hello
2. <del> Tag: The <del> tag draws a line cutting the text which shows the text is
wrong or deleted.
Syntax:
<del>Statements... </del>

 HTML
<!DOCTYPE html>

<html>

<body>

<p>Welcome to year <del>2020</del> 2021</p>

</body>

</html>

Output:
3. <ins> Tag: The <ins> tag is used to show that some text is inserted into the
document. Browsers will usually show inserted tags underlined.
Syntax:
<ins>Statements... </ins>

 HTML
<!DOCTYPE html>

<html>

<body>

<p>price of this shoe is

</p>

</body>

</html>

Output:

4. <strong> Tag: The <strong> tag is used to tell the browser that the text inside this
tag is of great importance and significance. Browser displays this text in bold.
Syntax:
<strong>Statements... </strong>

 HTML
<!DOCTYPE html>

<p>This is

<strong>bolded (important)</strong> text.

</p>

</body>

</html>

Output:

5. <code> Tag: Code tag is used to tell the user that the text written inside this tag is
a code of some programming language. The content inside this tag is displayed in
monospace font.
Syntax:
<code>Statements... </code>

 HTML
<!DOCTYPE html>

<html>

<body>

<p>This is <code>your code</code></p>

</body>

</html>

Output:

6. <kbd> Tag: The <kbd> tag is used to denote that the text shown is input from the
keyboard. The content inside is displayed in a monospace font.
Syntax:
<KBD>Statements... </KBD>

 HTML
<!DOCTYPE html>

<html>

<body>

<p>

Press <kbd>Ctrl</kbd> +

<kbd>C</kbd> To copy text

</p>

</body>

</html>

Output:

7. <pre> Tag: Text in a pre tag is displayed in fixed width-font, and preserves all
the spaces and break lines i.e. the text is shown exactly as it was written in HTML
source code.
Syntax:
<pre>Statements... </pre>

 HTML
<!DOCTYPE html>

<html>

<body>

<pre> Welcome to geeks for

geeks

this is
pre tag

</pre>

</body>

</html>

Output:

Sample Code using Logical Tags: This example contains all logical tags.
 HTML
<!DOCTYPE html>

<html>

<body>

<h1>Logical Tags</h1>

Welcome to <abbr title="Hello">

GFG

</abbr>

<br />

This is <acronym title="Hello">

GFG

</acronym>

<br />

Hello, 5th & 6th Floor,

Royal Kapsons, A- 118, Sector- 136,

Noida, Uttar Pradesh (201305)

</address>

<br />

<cite> Hello </cite> is

my favourite website.

<br />

<code>

Sample code: system.out.println();

</code>

<blockquote cite=

"https://www.Hello.org/">

A Computer Science portal for geeks.

It contains well written, well

thought and well explained computer

science and programming articles,

and quizzes.

</blockquote>

<del> This contains deleted content.</del>

<ins> Newly inserted content.</ins>

<p>

<dfn> Hello </dfn> is a

Computer Science portal for geeks.

It contains well written, well

thought and well explained computer

science and programming articles,

and quizzes.

</p>

<kbd>

Hello - This is

a Keyboard input

</kbd>

<pre>

Dear User,

Congratulations !!

We are delighted to inform you that

you are going to be part of GfG journey.

Thanks,

GfG Team

This is a predefine formatted text

</pre>

</body>

</html>

Output:
HTML Paragraphs Tags:
In this article, we will know the HTML Paragraph, & its basic implementation through
the examples. The <p> tag in HTML defines a paragraph. These have both opening and
closing tags. So anything mentioned within <p> and </p> is treated as a paragraph.
Most browsers read a line as a paragraph even if we don’t use the closing tag i.e, </p>,
but this may raise unexpected results. So, it is a good convention, and we must use the
closing tag.
Syntax:
<p> Content </p>
Example 1: In this example, we are using the <p> tag that is used for paragraphs in
HTML.
 HTML
<!DOCTYPE html>

<html>

<body>

<h2>Welcome To Hello</h2>

<p>A computer science portal for geeks.</p>

</body>

</html>

Output:
HTML <p> tag

Example 2: This example explains the HTML <p> tag.

 HTML
<!DOCTYPE html>

<html>

<body>

<p>A Computer Science portal for geeks.</p>

<p>It contains well written, well thought articles.</p>

</body>

</html>

Output:

Multiple <p> tags

Key Points: When we look at the webpage, we see that there are few spaces added
before and after a paragraph. HTML does this by default. Let’s look at a few properties
of the paragraph tag:
 As already mentioned, the<p>tag automatically adds space before and after
any paragraph, which is basically margins added by the browser.
 If a user adds multiple spaces, the browser reduces them to a single space.
 If a user adds multiple lines, the browser reduces them to a single line.
 By default, the display of the Paragraph element is set to “block” which you
can change using CSS. This means that if you add another paragraph to the
webpage the next paragraph will be inserted in the next line on the webpage.
Example: This example explains the HTML <p> tag having multiple lines.
 HTML
<!DOCTYPE html>

<html>

<body>

<p>

This paragraph has multiple lines.

But HTML reduces them to a single line,

omitting the carriage return we have used.

</p>

<p>

This paragraph has multiple spaces.

But HTML reduces them all to a single

space, omitting the extra spaces and line we have used.

</p>
</body>

</html>

Output:

<p> tag with multiple lines

<br> tag: There is a way to let the HTML know where the browser needs to change the
lines by using the <br> tag. These tags do not have any closing tag. So, just a single
opening tag will change the line.
Syntax:
<br>
Example: This example explains the <br> tag inside the <p> tag to add the line-break.
 HTML
<!DOCTYPE html>

<html>

<body>

<p>

This paragraph has multiple

<br />lines. But HTML reduces them

<br />to a single line, omitting

<br />the carriage return we have used.

</p>

</body>
</html>

Output:

Use of <br> tag inside the <p> tag

Align attribute: The <p> tag specifically supports the alignment attribute and allows
us to align our paragraphs in left, right, or center alignment.
Syntax:
<p align="value">
Example: This example explains the align attribute to align the content in the <p> tag.
 HTML
<!DOCTYPE html>

<html>

<body>

<p align="center">Welcome Geeks</p>

<p align="left">A Computer Science portal for geeks.</p>

<p align="right">It contains well written, well thought articles.</p>

</body>
</html>

Output:

Use of align attribute in <p> tag

<pre> tag: We have seen how the paragraph tag ignores all the changes of lines and
extra spaces within a paragraph, but there is a way to preserve this by the use of
the <pre> tag. It also contains an opening and a closing tag. It displays a text within a
fixed height and width and preserves the extra lines and spaces we use.
Syntax:
<pre> Content </pre>
Example: This example explains the use of the <pre> tag in the <p> tag.
 HTML
<!DOCTYPE html>

<html>

<body>

<pre>

This paragraph has multiple

lines. But it is displayed

as it is unlike the paragraph

tag.

</pre>

<pre>

This paragraph has multiple

spaces. But it is displayed

as it is unlike the paragraph

tag.

</pre>
</body>

</html>

Output:

Use of <pre> tag in the <p> tag

HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to
display on the webpage. When you place the text within the heading tags <h1>.........</h1>, it
is displayed on the browser in the bold format and size of the text depends on the number of
heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags, from
highest level h1 (main heading) to the least level h6 (least important heading).

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading
and h6 is used for least important.

Headings in HTML helps the search engine to understand and index the structure of web
page.

Play Video

Note: The main keyword of the whole content of a webpage should be display by h1 heading tag.

See this 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>
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 keyword 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:
HTML - Formatting
If you use a word processor, you must be familiar with the ability to make text bold, italicized,
or underlined; these are just three of the ten options available to indicate how text can appear
in HTML and XHTML.

Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Bold Text Example</title>
</head>

<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>

</html>
This will produce the following result −

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Italic Text Example</title>
</head>

<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>

</html>
This will produce the following result −

Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown below
−
Example
<!DOCTYPE html>
<html>

<head>
<title>Underlined Text Example</title>
</head>

<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>

</html>
This will produce the following result −

Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>

<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>

</html>
This will produce the following result −

<head>
<title>Monospaced Font Example</title>
</head>

<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>

</html>
This will produce the following result −

<head>
<title>Superscript Text Example</title>
</head>

<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>

</html>
This will produce the following result −

<head>
<title>Subscript Text Example</title>
</head>

<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>

</html>
This will produce the following result −

Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
Example
<!DOCTYPE html>
<html>

<head>
<title>Inserted Text Example</title>
</head>

<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>

</html>
This will produce the following result −

Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Example
<!DOCTYPE html>
<html>

<head>
<title>Deleted Text Example</title>
</head>

<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>

</html>
This will produce the following result −

Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of the
text surrounding it as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Larger Text Example</title>
</head>

<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>

</html>
This will produce the following result −
Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the rest
of the text surrounding it as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Smaller Text Example</title>
</head>

<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>

</html>
This will produce the following result −

<head>
<title>Div Tag Example</title>
</head>

<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>

<div id = "content" align = "left" >

<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>

<!DOCTYPE html>
<html>

<head>
<title>Span Tag Example</title>
</head>

<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>

</html>
This will produce the following result −
These tags are commonly used with CSS to allow you to attach a style to a section of a page.

CHARACTER ENTITY
REFERENCE
A character entity is a code used to represent a character that doesn't belong to
the document's character set. With this mechanism, authors of HTML documents can insert
symbols by writing strings composed by well known and widely supported characters.

There are three ways to write a character entity, and all of them start with an
ampersand ("&") and end with a semicolon (";"):
 By its entity name: a standarized and unique name for each character (for
example, á for "á").
 By its decimal code: a number sign ("#") followed by a decimal code, unique for
each character (for example, á for "á").
 By its hexadecimal code: a number sign ("#") followed by a lowercase letter X
followeb by a hexadecimal code, unique for each character (for
example, á for "á").

‘<‘ is already reserved in HTML language. Sometimes this character needs to

display on the web page that creates ambiguity in code. Along with these are the
character which is normally not present in basic keyboard ( £, ¥, €, © ), etc. We will
explore the HTML entities in detail as we grow in the article.
Syntax:
&entity_name; or &#entity_number;

HTML Character Entities

The following sections present the complete lists of character entity references.

Essential Entities
The following table lists the the essential entities in HTML.

Character Entity Name Entity Number Description

& & & Ampersand

" " " Double quote mark

< < < Less than symbol

> > > Greater than symbol

' ' ' Apostrophe (XHTML only)

Currency Symbols
The following table lists the entities for currency symbols.

Character Entity Name Entity Number Description

¢ ¢ ¢ Cent

£ £ £ Pound

¤ ¤ ¤ General currency

¥ ¥ ¥ Yen

€ € € Euro

Copyright, Trademark, and Registered Symbol

The following table lists the entities for copyright, trademark, and registered symbol.

Character Entity Name Entity Number Description

© © © Copyright

® ® ® Registered

™ ™ ™ Trademark

General Punctuation
The following table lists the entities for general punctuation.

Character Entity Name Entity Number Description

&ensp;   En space

&emsp;   Em space

    Thin space

    Nonbreaking space

– – – En dash

— — — Em dash

‘ ‘ ‘ Left/Opening single-quote

’ ’ ’ Right/Closing single-quote and apostrophe

‚ &sbquo; ‚ Single low-9 quotation mark

“ “ “ Left/Opening double-quote

” ” ” Right/Closing double-quote

„ &bdquo; „ Double low-9 quotation mark

‹ &lsaquo; ‹ Left-pointing single angle quotation mark

› &rsaquo; › Left-pointing single angle quotation mark

« « « Left-pointing double angle quotation mark

» » » Right-pointing double angle quotation mark

† &dagger; † Dagger

‡ &Dagger; † Double dagger

• • • Bullet

… &hellep; … Ellipses

‰ &permil; ‰ Per mille symbol (per thousand)

′ ′ ′ Prime, minutes, feet

″ ″ ″ Double prime, seconds, inches

‾ &oline; ‾ Overline

Ú &frasl; ⁄ Fraction slash

Arrows
The following table lists the entities for arrows.

Character Entity Name Entity Number Description

← ← ← Left arrow

↑ ↑ ↑ Up arrow

→ → → Right arrow

↓ ↓ ↓ Down arrow

↔ ↔ ↔ Left-right arrow

↵ &crarr; ↵ Down arrow with corner leftward

⇐ ⇐ ⇐ Leftward double arrow

⇑ &uArr; ⇑ Upward double arrow

⇒ ⇒ ⇒ Rightward double arrow

⇓ &dArr; ⇓ Downward double arrow

⇔ ⇔ ⇔ Left-right double arrow

Mathematical Symbols
The following table lists the entities for mathematical symbols.

Character Entity Name Entity Number Description

∀ ∀ ∀ for all

∂ ∂ ∂ Partial differential

∃ ∃ ∃ There exists

∅ ∅ ∅ Empty set, null set, diameter

∇ ∇ ∇ Nabla, backward difference

∈ ∈ ∈ Element of

∉ ∉ ∉ Not an element of

∋ &ni; ∋ Contains as a member

∏ ∏ ∏ N-ary product, product sign

∑ ∑ ∑ N-ary summation

− − − Minus sign

∗ &lowast; ∗ Asterisk operator

√ √ √ Square root, radical sign

∝ &prop; ∝ Proportional to

∞ ∞ ∞ Infinity

∠ &ang; ∠ Angle

∧ &and; ∧ Logical and, wedge

∨ &or; ∨ Logical or, vee

∩ ∩ ∩ Intersection, cap

∪ ∪ ∪ Union, cup

∫ ∫ ∫ Integral

∴ &there4; ∴ Therefore

∼ &sim; ∼ Tilde operator, varies with, similar to

≅ &cong; ≅ Approximately equal to

≈ ≈ ≈ Almost equal to, asymptotic to

≠ ≠ ≠ Not equal to

≡ &equiv; ≡ Equivalent to

≤ ≤ ≤ Less than or equal to

≥ ≥ ≥ Greater than or equal to

⊂ ⊂ ⊂ Subset of

⊃ ⊃ ⊃ Superset of

⊄ &nsub; ⊄ Not a subset of

⊆ &sube; ⊆ Subset of or equal to

⊇ &supe; ⊇ Superset of or equal to

⊕ &oplus; ⊕ Circled plus, direct sum

⊗ &otimes; ⊗ Circled times, vector product

⊥ &perp; ⊥ Up tack, orthogonal to, perpendicular

⋅ ⋅ ⋅ Dot operator

Greek Letters
The following table lists the entities for greek letters.

Character Entity Name Entity Number Description

Α Α Α Greek capital alpha

Β Β Β Greek capital beta

Γ Γ Γ Greek capital gamma

Δ Δ Δ Greek capital delta

Ε Ε Ε Greek capital epsilon

Ζ Ζ Ζ Greek capital zeta

Η Η Η Greek capital eta

Θ Θ Θ Greek capital theta

Ι Ι Ι Greek capital iota

Κ Κ Κ Greek capital kappa

Λ Λ Λ Greek capital lambda

Μ Μ Μ Greek capital mu

Ν Ν Ν Greek capital nu

Ξ Ξ Ξ Greek capital xi

Ο Ο Ο Greek capital omicron

Π Π Π Greek capital pi

Ρ Ρ Ρ Greek capital rho

Σ Σ Σ Greek capital sigma

Τ Τ Τ Greek capital tau

Υ Υ Υ Greek capital upsilon

Φ Φ Φ Greek capital phi

Χ Χ Χ Greek capital chi

Ψ Ψ Ψ Greek capital psi

Ω Ω Ω Greek capital omega

α α α Greek small alpha

β β β Greek small beta

γ γ γ Greek small gamma

δ δ δ Greek small delta

ε ε ε Greek small epsilon

ζ ζ ζ Greek small zeta

η η η Greek small eta

θ θ θ Greek small theta

ι ι ι Greek small iota

κ κ κ Greek small kappa

λ λ λ Greek small lambda

μ μ μ Greek small mu

ν ν ν Greek small nu

ξ ξ ξ Greek small xi

ο ο ο Greek small omicron

π π π Greek small pi

ρ ρ ρ Greek small rho

ς &sigmaf; ς Greek small letter final sigma

σ σ σ Greek small sigma

τ τ τ Greek small tau

υ υ υ Greek small upsilon

φ φ φ Greek small phi

χ χ χ Greek small chi

ψ ψ ψ Greek small psi

ω ω ω Greek small omega

ϑ &thetasym; ϑ Greek small theta symbol

ϒ &upsih; ϒ Greek upsilon with hook

ϖ ϖ ϖ Greek pi symbol

Miscellaneous
The following table lists the other useful entities supported by HTML.
Character Entity Name Entity Number Description

⌈ &lceil; ⌈ Left ceiling

⌉ &rceil; ⌉ Right ceiling

⌊ &lfloor; ⌊ Left floor

⌋ &rfloor; ⌋ Right floor

⟨ &lang; ⟨ Left-pointing angle bracket

⟩ &rang; ⟩ Right-pointing angle bracket

◊ &loz; ◊ Lozenge

ℑ &image; ℑ Blackletter capital I, imaginary part

℘ &weierp; ℘ Script capital P, power set

ℜ &real; ℜ Blackletter capital R, real part

ℵ &alefsym; ℵ Alef symbol, or first transfinite cardinal

♠ &spades; ♠ Black spade suit

♣ &clubs; ♣ Black club suit

♥ &hearts; ♥ Black heart suit

♦ &diams; ♦ Black diamond suit

Hypertext:
Hypertext can be defined as the text shown on your web browser's screen,
which contains hyperlinked data (data here means from which document it
will go to which document) and hence leads readers to different web pages
by clicking on them. In this chapter, you will learn how to create your
hyperlinks and use them to build websites and web pages.
Anchor Tag
The Anchor tag in HTML can be defined as a means to create a hyperlink
that can link your current page on which the text is being converted to
hypertext via <a> (anchor tag) to another page. This anchoring from one
page to another is made possible by the attribute "href", which can be
abbreviated (hypertext reference).

href attribute
The attribute 'href' of the Anchor tag is implemented for defining the
address or path to which this hypertext will get linked. In other words, it
can be said that it directs you out of your page to that destination page,
whose link you have mentioned within the double quotes of the href
attribute as value. The syntax for an anchor tag with href attribute looks
something like this:

<a href="URL">Text Here</a>

Appearance of HTML <a> tag
Since Anchor tags are used for giving hyperlinks, you might have noticed
that they change color based on certain situations, such as unvisited,
clicked, visited, etc. Let's see their color code concerning their activity:

 An unvisited link gets displayed with properties like underlined, and

the color is blue.
 A link that is visited gets displayed as underlined with color as
purple.
 A link that is an active link gets displayed as underlined with red
color.

Still, many web developers will deposit their link colors in their web pages
to match their site's color scheme. Here's the format:

<body bgcolor="red" text="yellow" link="blue" alink="#FFFF00"

vlink="#FF00FF">
You can also provide hex code for colors (as you can see from the above
example), or else you can use specific words for each color, which is
acceptable by the browser.
Program for Anchor Tag
Example:

Run Code
<!DOCTYPE html>
<html>

<body>
<a href="https://www.w3schools.in/">Welcome to w3schools</a>
</body>

</html>
Anchor in Images
Anchor tags can also be used to create hyperlinks through images also. Here's a code snippet
to show how to perform that.

Example:

<!DOCTYPE html>
<html>

</html>

Link Attributes

 href- Specify the link's target URL <a href="domain.com">

 name-Link to an anchor mark within the page<a name="backtotop" >
 target-Specify how the taget document should be opened, e.g.< in a new
tab target="_blank">
 title- Provide text that will be displayed when the user hovers over< a
link title="hello! I am a link" >
 rel- Specifies the relationship between the source and the target
document<a rel="next" >
 rev- reverse of rel atrribute

href attribute

To create a hyperlink, the destination (address) of the document must be known. A

hyperlink can link to pages on your own domain, to other websites, or to a file (such
as a PDF document).

For example, to link to the Google homepage, the code is as follows:

<a href="https://www.google.com">Google Home</a>

Href stands for hypertext reference. This attribute defines the target address of the
document, which this time is linked to (https://www.google.com). The “=” sign is
the connection of the attribute with the attribute value, whereby “href” is the
attribute and “ https://www.google.com ” is the attribute value. There is an
apostrophe before and after the attribute value. The defined phrase “Google Home”
is known as the anchor text or link text - this is what is visible and clickable for the
user. An anchor text is ideally concise, informative, and relevant to the landing
page.

If you want to link internally to another part of your website, you don’t have to
specify the full address, in this case, the file name is sufficient:

<a href="MyPage.html">My page</a>

Name attribute

The name attribute of the anchor tag can be used to enable users to “jump” to a
specific point on a page (jump marker, anchor). This is especially useful with large
pages or subdivisions.

The HTML code looks like this:

<a name="to top"></a> or

<a name="Content"></a>Content

In the first code sample, you link from the bottom of a page back to the beginning,
so users can quickly get to the top of the page without having to scroll for a long
time. In the second example, users can directly access a part of the page, for
example a subdivision point. By clicking, users are guided via name attribute
directly to the subject.

<a href="#Content">Content</a>

By simply setting a hash tag (#) at the anchor name, the browser can identify a jump
within the page.

You can also link to a specific location on another page internally. This would be
defined as follows:
<a href="anotherpage.html#name">Linktext</a>

The “#name” is specified after the filename.

Target attribute

The target attribute specifies how the destination page or the target document should
be opened. “target=” _ blank “ is used for the opening of the target page in a new
tab. This is the usual option when using target attributes for linking to other pages.

<a href="http://www.mypage.com" target="_blank" rel="noopener">Linktext</a>

Title attribute

The title attribute gives users an important indication as to where they will be
directed to when they click on a link. If the user hovers with the mouse over a link
reference, the title text, which was defined in the attribute, will be displayed. This
can be a tool tip, or description of the resource to which the link directs. The data
from the title attribute makes the site more user-friendly.

The title attribute can also be used for images and graphic files to give a brief
description of what is shown in the picture.

<img title="Here you can see a sample image" src="exampleimage.png"

alt="sample image">
Input:

 html
<!DOCTYPE html>

<html>

<body>

<h3>Various options available in the Target Attribute</h3>

<p>If you set the target attribute to "_blank",

the link will open in a new browser window or tab.</p>

<a href="https://www.geeksforgeeks.org" target="_blank">GeeksforGeeks</a>

<p>If you set the target attribute to "_self",

the link will open in the same window or tab.</p>

<a href="https://www.geeksforgeeks.org" target="_self">GeeksforGeeks</a>

<p>If you set the target attribute to "_top",

the link will open in the full body of the window.</p>

<a href="https://www.geeksforgeeks.org" target="_top">GeeksforGeeks</a>

<p>If you set the target attribute to "_parent",

the link will open in the parent frame.</p>

<a href="https://www.geeksforgeeks.org" target="_parent">GeeksforGeeks</a>

</body>

</html>

Output:

Creating a Bookmark Link for a Webpage

A bookmark is a link that can be used to jump to specified portion of a
webpage.Bookmarks are very useful if a webpage is quite long.
Steps to create a bookmark are:
1. Using the id attribute,create a bookmark.

2. Add the specified portion of the webpage to the bookmark.

Input :

 html

<!DOCTYPE html>
<html>
<body>

<p><a href="#T11">Jump to Topic 11</a></p>

<p><a href="#T17">Jump to Topic 17</a></p>

<p><a href="#T20">Jump to Topic 20</a></p>

<h2>Topic 1</h2>

<p>paragraph 1
.....</p>

<h2>Topic 2</h2>

<p>paragraph 1
.....</p>

<h2>Topic 3</h2>

<p>paragraph 1
.....</p>

<h2>Topic 4</h2>
<p>paragraph 1
.....</p>

<h2>Topic 5</h2>

<p>paragraph 1
.....</p>

<h2>Topic 6</h2>

<p>paragraph 1
.....</p>

<h2>Topic 7</h2>

<p>paragraph 1
.....</p>

<h2>Topic 8</h2>

<p>paragraph 1
.....</p>

<h2>Topic 9</h2>

<p>paragraph 1
.....</p>

<h2>Topic 10</h2>

<p>paragraph 1
.....</p>

<h2 id="T11">Topic 11</h2>

<p>paragraph 1
.....</p>

<h2>Topic 12</h2>

<p>paragraph 1
.....</p>

<h2>Topic 13</h2>

<p>paragraph 1
.....</p>

<h2>Topic 14</h2>

<p>paragraph 1
.....</p>

<h2>Topic 15</h2>

<p>paragraph 1
.....</p>

<h2>Topic 16</h2>

<p>paragraph 1
.....</p>

<h2 id="T17">Topic 17</h2>

<p>paragraph 1
.....</p>

<h2>Topic 18</h2>
<p>paragraph 1
.....</p>

<h2>Topic 19</h2>

<p>paragraph 1
.....</p>

<h2 id="T20">Topic 20</h2>

<p>paragraph 1
.....</p>

</body>
</html

HTML Email Tag

HTML <a> tag provides you option to specify an email address to send an email.
While using <a> tag as an email tag, you will use mailto: email address along
with href attribute. Following is the syntax of using mailto instead of using http.
<a href = "mailto: [email protected]">Send Email</a>
This code will generate the following link which you can use to send email.
Send Email
Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook
Express etc. ) installed on your user's computer. There is another risk to use this
option to send email because if user do not have email client installed on their
computer then it would not be possible to send email.

Default Settings
You can specify a default email subject and email body along with your email
address. Following is the example to use default subject and body.
<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>
This code will generate the following link which you can use to send email.
Send Feedback

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"/>

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 describes 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="animal.jpg" height="180" width="300" alt="animal image">

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 img 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="animal.png" height="180" width="300" alt="animal image">

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/animal.png" height="180" width="300" alt="animal image">

In above statement we have put image in local disk E------>images folder------>animal.png.

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="https://www.javatpoint.com/what-is-robotics">
<img src="robot.jpg" height="100" width="100">
</a>
Output:

Set Image Border

By default, image will have a border around it, you can specify border thickness in terms of
pixels using border attribute. A thickness of 0 means, no border around the picture.
Example
<!DOCTYPE html>
<html>

<head>
<title>Set Image Border</title>
</head>

<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>

</html>
This will produce the following result –

Set Image Alignment

By default, image will align at the left side of the page, but you can use align attribute to set it
in the centre or right.
Example
<!DOCTYPE html>
<html>

<head>
<title>Set Image Alignment</title>
</head>

<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image"
border = "3" align = "right"/>
</body>

</html>
This will produce the following result −

HTML Image Maps

With HTML image maps, you can create clickable areas on an image.

Image Maps
What is image mapping :

The HTML <map> tag defines an image map. An image map is an image with
clickable areas.

The areas are defined with one or more <area> tags.

In image mapping an image is specified with certain set of coordinates
inside the image which act as hyperlink areas to different destinations. It is
different from an image link since in image linking, an image can be used to
serve a single link or destination whereas in a mapped image, different
coordinates of the image can serve different links or destinations.

Elements required in Mapping an Image :

There are three basic html elements which are required for creating a
mapped image.
1. Map : It is used to create a map of the image with clickable areas.
2. Image : It is used for the image source on which mapping is done.
3. Area : It is used within the map for defining clickable areas.
Try to click on the computer, phone, or the cup of coffee in the image below:

Example
Here is the HTML source code for the image map above:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

How Does it Work?

The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that
describes the clickable areas

The Image
The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.

Tip: You can use any image as an image map!

Create Image Map
Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image
by using the required name attribute:

The name attribute must have the same value as the <img>'s usemap attribute .

The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape
You must define the shape of the clickable area, and you can choose one of
these values:

 rect - defines a rectangular region

 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

You must also define some coordinates to be able to place the clickable area
onto the image.

Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and one for
the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44
pixels from the top:
The coordinates 270,350 is located 270 pixels from the left margin and 350
pixels from the top:

Now we have enough data to create a clickable rectangular area:

Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

This is the area that becomes clickable and will send the user to the page
"computer.htm":

Shape="circle"
To add a circle area, first locate the coordinates of the centre of the circle:

337,300
Then specify the radius of the circle:

44 pixels

Now you have enough data to create a clickable circular area:

Example
<area shape="circle" coords="337, 300, 44" href="coffee.htm">

This is the area that becomes clickable and will send the user to the page "coffee.htm":
Shape="poly"
The shape="poly" contains several coordinate points, which creates a shape
formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?

We have to find the x and y coordinates for all edges of the croissant:

The coordinates come in pairs, one for the x-axis and one for the y-axis:

Example
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,
329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

This is the area that becomes clickable and will send the user to the page
"croissant.htm":
Image Map and JavaScript
A clickable area can also trigger a JavaScript function.

Add a click event to the <area> element to execute a JavaScript function:

Example
Here, we use the onclick attribute to execute a JavaScript function when the
area is clicked:

Server-side image map

Server-side image maps were first supported in Mosaic (web
browser) version 1.1. Server-side image maps enable the web browser to
send positional information to the server about where the user clicks within an
image. This allows the server to make pixel-by-pixel decisions about what
content to return in response (possible methods are to use image mask layers,
database queries, or configuration files on the server).
The HTML code for this type of server-side image map requires
the <img> tag to be inside an anchor tag <a>...</a> and the <img> must
include the ismap attribute.
<a href="/imagemapper"><img src="image.png" ismap /></a>

When the user clicks inside the image the browser will append the X and Y
coordinates (relative to the upper-left corner of the image) to the
anchor URL as a query string and will access the resulting URL (for
example, /imagemapper?3,9 ).
If the browser does not support ismap then the query string must not be added
to the anchor URL and the server should respond appropriately (for example,
by returning a text-only navigation page).

A major disadvantage of server-side image maps is that their implementation can differ
between different server systems. This means that the author of the website using image
maps needs to communicate closely with the Web server's administrator to ensure that the
maps work correctly.

Since there are so many advantages to client-side imagemaps, and almost all current
browser versions support them, we shall not explore server-side image maps further in this
unit (although most image map programmes still provide features to output/edit server-side
map files).

Client-side
Client-side image maps were introduced in HTML 3.2, and do not require
any special logic to be executed on the server (they are fully client-side). They
also do not require any JavaScript.
Pure HTML
A client-side imagemap in HTML consists of two parts:

1. the actual image, which is embedded with the <img> tag. The
image tag must have an attribute usemap, which names the
imagemap to use for this image (multiple imagemaps may exist
on a single page).
2. A <map> element, and inside that, <area> elements, each of which
defines a single clickable area within the imagemap. These are
similar to the <a> tag defining which URL should be opened for
an ordinary web link. A title attribute may be provided, which
may be rendered as a tooltip if a desktop user hovers their mouse
pointer over the area. For web accessibility reasons, it is often
important – and in some cases it may even be a legal or
contractual requirement – to provide an alt attribute describing
the link that screen reader software can read to, for
example, blind users.[3]
The <area> elements can be rectangles ( shape="rect" ), polygons
( shape="poly" ) or circles ( shape="circle" ). Shape-Values are coordinate-pairs.
Every pair has an X and a Y value (from left/top of an image) and is separated
with a comma.
 Rectangle: Set four coordinates: "x1,y1,x2,y2"
 Polygon: Set as many coordinates as desired (a multiple of two):
"x1,y1,x2,y2, [...] xn,yn"
 Circle: One coordinate-pair and another value with a radius:
"x1,y1,radius"
The following example defines a rectangular area ("9,372,66,397"). When a
user clicks anywhere inside this area, they are taken to the English
Wikipedia's home page.

<img src="image.png" alt="Website map" usemap="#mapname" />

Clients-side image maps have a number of advantages over server-side maps.

 Reduced server load, since the mapping is done on the client.

 There is no need to communicate with server side scripts.
 The user can see the image maps associated hypertext URLs in the status bar of
their browser before clicking.

HTML - <nobr> Tag

The HTML <nobr> tag is used to instruct the browser not to break the specified text
(such as the usual line wrap that occurs at the right edge of the browser window).
This is used with the <wbr> tag, <wbr> advises the extended browser when it may
insert a line break in an otherwise nonbreakable sequence of text. Unlike the <br>
tag, which always causes a line break, even within a <nobr>- tagged segment, the
<wbr> tag works only when placed inside a <nobr>- tagged content segment and
causes a line break only if the current line has already extended beyond the browser's
display window margins.

Example

<!DOCTYPE html>
<html>

<head>
<title>HTML nobr Tag</title>
</head>
<body>
<nobr>This is a very long sequence of text that is forced to be
on a single line, even if doing so causes <wbr />

the browser to extend the document window beyond the size of the
viewing pane and the poor user must scroll right <wbr />

to read the entire line.

</nobr>
</body>

</html>

HTML <font> Tag

The <font> tag in HTML plays an important role in the web page to create an
attractive and readable web page. The font tag is used to change the color, size, and
style of a text. The base font tag is used to set all the text to the same size, color and
face.
Syntax:
<font attribute = "value"> Content </font>
Example: In this example, we have used the <font> tag with a font size as 5.
 HTML
<!DOCTYPE html>
<html>

<body>
<h2>GeeksforGeeks</h2>

<p>Hello Geeks!.</p>

<font size="5"> Welcome to GeeksforGeeks </font>
</body>

</html>

The font tag has basically three attributes which are given below:
 Font Size attribute
 Face/Type attribute
 Color attribute
Note: Font tag is not supported in HTML5.
We will discuss all these attributes & understand them through the examples.
font Size: This attribute is used to adjust the size of the text in the HTML document
using a font tag with the size attribute. The range of size of the font in HTML is from
1 to 7 and the default size is 3.
Syntax:
<font size="number">
Example: This example uses the <font> tag where different font sizes are
specified.
 HTML
<!DOCTYPE html>
<html>

<body>

<font size="1">GeeksforGeeks!</font><br />
<font size="2">GeeksforGeeks!</font><br />
<font size="3">GeeksforGeeks!</font><br />
<font size="4">GeeksforGeeks!</font><br />
<font size="5">GeeksforGeeks!</font><br />
<font size="6">GeeksforGeeks!</font><br />
<font size="7">GeeksforGeeks!</font>

</body>

</html>

Font Type: Font type can be set by using face attribute with font tag in HTML
document. But the fonts used by the user need to be installed in the system first.
Syntax:
<font face="font_family">
Example: This example describes the <font> tag with different font type & font
size.
 HTML
<!DOCTYPE html>
<html>

<body>

<font face="Times New Roman" size="6">
GeeksforGeeks!!
</font> <br />
<font face="Verdana" size="6">
GeeksforGeeks!!
</font><br />
<font face="Comic sans MS" size=" 6">
GeeksforGeeks!!
</font><br />
<font face="WildWest" size="6">
GeeksforGeeks!!
</font><br />
<font face="Bedrock" size="6">
GeeksforGeeks!!
</font><br />

</body>

</html>

Output:

font type attribute

Font Color: Font color is used to set the text color using a font tag with the color
attribute in an HTML document. Color can be specified either with its name or with
its hex code.
Syntax:
<font color="color_name|hex_number|rgb_number">
Example: This example describes the <font> tag with different font colors.
 HTML
<!DOCTYPE html>
<html>

<body>

<font color="#009900">GeeksforGeeks</font><br />
<font color="green">GeeksforGeeks</font>

</body>

</html>
HTML - Tables
The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells. The elements under <td>
are regular and left aligned by default

Example

<!DOCTYPE html>
<html>

<head>
<title>HTML Tables</title>
</head>

<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>
This will produce the following result –

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Here, the border is an attribute of <table> tag and it is used to put a border across all
the cells. If you do not need a border, then you can use border = "0".

Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag,
which is used to represent actual data cell. Normally you will put your top row as
table heading as shown below, otherwise you can use <th> element in any row.
Headings, which are defined in <th> tag are centered and bold by default.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Header</title>
</head>

<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>
This will produce the following result –

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to
adjust the white space in your table cells. The cellspacing attribute defines space
between table cells, while cellpadding represents the distance between cell borders
and the content within a cell.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Cellpadding</title>
</head>

<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>
This will produce the following result –

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Difference between cellpadding and cellspacing:

Cellpadding Cellspacing

It specifies the space between the border It specifies the space between adjacent
of a table cell and its contents. cells.

It is created by using HTML <table> tag It is also created by using HTML <table>
but type attribute is set to cellpadding. tag but type attribute is set to cellspacing.

Cellspacing can get subjected to more than

It is mainly meant for a single cell. one cell.

The default cellpadding value is 1 Whereas, the default cellspacing value is 2

Cellpadding is widely used and Cellspacing is less effective than

considered to be an effective mean Cellpadding.

Cellpadding is an attribute Cellspacing is also an attribute.

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or more rows.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Colspan/Rowspan</title>
</head>

<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>
This will produce the following result –

Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Tables Backgrounds
You can set table background using one of the following two ways −
 bgcolor attribute − You can set background color for whole table or just
for one cell.
 background attribute − You can set background image for whole table
or just for one cell.
You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5.
Do not use these attributes.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>
This will produce the following result –

Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Here is an example of using background attribute. Here we will use an image

available in /images directory.

<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>

<body>
<table border = "1" bordercolor = "green" background =
"/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>
This will produce the following result. Here background image did not apply to table's
header.

Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Table Height and Width

You can set a table width and height using width and height attributes. You can
specify table width or height in terms of pixels or in terms of percentage of available
screen area.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Width/Height</title>
</head>

<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>

</html>
This will produce the following result –

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at
the top of the table. This tag is deprecated in newer version of HTML/XHTML.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Caption</title>
</head>

<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>

<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>

<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>

</html>
This will produce the following result –

This is the caption

row 1, column 1 row 1, column 2
row 2, column 1 row 2, column 2

Table Header, Body, and Footer

Tables can be divided into three portions − a header, a body, and a foot. The head and
foot are rather similar to headers and footers in a word-processed document that
remain the same for every page, while the body is the main content holder of the
table.
The three elements for separating the head, body, and foot of a table are −
 <thead> − to create a separate table header.
 <tbody> − to indicate the main body of the table.
 <tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups
of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>

<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>

</table>
</body>

</html>
This will produce the following result –

This is the head of the table

This is the foot of the table
Cell 1 Cell 2 Cell 3 Cell 4

Nested Tables
You can use one table inside another table. Not only tables you can use almost all the
tags inside table data tag <td>.

Example
Following is the example of using another table and other tags inside a table cell.

<!DOCTYPE html>
<html>

<head>
<title>HTML Table</title>
</head>

<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>

</table>
</body>

</html>
This will produce the following result −

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000
HTML - Frames
HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in the
browser window is known as a frameset. The window is divided into frames in a
similar way the tables are organized: into rows and columns.

Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames
in your webpages −
 Some smaller devices cannot cope with frames often because their
screen is not big enough to be divided up.
 Sometimes your page will be displayed differently on different
computers due to different screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames. The rows attribute of
<frameset> tag defines horizontal frames and cols attribute defines vertical frames.
Each frame is indicated by <frame> tag and it defines which HTML document shall
open into the frame.
Note − The <frame> tag deprecated in HTML5. Do not use this element.

Example
Following is the example to create three horizontal frames −

<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">

<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>

</frameset>

</html>
This will produce the following result –

Example
Let's put the above example as follows, here we replaced rows attribute by cols and
changed their width. This will create all the three frames vertically −

<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset cols = "25%,50%,25%">

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>
This will produce the following result –

The <frameset> Tag Attributes

Following are important attributes of the <frameset> tag −

Sr.No Attribute & Description

cols
Specifies how many columns are contained in the frameset and the size of each column.
You can specify the width of each column in one of the four ways −
Absolute values in pixels. For example, to create three vertical frames, use
cols = "100, 500, 100".

1 A percentage of the browser window. For example, to create three vertical frames, use cols
= "10%, 80%, 10%".
Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *,
10%". In this case wildcard takes remainder of the window.
As relative widths of the browser window. For example, to create three vertical frames,
use cols = "3*, 2*, 1*". This is an alternative to percentages. You can use relative widths of
the browser window. Here the window is divided into sixths: the first column takes up half
of the window, the second takes one third, and the third takes one sixth.

rows
This attribute works just like the cols attribute and takes the same values, but it is used to
2
specify the rows in the frameset. For example, to create two horizontal frames, use rows =
"10%, 90%". You can specify the height of each row in the same way as explained above
for columns.

border
3 This attribute specifies the width of the border of each frame in pixels. For example,
border = "5". A value of zero means no border.

frameborder
This attribute specifies whether a three-dimensional border should be displayed
4
between frames. This attribute takes value either 1 (yes) or 0 (no).
For example frameborder = "0" specifies no border.

framespacing
This attribute specifies the amount of space between frames in a frameset.
5
This can take any integer value. For example framespacing = "10" means there
should be 10 pixels spacing between each frames.
The <frame> Tag Attributes
Following are the important attributes of <frame> tag −

Sr.No Attribute & Description

src

1 This attribute is used to give the file name that should be loaded in the frame. Its value can
be any URL. For example, src = "/html/top_frame.htm" will load an HTML file available in
html directory.

name
This attribute allows you to give a name to a frame. It is used to indicate which frame a
2
document should be loaded into. This is especially important when you want to create links
in one frame that load pages into an another frame, in which case the second frame needs
a name to identify itself as the target of the link.

frameborder
This attribute specifies whether or not the borders of that frame are shown; it
3
overrides the value given in the frameborder attribute on the <frameset> tag if
one is given, and this can take values either 1 (yes) or 0 (no).

marginwidth
This attribute allows you to specify the width of the space between the left and
4
right of the frame's borders and the frame's content. The value is given in pixels.
For example marginwidth = "10".

marginheight
This attribute allows you to specify the height of the space between the top and
5
bottom of the frame's borders and its contents. The value is given in pixels.
For example marginheight = "10".

noresize
6
By default, you can resize any frame by clicking and dragging on the borders
of a frame. The noresize attribute prevents a user from being able to resize the
frame. For example noresize = "noresize".

scrolling
This attribute controls the appearance of the scrollbars that appear on the frame.
7
This takes values either "yes", "no" or "auto". For example scrolling = "no"
means it should not have scroll bars.

longdesc
This attribute allows you to provide a link to another page containing a long
8
description of the contents of the frame. For example
longdesc = "framedescription.htm"

Browser Support for Frames

If a user is using any old browser or any browser, which does not support frames then
<noframes> element should be displayed to the user.
So you must place a <body> element inside the <noframes> element because the
<frameset> element is supposed to replace the <body> element, but if a browser
does not understand <frameset> element then it should understand what is inside
the <body> element which is contained in a <noframes> element.
You can put some nice message for your user having old browsers. For
example, Sorry!! your browser does not support frames. as shown in the above
example.

Frame's name and target attributes

One of the most popular uses of frames is to place navigation bars in one frame and
then load main pages into a separate frame.
Let's see following example where a test.htm file has following code −

1<!DOCTYPE html>
<html>

<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />

<body>Your browser does not support frames.</body>

</noframes>
</frameset>

</html>
Here, we have created two columns to fill with two frames. The first frame is 200
pixels wide and will contain the navigation menu bar implemented by menu.htm file.
The second column fills in remaining space and will contain the main part of the page
and it is implemented by main.htm file. For all the three links available in menu bar,
we have mentioned target frame as main_page, so whenever you click any of the
links in menu bar, available link will open in main page.
Following is the content of menu.htm file

Live Demo

<!DOCTYPE html>
<html>

<body bgcolor = "#4a7d49">

<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />

<a href = "http://www.microsoft.com" target =

"main_page">Microsoft</a>
<br />
<br />

<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>

</body>

</html>
Following is the content of main.htm file −

Live Demo

<!DOCTYPE html>
<html>

<body bgcolor = "#b5dcb3">

<h3>This is main page and content from any link will be displayed
here.</h3>
<p>So now click any link and see the result.</p>
</body>

</html>
When we load test.htm file, it produces following result −
Now you can try to click links available in the left panel and see the result.
The targetattribute can also take one of the following values −

Sr.No Option & Description

_self
1
Loads the page into the current frame.

_blank
2
Loads a page into a new browser window. Opening a new window.

_parent
3
Loads the page into the parent window, which in the case of a single frameset is the main
browser window.

_top
4
Loads the page into the browser window, replacing any current frames.

targetframe
5
Loads the page into a named targetframe.

HTML Lists
In this article, we will know the HTML List, along with understanding its types, and
various ways to implement them, through the example.
A list is a record of short pieces of related information or used to display the data or any
information on web pages in the ordered or unordered form. For instance, to purchase
the items, we need to prepare a list that can either be ordered or unordered list which
helps us to organize the data & easy to find the item. Please refer to the HTML <li> type
Attribute article for the various types of attributes that can be used with the ordered &
unordered list.
Example: The below example illustrates the use of the unordered & ordered list in
HTML.
 HTML
<!DOCTYPE html>

<html>

<head>

<title>GeeksforGeeks</title>

</head>

<body>

<h2>Welcome To GeeksforGeeks Learning</h2>

<h5>List of available courses</h5>

<ul>

<li>Data Structures & Algorithm</li>

<li>Web Technology</li>

<li>Aptitude & Logical Reasoning</li>

<li>Programming Languages</li>

</ul>

<h5>Data Structures topics</h5>

<ol>

<li>Array</li>

<li>Linked List</li>

<li>Stacks</li>

<li>Queues</li>

<li>Trees</li>

<li>Graphs</li>

</ol>

</body>
</html>

Output:

HTML List

Supported Tags: These tags are used in HTML listing.

 HTML <ul> Tag
 HTML <ol> Tag
 HTML <dl> Tag
The HTML Unordered List: An unordered list starts with the “ul” tag. Each list item
starts with the “li” tag. The list items are marked with bullets i.e small black circles by
default.
Syntax:
<ul> list of items </ul>
Attribute: This tag contains two attributes which are listed below:
 compact: It will render the list smaller.
 type: It specifies which kind of marker is used in the list.
Note: The <ul> attributes are not supported by HTML5.
Example: This example describes the unordered list.
 HTML
<!DOCTYPE html>

<html>

<body>
<h2>Grocery list</h2>

<ul>

<li>Bread</li>

<li>Coffee</li>

</ul>

</body>

</html>

Output:

Unordered List

HTML unordered list has various list item markers:

Example 1: The Disc can be used to set the list item marker to a bullet i.e default.
 HTML
<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>GeeksforGeeks</h1>

<h2>Unordered List with Disc Bullets</h2>

<p>GeeksforGeeks courses List:</p>

<li>Geeks</li>

<li>Placement</li>

</ul>

</body>

</html>

Output:

Unordered List with disc item maker

Example 2: The Circle can be used to set the list item marker to a circle.
 HTML
<!DOCTYPE html>

<html>

<body>

<h1>GeeksforGeeks</h1>
<h2>Unordered List with Circle Bullets</h2>

<p>GeeksforGeeks courses List:</p>

<ul style="list-style-type: circle">

<li>Geeks</li>

<li>Placement</li>

</ul>

</body>

</html>

Output:

Unordered List with circle item maker

Example 3: The Square can be used to set the list item marker to a square.
 HTML
<!DOCTYPE html>

<h1>GeeksforGeeks</h1>

<h2>Unordered List with Square Bullets</h2>

<p>GeeksforGeeks courses List:</p>

<ul style="list-style-type: square">

<li>Geeks</li>

<li>Placement</li>

</ul>

</body>

</html>

Output:

Unordered List with square item maker

Example 4: It’s none that can be used to set the list item marker with no mark.
 HTML
<!DOCTYPE html>
<html>

<body>

<h1>GeeksforGeeks</h1>

<h2>Unordered List with No Bullets</h2>

<p>GeeksforGeeks courses List:</p>

<ul style="list-style-type: none">

<li>Geeks</li>

<li>Placement</li>

</ul>

</body>

</html>

Output:

Unordered List with none item maker

Example: Nested Unordered List, It is used to nest the list items ie., a list inside another
list.
 HTML
<!DOCTYPE html>

<html>

<body>

<h1>GeeksforGeeks</h1>

<h2>Nested Unordered List</h2>

<p>GeeksforGeeks courses List:</p>

<ul>

<ul>

<li>Array</li>

<li>Linked List</li>

<li>stack</li>

<li>Queue</li>

</ul>

<li>Web Technologies</li>

<ul>

<li>JavaScript</li>

</ul>

<li>Aptitude</li>

<li>Placement</li>

</ul>

</body>
</html>

Output:

Nested Unordered List

HTML Ordered List: An ordered list starts with the “ol” tag. Each list item starts with
the “li” tag. The list items are marked with numbers by default.
Syntax:
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Attributes:
 compact: It defines the list should be compacted (compact attribute is not
supported in HTML5. Use CSS instead.).
 reversed: It defines that the order will be descending.
 start: It defines from which number or alphabet the order will start.
 type: It defines which type(1, A, a, I, and i) of the order you want in your
list of numeric, alphabetic, or roman numbers.
Example: This example illustrates the use of the reverse attribute, control list counting
& type attribute.
 HTML
<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1 style="color: green">GeeksforGeeks</h1>

<p>reversed attribute</p>

</ol>

<p>start attribute</p>

</ol>

<p>type attribute</p>
<ol type="i">

</ol>

</body>

</html>

Output:

Ordered List with different list style

HTML ordered list has various list item markers: The type attribute of the <ol> tag
defines the type of the list item marker.
Example 1: The list items will be numbered with numbers i.e default.
 HTML
<!DOCTYPE html>
<html>

<body>

<h2>Ordered List with Numbers</h2>

<li>Bread</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List with numeric item maker

Example 2: Type=”A”, this list of items will be numbered with uppercase letters.
 HTML
<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Letters</h2>

<li>Bread</li>

<li>Milk</li>
<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List with capital alphabetic item maker

Example 3: Type=”a”, this list of items will be numbered with lowercase letters.
 HTML
<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Lowercase Letters</h2>

<li>Bread</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:
Ordered List with small alphabetic item maker

Example 4: Type=”I”, this list of items will be numbered with uppercase roman
numbers.
 HTML
<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Roman Numbers</h2>

<li>Bread</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List with uppercase roman numbers

Example 5: Type=”i”, this list of items will be numbered with lowercase roman
numbers.
 HTML
<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<li>Bread</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List with lowercase roman numbers

Example 6: Nested ordered list, a nested ordered list is a list that has a list inside another
list.
 HTML
<!DOCTYPE html>

<html>

<body>

<h1>GeeksforGeeks</h1>

<h2>Nested Ordered List</h2>

<ol>
<li>Coffee</li>

<li> Tea

<ol>

<li>Black tea</li>

<li>Green tea</li>

</ol>

</li>

</ol>

</body>

</html>

Output:

Nested Ordered List

There is another attribute that is specifically defined for a list item, which is used in
with the “li” tag and that is the value attribute. Below is a little description of the
value attribute specifically used with the “li” tag. Though it is used with various other
HTML elements.
Value attribute:
The value attribute may be used on an individual <li> element within an ordered list to
change its value within the list. You define the value of a list item and the number of
any list item appearing after it will be recalculated accordingly.
Example: This example illustrates the use of the “value attribute” used on the <li>
element.
 HTML
<!DOCTYPE html>
<html>

<head>

<title>Page Title</title>

</head>

<body>

<h2>Welcome To GFG</h2>

<ol>

<li value="10">Item Two</li>

<li>Item Three</li>

</ol>

</body>

</html>

Output:
<img src="https://media.geeksforgeeks.org/wp-
content/uploads/20220522105327/GFG20220522105224.jpg" alt="Use of "value
attribute" on
 ” srcset=”https://media.geeksforgeeks.org/wp-
content/uploads/20220522105327/GFG20220522105224.jpg, ” sizes=”100vw”
width=”237″>Value attribute
HTML Description List: A description list is a list of terms, with a description of each
term. The <dl> tag defines the description list, the <dt> tag defines the term name, and
the <dd> tag describes each term. Please refer to the How to add description list of an
element using HTML? article for further details.
Syntax:
<dl> Contents... </dl>
Example: This example describes the HTML Description List.
 HTML
<!DOCTYPE html>

<html>

<body>
<h2>A Description List</h2>

<dl>

<dt>Coffee</dt>

<dd>- 500 gms</dd>

<dd>- 1 ltr Tetra Pack</dd>

</dl>

</body>

</html>

Output:

Description List
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:
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</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"/>M
ale
4. <input type="radio" id="gender" name="gender" value="female"/>Female
<br/>
5. </form>

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

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

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

Syntax:

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

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

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

The name attribute can be omit here.

Example:

<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</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:

<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</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"/>Fe
male <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>

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:</labe
l></td>
5. <td><input type="text" name="name" value="" id="register_name" style=
"width:160px"/></td>
6. </tr>
7. <tr>
8. <td class="tdLabel"><label for="register_password" class="label">Enter password
:</label></td>
9. <td><input type="password" name="password" id="register_password" st
yle="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:160p
x"/></td>
15. </tr>
16. <tr>
17. <td class="tdLabel"><label for="register_gender" class="label">Enter Gen
der:</label></td>
18. <td>
19. <input type="radio" name="gender" id="register_gendermale" value="male"
/>
20. <label for="register_gendermale">male</label>
21. <input type="radio" name="gender" id="register_genderfemale" value="fem
ale"/>
22. <label for="register_genderfemale">female</label>
23. </td>
24. </tr>
25. <tr>
26. <td class="tdLabel"><label for="register_country" class="label">Select Country:<
/label></td>
27. <td><select name="country" id="register_country" style="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="submit" id="register_0
" value="register"/>
38. </div></td>
39. </tr>
40. </table>
41. </form>
HTML Form Elements

This chapter describes all the different HTML form elements.

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form
elements:

 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>

The <input> Element

One of the most used form element is the <input> element.

The <input> element can be displayed in several ways, depending on

the type attribute.

Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

All the different values of the type attribute are covered in the next
chapter: HTML Input Types.

The <label> Element

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

The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks
the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

The <select> Element

The <select> element defines a drop-down list:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Example
<option value="fiat" selected>Fiat</option>

Visible Values:
Use the size attribute to specify the number of visible values:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

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

You can also define the size of the text area by using CSS:
Example
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

The <button> Element

The <button> element defines a clickable button:

Example
<button type="button" onclick="alert('Hello World!')">Click
Me!</button>

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

Click Me!

Note: Always specify the type attribute for the button element. Different
browsers may use different default types for the button element.

The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

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

Personalia:First name:
John

Last name:
Doe

Submit

The <datalist> Element

The <datalist> element specifies a list of pre-defined options for
an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.

Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

The <output> Element

The <output> element represents the result of a calculation (like one
performed by a script).

Example
Perform a calculation and show the result in an <output> element:

HTML Exercises
Test Yourself With Exercises
Exercise:
In the form below, add an empty drop down list with the name "cars".

Submit Answer »

Start the Exercise

HTML Form Elements

Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

HTML Input Types

This chapter describes the different types for the HTML <input> element.

HTML Input Types

Here are the different input types you can use in HTML:

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

Tip: The default value of the type attribute is "text".

Input Type Text

<input type="text"> defines a single-line text input field:
Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

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

First name:

Last name:

Input Type Password

<input type="password"> defines a password field:

Example
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

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

Username:

Password:

The characters in a password field are masked (shown as asterisks or

circles).
Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-
handler.

The form-handler is typically a server page with a script for processing input
data.

The form-handler is specified in the form's action attribute:

Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

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

First name:
John

Last name:
Doe

Submit

If you omit the submit button's value attribute, the button will get a default
text:

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

First name:
John

Last name:
Doe

Submit Reset

If you change the input values and then click the "Reset" button, the form-
data will be reset to the default values.

Input Type Radio

<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example
<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaSc
ript">
<label for="javascript">JavaScript</label>
</form>

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

HTML
CSS
JavaScript

Input Type Checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of

choices.

Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

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

I have a bike
I have a car
I have a boat

Input Type Button

<input type="button"> defines a button:

Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
This is how the HTML code above will be displayed in a browser:

Input Type Color

The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>

Input Type Date

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

You can also use the min and max attributes to add restrictions to dates:

Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with no
time zone.

Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail
address.

Depending on browser support, the e-mail address can be automatically

validated when submitted.

Some smartphones recognize the email type, and add ".com" to the keyboard
to match email input.

Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>

Input Type Image

The <input type="image"> defines an image as a submit button.

The path to the image is specified in the src attribute.

Example
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height
="48">
</form>

Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file
uploads.

Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>

Input Type Hidden

The <input type="hidden"> defines a hidden input field (not visible to a user).

A hidden field lets web developers include data that cannot be seen or
modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated
when the form is submitted.

Note: While the value is not displayed to the user in the page's content, it is
visible (and can be edited) using any browser's developer tools or "View
Source" functionality. Do not use hidden inputs as a form of security!

Example
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>

Input Type Month

The <input type="month"> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>

Input Type Number

The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a
value from 1 to 5:

Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Input Restrictions
Here is a list of some common input restrictions:

Attribute Description

checked Specifies that an input field should be pre-selected when the page lo
type="radio")
disabled Specifies that an input field should be disabled

max Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an input field

min Specifies the minimum value for an input field

pattern Specifies a regular expression to check the input value against

readonly Specifies that an input field is read only (cannot be changed)

required Specifies that an input field is required (must be filled out)

size Specifies the width (in characters) of an input field

step Specifies the legal number intervals for an input field

value Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a
value from 0 to 100, in steps of 10. The default value is 30:

Example
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100"
step="10" value="30">
</form>

Input Type Range

The <input type="range"> defines a control for entering a number whose exact
value is not important (like a slider control). Default range is 0 to 100.
However, you can set restrictions on what numbers are accepted with
the min, max, and step attributes:

Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like
a regular text field).

Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone
number.

Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-
[0-9]{3}">
</form>

Try it Yourself »

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>

Try it Yourself »

Input Type Url

The <input type="url"> is used for input fields that should contain a URL
address.

Depending on browser support, the url field can be automatically validated

when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard
to match url input.

Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>

Try it Yourself »
Input Type Week
The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

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

HTML Input Attributes

This chapter describes the different attributes for the

HTML <input> element.

The value Attribute

The input value attribute specifies an initial value for an input field:

Example
Input fields with initial (default) values:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

Try it Yourself »
The readonly Attribute
The input readonly attribute specifies that an input field is read-only.

A read-only input field cannot be modified (however, a user can tab to it,
highlight it, and copy the text from it).

The value of a read-only input field will be sent when submitting the form!

Example
A read-only input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

Try it Yourself »

The disabled Attribute

The input disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.

The value of a disabled input field will not be sent when submitting the form!

Example
A disabled input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

Try it Yourself »
ADVERTISEMENT

The size Attribute

The input size attribute specifies the visible width, in characters, of an input
field.

The default value for size is 20.

Note: The size attribute works with the following input types: text, search,
tel, url, email, and password.

Example
Set a width for an input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>

Try it Yourself »

The maxlength Attribute

The input maxlength attribute specifies the maximum number of characters
allowed in an input field.

Note: When a maxlength is set, the input field will not accept more than the
specified number of characters. However, this attribute does not provide any
feedback. So, if you want to alert the user, you must write JavaScript code.

Example
Set a maximum length for an input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

Try it Yourself »

The min and max Attributes

The input min and max attributes specify the minimum and maximum values
for an input field.

The min and max attributes work with the following input types: number,
range, date, datetime-local, month, time and week.

Tip: Use the max and min attributes together to create a range of legal
values.

Example
Set a max date, a min date, and a range of legal values:

<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>

<label for="datemin">Enter a date after 2000-01-01:</label>

<label for="quantity">Quantity (between 1 and 5):</label>

Try it Yourself »

The multiple Attribute

The input multiple attribute specifies that the user is allowed to enter more
than one value in an input field.

The multiple attribute works with the following input types: email, and file.
Example
A file upload field that accepts multiple values:

<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>

Try it Yourself »

The pattern Attribute

The input pattern attribute specifies a regular expression that the input field's
value is checked against, when the form is submitted.

The pattern attribute works with the following input types: text, date, search,
url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

Tip: Learn more about regular expressions in our JavaScript tutorial.

Example
An input field that can contain only three letters (no numbers or special
characters):

<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

Try it Yourself »

The placeholder Attribute

The input placeholder attribute specifies a short hint that describes the
expected value of an input field (a sample value or a short description of the
expected format).

The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search,
url, tel, email, and password.

Example
An input field with a placeholder text:

<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Try it Yourself »

The required Attribute

The input required attribute specifies that an input field must be filled out
before submitting the form.

The required attribute works with the following input types: text, search, url,
tel, email, password, date pickers, number, checkbox, radio, and file.

Example
A required input field:

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>

Try it Yourself »

The step Attribute

The input step attribute specifies the legal number intervals for an input field.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: This attribute can be used together with the max and min attributes to
create a range of legal values.
The step attribute works with the following input types: number, range, date,
datetime-local, month, time and week.

Example
An input field with a specified legal number intervals:

<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>

Try it Yourself »

Note: Input restrictions are not foolproof, and JavaScript provides many
ways to add illegal input. To safely restrict input, it must also be checked by
the receiver (the server)!

The autofocus Attribute

The input autofocus attribute specifies that an input field should automatically
get focus when the page loads.

Example
Let the "First name" input field automatically get focus when the page loads:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

Try it Yourself »

The height and width Attributes

The input height and width attributes specify the height and width of an <input
type="image"> element.

Tip: Always specify both the height and width attributes for images. If height
and width are set, the space required for the image is reserved when the
page is loaded. Without these attributes, the browser does not know the size
of the image, and cannot reserve the appropriate space to it. The effect will
be that the page layout will change during loading (while the images load).

Example
Define an image as the submit button, with height and width attributes:

<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" heig
ht="48">
</form>

Try it Yourself »

The list Attribute

The input list attribute refers to a <datalist> element that contains pre-
defined options for an <input> element.

Example
An <input> element with pre-defined values in a <datalist>:

Try it Yourself »

The autocomplete Attribute

The input autocomplete attribute specifies whether a form or an input field
should have autocomplete on or off.

Autocomplete allows the browser to predict the value. When a user starts to
type in a field, the browser should display options to fill in the field, based on
earlier typed values.

The autocomplete attribute works with <form> and the following <input> types:
text, search, url, tel, email, password, datepickers, range, and color.

Example
An HTML form with autocomplete on, and off for one input field:

<form action="/action_page.php" autocomplete="on">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><b
r>
<input type="submit" value="Submit">
</form>

Try it Yourself »

Tip: In some browsers you may need to activate an autocomplete function

for this to work (Look under "Preferences" in the browser's menu).

HTML Notes by Subba Raj Sir PDF
No ratings yet
HTML Notes by Subba Raj Sir PDF
208 pages
Solution Er
100% (2)
Solution Er
4 pages
HTML Tut
No ratings yet
HTML Tut
82 pages
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
No ratings yet
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
98 pages
HTML
No ratings yet
HTML
33 pages
Javascript Dom
No ratings yet
Javascript Dom
20 pages
JavaScript Notes
No ratings yet
JavaScript Notes
32 pages
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
No ratings yet
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
8 pages
I. Introduction To Cascading Style Sheet:: Css / Css 3
No ratings yet
I. Introduction To Cascading Style Sheet:: Css / Css 3
30 pages
Core Java Handwritten Notes (JSP) Part1
No ratings yet
Core Java Handwritten Notes (JSP) Part1
198 pages
PHP Notes
No ratings yet
PHP Notes
38 pages
The Difference Between XML and HTML
No ratings yet
The Difference Between XML and HTML
161 pages
P2S1 It RM
No ratings yet
P2S1 It RM
129 pages
WT Practical
No ratings yet
WT Practical
55 pages
Java Web Development Course: Writing CSS Codes
100% (1)
Java Web Development Course: Writing CSS Codes
50 pages
HTML
No ratings yet
HTML
138 pages
.What Is HTML?: Example Explained
100% (1)
.What Is HTML?: Example Explained
162 pages
Javascript
No ratings yet
Javascript
23 pages
JavaScript Notes
No ratings yet
JavaScript Notes
31 pages
Javascript
100% (5)
Javascript
75 pages
HTML Interview Questions - Javatpoint
No ratings yet
HTML Interview Questions - Javatpoint
9 pages
Computer Network Lab PDF
No ratings yet
Computer Network Lab PDF
79 pages
HTML
No ratings yet
HTML
52 pages
Programming The Web Notes
100% (1)
Programming The Web Notes
217 pages
Lec 8 - DOM
No ratings yet
Lec 8 - DOM
144 pages
Javascript
No ratings yet
Javascript
145 pages
Java EE694c
100% (1)
Java EE694c
8 pages
Advance Java Final Material
100% (1)
Advance Java Final Material
137 pages
JSP Tutorial - Javatpoint
No ratings yet
JSP Tutorial - Javatpoint
5 pages
Basic HTML
No ratings yet
Basic HTML
12 pages
JavaScript Tutorial
No ratings yet
JavaScript Tutorial
366 pages
Sudhkar Sharma (Asp - Net Notes)
No ratings yet
Sudhkar Sharma (Asp - Net Notes)
174 pages
HTML Cheat Sheet
No ratings yet
HTML Cheat Sheet
2 pages
PHP Notes
No ratings yet
PHP Notes
70 pages
Master Frontend in 60 Days
No ratings yet
Master Frontend in 60 Days
21 pages
Jquery Print
No ratings yet
Jquery Print
101 pages
WT 2
No ratings yet
WT 2
47 pages
HTML Tutorial
No ratings yet
HTML Tutorial
160 pages
Web Technologies PDF
No ratings yet
Web Technologies PDF
139 pages
HTML PDF
No ratings yet
HTML PDF
3 pages
HTML Practical Handbook
100% (1)
HTML Practical Handbook
15 pages
WT Course Material
No ratings yet
WT Course Material
164 pages
HTML BAsics
No ratings yet
HTML BAsics
17 pages
Module 2-Java Servlets: I) Introduction
No ratings yet
Module 2-Java Servlets: I) Introduction
11 pages
Web Technology
No ratings yet
Web Technology
143 pages
Web Technology
No ratings yet
Web Technology
121 pages
PHP Unit 2 Theory
No ratings yet
PHP Unit 2 Theory
63 pages
Client Side Scripting - 6thecture
No ratings yet
Client Side Scripting - 6thecture
101 pages
Core Java Meterial
No ratings yet
Core Java Meterial
202 pages
Web Technology Notes New PDF
No ratings yet
Web Technology Notes New PDF
89 pages
JavaScript Notes
No ratings yet
JavaScript Notes
62 pages
CSS Example
No ratings yet
CSS Example
18 pages
PHP Notes
100% (1)
PHP Notes
97 pages
Java Script
No ratings yet
Java Script
57 pages
Unit Ii Notes
No ratings yet
Unit Ii Notes
49 pages
Introduction To HTML
No ratings yet
Introduction To HTML
45 pages
HTML
No ratings yet
HTML
53 pages
BWD Unit-1
No ratings yet
BWD Unit-1
18 pages
CS1 CHAPTER 4_New
No ratings yet
CS1 CHAPTER 4_New
41 pages
BWD Unit-1
No ratings yet
BWD Unit-1
18 pages
Chapter 2 Introduction To HTML
No ratings yet
Chapter 2 Introduction To HTML
20 pages
Maths 2ND Sem 2020 Py0
No ratings yet
Maths 2ND Sem 2020 Py0
3 pages
Maths 2nd Sem 2019 Pyq
No ratings yet
Maths 2nd Sem 2019 Pyq
2 pages
Maths 2ND Sem 2021 Pyq
No ratings yet
Maths 2ND Sem 2021 Pyq
2 pages
Wit 2022
No ratings yet
Wit 2022
3 pages
Iwt 2
No ratings yet
Iwt 2
2 pages
Iwt 2022
No ratings yet
Iwt 2022
3 pages
Bee 20 KUK
No ratings yet
Bee 20 KUK
3 pages
Introduction To JavaScript
100% (1)
Introduction To JavaScript
101 pages
Bee-2021 Kuk
No ratings yet
Bee-2021 Kuk
3 pages
Learning JavaScript Data Structures and Algorithms Write complex and powerful JavaScript code using the latest ECMAScript 3rd Edition Loiane Groner 2024 Scribd Download
100% (1)
Learning JavaScript Data Structures and Algorithms Write complex and powerful JavaScript code using the latest ECMAScript 3rd Edition Loiane Groner 2024 Scribd Download
40 pages
SQL Commands
No ratings yet
SQL Commands
16 pages
Automotive Workshop
No ratings yet
Automotive Workshop
14 pages
Zenly - Google
No ratings yet
Zenly - Google
1 page
Unit 3 Digital Notes
No ratings yet
Unit 3 Digital Notes
42 pages
Advanced Algorithm Course Session 1: Binomial Heaps
No ratings yet
Advanced Algorithm Course Session 1: Binomial Heaps
42 pages
Preguntas de Examen Az900
No ratings yet
Preguntas de Examen Az900
150 pages
Lecture Notes-Computer Architecture-Module 1
No ratings yet
Lecture Notes-Computer Architecture-Module 1
20 pages
Setting Up Python and Visual Studio Code - Windows 10
No ratings yet
Setting Up Python and Visual Studio Code - Windows 10
5 pages
Agile
No ratings yet
Agile
29 pages
DL-Unit-5
No ratings yet
DL-Unit-5
2 pages
Garments Management System Project Document
100% (4)
Garments Management System Project Document
5 pages
SAP PS Training (Project Systems)
No ratings yet
SAP PS Training (Project Systems)
6 pages
ITSE Assingment 1
No ratings yet
ITSE Assingment 1
3 pages
Theoretical Background
100% (1)
Theoretical Background
10 pages
Sggcx2: User Manual
No ratings yet
Sggcx2: User Manual
33 pages
Unix Lap Shell-Script
No ratings yet
Unix Lap Shell-Script
38 pages
Lecture 12 Structures
No ratings yet
Lecture 12 Structures
37 pages
Notino.28 2016
No ratings yet
Notino.28 2016
24 pages
Book Intresting Js
No ratings yet
Book Intresting Js
225 pages
Sapscript Proforma Billing Document v1.0
No ratings yet
Sapscript Proforma Billing Document v1.0
15 pages
Chapter 5 Looping
No ratings yet
Chapter 5 Looping
82 pages
CSD Unit 4 Vocabulary - Crossword Labs
No ratings yet
CSD Unit 4 Vocabulary - Crossword Labs
1 page
MC
0% (1)
MC
227 pages
Ati x320 Series Ds
No ratings yet
Ati x320 Series Ds
7 pages
Multitenant Database Architecture
No ratings yet
Multitenant Database Architecture
70 pages
Man 1 GCC
No ratings yet
Man 1 GCC
277 pages
OUM & AIM Comparision
No ratings yet
OUM & AIM Comparision
8 pages
Svelte Custom Stores TypeScript Declaration - by David Dal Busco - Better Programming
No ratings yet
Svelte Custom Stores TypeScript Declaration - by David Dal Busco - Better Programming
14 pages