HTML Unit-1

Basic syntax of HTML
An HTML document consist of its basic building blocks which are:
o Tags: An HTML tag surrounds the content and apply meaning to it. It is written
between < and > brackets.
o Attribute: An attribute in HTML provides extra information about the element,
and it is applied within the start tag. An HTML attribute contains two fields: name
& value.
Syntax
1. <tag name attribute_name= " attr_value"> content </ tag name>
o Elements: An HTML element is an individual component of an HTML file. In an

HTML file, everything written within tags are termed as HTML elements.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>The basic building blocks of HTML</title>
5. </head>
6. <body>
7. <h2>The building blocks</h2>
8. <p>This is a paragraph tag</p>
9. <p style="color: red">The style is attribute of paragraph tag</p>
10. <span>The element contains tag, attribute and content</span>
11. </body>
12. </html>
HTML Tags
HTML tags are like keywords which defines that how web browser will format and
display the content. With the help of tags, a web browser can distinguish between an
HTML content and a simple content. HTML tags contain three main parts: opening tag,
content and closing tag. But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom
and left to right. HTML tags are used to create HTML documents and render their
properties. Each HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate
between a simple text and HTML text. You can use as many tags you want as per your
code requirement.
o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag>
(except some tags)
Syntax
<tag> content </tag>
36.8MHello Java Program for Beginners
HTML Tag Examples

<p> Paragraph Tag </p>
<h2> Heading Tag </h2>

<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
Unclosed HTML Tags

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

DOCTYPE, title, link, meta and style
HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>,
<pre>, <samp>, <var> and <br>
HTML Link Tags <a> and <base>

HTML Image and Object Tags
<img>, <area>, <map>, <param> and <object>
HTML List Tags
<ul>, <ol>, <li>, <dl>, <dt> and <dd>
HTML Table Tags

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

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

script and noscript
HTML Tags List

Following is the complete list of HTML tags with the description which are arranged
alphabetically.
HTML Tags by Alphabets
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
Tag name Description
 This tag is used to apply comment in an HTML document.
<!DOCTYPE> This tag is used to specify the version of HTML
A
<a> It is termed as anchor tag and it creates a hyperlink or link.
<abbr> It defines an abbreviation for a phrase or longer word.
<acronym> It defines acronym for a word. (Not supported in HTML5)
<address> It defines the author's contact information of the HTML article
<applet> It defines an embedded Java applet. (Not supported in HTML5)
<area> It defines the area of an image map.
<article> It defines the self-contained content.
<aside> It defines content aside from main content. Mainly represented as sidebar.
<audio> It is used to embed sound content in HTML document.
B
<b> It is used to make a text bold.
<base> This tag defines the base URL for all relative URL within the document.
<basefont> This tag is used to set default font, size and color for all elements of
document. (Not supported in HTML5)
<bdi> This tag is used to provide isolation for that part of text which may be formatted
in different directions from its surrounding text.
<bdo> It is used to override the current text direction.
<big> This tag is used to make font size one level larger than its surrounding
content. (Not supported in HTML5)
<blockquote> It is used to define a content which is taken from another source.
<body> It is used to define the body section of an HTML document.
<br> It is used to apply single line break.
<button> It is used to represent a clickable button
C
<canvas> It is used to provide a graphics space within a web document.
<caption> It is used to define a caption for a table.

<center> It is used to align the content in center. (Not supported in HTML5)
<cite> It is used to define the title of the work, book, website, etc.
<code> It is used to display a part of programming code in an HTML document.
<col> It defines a column within a table which represent common properties of

columns and used with the <colgroup> element.
<colgroup> It is used to define group of columns in a table.
D
<data> It is used to link the content with the machine-readable translation.
<datalist> It is used to provide a predefined list for input option.
<dd> It is used to provide definition/description of a term in description list.
<del> It defines a text which has been deleted from the document.
<details> It defines additional details which user can either view or hide.
<dfn> It is used to indicate a term which is defined within a sentence/phrase.
<dialog> It defines a dialog box or other interactive components.
<dir> It is used as container for directory list of files. (Not supported in HTML5)
<div> It defines a division or section within HTML document.

<dl> It is sued to define a description list.
<dt> It is used to define a term in description list.
E
<em> It is used to emphasis the content applied within this element.
<embed> It is used as embedded container for external file/application/media, etc.
F
<fieldset> It is used to group related elements/labels within a web form.
<figcaption> It is used to add a caption or explanation for the <figure> element.
<figure> It is used to define the self-contained content, and s mostly refer as single unit.
<font> It defines the font, size, color, and face for the content. (Not supported in
HTML5)
<footer> It defines the footer section of a webpage.
<form> It is used to define an HTML form.
<frame> It defines a particular area of webpage which can contain another HTML
file. (Not supported in HTML5)
<frameset> It defines group of Frames. (Not supported in HTML5)
H
<h1> to It defines headings for an HTML document from level 1 to level 6.
<h6>
<head> It defines the head section of an HTML document.
<header> It defines the header of a section or webpage.
<hr> It is used to apply thematic break between paragraph-level elements.
<html> It represents root of an HTML document.
I
<i> It is used to represent a text in some different voice.
<iframe> It defines an inline frame which can embed other content.
<img> It is used to insert an image within an HTML document.
<input> It defines an input field within an HTML form.
<ins> It represent text that has been inserted within an HTML document.
<isindex> It is used to display search string for current document. (Not supported in
HTML5)
K
<kbd> It is used to define keyboard input.
L
<label> It defines a text label for the input field of form.
<legend> It defines a caption for content of <fieldset>
<li> It is used to represent items in list.
<link> It represents a relationship between current document and an external resource.
M
<main> It represents the main content of an HTML document.
<map> It defines an image map with active areas.
<mark> It represents a highlighted text.
<marquee> It is used to insert the scrolling text or an image either horizontally or

vertically. (Not supported in HTML5)
<menu> It is used for creating a menu list of commands.
<meta> It defines metadata of an HTML document.
<meter> It defines scalar measurement with known range or fractional value.
N
<nav> It represents section of page to represent navigation links.
<noframes> It provides alternate content to represent in browser which does not support the
<frame> elements. (Not supported in HTML5)
<noscript> It provides an alternative content if a script type is not supported in browser.
O
<object> It is used to embed an object in HTML file.
<ol> It defines an ordered list of items.
<optgroup> It is used to group the options of a drop-down list.
<option> It is used to define options or items in a drop-down list.
<output> It is used as container element which can show result of a calculation.
P
<p> It represents a paragraph in an HTML document.
<param> It defines parameter for an <object> element
<picture> It defines more than one source element and one image element.
<pre> It defines preformatted text in an HTML document.
<progress> It defines the progress of a task within HTML document.
Q
<q> It defines short inline quotation.
R
<rp> It defines an alternative content if browser does not supports ruby annotations.
<rt> It defines explanations and pronunciations in ruby annotations.
<ruby> It is used to represent ruby annotations.
S
<s> It render text which is no longer correct or relevant.
<samp> It is used to represent sample output of a computer program.
<script> It is used to declare the JavaScript within HTML document.
<section> It defines a generic section for a document.
<select> It represents a control which provides a menu of options.
<small> It is used to make text font one size smaller than document?s base font size.
<source>> It defines multiple media recourses for different media element such as
<picture>, <video>, and <audio> element.
<span> It is used for styling and grouping inline.
<strike> It is used to render strike through the text. (Not supported in HTML5)
<strong> It is used to define important text.
<style> It is used to contain style information for an HTML document.

<sub> It defines a text which displays as a subscript text.
<summary> It defines summary which can be used with <details> tag.
<sup> It defines a text which represent as superscript text.
<svg> It is used as container of SVG (Scalable Vector Graphics).
T
<table> It is used to present data in tabular form or to create a table within HTML
document.
<tbody> It represents the body content of an HTML table and used along with <thead>
and <tfoot>.
<td> It is used to define cells of an HTML table which contains table data
<template> It is used to contain the client side content which will not display at time of page
load and may render later using JavaScript.
<textarea> It is used to define multiple line input, such as comment, feedback, and review,
etc.
<tfoot> It defines the footer content of an HTML table.
<th> It defines the head cell of an HTML table.
<thead> It defines the header of an HTML table. It is used along with <tbody> and
<tfoot> tags.
<time> It is used to define data/time within an HTML document.
<title> It defines the title or name of an HTML document.

<tr> It defines the row cells in an HTML table
<track> It is used to define text tracks for <audio> and <video> elements.
<tt> It is used to define teletype text. (Not supported in HTML5)
U
<u> It is used to render enclosed text with an underline.
<ul> It defines unordered list of items.
V
<var> It defines variable name used in mathematical or programming context.
<video> It is used to embed a video content with an HTML document
W
<wbr> It defines a position within text where break line is possible.
standard HTML Document structure
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext. HyperText is a way to link two or more web pages (HTML
documents) with each other.
Markup language: A markup language is a computer language that is used to apply

layout and formatting conventions to a text document. Markup language makes text
more interactive and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering an URL. A Web
page can be of the static or dynamic type. With the help of HTML only, we can create
static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with
the help of styling, and which looks in a nice format on a web browser. An HTML
document is made of many HTML tags and each HTML tag contains different content.
Basic syntax
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
Test it Now
Description of HTML Example

<!DOCTYPE>: It defines the document type or it instruct the browser about the version
of HTML.
<html > :This tag informs the browser that it is an HTML document. Text between html
tag describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag
opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears
at the top of the browser window. It must be placed inside the head tag and should
close immediately. (Optional)
<body> : Text between body tag describes the body content of the page that is visible
to the end user. This tag contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along
with the text.
HTML Elements
An HTML file is made of elements. These elements are responsible for creating web
pages and define content in that webpage. An element in HTML usually consist of a
start tag <tag name>, close tag </tag name> and content inserted between
them. Technically, an element is a collection of start tag, attributes, end tag,
content between them.
1. <p> Hello world!!! </p>
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>WebPage</title>
5. </head>
6. <body>
7. <h1>This is my first web page</h1>
8. <h2> How it looks?</h2>
9. <p>It looks Nice!!!!!</p>
10. </body>
11. </html>
Test it Now
o All the content written between body elements are visible on web page.
Void element: All the elements in HTML do not require to have start tag and end tag,
some elements does not have content and end tag such elements are known as Void
elements or empty elements. These elements are also called as unpaired tag.
Some Void elements are <br> (represents a line break) , <hr>(represents a

horizontal line), etc.
Nested HTML Elements: HTML can be nested, which means an element can contain
another element.
Block-level and Inline HTML elements
For the default display and styling purpose in HTML, all the elements are divided into
two categories:
o Block-level element
o Inline element
Block-level element:
o These are the elements, which structure main part of web page, by dividing a
page into coherent blocks.
o A block-level element always start with new line and takes the full width of web
page, from left to right.
o These elements can contain block-level as well as inline elements.
Following are the block-level elements in HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>,

<fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>,
<li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>,
<tfoot>, <ul> and <video>.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <div style="background-color: lightblue">This is first div</div>
7. <div style="background-color: lightgreen">This is second div</div>
8. <p style="background-color: pink">This is a block level element</p>
9. </body>
10. </html>
Test it Now
Output:
In the above example we have used
tag, which defines a section in a web page, and takes full width of page.
We have used style attribute which is used to styling the HTML content, and the
background color are showing that it's a block level element.
Inline elements:
o Inline elements are those elements, which differentiate the part of a given text
and provide it a particular function.
o These elements does not start with new line and take width as per requirement.
o The Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>,
<dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>,
<script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>,
<tt>, <var>.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <a href="https://www.javatpoint.com/html-tutorial">Click on link</a>
7. <span style="background-color: lightblue">this is inline element</span>
8. <p>This will take width of text only</p>
9. </body>
10. </html>
Test it Now
Output:
Following is the list of the some main elements used in HTML:
Start tag Content End tag Description
<h1> ...... These are headings of </h1>??..</h6> These elements are used to provide the
<h6> HTML headings of page.
<p> This is the paragraph </p> This element is used to display a content in
form of paragraph.
<div> This is div section </div> This element is used to provide a section in
web page.
<br> This element is used to provide a line break. (

void element)
<hr> This element is used to provide a horizontal

line. (void element)
HTML Attribute
o HTML attributes are special words which provide additional information about
the elements or attributes are the modifier of the HTML element.
o Each element or tag can have attributes, which defines the behaviour of that
element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is recommended by
W3C that it should be written in Lowercase only.
o You can add multiple attributes in one HTML element, but need to give space
between two attributes.
Syntax
1. <element attribute_name="value">content</element>
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1> This is Style attribute</h1>
7. <p style="height: 50px; color: blue">It will add style property in element</p>
8. <p style="color: red">It will change the color of content</p>
9. </body>
10. </html>
Test it Now
Output:
Explanation of above example:
1. <p style="height: 50px; color: blue">It will add style property in element</p>
Test it Now
In the above statement, we have used paragraph tags in which we have applied style
attribute. This attribute is used for applying CSS property on any HTML element. It
provides height to paragraph element of 50px and turns it colour to blue.
1. <p style="color: red">It will change the color of content</p>
In the above statement we have again used style attribute in paragraph tag, which turns
its colour red.
The title attribute in HTML

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

Test it Now
With <p> tag:

1. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and
you will see a description as a tooltip</p>
Test it Now
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <h1 title="This is heading tag">Example of title attribute</h1>
8. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, an
d you will see a description as a tooltip</p>
9.
10. </body>
11. </html>
Test it Now
Output:
The href attribute in HTML
Description: The href attribute is the main attribute of <a> anchor tag. This attribute
gives the link address which is specified in that link. The href attribute provides the
hyperlink, and if it is blank, then it will remain in same page.
Example
With link address:
1. <a href="https://www.javatpoint.com/html-anchor">This is a link</a>

Test it Now
Without link address:
1. <a href="">This is a link</a>
Test it Now
The src Attribute
The src attribute is one of the important and required attribute of <img> element. It is
source for the image which is required to display on browser. This attribute can contain
image in same directory or another directory. The image name or source should be
correct else browser will not display the image.
Example
1. <img src="whitepeacock.jpg" height="400" width="600">

Test it NowOutput:
Quotes: single quotes or double quotes?
In this chapter you have seen that, we have used attribute with double quotes, but some
people might use single quotes in HTML. So use of single quotes with HTML attribute, is
also allowed. The following both statements are absolutely fine.
1. <a href="https://www.javatpoint.com">A link to HTML.</a>

2. <a href='https://www.javatpoint.com'>A link to HTML.</a>
Test it Now
IN HTML5, you can also omit use of quotes around attribute values.
1. <a href=https://www.javatpoint.com>A link to HTML.</a>

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.
See this example:
1. <h1>Heading no. 1</h1>

Test it Now
Output:
Heading no. 1
Heading no. 2
Heading no. 3
Heading no. 4
Heading no. 5
Heading no. 6
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 Layouts
HTML layouts provide a way to arrange web pages in well-mannered, well-structured,

and in responsive form or we can say that HTML layout specifies a way in which the web
pages can be arranged. Web-page layout works with arrangement of visual elements of
an HTML document.
Web page layout is the most important part to keep in mind while creating a website so
that our website can appear professional with the great look. You can also use CSS and
JAVASCRIPT based frameworks for creating layouts for responsive and dynamic website
designing.
Every website has a specific layout to display content in a specific manner.

Following are different HTML5 elements which are used to define the different parts of a
webpage.
o <header>: It is used to define a header for a document or a section.

o <nav>: It is used to define a container for navigation links
o <section>: It is used to define a section in a document
o <article>: It is used to define an independent self-contained article
o <aside>: It is used to define content aside from the content (like a sidebar)
o <footer>: It is used to define a footer for a document or a section
o <details>: It is used to define additional details
o <summary>: It is used to define a heading for the <details> element
Description of various Layout elements

HTML <header>
The <header> element is used to create header section of web pages. The header
contains the introductory content, heading element, logo or icon for the webpage, and
authorship information.
Example:
1. <header style="background-color: #303030; height: 80px; width: 100%">
2. <h1 style="font-size: 30px; color: white;text-align: center; padding-top: 15px;">Welcome to
MyFirstWebpage</h1>
3. </header>
Test it Now
HTML <nav>
The <nav> elements is a container for the main block of navigation links. It can contain
links for the same page or for other pages.
Example:
1. <nav style="background-color:#bcdeef;">
2. <h1 style="text-align: center;">Navgation Links</h1>
3. <ul>
4. <li><a href="#">link1</a></li>
8. </ul>
9. </nav>
Test it Now
HTML <section>
HTML <section> elements represent a separate section of a web page which contains
related element grouped together. It can contain: text, images, tables, videos, etc.
Example:
1. <section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">
2. <h2>Introduction to HTML</h2>
3. <p>HTML is a markup language which is used for creating attractive web pages with the help
of styling, and which looks in a nice format on a web browser..</p>
4. </section>
HTML <article>
The HTML
tag is used to contain a self-contained article such as big story, huge article, etc.
Example:
1. <article style="width: 100%; border:2px solid black; background-color: #fff0f5;">
2. <h2>History of Computer</h2>
3. <p>Write your content here for the history of computer</p>
4. </article>
HTML <aside>
HTML <aside> define aside content related to primary content. The <aside> content must be
related to the primary content. It can function as side bar for the main content of web page.
Example:
1. <aside style="background-color:#e6e6fa">
2. <h2>Sidebar information</h2>
3. <p>This conatins information which will represent like a side bar for a webpage</p>
4. </aside>
HTML <footer>
HTML <footer> element defines the footer for that document or web page. It mostly contains
information about author, copyright, other links, etc.
Example:
1. <footer style="background-color: #f0f8ff; width: 100%; text-align: center;">
2. <h3>Footer Example</h3>
3. <p>© Copyright 2018-2020. </p>
4. </footer>
HTML <details>
HTML <details> element is used to add extra details about the web page and use can hide or
show the details as per requirement.
Example:
1. <details style="background-color: #f5deb3">
2. <summary>This is visible section: click to show other details</summary>
3. <p>This section only shows if user want to see it. </p>
4. </details>
HTML <summary>
HTML <summary> element is used with the <details> element in a web page. It is used as
summary, captions about the content of <details> element.
Example:
1. <details>
2. <summary>HTML is acronym for?</summary>
3. <p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>
4. </details>
HTML Links
Links are found in nearly all web pages. Links allow users to click their way
from page to pag
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little
hand.
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Example
This example shows how to create a link to W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red
Tip: Links can of course be styled with CSS, to get another look!
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it was

clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
Example
Use target="_blank" to open the linked document in a new browser window or
tab:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in
the href attribute.
A local link (a link to a page within the same website) is specified with
a relative URL (without the "https://www" part):
Example
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's email
program (to let them send a new email):
Example
<a href="mailto:[email protected]">Send email</a>
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click
of a button:
Example
<button onclick="document.location='default.asp'">HTML Tutorial</button>
Link Titles
The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves over
the element.
Example
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
More on Absolute URLs and Relative URLs
Example
Use a full URL to link to a web page:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Example
Link to a page located in the html folder on the current web site:
<a href="/html/default.asp">HTML tutorial</a>
Example
Link to a page located in the same folder as the current page:
<a href="default.asp">HTML tutorial</a>
Chapter Summary
 Use the <a> element to define a link
 Use the href attribute to define the link address
 Use the target attribute to define where to open the linked document
 Use the <img> element (inside <a>) to use an image as a link
 Use the mailto: scheme inside the href attribute to create a link that
opens the user's email program
HTML Link Tags
Tag Description
<a> Defines a hyperlink
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and
more.
Example
I am Red
I am Blue
I am Big
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Background Color
The CSS background-color property defines the background color for an HTML element.
Example
Set the background color for a page to powderblue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Example
Set background color for two different elements:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>
</body>
Text Color
The CSS color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Chapter Summary
 Use the style attribute for styling HTML elements
 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default. It is
known as numbered list also. The ordered list starts with <ol> tag and the list items start
with <li> tag.
1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>
Test it Now
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the
<li> tag.
1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>
Test it Now
Output:
o Aries
o Bingo
o Leo
o Oracle
HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML and XHTML. It is
also known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or
other name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10. </dl>
Test it Now
Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
HTML Nested List

A list within another list is termed as nested list. If you want a bullet list inside a
numbered list then such type of list will called as nested list.
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Nested list</title>
5. </head>
6. <body>
7. <p>List of Indian States with thier capital</p>
8. <ol>
9. <li>Delhi
10. <ul>
11. <li>NewDelhi</li>
12. </ul>
13. </li>
14. <li>Haryana
15. <ul>
16. <li>Chandigarh</li>
17. </ul>
18. </li>
19. <li>Gujarat
20. <ul>
21. <li>Gandhinagar</li>
22. </ul>
23. </li>
24. <li>Rajasthan
25. <ul>
26. <li>Jaipur</li>
27. </ul>
28. </li>
29. <li>Maharashtra
30. <ul>
31. <li>Mumbai</li>
32. </ul>
33. </li>
34. <li>Uttarpradesh
35. <ul>
36. <li>Lucknow</li></ul>
37. </li>
38. </ol>
39. </body>
40. </html>
Test it Now
Output:
HTML iframes
HTML Iframe is used to display a nested webpage (a webpage within a webpage). The
HTML <iframe> tag defines an inline frame, hence it is also called as an Inline frame.
An HTML iframe embeds another document within the current HTML document in the
rectangular region.
The webpage content and iframe contents can interact with each other using JavaScript.
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
1. <iframe src="URL"></iframe>
Here, "src" attribute specifies the web address (URL) of the inline frame page.
Set Width and Height of iframe
You can set the width and height of iframe by using "width" and "height" attributes. By
default, the attributes values are specified in pixels but you can also set them in percent.
i.e. 50%, 60% etc.
Example: (Pixels)
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>HTML Iframes example</h2>
5. <p>Use the height and width attributes to specify the size of the iframe:</p>
6. <iframe src="https://www.javatpoint.com/" height="300" width="400"></iframe>
7. </body>
8. </html>
Example: (Percentage)
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>HTML Iframes</h2>
5. <p>You can use the height and width attributes to specify the size of the iframe:</p>
6. <iframe src="https://www.javatpoint.com/" height="50%" width="70%"></iframe>
7. </body>
8. </html>
You can also use CSS to set the height and width of the iframe.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>HTML Iframes</h2>
5. <p>Use the CSS height and width properties to specify the size of the iframe:</p>
6. <iframe src="https://www.javatpoint.com/" style="height:300px;width:400px"></iframe>
7. </body>
8. </html>
Remove the border of iframe
By default, an iframe contains a border around it. You can remove the border by using
<style> attribute and CSS border property.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Remove the Iframe Border</h2>
5. <p>This iframe example doesn't have any border</p>
6. <iframe src="https://www.javatpoint.com/" style="border:none;"></iframe>
7. </body>
8. </html>
You can also change the size, color, style of the iframe's border.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Custom Iframe Border</h2>
5. <iframe src="https://www.javatpoint.com/" style="border:2px solid tomato;"></iframe>
6. </body>
7. </html>
Iframe Target for a link
You can set a target frame for a link by using iframe. Your specified target attribute of
the link must refer to the name attribute of the iframe.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <h2>Iframe - Target for a Link</h2>
6. <iframe height="300px" width="100%" src="new.html" name="iframe_a"></iframe>
7. <p><a href="https://www.javatpoint.com" target="iframe_a">JavaTpoint.com</a></p>
8. <p>The name of iframe and link target must have same value else link will not open as a frame.
</p>
9.
10. </body>
11. </html>
Output
new.hmtl output code:
<!DOCTYPE html>
<html>
<head>
<style>
p{ font-size: 50px;
color: red;}
</style>
</head>
<body style="background-color: #c7f15e;">
<p>This is a link below the ifarme click on link to open new iframe. </p>
</body>
</html>
Embed YouTube video using iframe

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

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

name
allowfullscreen If true then that frame can be opened in full screen.
height Pixels It defines the height of the embedded iframe, and the default height is
150 px.
name text It gives the name to the iframe. The name attribute is important if you
want to create a link in one frame.
frameborder 1 or 0 It defines whether iframe should have a border or not. (Not supported
in HTML5).
Width Pixels It defines the width of embedded frame, and default width is 300 px.
src URL The src attribute is used to give the path name or file name which
content to be loaded into iframe.
sandbox
This attribute is used to apply extra restrictions for the content of the
frame
allow-forms It allows submission of the form if this keyword is not used then form
submission is blocked.
allow- It will enable popups, and if not applied then no popup will open.
popups
allow-scripts It will enable the script to run.
allow-same- If this keyword is used then the embedded resource will be treated as
origin downloaded from the same source.
srcdoc The srcdoc attribute is used to show the HTML content in the inline
iframe. It overrides the src attribute (if a browser supports).
scrolling
It indicates that browser should provide a scroll bar for the iframe or
not. (Not supported in HTML5)
auto Scrollbar only shows if the content of iframe is larger than its
dimensions.
yes Always shows scroll bar for the iframe.
no Never shows scrollbar for the iframe.
HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the
help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over table to
manage the layout of the page .
HTML Table Tags
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup It specifies a group of one or more columns in a table for formatting.

>
<col> It is used with <colgroup> element to specify column properties for each
column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.
HTML Table Example

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

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

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

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

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

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

It is now recommended to use border property of CSS to specify border in table.
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>
Test it Now
You can collapse all the borders in one border by border-collapse property. It will
collapse the border into one.
1. <style>
2. table, th, td {
4. border-collapse: collapse;
5. }
6. </style>
Test it Now
Output:
Name Last Name Marks

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

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

2. By padding property in CSS
The cellpadding attribute of HTML table tag is obselete now. It is recommended to use
CSS. So let's see the code of CSS.
1. <style>
2. table, th, td {
3. border: 1px solid pink;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
Test it Now
Output:
Name Last Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
HTML Table width:
We can specify the HTML table width using the CSS width property. It can be specify in
pixels or percentage.
We can adjust our table width as per our requirement. Following is the example to
display table with width.
1. table{
2. width: 100%;
3. }
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>table</title>
5. <style>
6. table{
8. width: 100%;
9. }
10. th,td{
11. border: 2px solid green;
12. padding: 15px;
13. }
14.
15. </style>
16. </head>
17. <body>
18. <table>
19. <tr>
20. <th>1 header</th>
23. </tr>
24. <tr>
25. <td>1data</td>
26. <td>1data</td>
27. <td>1data</td>
28. </tr>
29. <tr>
30. <td>2 data</td>
31. <td>2 data</td>
32. <td>2 data</td>
33. </tr>
34. <tr>
35. <td>3 data</td>
36. <td>3 data</td>
37. <td>3 data</td>
38. </tr>
39. </table>
40. </body>
41. </html>
Test it Now
Output:
HTML Table with colspan
If you want to make a cell span more than one column, you can use the colspan
attribute.
It will divide one cell/row into multiple columns, and the number of columns depend on
the value of colspan attribute.
Let's see the example that span two columns.
CSS code:
1. <style>
2. table, th, td {
5. }
6. th, td {
7. padding: 5px;
8. }
9. </style>
HTML code:
1. <table style="width:100%">
2. <tr>
3. <th>Name</th>
4. <th colspan="2">Mobile No.</th>
5. </tr>
6. <tr>
7. <td>Ajeet Maurya</td>
8. <td>7503520801</td>
9. <td>9555879135</td>
10. </tr>
11. </table>
Test it Now
Output:
Name Mobile No.
Ajeet Maurya 7503520801 9555879135
HTML Table with rowspan

If you want to make a cell span more than one row, you can use the rowspan attribute.
It will divide a cell into multiple rows. The number of divided rows will depend on
rowspan values.
Let's see the example that span two rows.
CSS code:
1. <style>
2. table, th, td {
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
HTML code:
1. <table>
2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>
3. <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
4. <tr><td>9555879135</td></tr>
5. </table>
Test it Now
Output:
Name Ajeet Maurya
7503520801
Mobile No.
9555879135
HTML table with caption
HTML caption is diplayed above the table. It must be used after table tag only.
1. <table>
2. <caption>Student Records</caption>
4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>
6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>
7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
8. </table>
Test it Now
Styling HTML table even and odd cells
CSS code:
1. <style>
2. table, th, td {
5. }
6. th, td {
7. padding: 10px;
8. }
9. table#alter tr:nth-child(even) {
10. background-color: #eee;
11. }
12. table#alter tr:nth-child(odd) {
13. background-color: #fff;
14. }
15. table#alter th {
16. color: white;
17. background-color: gray;
18. }
19. </style>
Test it Now
Output:
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
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.
Syntax:
1. <form>
2. //Form elements
3. </form>
HTML <input> element
The HTML <input> element is fundamental form element. It is used to create form
fields, to take input from user. We can apply different input filed to gather different
information form user. Following is the example to show the simple text input.
Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>
Output:
HTML TextField Control

The type="text" attribute of input tag creates textfield control also known as single line
textfield control. The name attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc
1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>
Output:
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.
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:
Radio Button Control
The radio button is used to select one option from multiple options. It is used for
selection of gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can be selected at a
time.
Using radio buttons for multiple options, you can only choose a single option at a time.
1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Female <b
r/>
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="football"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>
Output:
Submit button control

HTML <input type="submit"> are used to add a submit button on web page. When
user clicks on submit button, then form get submit to the server.
Syntax:
1. <input type="submit" value="submit">
The type = submit , specifying that it is a submit button
The value attribute can be anything which we write on button on web page.
The name attribute can be omit here.
Example
1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
7. </form>
Output:
HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped
elements.
Example:
1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
9. </fieldset>
10. lt;/form>
Output:
HTML Form Example
Following is the example for a simple form of registration
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/>Male <br>
21. <input type="radio" id="gender" name="gender" value="female"/>Female <br/
>
22. <input type="radio" id="gender" name="gender" value="others"/>others <br/>
23. <br>Enter your Address:<br>

24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>
Test it Now
Output:
HTML Form Example
Let's see a simple example of creating HTML form.
1. <form action="#">
2. <table>
3. <tr>
4. <td class="tdLabel"><label for="register_name" class="label">Enter name:</
label></td>
5. <td><input type="text" name="name" value="" id="register_name" style="width:16
0px"/></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" style="widt
h:160px"/></td>
10. </tr>
11. <tr>
12. <td class="tdLabel"><label for="register_email" class="label">Enter Email:</
label></td>
13. <td
14. ><input type="email" name="email" value="" id="register_email" style="width:160px"/
></td>
15. </tr>
16. <tr>
17. <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</
label></td>
18. <td>
19. <input type="radio" name="gender" id="register_gendermale" value="male"/>
20. <label for="register_gendermale">male</label>
21. <input type="radio" name="gender" id="register_genderfemale" value="female"/>
22. <label for="register_genderfemale">female</label>
23. </td>
24. </tr>
25. <tr>
26. <td class="tdLabel"><label for="register_country" class="label">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="r
egister"/>
38. </div></td>
39. </tr>
40. </table>
41. </form>
HTML Media
Multimedia on the web is sound, music, videos, movies, and animations.
What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can
hear or see, like images, music, sound, videos, records, films, animations, and
more.
Web pages often contain multimedia elements of different types and formats.
Browser Support
The first web browsers had support for text only, limited to a single font in a
single color.
Later came browsers with support for colors, fonts, images, and multimedia!
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file
extension.
Multimedia files have formats and different extensions

like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Common Video Formats

There are many video formats out there.
The MP4, WebM, and Ogg formats are supported

by HTML.
The MP4 format is recommended by YouTube.
Format File Description
MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first
.mpeg popular video format on the web. Not supported anymore in
HTML.
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft.

Commonly used in video cameras and TV hardware. Plays well
on Windows computers, but not in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by Microsoft.

Commonly used in video cameras and TV hardware. Plays well
QuickTim .mov QuickTime. Developed by Apple. Commonly used in video

e cameras and TV hardware. Plays well on Apple computers, but
not in web browsers.
RealVideo .rm RealVideo. Developed by Real Media to allow video streaming
.ram with low bandwidths. Does not play in web browsers.
Flash .swf Flash. Developed by Macromedia. Often requires an extra

.flv component (plug-in) to play in web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported

by HTML.
WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google.

Supported by HTML.
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group.

or MP4 Commonly used in video cameras and TV hardware. Supported
by all browsers and recommended by YouTube.
Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.
Common Audio Formats

MP3 is the best format for compressed recorded music. The term MP3 has
become synonymous with digital music.
If your website is about recorded music, MP3 is the choice.
Format File Description
MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all
.midi electronic music devices like synthesizers and PC sound cards.
MIDI files do not contain sound, but digital notes that can be
played by electronics. Plays well on all computers and music
hardware, but not in web browsers.
RealAudi .rm RealAudio. Developed by Real Media to allow streaming of audio

o .ram with low bandwidths. Does not play in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default
format for iTunes. Plays well on Apple computers, but not in web
browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows,
Macintosh, and Linux operating systems. Supported by HTML.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the
most popular format for music players. Combines good
compression (small files) with high quality. Supported by all
browsers.
MP4 .mp4 MP4 is a video format, but can also be used for audio. Supported
by all browsers.
The HTML <video> Element
To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and
width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the
browser may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers
that do not support the <video> element.
HTML <video> Autoplay
To start a video automatically, use the autoplay attribute:
Example
<video width="320" height="240" autoplay>
</video>
Add muted after autoplay to let your video start playing automatically (but
muted):
Example
<video width="320" height="240" autoplay muted>
</video>
Browser Support
The numbers in the table specify the first browser version that fully supports
the <video> element.
Element
<video> 4.0 9.0 3.5 4.0
HTML Video Formats
There are three supported video formats: MP4, WebM, and Ogg. The browser
support for the different formats is:
Browser MP4 WebM Ogg
Edge YES YES YES
Chrome YES YES YES

Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
HTML Video - Media Types

File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
HTML Video - Methods, Properties, and

Events
The HTML DOM defines methods, properties, and events for the <video> element.
This allows you to load, play, and pause videos, as well as setting duration and
volume.
There are also DOM events that can notify you when a video begins to play, is
paused, etc.
Example: Using JavaScript
Play/Pause Big Small Normal
Video courtesy of Big Buck Bunny.
Try it Yourself »
For a full DOM reference, go to our HTML Audio/Video DOM Reference.
HTML Video Tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video
<track> Defines text tracks in media players

HTML Audio
The HTML <audio> element is used to play an audio file on a web page.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML Audio - How It Works
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers
that do not support the <audio> element.
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute:
Example
<audio controls autoplay>
</audio>
Add muted after autoplay to let your audio file start playing automatically (but
muted):
Example
<audio controls autoplay muted>
</audio>
Browser Support
The numbers in the table specify the first browser version that fully supports
the <audio> element.
Element
<audio> 4.0 9.0 3.5 4.0
HTML Audio Formats
There are three supported audio formats: MP3, WAV, and OGG. The browser
support for the different formats is:
Browser MP3 WAV OGG
Edge/IE YES YES* YES*
Chrome YES YES YES
Firefox YES YES YES

Safari YES YES NO
Opera YES YES YES
*From Edge 79
HTML Audio - Media Types
File Format Media Type
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav
HTML Audio - Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the <audio> element.
This allows you to load, play, and pause audios, as well as set duration and
volume.
There are also DOM events that can notify you when an audio begins to play, is
paused, etc.
For a full DOM reference, go to our HTML Audio/Video DOM Reference.
HTML Audio Tags

Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such

as <video> and <audio>
HTML Plug-ins
Plug-ins are computer programs that extend the standard functionality of the
browser.
Plug-ins
Plug-ins were designed to be used for many different purposes:
 To run Java applets

 To run Microsoft ActiveX controls
 To display Flash movies
 To display maps
 To scan for viruses
 To verify a bank id
The <object> Element
The <object> element is supported by all browsers.
The <object> element defines an embedded object within an HTML document.
It was designed to embed plug-ins (like Java applets, PDF readers, and Flash
Players) in web pages, but can also be used to include HTML in HTML:
Example
<object width="100%" height="500px" data="snippet.html"></object>
Or images if you like:
Example
<object data="audi.jpeg"></object>
The <embed> Element
The <embed> element is supported in all major browsers.
The <embed> element also defines an embedded object within an HTML document.
Web browsers have supported the <embed> element for a long time. However,
it has not been a part of the HTML specification before HTML5.
Example
<embed src="audi.jpeg">
The <embed> element can also be used to include HTML in HTML:
Example
<embed width="100%" height="500px" src="snippet.html">
HTML YouTube Videos
The easiest way to play videos in HTML, is to use YouTube.

Struggling with Video Formats?
Converting videos to different formats can be difficult and time-consuming.
An easier solution is to let YouTube play the videos in your web page.
YouTube Video Id
YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a
video.
You can use this id, and refer to your video in the HTML code.
Playing a YouTube Video in HTML
To play your video on a web page, do the following:
 Upload the video to YouTube

 Take a note of the video id
 Define an <iframe> element in your web page
 Let the src attribute point to the video URL
 Use the width and height attributes to specify the dimension of the
player
 Add any other parameters to the URL (see below)
Example
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
YouTube Autoplay + Mute
You can let your video start playing automatically when a user visits the page,
by adding autoplay=1 to the YouTube URL. However, automatically starting a
video is annoying for your visitors!
Add mute=1 after autoplay=1 to let your video start playing automatically (but
muted).
YouTube - Autoplay + Muted
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
YouTube Playlist
A comma separated list of videos to play (in addition to the original URL).
YouTube Loop
Add loop=1 to let your video loop forever.
Value 0 (default): The video will play only once.
Value 1: The video will loop (forever).
YouTube - Loop
src="https://www.youtube.com/embed/tgbNymZ7vqY?
playlist=tgbNymZ7vqY&loop=1">
</iframe>
YouTube Controls
Add controls=0 to not display controls in the video player.
Value 0: Player controls does not display.
Value 1 (default): Player controls display.
YouTube - Controls
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
The GET Method
GET is used to request data from a specified resource.
GET is one of the most common HTTP methods.
Note that the query string (name/value pairs) is sent in the URL of a GET
request:
/test/demo_form.php?name1=value1&name2=value2
Some other notes on GET requests:
 GET requests can be cached

 GET requests remain in the browser history
 GET requests can be bookmarked
 GET requests should never be used when dealing with sensitive data
 GET requests have length restrictions
 GET requests are only used to request data (not modify)
The POST Method
POST is used to send data to a server to create/update a resource.
The data sent to the server with POST is stored in the request body of the HTTP
request:
POST /test/demo_form.php HTTP/1.1

Host: w3schools.com
name1=value1&name2=value2
POST is one of the most common HTTP methods.
Some other notes on POST requests:
 POST requests are never cached

 POST requests do not remain in the browser history
 POST requests cannot be bookmarked
 POST requests have no restrictions on data length
HTML5 Tutorial
HTML5 tutorial provides details of all 40+ HTML tags including audio, video, header,
footer, data, datalist, article etc. This HTML tutorial is designed for beginners and
professionals.
HTML5 is a next version of HTML. Here, you will get some brand new features which will
make HTML much easier. These new introducing features make your website layout
clearer to both website designers and users. There are some elements like <header>,
<footer>, <nav> and <article> that define the layout of a website.
Why use HTML5

It is enriched with advance features which makes it easy and interactive for
designer/developer and users.
It allows you to play a video and audio file.
It allows you to draw on a canvas.
It facilitate you to design better forms and build web applications that work offline.
It provides you advance features for that you would normally have to write JavaScript to
do.
The most important reason to use HTML 5 is, we believe it is not going anywhere. It will
be here to serve for a long time according to W3C recommendation.
HTML 5 Example
Let's see a simple example of HTML5.
1. <!DOCTYPE>
2. <html>
3. <body>
4. <h1>Write Your First Heading</h1>
5. <p>Write Your First Paragraph.</p>
6. </body>
7. </html>
HTML5 User Manual

HTML Coding Convention
You should follow some convention while using HTML:
Use a Consistent CSS

A user must use consistent style while writing HTML. It makes the code simpler and
more understandable for people.
Your code must be small, clean and well-formed.
Use Correct Document Type

You should declare document type at the starting of your code.
For example:
1. <!DOCTYPE html>
You can also use <!DOCTYPE html> to maintain your lower case practice.
Use Lower Case Element Names
HTML5 facilitates you to use upper case and lower case letters in element name. But it is
good practice to use only lower case. Because:
o Mixing lower case and upper case letters in elements is not a good idea.
o Lowercase looks neat and clean.
o Lower case is easy to write.
o Developers mainly use lower case letters.
Example:
Bad practice:
1. <SECTION>
2. <p>This is javatpoint.com</p>
3. </SECTION>
Note: This example will run but it is not a good practice to write elements in uppercase
letters.
Very Bad practice:
1. <Section>
2. <p>This is a javatpoint.com</p>
3. </SECTION>
Good practice:
1. <section>
2. <p>This is javatpoint.com.</p>
3. </section>
Close all HTML Elements

In HTML5, it is not required to close all HTML tags. But, it is recommended to close tags.
Bad practice:
1. <section>
2. <p>This is javatpoint.com
3. </section>
Good practice:
1. <section>
2. <p>This is javatpoint.com</p>
3. </section>
Close empty HTML Elements

In HTML5, it is not mandatory to close empty HTML tags. You can close it or let it be
unclosed.
Good practice:
1. <meta charset="utf-8">
Don't Omit <html> and <body>

HTML5 facilitates you to omit and tag. You can exclude both tags and the program will
work well enough.
Example:
1. <!DOCTYPE html>
2. <head>
3. <title>Page Title</title>
4. </head>
5. <h1>This is javatpoint.com</h1>
6. <p>Welcome to javatpoint.com</p>
Test it Now
We recommend you to not to omit and tag because is a root element and specifies the
page language.
Syntax:
1. <!DOCTYPE html>
2. <html lang="en-US">
Example:
1. <!DOCTYPE html>
2. <html lang="en-US">
3. <head>
4. <title>Page Title</title>
5. </head>
6. <body>
7. <h1>This is a heading</h1>
8. <p>This is a paragraph.</p>
9. </body>
10. </html>
HTML 5 Tags
There is a list of newly included tags in HTML 5. These HTML 5 tags (elements) provide a
better document structure. This list shows all HTML 5 tags in alphabetical order with
description.
List of HTML 5 Tags
Tag Description
<article> This element is used to define an independent piece of content in a document, tha
may be a blog, a magazine or a newspaper article.
<aside> It specifies that article is slightly related to the rest of the whole page.
<audio> It is used to play audio file in HTML.
<bdi> The bdi stands for bi-directional isolation. It isolates a part of text that is formatted i
other direction from the outside text document.
<canvas> It is used to draw canvas.
<data> It provides machine readable version of its data.
<datalist> It provides auto complete feature for textfield.
<details> It specifies the additional information or controls required by user.
<dialog> It defines a window or a dialog box.
<figcaption> It is used to define a caption for a <figure> element.
<figure> It defines a self-contained content like photos, diagrams etc.
<footer> It defines a footer for a section.
<header> It defines a header for a section.
<main> It defines the main content of a document.
<mark> It specifies the marked or highlighted content.

<menuitem It defines a command that the user can invoke from a popup menu.
>
<meter> It is used to measure the scalar value within a given range.
<nav> It is used to define the navigation link in the document.
<progress> It specifies the progress of the task.
<rp> It defines what to show in browser that don't support ruby annotation.
<rt> It defines an explanation/pronunciation of characters.
<ruby> It defines ruby annotation along with <rp> and <rt>.
<section> It defines a section in the document.
<summary> It specifies a visible heading for <detailed> element.
<svg> It is used to display shapes.
<time> It is used to define a date/time.
<video> It is used to play video file in HTML.
<wbr> It defines a possible line break.
HTML5 New Elements

In HTML5, there are lots of new elements are added which provides some extra
functionality to create an attractive and dynamic website. With the help of these
elements, you can make your code easy and quick.
HTML5 New Tags

Following is the complete list of the newly added element with their descriptions.
Tag Description
Structural or Semantic Tags
<article> It defines the independent or self-contained content of a webpage.
<aside> It defines the content which provide information about the main content.
<bdi> It is used to isolate the part of text which might be formatted in another direction.
<details> It defines additional information which only visible as per user demand.
<dialog> It represents a dialog box or other interactive components.
<figcaption It defines caption for the <figure> element.

>
<figure> It defines a self-contained content, and referenced as a single unit.
<footer> It represents the footer section of the webpage.
<header> It defines the introductory or navigational content of the webpage.
<main> It specifies the main content of the HTML document.
<mark> It represent the text which is highlighted or marked for reference or notation purposes
<meter> It represents a scalar value within a known range.
<nav> It represents the section which contains navigation links.
<progress> It defines a progress bar which shows completions progress of a task.
<rp> It defines alternative content for the browser which do not support ruby annotations.
<rt> It defines explanations and pronunciations of characters in ruby annotations.
<ruby> It defines ruby annotations (Specifically for Asian language).
<section> It defines a generic section within an HTML document.
<summary> It defines summary or caption for a <details> element which can be clicked to chang
the state of <details> element.
<time> It defines data/time within an HTML document.

<wbr> It specifies a line break opportunity. (Where line break possible)
HTML5 Form Tags

<datalist> It represent predefined list for input <option> element.
<output> It is used a container element to represent the output of a calculation or outcome o

user action.
Graphics Tags
<canvas> It allows drawing graphics and animations via scripting.
<svg> It is used to draw scalable vector graphics.
HTML5 Media Tags

<audio> It defines sound content.
<embed> It defines a container for external files/application/media.
<source> It defines multiple media resources for the media elements.
<track> It defines text tracks for <audio> and <video> files
<video> It defines video content within HTML document.
HTML5 New <input> types
Type Description
color It represents an input field which defines a color selector.
date It represents an input field to define a date selector.
datetime It defines full date and time display with time zone information.
datetime-local It defines date and time without time zone information.
email It defines an input field with email pattern Validation.

month It defines the input field to enter month for the particular year
number It defines field which selects a numeric value only.
range It defines a numeric value selector with a given range of 1 to 100.
search It is used to define a search field.
tel It represents a control to enter a telephone number.
time It represents a control to enter time value with no time zone.
url It represents an input field to enter a URL
week It defines a selector for week value for the particular year.
DHTML Tutorial
DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML.
Dynamic HTML is not a markup or programming language but it is a term that

combines the features of various web development technologies for creating the web
pages dynamic and interactive.
The DHTML application was introduced by Microsoft with the release of the 4 th version
of IE (Internet Explorer) in 1997.
Components of Dynamic HTML
DHTML consists of the following four components or languages:
29.4M
569
Java Try Catch
o HTML 4.0
o CSS
o JavaScript
o DOM.
HTML 4.0
HTML is a client-side markup language, which is a core component of the DHTML. It

defines the structure of a web page with various defined basic elements or tags.
CSS
CSS stands for Cascading Style Sheet, which allows the web users or developers for
controlling the style and layout of the HTML elements on the web pages.
JavaScript
JavaScript is a scripting language which is done on a client-side. The various browser

supports JavaScript technology. DHTML uses the JavaScript technology for accessing,
controlling, and manipulating the HTML elements. The statements in JavaScript are the
commands which tell the browser for performing an action.
DOM
DOM is the document object model. It is a w3c standard, which is a standard interface
of programming for HTML. It is mainly used for defining the objects and properties of all
elements in HTML.
Uses of DHTML
Following are the uses of DHTML (Dynamic HTML):
o It is used for designing the animated and interactive web pages that are developed in
real-time.
o DHTML helps users by animating the text and images in their documents.
o It allows the authors for adding the effects on their pages.
o It also allows the page authors for including the drop-down menus or rollover buttons.
o This term is also used to create various browser-based action games.
o It is also used to add the ticker on various websites, which needs to refresh their content
automatically.
Features of DHTML
Following are the various characteristics or features of DHTML (Dynamic HTML):
o Its simplest and main feature is that we can create the web page dynamically.
o Dynamic Style is a feature, that allows the users to alter the font, size, color, and content
of a web page.
o It provides the facility for using the events, methods, and properties. And, also provides
the feature of code reusability.
o It also provides the feature in browsers for data binding.
o Using DHTML, users can easily create dynamic fonts for their web sites or web pages.
o With the help of DHTML, users can easily change the tags and their properties.
o The web page functionality is enhanced because the DHTML uses low-bandwidth effect.
Difference between HTML and DHTML

Following table describes the differences between HTML and DHTML:
HTML (Hypertext Markup language) DHTML (Dynamic Hypertext Markup language)
1. HTML is simply a markup language. 1. DHTML is not a language, but it is a set of technologie
of web development.
2. It is used for developing and creating web pages. 2. It is used for creating and designing the animated an
interactive web sites or pages.
3. This markup language creates static web pages. 3. This concept creates dynamic web pages.
4. It does not contain any server-side scripting 4. It may contain the code of server-side scripting.
code.
5. The files of HTML are stored with the .html 5. The files of DHTML are stored with the .dhtm extensio
or .htm extension in a system. in a system.
6. A simple page which is created by a user without 6. A page which is created by a user using the HTML, CS
using the scripts or styles called as an HTML page. DOM, and JavaScript technologies called a DHTML page
7. This markup language does not need database 7. This concept needs database connectivity because
connectivity. interacts with users.
DHTML JavaScript
JavaScript can be included in HTML pages, which creates the content of the page as
dynamic. We can easily type the JavaScript code within the <head> or <body> tag of a
HTML page. If we want to add the external source file of JavaScript, we can easily add
using the <src> attribute.
Following are the various examples, which describes how to use the JavaScript
technology with the DHTML:
Document.write() Method
The document.write() method of JavaScript, writes the output to a web page.
Example 1: The following example simply uses the document.write() method of

JavaScript in the DHTML. In this example, we type the JavaScript code in
the <body> tag.
1. <HTML>
2. <head>
3. <title>
4. Method of a JavaScript
5. </title>
6. </head>
7. <body>
8. <script type="text/javascript">
9. document.write("JavaTpoint");
10. </script>
11. </body>
12. </html>
Test it Now
Output:
JavaScript and HTML event
A JavaScript code can also be executed when some event occurs. Suppose, a user clicks
an HTML element on a webpage, and after clicking, the JavaScript function associated
with that HTML element is automatically invoked. And, then the statements in the
function are performed.
Example 1: The following example shows the current date and time with the JavaScript
and HTML event (Onclick). In this example, we type the JavaScript code in the <head>
tag.
1. <html>
2. <head>
3. <title>
4. DHTML with JavaScript
5. </title>
7. function dateandtime()
8. {
9. alert(Date());
10. }
11. </script>
12. </head>
13. <body bgcolor="orange">
14. <font size="4" color="blue">
15. <center> <p>
16. Click here # <a href="#" onClick="dateandtime();"> Date and Time </a>
17. # to check the today's date and time.
18. </p> </center>
19. </font>
20. </body>
21. </html>
Test it Now
Output:
Explanation:
In the above code, we displayed the current date and time with the help of JavaScript in
DHTML. In the body tag, we used the anchor tag, which refers to the page itself. When
you click on the link, then the function of JavaScript is called.
In the JavaScript function, we use the alert() method in which we type the date()
function. The date function shows the date and time in the alert dialog box on the web
page.
JavaScript and HTML DOM

With version 4 of HTML, JavaScript code can also change the inner content and
attributes of the HTML event.
Example 1: This example checks the Grade of a student according to the percentage
criteria with the JavaScript and HTML DOM. In this example, we type the code of a
JavaScript in the <body> tag.
1. <html>
2. <head>
3. <title> Check Student Grade
4. </title>
5. </head>
6.
7. <body>
8. <p>Enter the percentage of a Student:</p>
9. <input type="text" id="percentage">
10. <button type="button" onclick="checkGrade()">
11. Find Grade
12. </button>
13. <p id="demo"></p>
15. function checkGrade() {
16. var x,p, text;
17. p = document.getElementById("percentage").value;
18.
19. x=parseInt(p);
20.
21.
22. if (x>90 && x <= 100) {
23. document.getElementById("demo").innerHTML = "A1";
24. } else if (x>80 && x <= 90) {
26. } else if (x>70 && x <= 80) {
28. }
29. }
30. </script>
31. </body>
32. </html>
Test it Now
Output:
Explanation:
In the above code, we check the student’s Grade with the help of JavaScript in DHTML.
In the JavaScript code, we used the checkGrade() method, which is invoked when we
click on the button. In this function, we stored the value in variable p. The value is taken
in the input field. When the value is stored, then we convert the value of p into integer
and store the conversion value in x, because the value in p is text.
After that, we used the if-else-if statement for finding the grade according to the
percentage.
CSS with JavaScript in DHTML
With version 4 of HTML, JavaScript code can also change the style such as size, color,
and face of an HTML element.
Example 1: The following example changes the color of a text.
1. <html>
2. <head>
3. <title>
4. getElementById.style.property example
5. </title>
6. </head>
7. <body>
8. <p id="demo"> This text changes color when click on the following different buttons. </p>
9. <button onclick="change_Color('green');"> Green </button>
10. <button onclick="change_Color('blue');"> Blue </button>
12.
13. function change_Color(newColor) {
14. var element = document.getElementById('demo').style.color = newColor;
15. }
16. </script>
17. </body>
18. </html>
Test it Now
Output:
Explanation:
In the above code, we changed the color of a text by using the following syntax:
1. document.getElementById('demo').style.property=new_value;.
The above syntax is used in the JavaScript function, which is performed or called when
we clicked on the HTML buttons. The different HTML buttons specify the color of a text.
DHTML CSS
We can easily use the CSS with the DHTML page with the help of JavaScript and HTML
DOM. With the help of this.style.property=new style statement, we can change the
style of the currently used HTML element. Or, we can also update the style of any
particular HTML element by document.getElementById(id).style.property =
new_style statement.
Example 1: The following example uses the DHTML CSS for changing the style of
current element:
1. <html>
2. <head>
3. <title>
4. Changes current HTML element
5. </title>
6. </head>
7. <body>
8. <center>
9. <h1 onclick="this.style.color='blue'"> This is a JavaTpoint Site </h1>
10. <center>
11. </body>
12. </html>
Test it Now
Output:
Explanation:
In the above code, we used the this.style.color='blue' statement, which shows the
color of a text as blue.
Example 2: The following example uses the DHTML CSS for changing the style of the
HTML element:
1. <html>
2. <head>
3. <title>
4. changes the particular HTML element example
5. </title>
6. </head>
7. <body>
8. <p id="demo"> This text changes color when click on the following different buttons. </p>
9. <button onclick="change_Color('green');"> Green </button>
10. <button onclick="change_Color('blue');"> Blue </button>
12.
13. function change_Color(newColor) {
14. var element = document.getElementById('demo').style.color = newColor;
15. }
16. </script>
17. </body>
18. </html>
Test it Now
Output:
Explanation:
In the above code, we used the var element =

document.getElementById('demo').style.color = newColor; statement, which
changes the color of a text as green and blue according to the buttons.
DHTML Events
An event is defined as changing the occurrence of an object.
It is compulsory to add the events in the DHTML page. Without events, there will be no
dynamic content on the HTML page. The event is a term in the HTML, which triggers the
actions in the web browsers.
Suppose, any user clicks an HTML element, then the JavaScript code associated with that
element is executed. Actually, the event handlers catch the events performed by the user
and then execute the code.
Example of events:
1. Click a button.
2. Submitting a form.
3. An image loading or a web page loading, etc.
Following table describes the Event Handlers used in the DHTML:
S.No. Event When it occurs
1. onabort It occurs when the user aborts the page or media file loading.
2. onblur It occurs when the user leaves an HTML object.
3. onchange It occurs when the user changes or updates the value of an object.
4. onclick It occurs or triggers when any user clicks on an HTML element.
5. ondblclick It occurs when the user clicks on an HTML element two times together.
6. onfocus It occurs when the user focuses on an HTML element. This event handler
works opposite to onblur.
7. onkeydown It triggers when a user is pressing a key on a keyboard device. This event
handler works for all the keys.
8. onkeypress It triggers when the users press a key on a keyboard. This event handler is
not triggered for all the keys.
9. onkeyup It occurs when a user released a key from a keyboard after pressing on an
object or element.
10. onload It occurs when an object is completely loaded.
11. onmousedow It occurs when a user presses the button of a mouse over an HTML
n element.
12. onmousemove It occurs when a user moves the cursor on an HTML object.
13. onmouseover It occurs when a user moves the cursor over an HTML object.
14. onmouseout It occurs or triggers when the mouse pointer is moved out of an HTML
element.
15. onmouseup It occurs or triggers when the mouse button is released over an HTML
element.
16. onreset It is used by the user to reset the form.
17. onselect It occurs after selecting the content or text on a web page.
18. onsubmit It is triggered when the user clicks a button after the submission of a
form.
19. onunload It is triggered when the user closes a web page.
Following are the different examples using the different event handlers, which helps us
to understand the concept of DHTML events:
Example 1: This example uses the onclick event handler, which is used to change the
text after clicking.
1. <html>
2. <head>
3. <title>
4. Example of onclick event
5. </title>
7. function ChangeText(ctext)
8. {
9. ctext.innerHTML=" Hi JavaTpoint! ";
10. }
11. </script>
12. </head>
13. <body>
14. <font color="red"> Click on the Given text for changing it: <br>
15. </font>
16. <font color="blue">
17. <h1 onclick="ChangeText(this)"> Hello World! </h1>
18. </font>
19. </body>
20. </html>
Test it Now
Output:
Example 2: This example uses the onsubmit event handler, which gives an alert after
clicking on a submit button.
1. <html>
2. <head>
3. <title>
4. Example of onsubmit event
5. </title>
6. </head>
7. <body>
8. <form onsubmit="Submit_Form()">
9. <label> Enter your name: </label>
10. <input type="text">
11. <label> Enter your Roll no: </label>
12. <input type="Number">
14. </form>
16. function Submit_Form()
17. {
18. alert(" Your form is submitted");
19. }
20. </script>
21. </body>
22. </html>
Test it Now
Output:
DHTML DOM
DHTML DOM stands for Dynamic HTML Document Object Model.
It is a w3c standard, which is a standard interface of programming for HTML. It is mainly

used for defining the objects and properties of all elements in HTML. It also defines the
methods for accessing the HTML elements.
Example: The following program helps in understanding the concept of DHTML DOM.
This example changes the color of text and displays the text in red colour automatically.
1. <html>
2. <head>
3. <title>
4. Example of DHTML DOM
5. </title>
6. </head>
7. <body>
8. <font color = "blue">
9. <p id="demo"> This text changes color when the page loaded. </p>
10. </font>
12. document.getElementById('demo').style.color = "red";
13. </script>
14. </body>
15. </html>
Test it Now
Output:
Advantages of DHTML
Following are the various benefits or the advantages of DHTML (Dynamic HTML):
o Those web sites and web pages which are created using this concept are fast.
o There is no plug-in required for creating the web page dynamically.
o Due to the low-bandwidth effect by the dynamic HTML, the web page functionality is
enhanced.
o This concept provides advanced functionalities than the static HTML.
o It is highly flexible, and the user can make changes easily in the web pages.
Disadvantages of DHTML
Following are the various disadvantages or limitations of DHTML (Dynamic HTML):
o The scripts of DHTML does not run properly in various web browsers. Or in simple words,
we can say that various web browsers do not support the DHTML. It is only supported by
the latest browsers.
o The coding of those websites that are created using DHTML is long and complex.
o For understanding the DHTML, users must know about HTML, CSS, and JavaScript. If any
user does not know these languages, then it is a time-consuming and long process in
itself.
What is CSS
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to
describe the look and formatting of a document written in markup language. It provides
an additional feature to HTML. It is generally used with HTML to change the style of web
pages and user interfaces. It can also be used with any kind of XML documents
including plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces
for web applications and user interfaces for many mobile applications.
What does CSS do

o You can add new looks to your old HTML documents.
o You can completely change the look of your website with only a few changes in
CSS code.
Why use CSS

These are the three major benefits of CSS:
1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and size
had to be repeated on every web page. This was a very long process. For example: If you
are developing a large website where fonts and color information are added on every
single page, it will be become a long and expensive process. CSS was created to solve
this problem. It was a W3C recommendation.
2) Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.
3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of
the website.
Levels of style sheets
Inline CSS
We can apply CSS in a single element by inline CSS technique.
The inline CSS is also a method to insert style sheets in HTML document. This method
mitigates some advantages of style sheets so it is advised to use this method sparingly.
If you want to use inline CSS, you should use the style attribute to the relevant tag.
Syntax:
1. <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
Example:
1. <h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>

2. <p>This paragraph is not affected.</p>
Test it Now
Output:
Inline CSS is applied on this heading.

This paragraph is not affected.
Disadvantages of Inline CSS

o You cannot use quotations within inline CSS. If you use quotations the browser
will interpret this as an end of your style value.
o These styles cannot be reused anywhere else.
o These styles are tough to be edited because they are not stored at a single place.
o It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
o Inline CSS does not provide browser cache advantages.
Internal CSS
The internal style sheet is used to add a unique style for a single document. It is defined
in <head> section of the HTML page inside the <style> tag.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-color: linen;
7. }
8. h1 {
9. color: red;
10. margin-left: 80px;
11. }
12. </style>
13. </head>
14. <body>
15. <h1>The internal style sheet is applied on this heading.</h1>
16. <p>This paragraph will not be affected.</p>
17. </body>
18. </html>
External CSS
The external style sheet is generally used when you want to make changes on multiple
pages. It is ideal for this condition because it facilitates you to change the look of the
entire web site by changing just one file.
It uses the <link> tag on every pages and the <link> tag should be put inside the head
section.
Example:
1. <head>
2. <link rel="stylesheet" type="text/css" href="mystyle.css">
3. </head>
The external style sheet may be written in any text editor but must be saved with a .css
extension. This file should not contain HTML elements.
Let's take an example of a style sheet file named "mystyle.css".
File: mystyle.css
1. body {
2. background-color: lightblue;
3. }
4. h1 {
5. color: navy;
6. margin-left: 20px;
7. }
Note: You should not use a space between the property value and the unit. For example:
It should be margin-left:20px not margin-left:20 px.
CSS Box Model

The components that can be depicted on the web page consist of one or more than one
rectangular box.
A CSS box model is a compartment that includes numerous assets, such as edge,
border, padding and material. It is used to develop the design and structure of a web
page. It can be used as a set of tools to personalize the layout of different components.
According to the CSS box model, the web browser supplies each element as a square
prism.
The following diagram illustrates how the CSS properties

of width, height, padding, border and margin dictate that how much space an attribute
will occupy on a web page.
The CSS box model contains the different properties in CSS. These are listed below.
o Border
o Margin
o Padding
o Content
Now, we are going to determine the properties one by one in detail.
Border Field
It is a region between the padding-box and the margin. Its proportions are determined
by the width and height of the boundary.
Margin Field
This segment consists of the area between the boundary and the edge of the border.
The proportion of the margin region is equal to the margin-box width and height. It is
better to separate the product from its neighbor nodes.
Padding Field
This field requires the padding of the component. In essence, this area is the space
around the subject area and inside the border-box. The height and the width of the
padding box decide its proportions.
Content Field
Material such as text, photographs, or other digital media is included in this area.
It is constrained by the information edge, and its proportions are dictated by the width
and height of the content enclosure.
Elements of the width and height

Typically, when you assign the width and height of an attribute using the CSS width and
height assets, it means you just positioned the height and width of the subject areas of
that component. The additional height and width of the unit box is based on a range of
influences.
The specific area that an element box may occupy on a web page is measured as
follows-
Size of the Properties of CSS

box
Height height + padding-top + padding-bottom + border-top + border-bottom + margin-top

margin-bottom
Width width + padding-left + padding-right + border-left + border-right + margin-left + margin

right
Example 1
Here, to explain the CSS box model, we have an instance.
1. <!DOCTYPE html>
2. <head>
3. <title>CSS Box Model</title>
4. <style>
5. .main
6. {
7. font-size:30px;
8. font-weight:bold;
9. Text-align:center;
10. }
11. .gfg
12. {
13. margin-left:50px;
14. border:50px solid Purple;
15. width:300px;
16. height:200px;
17. text-align:center;
18. padding:50px;
19. }
20. .gfg1
21. {
22. font-size:40px;
24. color:black;
25. margin-top:60px;
26. background-color:purple;
27. }
28. .gfg2
29. {
30. font-size:20px;
32. background-color:white;
33. }
34. </style>
35. </head>
36. <body>
37. <div class = "main">CSS Box-Model Property</div>
38. <div class = "gfg">
39. <div class = "gfg1">JavaTpoint</div>
40. <div class = "gfg2">A best portal for learn Technologies</div>
41. </div>
42. </body>
43. </html>
Test it Now
Output
After the compilation of the above code, you get the following output.
Example 2
Here, we also have an illustration to describe the CSS box model.
1. <!DOCTYPE html>
2. <head>
3. <style>
4. .main
5. {
6. font-size:30px;
8. text-align:left;
9. }
10. #box
11. {
12. padding-top:30px;
13. width: 300px;
14. height: 100px;
15. border: 40px solid red;
16. margin: 30px;
17. text-align:center;
18. font-size:32px;
20. }
21. </style>
22. </head>
23. <body>
24. <div class="main">CSS Box-Model Property</div>
25. <div id="box">JavaTpoint</div>
26. </body>
27. </html>
Test it Now
Output
After the execution of the code, you get the following output:
Important Point: In the CSS box model, the subject area of an entity box is the region
where the content, such as image, text, video, etc., initially appeared. It may also retain
boxes of decedent elements.
SS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of
CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute
etc.
There are several different types of selectors in CSS.
1. CSS Element Selector

2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector

The element selector selects the HTML element by name.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>
Test it Now
Output:
Skip Ad
This style will be applied on every paragraph.
Me too!
And me!
2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element.
An id is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
Let?s take an example with the id "para1".
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p id="para1">Hello Javatpoint.com</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>
Test it Now
Output:
Hello Javatpoint.com
This paragraph will not be affected.
3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a
period character . (full stop symbol) followed by the class name.
Note: A class name should not be started with a number.
Let's take an example with a class "center".
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>
Test it Now
Output:
This heading is blue and center-aligned.

This paragraph is blue and center-aligned.
CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected then you
should use the element name with class selector.
Let's see an example.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.center {
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is not affected</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>
Test it Now
Output:
This heading is not affected

This paragraph is blue and center-aligned.
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the
pages.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. * {
6. color: green;
7. font-size: 20px;
8. }
9. </style>
10. </head>
11. <body>
12. <h2>This is heading</h2>
13. <p>This style will be applied on every paragraph.</p>
14. <p id="para1">Me too!</p>
15. <p>And me!</p>
16. </body>
17. </html>
Test it Now
Output:
This is heading
This style will be applied on every paragraph.

Me too!
And me!
5) CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.
Let's see the CSS code without group selector.
1. h1 {
3. color: blue;
4. }
5. h2 {
7. color: blue;
8. }
9. p {
11. color: blue;
12. }
As you can see, you need to define CSS properties for all the elements. It can be
grouped in following ways:
1. h1,h2,p {
3. color: blue;
4. }
Let's see the full example of CSS group selector.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1, h2, p {
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. <h2>Hello Javatpoint.com (In smaller font)</h2>
14. <p>This is a paragraph.</p>
15. </body>
16. </html>
HTML Styles - CS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all
at once.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images
or background colors are to be used, different displays for different devices and
screen sizes, and much more!
Using CSS
CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.
However, in this tutorial we will use inline and internal styles, because this is
easier to demonstrate, and easier for you to try it yourself.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within

a <style> element.
The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition, the
page will be displayed with a "powderblue" background color:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
</body>
</html>
Try it Yourself »
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML
page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
Try it Yourself »
The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.
Here is what the "styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Tip: With an external style sheet, you can change the look of an entire web
site, by changing one file!
CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You will learn
more about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
Use of CSS color, font-family and font-size properties:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
</body>
</html>
Try it Yourself »
CSS Border
The CSS border property defines a border around an HTML element.
Tip: You can define a border for nearly all HTML elements.
Example
Use of CSS border property:
p {
border: 2px solid powderblue;
}
CSS Padding
The CSS padding property defines a padding (space) between the text and the
border.
Example
Use of CSS border and padding properties:
p {
padding: 30px;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Example
Use of CSS border and margin properties:
p {
margin: 50px;
}
Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to
the current web page.
Example
This example uses a full URL to link to a style sheet:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Example
This example links to a style sheet located in the html folder on the current web
site:
<link rel="stylesheet" href="/html/styles.css">
xample
This example links to a style sheet located in the same folder as the current
page:
<link rel="stylesheet" href="styles.css">
Chapter Summary
 Use the HTML style attribute for inline styling
 Use the HTML <style> element to define internal CSS
 Use the HTML <link> element to refer to an external CSS file
 Use the HTML <head> element to store <style> and <link> elements
 Use the CSS color property for text colors
 Use the CSS font-family property for text fonts
 Use the CSS font-size property for text sizes
 Use the CSS border property for borders
 Use the CSS padding property for space inside the border
 Use the CSS margin property for space outside the border

HTML Unit-1

Uploaded by

Copyright:

Available Formats

HTML Unit-1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Unit-1

Uploaded by

Copyright:

Available Formats

Basic syntax of HTML

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

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

o Elements: An HTML element is an individual component of an HTML file. In an

36.8MHello Java Program for Beginners

HTML Tag Examples

<h2> Heading Tag </h2>

<i> Italic Tag </i>

<u> Underline Tag</u>

Unclosed HTML Tags

HTML Meta Tags

HTML Text Tags

HTML Link Tags <a> and <base>

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

HTML List Tags

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

HTML Table Tags

HTML Form Tags

HTML Scripting Tags

HTML Tags List

HTML Tags by Alphabets

Tag name Description

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

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

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

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

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

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

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

<article> It defines the self-contained content.

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

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

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

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

<button> It is used to represent a clickable button

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

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

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

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

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

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

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

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

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

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

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

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

<footer> It defines the footer section of a webpage.

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

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

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

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

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

<html> It represents root of an HTML document.

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

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

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

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

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