HTML5 Tag Reference PDF
Uploaded by
Erik LottHTML5 Tag Reference PDF
Uploaded by
Erik LottHTML5
Tags Tutorial
Created By www.ebooktutorials.blogspot.in
HTML5 Tag Reference
Previous
Next Reference
HTML5
HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from
errors.
Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML5 also
contains new elements like <nav>, <header>, <footer>, and <figure>.
The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors.
Note: HTML5 is not a W3C recommendation yet!
To read about the HTML5 activities at W3C, please read our W3C tutorial.
Ordered Alphabetically
New : New tags in HTML5.
Tag
Description
<!--...-->
Defines a comment
<!DOCTYPE>
Defines the document type
<a>
Defines a hyperlink
<abbr>
Defines an abbreviation
<acronym>
Not supported in HTML5
<address>
Defines contact information for the author/owner of a document/article
<applet>
Not supported in HTML5
<area>
Defines an area inside an image-map
<article>
New Defines an article
<aside>
New Defines content aside from the page content
<audio>
New Defines sound content
<b>
Defines bold text
<base>
Specifies the base URL/target for all relative URLs in a document
<basefont>
<bdi>
Not supported in HTML5
New Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>
Overrides the current text direction
<big>
Not supported in HTML5
<blockquote>
Defines a section that is quoted from another source
<body>
Defines the document's body
<br>
Defines a single line break
<button>
Defines a clickable button
<canvas>
New Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption>
Defines a table caption
<center>
Not supported in HTML5
<cite>
Defines the title of a work
<code>
Defines a piece of computer code
<col>
Specifies column properties for each column within a <colgroup> element
<colgroup>
Specifies a group of one or more columns in a table for formatting
<command>
New Defines a command button that a user can invoke
<datalist>
New Specifies a list of pre-defined options for input controls
<dd>
<del>
<details>
Defines a description of an item in a definition list
Defines a text that has been deleted from a document
New Defines additional details that the user can view or hide
<dfn>
Definesa definition term
<dir>
Not supported in HTML5
<div>
Defines a section in a document
<dl>
Defines a definition list
<dt>
Defines a term (an item) in a definition list
<em>
Defines emphasized text
<embed>
<fieldset>
New Defines a container for an external application or interactive content (a plug-in)
Groups related elements in a form
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
<figcaption>
New Defines a caption for a <figure> element
<figure>
New Specifies self-contained content
<font>
<footer>
Not supported in HTML5
New Defines a footer for a document or section
<form>
Defines an HTML form for user input
<frame>
Not supported in HTML5
<frameset>
Not supported in HTML5
<h1> to <h6>
Defines HTML headings
<head>
Defines information about the document
<header>
New Defines a header for a document or section
<hgroup>
New Groups heading (<h1> to <h6>) elements
<hr>
Defines a thematic change in the content
<html>
Defines the root of an HTML document
<i>
Defines a part of text in an alternate voice or mood
<iframe>
Defines an inline frame
<img>
Defines an image
<input>
Defines an input control
<ins>
<keygen>
Defines a text that has been inserted into a document
New Defines a key-pair generator field (for forms)
<kbd>
Defines keyboard input
<label>
Defines a labelfor an input element
<legend>
Defines a caption for a <fieldset>, <figure>, or <details> element
<li>
Defines a list item
<link>
Defines the relationship between a document and an external resource (most used to link to style sheets)
<map>
Defines a client-side image-map
<mark>
<menu>
<meta>
New Defines marked/highlighted text
Defines a list/menu of commands
Defines metadata about an HTML document
<meter>
New Defines a scalar measurement within a known range (a gauge)
<nav>
New Defines navigation links
<noframes>
Not supported in HTML5
<noscript>
Defines an alternate content for users that do not support client-side scripts
<object>
Defines an embedded object
<ol>
Defines an ordered list
<optgroup>
Defines a group of related options in a drop-down list
<option>
<output>
Defines an option in a drop-down list
New Defines the result of a calculation
<p>
Defines a paragraph
<param>
Defines a parameter for an object
<pre>
<progress>
<q>
Defines preformatted text
New Represents the progress of a task
Defines a short quotation
<rp>
New Defines what to show in browsers that do not support ruby annotations
<rt>
New Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>
New Defines a ruby annotation (for East Asian typography)
<s>
Defines text that is no longer correct
<samp>
Defines sample output from a computer program
<script>
<section>
Defines a client-side script
New Defines a section in a document
<select>
Defines a drop-down list
<small>
Defines smaller text
<source>
New Defines multiple media resources for media elements (<video> and <audio>)
<span>
Defines a section in a document
<strike>
Not supported in HTML5
<strong>
Defines important text
<style>
Defines style information for a document
<sub>
<summary>
Defines subscripted text
New Defines a visible heading for a <details> element
<sup>
Defines superscripted text
<table>
Defines a table
<tbody>
Groups the body content in a table
<td>
Defines a cell in a table
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
<textarea>
Defines a multiline input control (text area)
<tfoot>
Groups the footer content in a table
<th>
Defines a header cell in a table
<thead>
Groups the header content in a table
<time>
New Defines a date/time
<title>
Defines a title for the document
<tr>
Defines a row in a table
<track>
New Defines text tracks for media elements (<video> and <audio>)
<tt>
Not supported in HTML5
<u>
Defines text that should be stylistically different from normal text
<ul>
Defines an unordered list
<var>
Defines a variable
<video>
New Defines a video or movie
<wbr>
New Defines a possible line-break
Previous
Next Reference
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <!--...--> Tag
Example
An HTML comment:
<!--This is a comment. Comments are not displayed in the browser-->
<p>This is a paragraph.</p>
Try it yourself
Browser Support
The comment tag is supported in all major browsers.
Definition and Usage
The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.
You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of
code.
It is also a good practice to use the comment tag to "hide" scripts from browsers without support for it (so they don't show them as plain text):
<script type="text/javascript">
<!-function displayMsg()
{
alert("Hello World!")
}
//-->
</script>
Note: The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.
Differences Between HTML 4.01 and HTML5
NONE
Global Attributes
The comment element does not support any global attributes.
More information about Global Attributes.
Event Attributes
The comment element does not support any event attributes.
More information about Event Attributes.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <!DOCTYPE> Declaration
Example
The <!DOCTYPE> declaration for HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Try it yourself
Browser Support
The <!DOCTYPE> declaration is supported in all major browsers.
Definition and Usage
The <!DOCTYPE> declaration must be the very first thing in your HTML5 document, before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
In HTML 4.01, all <!DOCTYPE> declarations require a reference to a DTD, because HTML 4.01 was based on SGML.
HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.
Differences Between HTML 4.01 and HTML5
There are three different <!DOCTYPE> declarations in HTML 4.01. In HTML5 there is only one:
<!DOCTYPE html>
Tips and Notes
Note: The <!DOCTYPE> tag does not have an end tag.
Tip: The <!DOCTYPE> declaration is NOT case sensitive.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <a> Tag
Example
A link to W3Schools.com:
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
Try it yourself
$3.98 Unlimited Hosting
Browser Support
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
The <a> tag is supported in all major browsers.
Build a FREE Website
Definition and Usage
W3SCHOOLS EXAMS
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the links destination.
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
Get Certified in:
HTML, CSS, JavaScript,
XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5, the <a> tag is always a
hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.
HTML5 has some new attributes, and some HTML 4.01 attributes are not supported in HTML5.
Tips and Notes
Tip: The attributes: hreflang, media, rel, target, and type attributes cannot be present if the href attribute is
not present.
Tip: A linked page is normally displayed in the current browser window, unless you specify another target.
Tip: Use CSS to style links.
Attributes
: New in HTML5.
New
Attribute
Value
Description
charset
char_encoding
Not supported in HTML5
coords
coordinates
Not supported in HTML5
href
URL
Specifies the URL of the page the link goes to
hreflang
language_code
Specifies the language of the linked document
media
New media_query
Specifies what media/device the linked document is optimized for
name
section_name
Not supported in HTML5
rel
alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Specifies the relationship between the current document and the
linked document
rev
text
Not supported in HTML5
shape
default
rect
circle
poly
Not supported in HTML5
target
_blank
_parent
_self
_top
framename
Specifies where to open the linked document
type
New MIME_type
Specifies the MIME type of the linked document
Global Attributes
The <a> tag also supports the Global Attributes in HTML5.
Content Downloaded from www.w3schools.com
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE
Share with
Created By www.ebooktutorials.blogspot.in
Event Attributes
The <a> tag also supports the Event Attributes in HTML5.
REPORT
W3Schools is optimized for learning, testing, and training. Examples mig
Content Downloaded from www.w3schools.com
ERROR
HOME
TOP
FORUM
ABOUT
Created By www.ebooktutorials.blogspot.in
HTML5 <abbr> Tag
Example
An abbreviation is marked up as follows:
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
Try it yourself
Browser Support
The <abbr> tag is supported in all major browsers.
Definition and Usage
The <abbr> tag indicates an abbreviation or an acronym, like "WWW" or "NATO".
By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.
Differences Between HTML 4.01 and HTML5
NONE
Tips and Notes
Tip: The global title attribute is used in the <abbr> tag, to show the full version of the abbreviation/acronym when you mouse over the <abbr> element.
Global Attributes
The <abbr> tag also supports the Global Attributes in HTML5.
Event Attributes
The <abbr> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <acronym> Tag. Not Supported in HTML5.
Definition and Usage
The <acronym> tag is not supported in HTML5. Use the <abbr> tag instead.
The <acronym> tag was used to define acronyms in HTML 4.01. An acronym can be spoken as if it
were a word, example NATO, NASA, ASAP, GUI.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <address> Tag
Example
Contact information for W3Schools.com:
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br />
Visit us at:<br />
Example.com<br />
Box 564, Disneyland<br />
USA
</address>
Try it yourself
Browser Support
The <address> tag is supported in all major browsers.
Definition and Usage
The <address> tag defines the contact information for the author/owner of a document or an article.
If the <address> element is inside the <body> element, it represents contact information for the
document.
If the <address> element is inside an <article> element, it represents contact information for that
article.
The text in the <address> element usually renders in italic. Most browsers will add a line break before
and after the address element.
Differences Between HTML 4.01 and HTML5
HTML 4.01 does not support the <article> tag, so in HTML 4.01 the <address> tag always defines the
contact information of the document's author/owner.
Tips and Notes
Tip: The <address> tag should NOT be used to describe a postal address, unless it is a part of the
contact information.
Tip: The <address> element will typically be included along with other information in a <footer>
element.
Global Attributes
The <address> tag also supports the Global Attributes in HTML5.
Event Attributes
The <address> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <applet> Tag. Not Supported in HTML5.
Definition and Usage
The <applet> tag is not supported in HTML5. Use the <object> tag instead.
The <applet> tag was used to define an embedded applet.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <area> Tag
Example
An image-map, with clickable areas:
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap
="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
Try it yourself
Browser Support
The <area> tag is supported in all major browsers.
Definition and Usage
The <area> tag defines an area inside an image-map (an image-map is an image with clickable
areas).
The <area> element is always nested inside a <map> tag.
Note: The usemap attribute in the <img> tag is associated with the <map> element's name attribute,
and creates a relationship between the image and the map.
Differences Between HTML 4.01 and HTML5
HTML5 has some new attributes, and some HTML 4.01 attributes are no longer supported.
Attributes
New : New in HTML5.
Attribute
Value
Description
alt
text
Specifies an alternate text for the area. Required if the
href attribute is present
coords
coordinates
Specifies the coordinates of the area
href
URL
Specifies the hyperlink target for the area
hreflang New language_code
Specifies the language of the target URL
media
Specifies what media/device the target URL is optimized
for
nohref
rel
New media query
nohref
New alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Not supported in HTML5
Specifies the relationship between the current
document and the target URL
shape
default
rect
circle
poly
Specifies the shape of the area
target
_blank
_parent
_self
_top
framename
Specifies where to open the target URL
type
New MIME_type
Specifies the MIME type of the target URL
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Global Attributes
The <area> tag also supports the Global Attributes in HTML5.
Event Attributes
The <area> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <article> Tag
Example
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
Try it yourself
Browser Support
The <article> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <article> tag.
Definition and Usage
The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from
the rest of the site.
Potential sources for the <article> element:
Forum post
Blog post
News story
Comment
Differences Between HTML 4.01 and HTML5
The <article> tag is new in HTML5.
Global Attributes
The <article> tag also supports the Global Attributes in HTML5.
Event Attributes
The <article> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <aside> Tag
Example
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Try it yourself
Browser Support
The <aside> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <aside> tag.
Definition and Usage
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
Differences Between HTML 4.01 and HTML5
The <aside> tag is new in HTML5.
Tips and Notes
Tip: The <aside> content could be placed as a sidebar in an article.
Global Attributes
The <aside> tag also supports the Global Attributes in HTML5.
Event Attributes
The <aside> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <audio> Tag
Example
Play a sound:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mp3" />
Your browser does not support the audio tag.
</audio>
Try it yourself
Browser Support
The <audio> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <audio> tag.
Definition and Usage
The <audio> tag defines sound, such as music or other audio streams.
Differences Between HTML 4.01 and HTML5
The <audio> tag is new in HTML5.
Tips and Notes
Tip: Any text inside the between <audio> and </audio> will be displayed in browsers that do not support audio.
Attributes
New : New in HTML5.
Attribute
Value
Description
autoplay
New autoplay
Specifies that the audio will start playing as soon as it is ready
controls
New controls
Specifies that audio controls should be displayed (such as a play/pause button etc).
loop
New loop
Specifies that the audio will start over again, every time it is finished
preload
New auto
metadata
none
Specifies if and how the author thinks the audio should be loaded when the page
loads
src
New URL
Specifies the URL of the audio file
Global Attributes
The <audio> tag also supports the Global Attributes in HTML5.
Event Attributes
The <audio> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <b> Tag
Example
<p>It was a <b>red</b> house with a <b>blue</b> door.</p>
Try it yourself
Browser Support
The <b> tag is supported in all major browsers.
Definition and Usage
The <b> tag specifies bold text.
Differences Between HTML 4.01 and HTML5
None.
Tips and Notes
Note: According to the HTML 5 specification, the <b> tag should be used as a LAST resort when no
other tag is more appropriate. The HTML 5 specification states that headings should be denoted with
the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should
be denoted with the <strong> tag, and marked/highlighted text should use the <mark> tag.
Tip: You can also use the CSS "font-weight" property to set bold text.
Global Attributes
The <b> tag also supports the Global Attributes in HTML5.
Event Attributes
The <b> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <base> Tag
Example
Specify a default URL and a default target for all links on a page:
<head>
<base href="http://www.w3schools.com/images/" target="_blank" />
</head>
<body>
<img src="stickman.gif" alt="Stickman" width="24" height="39" />
<a href="http://www.w3schools.com">W3Schools</a>
</body>
Try it yourself
Browser Support
The <base> tag is supported in all major browsers.
Definition and Usage
The <base> tag specifies the base URL/target for all relative URLs in a document.
There can be at maximum one <base> element in a document, and it must be inside the <head>
element.
Differences Between HTML 4.01 and HTML5
None
Tips and Notes
Tip: Put the <base> tag as the first element in the <head> element, so that other elements in the
head section uses the information from the <base> element.
Note: If the <base> tag is present, it must have either an href attribute or a target attribute, or both.
Attributes
Attribute
Value
Description
href
URL
Specifies the base URL for all relative URLs in the page
target
_blank
_parent
_self
_top
framename
Specifies the default target for all hyperlinks and forms in the page
Global Attributes and Events
The <base> tag also supports the Global Attributes in HTML5.
Event Attributes
NONE
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <basefont> Tag. Not Supported in HTML5.
Definition and Usage
The <basefont> tag is not supported in HTML5. Use CSS instead.
The <basefont> tag was used to define a default font-color, font-size, or font-family for all the text in
a document.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <bdi> Tag
Example
Isolate the usernames from the surrounding text-direction settings:
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>????</bdi>: 90 points</li>
</ul>
Try it yourself
Browser Support
The <bdi> tag is currently supported only in Firefox and Chrome.
Definition and Usage
bdi stands for Bi-directional Isolation.
The <bdi> tag isolates a part of text that might be formatted in a different direction from other text
outside it.
This element is useful when embedding user-generated content with an unknown directionality.
Differences Between HTML 4.01 and HTML5
The <bdi> tag is new in HTML5.
Global Attributes
The <bdi> tag also supports the Global Attributes in HTML5.
Event Attributes
The <bdi> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <bdo> Tag
Example
Specify the text direction:
<bdo dir="rtl">
This text will go right-to-left.
</bdo>
Try it yourself
Browser Support
The <bdo> tag is supported in all major browsers.
Definition and Usage
bdo stands for Bi-directional Override.
The <bdo> tag is used to override the current text direction.
Differences Between HTML 4.01 and HTML5
NONE
Attributes
Attribute
Value Description
dir
ltr
rtl
Required. Specifies the text direction of the text inside the <bdo> element
Global Attributes
The <bdo> tag also supports the Global Attributes in HTML5.
Event Attributes
The <bdo> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <big> Tag. Not Supported in HTML5.
Definition and Usage
The <big> tag is not supported in HTML5. Use CSS instead.
The <big> tag was used to make text bigger.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <blockquote> Tag
Example
A section that is quoted from another source:
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The worlds
leading conservation organization, WWF works in 100 countries and is
supported by 1.2 million members in the United States and close to 5 million
globally. WWF's unique way of working combines global reach with a
foundation in science, involves action at every level from local to global,
and ensures the delivery of innovative solutions that meet the needs of both
people and nature.
</blockquote>
Try it yourself
Browser Support
The <blockquote> tag is supported in all major browsers.
Definition and Usage
The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
Differences Between HTML 4.01 and HTML5
None
Tips and Notes
Tip: Use <q> for inline (short) quotations.
Attributes
Attribute
Value
Description
cite
URL
Specifies the source of the quotation
Global Attributes
The <blockquote> tag also supports the Global Attributes in HTML5.
Event Attributes
The <blockquote> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <body> Tag
Example
A simple HTML document, with the minimum of required tags:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Try it yourself
Browser Support
The <body> tag is supported in all major browsers.
Definition and Usage
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
Differences Between HTML 4.01 and HTML5
In HTML5, all <body> specific attributes are removed, while in HTML 4.01 they were deprecated.
Global Attributes
The <body> tag also supports the Global Attributes in HTML5.
Event Attributes
The <body> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <br> Tag
Example
A line break is marked up as follows:
<p>This text contains<br />a line break.</p>
Try it yourself
Browser Support
The <br> tag is supported in all major browsers.
Definition and Usage
The <br> tag inserts a single line break.
The <br> tag is an empty tag, which means that it has no end tag.
Differences Between HTML 4.01 and HTML5
None
Tips and Notes
Tip: The <br> tag is useful for writing addresses or poems.
Note: Use the <br> tag to enter line breaks, not to separate paragraphs.
Global Attributes
The <br> tag also supports the Global Attributes in HTML5.
Event Attributes
The <br> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <button> Tag
Example
A clickable button is marked up as follows:
<button type="button">Click Me!</button>
Try it yourself
Browser Support
The <button> tag is supported in all major browsers.
Definition and Usage
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference between this
element and buttons created with the <input> element.
Tip: Always specify the type attribute for a <button> element. Different browsers use different default
types for the <button> element.
Differences Between HTML 4.01 and HTML5
HTML5 has new attributes: autofocus,form, formaction, formenctype, formmethod, formnovalidate, and
formtarget.
Tips and Notes
Note: If you use the <button> element in an HTML form, different browsers may submit different
values. Use <input> to create buttons in an HTML form.
Attributes
New : New in HTML5.
Attribute
autofocus
disabled
Value
New autofocus
disabled
Description
Specifies that a button should
automatically get focus when the
page loads
Specifies that a button should be
disabled
form
New form_id
Specifies one or more forms the
button belongs to
formaction
New URL
Specifies where to send the formdata when a form is submitted.
Only for type="submit"
formenctype
New application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how form-data should be
encoded before sending it to a
server. Only for type="submit"
formmethod
New get
post
Specifies how to send the formdata (which HTTP method to use).
Only for type="submit"
formnovalidate
New formnovalidate
Specifies that the form-data
should not be validated on
submission. Only for
type="submit"
formtarget
New _blank
_self
_parent
_top
framename
Specifies where to display the
response after submitting the
form. Only for type="submit"
name
name
Specifies a name for the button
type
button
reset
submit
Specifies the type of button
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
value
text
Specifies an initial value for the
button
Global Attributes
The <button> tag also supports the Global Attributes in HTML5.
Event Attributes
The <button> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <button> autofocus Attribute
HTML5 <button> tag
Example
A button with autofocus:
<button type="button" autofocus="autofocus">Click Me!</button>
Try it yourself
Browser Support
The autofocus attribute is supported in all major browsers, except Internet Explorer and Opera.
Definition and Usage
The autofocus attribute is a boolean attribute.
When present, it specifies that a button should automatically get focus when the page loads.
Differences Between HTML 4.01 and HTML5
The autofocus attribute is new for the <button> tag in HTML5.
Syntax
<button type="button" autofocus="autofocus">
Note: The autofocus attribute is a boolean attribute, and can be set in the following ways:
<button autofocus>
<button autofocus="autofocus">
<button autofocus="">
HTML5 <button> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <button> disabled Attribute
HTML5 <button> tag
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Example
A disabled button:
<button type="button" disabled="disabled">Click Me!</button>
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
Try it yourself
Browser Support
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Build a FREE Website
W3SCHOOLS EXAMS
The disabled attribute is supported in all major browsers.
Definition and Usage
The disabled attribute is a boolean attribute.
When present, it specifies that the button should be disabled.
A disabled button is unusable and un-clickable.
The disabled attribute can be set to keep a user from clicking on the button until some other condition
has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value,
and make the button usable.
Get Certified in:
HTML, CSS, JavaScript,
XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE
Differences Between HTML 4.01 and HTML5
None
Syntax
<button disabled="disabled">
Note: The disabled attribute is a boolean attribute, and can be set in the following ways:
<button disabled>
<button disabled="disabled">
<button disabled="">
HTML5 <button> tag
Content Downloaded from www.w3schools.com
Share with
Created By www.ebooktutorials.blogspot.in
HTML5 <button> form Attribute
HTML5 <button> tag
Example
A button located outside a form (but still a part of the form):
<form action="demo_form.asp" method="get" id="form1">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
Try it yourself
Browser Support
The form attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The form attribute specifies one or more forms the button belongs to.
Differences Between HTML 4.01 and HTML5
The form attribute is new in HTML5.
Syntax
<button form="form_id">
Attribute Values
Value
Description
form_id
Specifies a space-separated list of id's to one or more forms the button belongs to
HTML5 <button> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <button> formaction Attribute
HTML5 <button> tag
Example
A form with two submit buttons. The first submit button submits the form data to "demo_form.asp",
and the second submits to "demo_admin.asp":
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<button type="submit">Submit</button><br />
<button type="submit" formaction="demo_admin.asp">Submit as admin</button>
</form>
Try it yourself
Browser Support
The formaction attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The formaction attribute specifies where to send the form-data when a form is submitted. This attribute overrides the form's action attribute.
The formaction attribute is only used for buttons with type="submit".
Differences Between HTML 4.01 and HTML5
The formaction attribute is new in HTML5.
Syntax
<button type="submit" formaction="URL">
Attribute Values
Value
Description
URL
Specifies where to send the form data.
Possible values:
An absolute URL - the full address of a page (like href="http://www.example.com/formresult.asp")
A relative URL - points to a file within the current site (like href="formresult.asp")
HTML5 <button> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <button> formenctype Attribute
HTML5 <button> tag
Example
A form with two submit buttons. The first submit button submits the form data with default
character encoding, and the second submits the form data without character encoding:
<form action="demo_post_enctype.asp" method="post">
Name: <input type="text" name="fname" value="Stle Refsnes" /><br />
<button type="submit" >Submit with character encoding</button>
<button type="submit" formenctype="text/plain">Submit without character
encoding</button>
</form>
Try it yourself
Browser Support
The formenctype attribute is currently only supported in Firefox and Opera.
Definition and Usage
The formenctype attribute specifies how form-data should be encoded before sending it to a server.
This attribute overrides the form's enctype attribute.
The formenctype attribute is only used for buttons with type="submit".
Differences Between HTML 4.01 and HTML5
The formenctype attribute is new in HTML5.
Syntax
<button type="submit" formenctype="value">
Attribute Values
Value
Description
application/x-www-form-urlencoded
Default. All characters will be encoded before sent
multipart/form-data
No characters are encoded (use this when you are using forms
that have a file upload control)
text/plain
Spaces are converted to "+" symbols, but no characters are
encoded
HTML5 <button> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <button> formmethod Attribute
HTML5 <button> tag
Example
A form with two submit buttons.The first submit button submits the form data with method="get",
and the second submits the form data with method="post":
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<button type="submit" >Submit</button>
<button type="submit" formmethod="post" formaction="demo_post.asp">
Submit using POST</button>
</form>
Try it yourself
Browser Support
The formmethod attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The formmethod attribute specifies which HTTP method to use when sending the form-data. This
attribute overrides the form's method attribute.
The formmethod attribute is only used for buttons with type="submit".
The form-data can be sent as URL variables (with method="get") or as HTTP post (with
method="post").
Notes on the "get" method:
it appends the form-data to the URL in name/value pairs
it is useful for form submissions where a user want to bookmark the result
There is a limit to how much data you can place in a URL (varies between browsers), therefore,
you cannot be sure that all of the form-data will be correctly transferred
Never use the "get" method to pass sensitive information! (password or other sensitive
information will be visible in the browser's address bar)
Notes on the "post" method:
it sends the form-data as an HTTP post transaction
Form submissions with the "post" method cannot be bookmarked
it is more robust and secure than "get"
it does not have size limitations
Differences Between HTML 4.01 and HTML5
The formmethod attribute is new in HTML5.
Syntax
<button type="submit" formmethod="get|post">
Attribute Values
Value
Description
get
Appends the form-data to the URL: URL?name=value&name=value
post
Sends the form-data as an HTTP post transaction
HTML5 <button> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <button> formnovalidate Attribute
HTML5 <button> tag
Example
A form with two submit buttons. The first submit button submits the form data with default
validation, and the second submits the form data without validation:
<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="userid" /><br />
<button type="submit" >Submit</button><br />
<button type="submit" formnovalidate="formnovalidate">Submit without
validation</button>
</form>
Try it yourself
Browser Support
The formnovalidate attribute is supported in all major browsers, except Internet Explorer and Safari.
Definition and Usage
The formnovalidate attribute is a boolean attribute.
When present, it specifies that the form-data should not be validated on submission. This attribute
overrides the form's novalidate attribute.
The formnovalidate attribute is only used for buttons with type="submit".
Differences Between HTML 4.01 and HTML5
The formnovalidate attribute is new in HTML5.
Syntax
<button type="submit" formnovalidate="formnovalidate">
Note: The formnovalidate attribute is a boolean attribute, and can be set in the following ways:
<button formnovalidate>
<button formnovalidate="formnovalidate">
<button formnovalidate="">
HTML5 <button> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <button> formtarget Attribute
HTML5 <button> tag
Example
A form with two submit buttons. The first submit button submits the form data with default target
("_self"), and the second submits the form data to a new window (target="_blank"):
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<button type="submit" >Submit</button>
<button type="submit" formtarget="_blank">Submit to a new window</button>
</form>
Try it yourself
Browser Support
The formtarget attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The formtarget attribute specifies where to display the response after submitting the form. This attribute overrides the form's target attribute.
The formtarget attribute is only used for buttons with type="submit".
Note: Frames and framesets are not supported in HTML5. The _parent, _top and framename values are now mostly used with iframes.
Differences Between HTML 4.01 and HTML5
The formtarget attribute is new in HTML5.
Syntax
<button type="submit" formtarget="_blank|_self|_parent|_top|framename">
Attribute Values
Value
Description
_blank
Loads the response in a new window/tab
_self
Loads the response in the same frame (this is default)
_parent
Loads the response in the parent frame
_top
Loads the response in the full body of the window
framename
Loads the response in a named iframe
HTML5 <button> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <button> name Attribute
HTML5 <button> tag
Example
Two buttons with equal names, that submit different values when clicked:
<form action="demo_form.asp" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="HTML">HTML</button>
<button name="subject" type="submit" value="CSS">CSS</button>
</form>
Try it yourself
Browser Support
The name attribute is supported in all major browsers.
Definition and Usage
The name attribute specifies the name for a <button> element.
The name attribute is used to reference form-data after the form has been submitted, or to reference
the element in a JavaScript.
Tip: Several <button> elements can share the same name. This allows you to have several buttons
with equal names, which can submit different values when used in a form.
Differences Between HTML 4.01 and HTML5
None
Syntax
<button name="name">
Attribute Values
Value
Description
name
The name of the button
HTML5 <button> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <button> type Attribute
HTML5 <button> tag
Example
A form with two buttons. One submit button and one reset button:
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
Try it yourself
Browser Support
The type attribute is supported in all major browsers.
Definition and Usage
The type attribute specifies the type of button.
Tip: Always specify the type attribute for the button. Different browsers use different default values for the type attribute.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<button type="button|submit|reset">
Attribute Values
Value
Description
button
The button is a clickable button
submit
Default. The button is a submit button (submits form-data)
reset
The button is a reset button (clears form-data)
HTML5 <button> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <button> value Attribute
HTML5 <button> tag
Example
Two buttons with equal names, that submit different values when clicked:
<form action="demo_form.asp" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="fav_HTML">HTML</button>
<button name="subject" type="submit" value="fav_CSS">CSS</button>
</form>
Try it yourself
Browser Support
The value attribute is supported in all major browsers.
Important: If you use the <button> element in an HTML form, Internet Explorer, prior version 9, will submit the text between the <button> and
</button> tags, while other browsers will submit the content of the value attribute.
Definition and Usage
The value attribute specifies the initial value for a <button> in a <form>.
Note: In a form, the button and its value is only submitted if the button itself was used to submit the form.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<button value="value">
Attribute Values
Value
Description
value
The initial value of the button
HTML5 <button> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <canvas> Tag
Example
Draw a red square, on the fly, and show it inside the <canvas> element:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
Try it yourself
Browser Support
The <canvas> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> tag.
Definition and Usage
The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics.
Differences Between HTML 4.01 and HTML5
The <canvas> tag is new in HTML5.
Tips and Notes
Note: Any text inside the <canvas> element will be displayed in browsers that does not support
<canvas>.
Tip:For a complete reference of all the attributes and methods that can be used with the canvas
object, go to our complete canvas 2d reference.
Attributes
New : New in HTML5.
Attribute
Value
Description
height
New pixels
Specifies the height of the canvas
width
New pixels
Specifies the width of the canvas
Global Attributes
The <canvas> tag also supports the Global Attributes in HTML5.
Event Attributes
The <canvas> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <canvas> height Attribute
HTML5 <canvas> tag
Example
A <canvas> element with a height and width of 200 pixels:
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Try it yourself
Browser Support
The height attribute is supported in all major browsers.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> tag.
Definition and Usage
The height attribute specifies the height of the <canvas> element, in pixels.
Tip: Each time the height or width of a canvas is re-set, the canvas content will be cleared (see example at bottom of page).
Tip: Learn more about the <canvas> element in our HTML5 Canvas Tutorial.
Differences Between HTML 4.01 and HTML5
The <canvas> tag is new in HTML5.
Syntax
<canvas height="pixels">
Attribute Values
Value
Description
pixels
Specifies the height of the canvas, in pixels (e.g. "100"). Default height is "150"
Try it Yourself - Examples
Clear the canvas
How to clear the canvas by setting the width or height attribute (using JavaScript).
HTML5 <canvas> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <canvas> width Attribute
HTML5 <canvas> tag
Example
A <canvas> element with a height and width of 200 pixels:
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Try it yourself
Browser Support
The width attribute is supported in all major browsers.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> tag.
Definition and Usage
The width attribute specifies the width of the <canvas> element, in pixels.
Tip: Each time the height or width of a canvas is re-set, the canvas content will be cleared (see example at bottom of page).
Tip: Learn more about the <canvas> element in our HTML5 Canvas Tutorial.
Differences Between HTML 4.01 and HTML5
The <canvas> tag is new in HTML5.
Syntax
<canvas width="pixels">
Attribute Values
Value
Description
pixels
Specifies the width of the canvas, in pixels (e.g. "100"). Default width is "300"
Try it Yourself - Examples
Clear the canvas
How to clear the canvas by setting the width or height attribute (using JavaScript).
HTML5 <canvas> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <caption> Tag
Example
A table with a caption:
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Try it yourself
Browser Support
The <caption> tag is supported in all major browsers.
Definition and Usage
The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after the <table> tag.
You can specify only one caption per table.
Tip: By default, the table caption will be center-aligned above a table. However, the CSS properties "text-align" and "caption-side" can be used to align and
place the caption.
Differences Between HTML 4.01 and HTML5
The "align" attribute which was deprecated in HTML 4.01, is not supported in HTML5. Use CSS instead.
Global Attributes
The <caption> tag also supports the Global Attributes in HTML5.
Event Attributes
The <caption> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <center> Tag. Not Supported in HTML5.
Definition and Usage
The <center> tag is not supported in HTML5. Use CSS instead.
The <center> tag was used to center-align text and content.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <cite> Tag
Example
Define the title of a work with the <cite> tag:
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
Try it yourself
Browser Support
The <cite> tag is supported in all major browsers.
Definition and Usage
The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.).
Note: A person's name is not the title of a work.
Differences Between HTML 4.01 and HTML5
None.
Global Attributes
The <cite> tag also supports the Global Attributes in HTML5.
Event Attributes
The <cite> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <em> <strong> <dfn> <code> <samp> <kbd> <var> Tags
Example
Format text in a document:
<em>Emphasized text</em>
<strong>Strong text</strong>
<dfn>Definition term</dfn>
<code>Computer code</code>
<samp>Sample output from computer program</samp>
<kbd>Keyboard input</kbd>
<var>Variable</var>
Try it yourself
Browser Support
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are supported in all major browsers.
Definition and Usage
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are all phrase tags. They are not deprecated, but it is possible to achieve richer
effect with CSS.
Tag
Description
<em>
Renders as emphasized text
<strong>
Defines important text
<dfn>
Definesa definition term
<code>
Defines a piece of computer code
<samp>
Defines sample output from a computer program
<kbd>
Defines keyboard input
<var>
Defines a variable
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important text.
Global Attributes
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags also supports the Global Attributes in HTML5.
Event Attributes
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <col> Tag
Example
Set the background color of the three columns with the <colgroup> and <col> tags:
<table border="1">
<colgroup>
<col span="2" style="background-color:red" />
<col style="background-color:yellow" />
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Try it yourself
Browser Support
The <col> tag is supported in all major browsers.
Definition and Usage
The <col> tag specifies column properties for each column within a <colgroup> element.
The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
Differences Between HTML 4.01 and HTML5
Most of the attributes from 4.01 are not supported in HTML5.
Attributes
Attribute
Value
Description
align
left
right
center
justify
char
Not supported in HTML5
char
character
Not supported in HTML5
charoff
number
Not supported in HTML5
span
number
Specifies the number of columns a <col> element should span
valign
top
middle
bottom
baseline
Not supported in HTML5
width
%
pixels
relative_length
Not supported in HTML5
Global Attributes
The <col> tag also supports the Global Attributes in HTML5.
Event Attributes
The <col> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <colgroup> Tag
Example
Set the background color of the three columns with the <colgroup> and <col> tags:
<table>
<colgroup>
<col span="2" style="background-color:red" />
<col style="background-color:yellow" />
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Try it yourself
Browser Support
The <colgroup> tag is supported in all major browsers.
Definition and Usage
The <colgroup> tag specifies a group of one or more columns in a table for formatting.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for
each cell, for each row.
Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and
before any <thead>, <tbody>, <tfoot>, and <tr> elements.
Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the
<colgroup> tag.
Differences Between HTML 4.01 and HTML5
Most of the attributes from 4.01 are not supported in HTML5.
Attributes
Attribute
Value
Description
align
left
right
center
justify
char
Not supported in HTML5
char
character
Not supported in HTML5
charoff
number
Not supported in HTML5
span
number
Defines the number of columns the <colgroup> should span
valign
top
middle
bottom
baseline
Not supported in HTML5
width
%
pixels
relative_length
Not supported in HTML5
Global Attributes
The <colgroup> tag also supports the Global Attributes in HTML5.
Event Attributes
The <colgroup> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <command> Tag
Example
A <command> element can be marked up as follows:
<menu>
<command type="command" label="Save" onclick="save()">Save</command>
</menu>
Try it yourself
Browser Support
The <command> tag is currently only supported by Internet Explorer 9.
Definition and Usage
The <command> tag defines a command (a radiobutton, a checkbox, or a command button) that the user can invoke.
A command can be part of a context menu or toolbar, using the <menu> element, or can be put anywhere else in the page, to define a keyboard shortcut.
Differences Between HTML 4.01 and HTML5
The <command> tag is new in HTML5.
Attributes
New : New in HTML5.
Attribute
Value
Description
checked
New checked
Specifies that the command should be checked when the page loads. Only for
type="radio" or type="checkbox"
disabled
New disabled
Specifies that the command should be disabled
icon
New URL
Specifies an image that represents the command
label
New text
Required. Specifies the name of the command, as shown to the user
radiogroup
New groupname
Specifies the name of the group of commands that will be toggled when the command
itself is toggled. Only for type="radio"
type
New checkbox
command
radio
Specifies the type of command
Global Attributes
The <command> tag also supports the Global Attributes in HTML5.
Event Attributes
The <command> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <datalist> Tag
Example
An <input> element with pre-defined values in a <datalist>:
<input list="browsers" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Try it yourself
Browser Support
The <datalist> tag is currently only supported in Firefox and Opera.
Definition and Usage
The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a
drop-down list of pre-defined options as they input data.
Use the <input> element's list attribute to bind it together with a <datalist> element.
Differences Between HTML 4.01 and HTML5
The <datalist> tag is new in HTML5.
Global Attributes
The <datalist> tag also supports the Global Attributes in HTML5.
Event Attributes
The <datalist> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <dd> Tag
Example
A definition list, with items and descriptions:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Try it yourself
Browser Support
The <dd> tag is supported in all major browsers.
Definition and Usage
The <dd> tag is used to describe an item in a definition list.
The <dd> tag is used in conjunction with <dl> (defines the definition list) and <dt> (defines the item in the list).
Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.
Differences Between HTML 4.01 and HTML5
NONE.
Global Attributes
The <dd> tag also supports the Global Attributes in HTML5.
Event Attributes
The <dd> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <del> Tag
Example
A text with a deleted part, and a new, inserted part:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
Try it yourself
Browser Support
The <del> tag is supported in all major browsers.
Definition and Usage
The <del> tag defines a text that has been deleted from a document.
Tip: Also look at the <ins> tag to markup inserted text.
Browsers will normally strike a line through deleted text and underline inserted text.
Differences Between HTML 4.01 and HTML5
NONE
Tips and Notes
Tip: Use <del> together with <ins> to markup updates and modifications in a document.
Attributes
Attribute
Value
Description
cite
URL
Specifies a URL to a document that explains the reason
why the text was deleted
datetime
YYYY-MM-DDThh:mm:ssTZD
Specifies the date and time of when the text was
deleted
Global Attributes
The <del> tag also supports the Global Attributes in HTML5.
Event Attributes
The <del> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <details> Tag
Example
Using the <details> element:
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company
Refsnes Data.</p>
</details>
Try it yourself
Browser Support
The <details> tag is currently only supported in Chrome.
Definition and Usage
The <details> tag specifies additional details that the user can view or hide on demand.
The <details> tag can used to create an interactive widget that the user can open and close. Inside <details>, there can be put any sort of content.
The content of a <details> element should not be visible unless the open attribute is set.
Differences Between HTML 4.01 and HTML5
The <details> tag is new in HTML5.
Tips and Notes
Tip: The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details.
Attributes
New : New in HTML5.
Attribute
Value
New open
open
Description
Specifies that the details should be visible (open) to the user
Global Attributes
The <details> tag also supports the Global Attributes in HTML5.
Event Attributes
The <details> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <dir> Tag. Not Supported in HTML5.
Definition and Usage
The <dir> tag is not supported in HTML5. Use the <ul> tag instead.
The <dir> tag was used to define a directory list.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <div> Tag
Example
A section in a document that will be displayed in green:
<div style="color:#00FF00">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
Try it yourself
Browser Support
The <div> tag is supported in all major browsers.
Definition and Usage
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements and format them with CSS.
Differences Between HTML 4.01 and HTML5
The "align" attribute is deprecated in HTML 4.01, and not supported in HTML5. Use CSS to align the
content of a <div> element.
Tips and Notes
Tip: The <div> element is very often used together with CSS, to layout a web page.
Note: By default, browsers always place a line break before and after the <div> element. However,
this can be changed with CSS.
Global Attributes
The <div> tag also supports the Global Attributes in HTML5.
Event Attributes
The <div> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <dl> Tag
Example
A definition list, with items and descriptions:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Try it yourself
Browser Support
The <dl> tag is supported in all major browsers.
Definition and Usage
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the
item in the list).
Differences Between HTML 4.01 and HTML5
NONE
Global Attributes
The <dl> tag also supports the Global Attributes in HTML5.
Event Attributes
The <dl> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <dt> Tag
Example
A definition list, with items and descriptions:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Try it yourself
Browser Support
The <dt> tag is supported in all major browsers.
Definition and Usage
The <dt> tag defines an item in a definition list.
The <dt> tag is used in conjunction with <dl> (defines the definition list) and <dd> (describes the
item in the list).
Differences Between HTML 4.01 and HTML5
NONE.
Global Attributes
The <dt> tag also supports the Global Attributes in HTML5.
Event Attributes
The <dt> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <embed> Tag
Example
An embedded flash animation:
<embed src="helloworld.swf" />
Try it yourself
Browser Support
The <embed> tag is supported in all major browsers.
Definition and Usage
The <embed> tag defines a container for an external application or interactive content (a plug-in).
Differences Between HTML 4.01 and HTML5
The <embed> tag is new in HTML5.
Attributes
New : New in HTML5.
Attribute
Value
Description
height
New pixels
Specifies the height of the embedded content
src
New URL
Specifies the address of the external file to embed
type
New MIME_type
Specifies the MIME type of the embedded content
width
New pixels
Specifies the width of the embedded content
Global Attributes
The <embed> tag also supports the Global Attributes in HTML5.
Event Attributes
The <embed> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <fieldset> Tag
Example
Group related elements in a form:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Date of birth: <input type="text" />
</fieldset>
</form>
Try it yourself
Browser Support
The <fieldset> tag is supported in all major browsers.
Definition and Usage
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
Differences Between HTML 4.01 and HTML5
HTML5 has the attributes disabled, form, and name, which is not supported in HTML 4.01.
Tips and Notes
Tip: The <legend> tag defines a caption for the <fieldset> element.
Attributes
New : New in HTML5.
Attribute
Value
Description
disabled
New disabled
Specifies that a group of related form elements should be
disabled
form
New form_id
Specifies one or more forms the fieldset belongs to
name
New text
Specifies a name for the fieldset
Global Attributes
The <fieldset> tag also supports the Global Attributes in HTML5.
Event Attributes
The <fieldset> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <figcaption> Tag
Example
Use a <figure> element to mark up a photo in a document. The <figure> element also contains a
caption:
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock"
width="304" height="228" />
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
Try it yourself
Browser Support
The <figcaption> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <figcaption> tag.
Definition and Usage
The <figcaption> tag defines a caption for a <figure> element.
The <figcaption> element can be placed as the first or last child of the <figure> element.
Differences Between HTML 4.01 and HTML5
The <figcaption> tag is new in HTML5.
Global Attributes
The <figcaption> tag also supports the Global Attributes in HTML5.
Event Attributes
The <figcaption> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <figure> Tag
Example
Use a <figure> element to mark up a photo in a document:
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock"
width="304" height="228" />
</figure>
Try it yourself
Browser Support
The <figure> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <figure> tag.
Definition and Usage
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings,
etc.
While the content of the <figure> element is related to the main flow, its position is independent of the
main flow, and if removed it should not affect the flow of the document.
Differences Between HTML 4.01 and HTML5
The <figure> tag is new in HTML5.
Tips and Notes
Tip: The <figcaption> element is used to add a caption for the <figure> element.
Global Attributes
The <figure> tag also supports the Global Attributes in HTML5.
Event Attributes
The <figure> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <font> Tag. Not Supported in HTML5.
Definition and Usage
The <font> tag is not supported in HTML5. Use CSS to define fonts.
The <font> tag was used to specify font face, font size, and font color of text.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <footer> Tag
Example
A footer section in a document:
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
Try it yourself
Browser Support
The <footer> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <footer> tag.
Definition and Usage
The <footer> tag defines a footer for a document or section.
A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of use,
contact information, etc.
You can have several <footer> elements in one document.
Differences Between HTML 4.01 and HTML5
The <footer> tag is new in HTML5.
Tips and Notes
Tip: Contact information inside a <footer> element should go inside an <address> tag.
Global Attributes
The <footer> tag also supports the Global Attributes in HTML5.
Event Attributes
The <footer> tag also supports the Event Attributes
s in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <form> Tag
Example
An HTML form with two input fields and one submit button:
<form action="demo_form.asp">
First name: <input type="text" name="fname" value="Mickey" /><br />
Last name:<input type="text" name="lname" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The <form> tag is supported in all major browsers.
Definition and Usage
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements:
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<datalist>
<output>
<label>
Differences Between HTML 4.01 and HTML5
HTML5 has some new attributes, and some HTML 4.01 attributes are not supported in HTML5.
Attributes
New : New in HTML5.
Attribute
Value
Description
accept
MIME_type
Not supported in HTML5
accept-charset
character_set
Specifies a list of character encodings that the server accepts
action
URL
Specifies where to send the form-data when a form is submitted
autocomplete
New on
off
Specifies whether a form should have autocomplete on or off
enctype
application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how the form-data should be encoded when submitting
it to the server (only for method="post")
method
get
post
Specifies the HTTP method to use when sending form-data
text
Specifies the name of a form
name
novalidate
New novalidate
_blank
_self
_parent
_top
target
Specifies that the form should not be validated when submitted
Specifies where to display the response that is received after
submitting the form
Global Attributes
The <form> tag also supports the Global Attributes in HTML5.
Event Attributes
The <form> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <frame> Tag. Not Supported in HTML5.
Definition and Usage
The <frame> tag is not supported in HTML5.
The <frame> tag was used to define one particular window (frame) within a frameset.
The <frame> and <frameset> tags are not supported in HTML5, because they have a negative effect
on the usability of a web page.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <frameset> Tag. Not Supported in HTML5.
Definition and Usage
The <frameset> tag is not supported in HTML5.
The <frameset> tag was used to define a frameset, which organized multiple windows (frames).
The <frame> and <frameset> tags are not supported in HTML5, because they have a negative effect on the usability of a web page.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <h1> to <h6> Tags
Example
The six different HTML headings:
<h1>This
<h2>This
<h3>This
<h4>This
<h5>This
<h6>This
is
is
is
is
is
is
heading
heading
heading
heading
heading
heading
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
Try it yourself
Browser Support
The <h1> to <h6> tags are supported in all major browsers.
Definition and Usage
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.
Differences Between HTML 4.01 and HTML5
The "align" attribute was deprecated in HTML 4.01, and is not supported in HTML5. Use CSS to align elements.
Global Attributes
The <h1> to <h6> tags also supports the Global Attributes in HTML5.
Event Attributes
The <h1> to <h6> tags also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <head> Tag
Example
An HTML document, with a required <title> tag in the head section:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Try it yourself
Browser Support
The <head> tag is supported in all major browsers.
Definition and Usage
The <head> tag is a container for all the head elements.
The <head> element must include a title for the document, and can include scripts, styles, meta
information, and more.
The following elements can go inside the <head> element:
<title> (this element is required in the head section)
<style>
<base>
<link>
<meta>
<script>
<noscript>
<command>
Differences Between HTML 4.01 and HTML5
The profile attribute is not supported in HTML5.
Global Attributes
The <head> tag also supports the Global Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <header> Tag
Example
A header for an <article>:
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
Try it yourself
Browser Support
The <header> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <header> tag.
Definition and Usage
The <header> tag specifies a header for a document or section.
The <header> element should be used as a container for introductory content or set of navigational links.
You can have several <header> elements in one document.
Note: A <header> tag cannot be placed within a <footer>, <address> or another <header> element.
Differences Between HTML 4.01 and HTML5
The <header> tag is new in HTML5.
Global Attributes
The <header> tag also supports the Global Attributes in HTML5.
Event Attributes
The <header> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <hgroup> Tag
Example
Use <hgroup> to group headings:
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>
Try it yourself
Browser Support
The <hgroup> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <hgroup> tag.
Definition and Usage
The <hgroup> tag is used to group heading elements.
The <hgroup> element is used to group a set of <h1> to <h6> elements, when a heading has
multiple levels (subheadings).
Differences Between HTML 4.01 and HTML5
The <hgroup> tag is new in HTML5.
Global Attributes
The <hgroup> tag also supports the Global Attributes in HTML5.
Event Attributes
The <hgroup> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <hr> Tag
Example
Use the <hr> tag to define a thematic change in the content:
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>
<hr />
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>
Try it yourself
Browser Support
The <hr> tag is supported in all major browsers.
Definition and Usage
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is used to separate content (or define a change) in an HTML page.
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the <hr> tag represented a horizontal rule.
In HTML5, the <hr> tag defines a thematic break.
However, the <hr> tag may still be displayed as a horizontal rule in visual browsers, but is now defined
in semantic terms, rather than presentational terms.
All layout attributes (align, noshade, size, and width) in HTML 4.01 was deprecated in HTML 4.01, and
is not supported in HTML5. Use CSS to style the <hr> element instead.
Global Attributes
The <hr> tag also supports the Global Attributes in HTML5.
Event Attributes
The <hr> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <html> Tag
Example
A simple HTML5 document:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Try it yourself
Browser Support
The <html> tag is supported in all major browsers.
Definition and Usage
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
Differences Between HTML 4.01 and HTML5
HTML5 has a new attribute: manifest.
Attributes
New : New in HTML5.
Attribute
manifest
xmlns
Value
New URL
Description
Specifies the address of the document's cache
manifest (for offline browsing)
http://www.w3.org/1999/xhtml Specifies the XML namespace attribute (If you
need your content to conform to XHTML)
Global Attributes
The <html> tag also supports the Global Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <html> manifest Attribute
HTML5 <html> tag
Example
A HTML document with a cache manifest (for offline browsing):
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Try it yourself
Browser Support
The manifest attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The manifest attribute specifies the location of the document's cache manifest.
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
1. Offline browsing - users can use the application when they're offline
2. Speed - cached resources load faster
3. Reduced server load - the browser will only download updated/changed resources from the server
The manifest attribute should be included on every page of your web application that you want cached.
The manifest file is a simple text file that lists the resources the browser should cache for offline access.
To learn more about how to create the manifest file, please read our HTML5 Application Cache chapter.
Differences Between HTML 4.01 and HTML5
The manifest attribute is new in HTML5.
Syntax
<html manifest="URL">
Attribute Values
Value
Description
URL
The address of the document's cache manifest.
Possible values:
An absolute URL - points to another web site (like href="http://www.example.com/demo.appcache")
A relative URL - points to a file within a web site (like href="demo.appcache")
HTML5 <html> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <i> Tag
Example
<p>He named his car <i>The lightning</i>, because it was very fast.</p>
Try it yourself
Browser Support
The <i> tag is supported in all major browsers.
Definition and Usage
The <i> tag defines a part of text in an alternate voice or mood. The <i> tag is typically displayed in italic type.
The <i> tag can be used to indicate a technical term, a phrase from another language, a thought, or a ship name, etc.
Use the <i> element only when there is not a more appropriate semantic element, such as:
<em> (emphasized text)
<strong> (important text)
<mark> (marked/highlighted text)
<cite> (the title of a work)
<dfn> (a definition term)
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the <i> tag was used to render text in italics. However, this is not necessarily the case with HTML5. Style sheets can be used to format the
text in the <i> element.
Global Attributes
The <i> tag also supports the Global Attributes in HTML5.
Event Attributes
The <i> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <iframe> Tag
Example
An inline frame is marked up as follows:
<iframe src="http://www.w3schools.com"></iframe>
Try it yourself
Browser Support
The <iframe> tag is supported in all major browsers.
Definition and Usage
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
Differences Between HTML 4.01 and HTML5
HTML5 has some new attributes, and some HTML 4.01 attributes are not supported in HTML5.
Tips and Notes
Tip: Use CSS to style the <iframe> (even to include scrollbars).
Attributes
New : New in HTML5.
Attribute
Value
Description
frameborder
1
0
Not supported in HTML5
height
pixels
Specifies the height of an iframe
longdesc
URL
Not supported in HTML5
marginheight
pixels
Not supported in HTML5
marginwidth
pixels
Not supported in HTML5
name
Specifies the name of an iframe
name
New ""
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation
sandbox
scrolling
yes
no
auto
New seamless
seamless
src
Enables a set of extra restrictions for the content in the iframe
Not supported in HTML5
Specifies that the iframe should look like it is a part of the containing document
URL
Specifies the address of the document to embed in the iframe
srcdoc
New HTML_code
Specifies the HTML content of the page to show in the iframe
width
pixels
Specifies the width of an iframe
Global Attributes
The <iframe> tag also supports the Global Attributes in HTML5.
Event Attributes
The <iframe> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <iframe> height Attribute
HTML5 <iframe> tag
Example
An inline frame with a specified height and width of 200 pixels:
<iframe src="http://w3schools.com" height="200" width="200"></iframe>
Try it yourself
Browser Support
The height attribute is supported in all major browsers.
Definition and Usage
The height attribute specifies the height of an <iframe>, in pixels.
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the height attribute value could be defined in pixels or in % of the containing element.
In HTML5, the value must be in pixels.
Syntax
<iframe height="pixels">
Attribute Values
Value
Description
pixels
The height of the inline frame in pixels (e.g. height="100")
HTML5 <iframe> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <iframe> name Attribute
HTML5 <iframe> tag
Example
An <iframe> that act as a target for a link:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a>
Try it yourself
Browser Support
The name attribute is supported in all major browsers.
Definition and Usage
The name attribute specifies a name for the <iframe>.
This name attribute can be used to reference the element in a JavaScript, or as the value of the target
attribute of an <a> or <form> element, or the formtarget attribute of an <input> or <button>
element.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<iframe name="name">
Attribute Values
Value
Description
name
Specifies a name for the <iframe>
HTML5 <iframe> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <iframe> sandbox Attribute
HTML5 <iframe> tag
Example
An iframe with extra restrictions:
<iframe src="demo_iframe_sandbox.htm" sandbox=""></iframe>
Try it yourself
(more examples at the bottom of this page)
Browser Support
The sandbox attribute is currently supported in Chrome and Safari.
Definition and Usage
If specified as an empty string (sandbox=""), the sandbox attribute enables a set of extra restrictions
for the content in the inline frame.
The value of the sandbox attribute can either be an empty string (all the restrictions is applied), or a
space-separated list of pre-defined values that will REMOVE particular restrictions.
Differences Between HTML 4.01 and HTML5
The sandbox attribute is new in HTML5.
Syntax
<iframe sandbox="value">
Attribute Values
Value
Description
""
Applies all restrictions below
allow-same-origin
Allows the iframe content to be treated as being from the same origin as the
containing document
allow-top-navigation
Allows the iframe content to navigate (load) content from the containing
document
allow-forms
Allows form submission
allow-scripts
Allows script execution
Try it Yourself - Examples
An <iframe> sandbox allowing form submission
Enable a set of extra restrictions, but allow form submission.
An <iframe> sandbox allowing scripts and access to server content
Enable a set of extra restrictions, but allow scripts and access to server content.
HTML5 <iframe> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <iframe> seamless Attribute
HTML5 <iframe> tag
Example
An <iframe> that looks like it is a part of the containing document:
<iframe src="demo_iframe.htm" seamless="seamless"></iframe>
Try it yourself
Browser Support
The seamless attribute is currently supported only in Chrome.
Definition and Usage
The seamless attribute is a boolean attribute.
When present, it specifies that the <iframe> should look like it is a part of the containing document
(no borders or scrollbars).
Differences Between HTML 4.01 and HTML5
The seamless attribute is new in HTML5.
Syntax
<iframe seamless="seamless">
Note: The seamless attribute is a boolean attribute, and can be set in the following ways:
<iframe seamless>
<iframe seamless="seamless">
<iframe seamless="">
HTML5 <iframe> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <iframe> src Attribute
HTML5 <iframe> tag
Example
An inline frame in its simplest use:
<iframe src="html5_reference.asp"></iframe>
Try it yourself
Browser Support
The src attribute is supported in all major browsers.
Definition and Usage
The src attribute specifies the address of the document to embed in the inline frame.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<iframe src="URL">
Attribute Values
Value
Description
URL
Specifies the URL of the document to embed in the iframe.
Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/default.htm")
A relative URL - points to a file within a web site (like src="default.htm")
HTML5 <iframe> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <iframe> srcdoc Attribute
HTML5 <iframe> tag
Example
An <iframe> with a srcdoc attribute:
<iframe srcdoc="<p>Hello world!</p>" src="demo_iframe_srcdoc.htm"></iframe>
Try it yourself
Browser Support
The srcdoc attribute is currently not supported in any of the major browsers.
Definition and Usage
The srcdoc attribute specifies the HTML content of the page to show in the inline frame.
Tip: This attribute is expected to be used together with the sandbox and seamless attributes.
If a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if
present).
If a browser does NOT support the srcdoc attribute, it will show the file specified in the src attribute
instead (if present).
Differences Between HTML 4.01 and HTML5
The srcdoc attribute is new in HTML5.
Syntax
<iframe srcdoc="HTML_code">
Attribute Values
Value
Description
HTML_code
The HTML content to show in the iframe. Must be valid HTML syntax
HTML5 <iframe> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <iframe> width Attribute
HTML5 <iframe> tag
Example
An inline frame with a specified height and width of 200 pixels:
<iframe src="http://w3schools.com" height="200" width="200"></iframe>
Try it yourself
Browser Support
The width attribute is supported in all major browsers.
Definition and Usage
The width attribute specifies the width of an <iframe>, in pixels.
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the width attribute value could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.
Syntax
<iframe width="pixels">
Attribute Values
Value
Description
pixels
The width in pixels (e.g. width="100")
HTML5 <iframe> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <img> Tag
Example
How to insert an image:
<img src="angry.gif" alt="Angry face" />
Try it yourself
Browser Support
The <img> tag is supported in all major browsers.
Definition and Usage
The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The
<img> tag creates a holding space for the referenced image.
Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.
Differences Between HTML 4.01 and HTML5
The layout attributes: align, border, hspace, and vspace were deprecated in HTML 4.01, and are not
supported in HTML5.
Attributes
Attribute
Value
Description
src
URL
Required. Specifies the URL of an image
alt
text
Required. Specifies an alternate text for an image
height
pixels
Specifies the height of an image
ismap
ismap
Specifies an image as a server-side image-map
usemap
#mapname
Specifies an image as a client-side image-map
width
pixels
Specifies the width of an image
Global Attributes
The <img> tag also supports the Global Attributes in HTML5.
Event Attributes
The <img> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <img> src Attribute
HTML5 <img> tag
Example
An image:
<img src="img_logo.gif" alt="W3Schools.com" />
Try it yourself
Browser Support
The src attribute is supported in all major browsers.
Definition and Usage
The required src attribute specifies the URL of the image.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<img src="URL" />
Attribute Values
Value
Description
URL
The URL of the image.
Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/image.gif")
A relative URL - points to a file within a web site (like src="image.gif")
HTML5 <img> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <img> alt Attribute
HTML5 <img> tag
Example
An image with an alternate text specified:
<img src="img_logo.gif" alt="W3Schools.com" />
Try it yourself
Browser Support
The alt attribute is supported in all major browsers.
Definition and Usage
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).
Note: Internet Explorer (prior version 9) displays the value of the alt attribute as a tooltip, when mousing over the image. This is NOT the correct behavior,
according to the HTML specification.
Tip: To create a tooltip for an image, use the title attribute!
Differences Between HTML 4.01 and HTML5
None.
Syntax
<img alt="text" />
Attribute Values
Value
Description
text
Specifies an alternate text for an image.
Guidelines for the alt text:
The text should describe the image if the image contains information
The text should explain where the link goes if the image is inside an <a> element
Use alt="" if the image is only for decoration
HTML5 <img> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <img> height Attribute
HTML5 <img> tag
Example
Specify the height and width of an image:
<img src="img_logo.gif" width="336" height="69" alt="W3Schools.com" />
Try it yourself
Browser Support
The height attribute is supported in all major browsers.
Definition and Usage
The height attribute specifies the height of an image, in pixels.
Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page
is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect
will be that the page layout will change during loading (while the images load).
Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid
this, rescale the image with a program before using it on a page.
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the height attribute value could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.
Syntax
<img height="pixels" />
Attribute Values
Value
Description
pixels
The height in pixels (e.g. height="100")
HTML5 <img> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <img> ismap Attribute
HTML5 <img> tag
Example
A server-side image-map:
<a href="demo_form.asp">
<img src="img_logo.gif" ismap="ismap" alt="W3Schools.com" />
</a>
Try it yourself
Browser Support
The ismap attribute is supported in all major browsers.
Definition and Usage
The ismap attribute is a boolean attribute.
When present, it specifies that the image is part of a server-side image-map (an image-map is an
image with clickable areas).
When clicking on a server-side image-map, the click coordinates are sent to the server as a URL query
string.
Note: The ismap attribute is allowed only if the <img> element is a descendant of an <a> element
with a valid href attribute.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<img ismap="ismap" />
Note: The ismap attribute is a boolean attribute, and can be set in the following ways:
<img ismap>
<img ismap="ismap">
<img ismap="">
HTML5 <img> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <img> usemap Attribute
HTML5 <img> tag
Example
An image-map, with clickable areas:
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
Try it yourself
Browser Support
The usemap attribute is supported in all major browsers.
Definition and Usage
The usemap attribute specifies an image as a client-side image-map (an image-map is an image with
clickable areas).
The usemap attribute is associated with a <map> element's name or id attribute, and creates a
relationship between the <img> and the <map>.
Note: The usemap attribute cannot be used if the <img> element is a descendant of an <a> or
<button> element.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<img usemap="#mapname" />
Attribute Values
Value
Description
#mapname
A hash character ("#") plus the name or id of the <map> element to use
HTML5 <img> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <img> width Attribute
HTML5 <img> tag
Example
Specify the height and width of an image:
<img src="img_logo.gif" width="336" height="69" alt="W3Schools.com" />
Try it yourself
Browser Support
The width attribute is supported in all major browsers.
Definition and Usage
The width attribute specifies the width of an image, in pixels.
Tip: Always specify both the height and width attributes for images. If height and width are set, the
space required for the image is reserved when the page is loaded. However, without these attributes,
the browser does not know the size of the image, and cannot reserve the appropriate space to it. The
effect will be that the page layout will change during loading (while the images load).
Tip: Downsizing a large image with the height and width attributes forces a user to download the large
image (even if it looks small on the page). To avoid this, rescale the image with a program before
using it on a page.
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the width attribute value could be defined in pixels or in % of the containing element. In
HTML5, the value must be in pixels.
Syntax
<img width="pixels" />
Attribute Values
Value
Description
pixels
The width in pixels (e.g. width="100")
HTML5 <img> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> Tag
Example
An HTML form with three input fields; two text fields and one submit button:
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The <input> tag is supported in all major browsers.
Definition and Usage
The <input> tag specifies an input field where the user can enter data.
<input> elements are used within a <form> element to declare input controls that allow users to input
data.
An input field can vary in many ways, depending on the type attribute.
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the "align" attribute was deprecated, and is not supported in HTML5. Use CSS to align
<input> elements.
In HTML5, the <input> tag has many new attributes, and the type attribute has many new values.
Tips and Notes
Note: The <input> element is empty, it contains attributes only.
Tip: Use the <label> element to define labels for <input> elements.
Attributes
New : New in HTML5.
Attribute
Value
Description
accept
audio/*
video/*
image/*
MIME_type
Specifies the types of files that the
server accepts (only for type="file")
alt
text
Specifies an alternate text for images
(only for type="image")
autocomplete
New on
off
Specifies whether an <input> element
should have autocomplete enabled
autofocus
New autofocus
Specifies that an <input> element
should automatically get focus when the
page loads
checked
checked
Specifies that an <input> element
should be pre-selected when the page
loads (for type="checkbox" or
type="radio")
disabled
disabled
Specifies that an <input> element
should be disabled
form
New form_id
Specifies one or more forms the <input>
element belongs to
formaction
New URL
Specifies the URL of the file that will
process the input control when the form
is submitted (for type="submit" and
type="image")
formenctype
New application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how the form-data should be
encoded when submitting it to the
server (for type="submit" and
type="image")
formmethod
New get
post
Defines the HTTP method for sending
data to the action URL (for
type="submit" and type="image")
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
formnovalidate New formnovalidate
Defines that form elements should not
be validated when submitted
formtarget
New _blank
_self
_parent
_top
framename
Specifies where to display the response
that is received after submitting the
form (for type="submit" and
type="image")
height
New pixels
Specifies the height of an <input>
element (only for type="image")
list
New datalist_id
Refers to a <datalist> element that
contains pre-defined options for an
<input> element
max
New number
date
Specifies the maximum value for an
<input> element
maxlength
number
Specifies the maximum number of
characters allowed in an <input>
element
min
New number
date
Specifies a minimum value for an
<input> element
multiple
New multiple
Specifies that a user can enter more
than one value in an <input> element
name
text
Specifies the name of an <input>
element
pattern
New regexp
Specifies a regular expression that an
<input> element's value is checked
against
placeholder
New text
Specifies a short hint that describes the
expected value of an <input> element
readonly
readonly
required
New required
Specifies that an input field is read-only
Specifies that an input field must be
filled out before submitting the form
size
number
Specifies the width, in characters, of an
<input> element
src
URL
Specifies the URL of the image to use as
a submit button (only for type="image")
step
New number
Specifies the legal number intervals for
an input field
type
button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Specifies the type <input> element to
display
value
text
Specifies the value of an <input>
element
width
New pixels
Specifies the width of an <input>
element (only for type="image")
Global Attributes
The <input> tag also supports the Global Attributes in HTML5.
Event Attributes
The <input> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> accept Attribute
HTML5 <input> tag
Example
Specify that the server accepts only image files in the file upload:
<form action="demo_form.asp">
<input type="file" name="pic" accept="image/*" />
<input type="submit" />
</form>
Try it yourself
Browser Support
The accept attribute is supported in all major browsers, except Internet Explorer and Safari.
Definition and Usage
The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).
Note: The accept attribute can only be used with <input type="file">.
Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<input accept="audio/*|video/*|image/*|MIME_type" />
Tip: To specify more than one value, separate the values with a comma (e.g. <input accept="audio/*,video/*,image/*" />.
Attribute Values
Value
Description
audio/*
All sound files are accepted
video/*
All video files are accepted
image/*
All image files are accepted
MIME_type
A valid MIME type, with no parameters. Look at IANA MIME types for a complete list of standard MIME types
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> type Attribute
HTML5 <input> tag
Example
An HTML form with two different input types; text and submit:
<form action="demo_form.asp">
Username: <input type="text" name="usrname" /><br />
<input type="submit" value="Submit" />
</form>
Try it yourself
(more examples below)
Browser Support
The type attribute works in all major browsers. However, not all the different input types works in all
major browsers.
Look below to see browser-support for each input type.
Definition and Usage
The type attribute specifies the type of <input> element to display.
The default type is: text.
Tip: This is not a required attribute, but we think you should always include it.
Differences Between HTML 4.01 and HTML5
HTML5 has the following new input types: color, date, datetime, datetime-local, month, week, time,
email, number, range, search, tel, and url.
Syntax
<input type="value" />
Attribute Values
Value
Description
button
Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox
Defines a checkbox
color
New Defines a color picker
date
New Defines a date control (year, month and day (no time))
datetime
New Defines a date and time control (year, month, day, hour, minute, second, and
fraction of a second, based on UTC time zone)
datetime-local
New Defines a date and time control (year, month, day, hour, minute, second, and
fraction of a second (no time zone)
New Defines a field for an e-mail address
file
Defines a file-select field and a "Browse..." button (for file uploads)
hidden
Defines a hidden input field
image
Defines an image as the submit button
month
New Defines a month and year control (no time zone)
number
New Defines a field for entering a number
password
Defines a password field (characters are masked)
radio
Defines a radio button
range
reset
search
submit
tel
text
time
New Defines a control for entering a number whose exact value is not important
(like a slider control)
Defines a reset button (resets all form values to default values)
New Defines a text field for entering a search string
Defines a submit button
New Defines a field for entering a telephone number
Default. Defines a single-line text field (default width is 20 characters)
New Defines a control for entering a time (no time zone)
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
url
New Defines a field for entering a URL
week
New Defines a week and year control (no time zone)
Examples
Input type: button
Example
A clickable button, that activates a JavaScript when it is clicked:
<input type="button" value="Click me" onclick="msg()" />
Try it yourself
Input type: checkbox
Example
Checkboxes let a user select one or more options of a limited number of choices:
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
Try it yourself
Input type: color
Example
Select a color from a color picker:
Select your favorite color: <input type="color" name="favcolor" />
Try it yourself
Input type: date
Example
Define a date control:
Birthday: <input type="date" name="bday" />
Try it yourself
Input type: datetime
Example
Define a date and time control (with time zone):
Birthday (date and time): <input type="datetime" name="bdaytime" />
Try it yourself
Input type: datetime-local
Example
Define a date and time control (no time zone):
Birthday (date and time): <input type="datetime-local" name="bdaytime" />
Try it yourself
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Input type: email
Example
Define a field for an e-mail address (will be automatically validated when submitted):
E-mail: <input type="email" name="usremail" />
Try it yourself
Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds
@ and .com options).
Input type: file
Example
Define a file-select field and a "Browse..." button (for file uploads):
Select a file: <input type="file" name="img" />
Try it yourself
Input type: hidden
Example
Define a hidden field (not visible to a user). A hidden field often store a default value, or can have
its value changed by a JavaScript:
<input type="hidden" name="country" value="Norway" />
Try it yourself
Input type: image
Example
Define an image as a submit button:
<input type="image" src="img_submit.gif" alt="Submit" />
Try it yourself
Input type: month
Example
Define a month and year control (no time zone):
Birthday (month and year): <input type="month" name="bdaymonth" />
Try it yourself
Input type: number
Example
Define a field for entering a number (You can also set restrictions on what numbers are accepted):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5" />
Try it yourself
Use the following attributes to specify restrictions:
max - specifies the maximum value allowed
min - specifies the minimum value allowed
step - specifies the legal number intervals
value - Specifies the default value
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Input type: password
Example
Define a password field (characters are masked)
<input type="password" name="pwd" />
Try it yourself
Input type: radio
Example
Radio buttons let a user select only one of a limited number of choices:
<input type="radio" name="gender" value="male" /> Male<br />
<input type="radio" name="gender" value="female" /> Female
Try it yourself
Input type: range
Example
Define a control for entering a number whose exact value is not important (like a slider control).
You can also set restrictions on what numbers are accepted:
<input type="range" name="points" min="1" max="10" />
Try it yourself
Use the following attributes to specify restrictions:
max - specifies the maximum value allowed
min - specifies the minimum value allowed
step - specifies the legal number intervals
value - Specifies the default value
Input type: reset
Example
Define a reset button (resets all form values to default values):
<input type="reset" />
Try it yourself
Tip: Use the reset button carefully! It can be annoying for users who accidentally activate the reset
button.
Input type: search
Example
Define a search field (like a site search, or Google search):
Search Google: <input type="search" name="googlesearch" />
Try it yourself
Input type: submit
Example
Define a submit button:
<input type="submit" />
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Try it yourself
Input type: tel
Example
Define a field for entering a telephone number:
Telephone: <input type="tel" name="usrtel" />
Try it yourself
Input type: text
Example
Define two single-line text fields that a user can enter text into:
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
Try it yourself
Input type: time
Example
Define a control for entering a time (no time zone):
Select a time: <input type="time" name="usr_time" />
Try it yourself
Input type: url
Example
Define a field for entering a URL:
Add your homepage: <input type="url" name="homepage" />
Try it yourself
Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it
(adds .com option).
Input type: week
Example
Define a week and year control (no time zone):
Select a week: <input type="week" name="week_year" />
Try it yourself
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> value Attribute
HTML5 <input> tag
Example
An HTML form with initial (default) values:
<form action="demo_form.asp">
First name: <input type="text" name="fname" value="Peter" /><br />
Last name: <input type="text" name="lname" value="Griffin" /><br />
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The value attribute works in all major browsers.
Definition and Usage
The value attribute specifies the value of an <input> element.
The value attribute is used differently for different input types:
For "button", "reset", and "submit" - it defines the text on the button
For "text", "password", "hidden" - it defines the initial (default) value of the input field
For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the
value that is sent on submit)
Note: The value attribute is required with <input type="checkbox"> and <input type="radio">.
Note: The value attribute cannot be used with <input type="file">.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<input value="text" />
Attribute Values
Value
Description
text
Specifies the value of the <input> element
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> width Attribute
HTML5 <input> tag
Example
Define an image as the submit button, with height and width attributes:
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48"/>
</form>
Try it yourself
Browser Support
The width attribute is supported in all major browsers.
Definition and Usage
The width attribute specifies the width of the <input> element.
Note: The width attribute is used only with <input type="image">.
Tip: Always specify both the height and width attributes for images. If height and width are set, the
space required for the image is reserved when the page is loaded. However, without these attributes,
the browser does not know the size of the image, and cannot reserve the appropriate space to it. The
effect will be that the page layout will change during loading (while the images load).
Differences Between HTML 4.01 and HTML5
The width attribute is new for the <input> tag in HTML5.
Syntax
<input width="pixels" />
Attribute Values
Value
Description
pixels
The width in pixels (e.g. width="100")
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> step Attribute
HTML5 <input> tag
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Example
An HTML form with an input field with a specified legal number intervals:
<form action="demo_form.asp">
<input type="number" name="points" step="3" />
<input type="submit" />
</form>
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
Download XML Editor
Try it yourself
FREE Website BUILDER
Browser Support
The step attribute is currently only supported in Opera and Chrome.
Definition and Usage
The step attribute specifies the legal number intervals for an <input> element.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: The step attribute can be used together with the max and min attributes to create a range of legal
values.
Note: The step attribute works with the following input types: number, range, date, datetime,
datetime-local, month, time and week.
Differences Between HTML 4.01 and HTML5
The step attribute is new in HTML5.
Syntax
<input step="number" />
Attribute Values
Value
Description
number
Specifies the legal number intervals for the input field
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Build a FREE Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript,
XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE
Share with
Created By www.ebooktutorials.blogspot.in
HTML5 <input> alt Attribute
HTML5 <input> tag
Example
An HTML form with an image that represents the submit button:
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"
/>
</form>
Try it yourself
Browser Support
The alt attribute is supported in all major browsers.
Definition and Usage
The alt attribute provides an alternate text for the user, if he/she for some reason cannot view the
image (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
Note: The alt attribute can only be used with <input type="image">.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<input alt="text" />
Attribute Values
Value
Description
text
Specifies an alternate text for the image input
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> autocomplete Attribute
HTML5 <input> tag
Example
An HTML form with autocomplete on (and off for one input field):
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
Try it yourself
Browser Support
The autocomplete attribute is supported in all major browsers.
Tip: In some browsers you may need to activate an autocomplete function for this to work (Look under
"Preferences" in the browser's menu).
Definition and Usage
The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the
browser should display options to fill in the field, based on earlier typed values.
Note: The autocomplete attribute works with the following <input> types: text, search, url, tel, email,
password, datepickers, range, and color.
Differences Between HTML 4.01 and HTML5
The autocomplete attribute is new in HTML5.
Syntax
<input autocomplete="on|off" />
Attribute Values
Value
Description
on
Default. Specifies that autocomplete is on (enabled)
off
Specifies that autocomplete is off (disabled)
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> autofocus Attribute
HTML5 <input> tag
Example
Let the "First name" input field automatically get focus when the page loads:
<form action="demo_form.asp">
First name:<input type="text" name="fname" autofocus="autofocus" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" />
</form>
Try it yourself
Browser Support
The autofocus attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The autofocus attribute is a boolean attribute.
When present, it specifies that an <input> element should automatically get focus when the page loads.
Differences Between HTML 4.01 and HTML5
The autofocus attribute is new in HTML5.
Syntax
<input autofocus="autofocus" />
Note: The autofocus attribute is a boolean attribute, and can be set in the following ways:
<input autofocus>
<input autofocus="autofocus">
<input autofocus="">
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> checked Attribute
HTML5 <input> tag
Example
An HTML form with a pre-selected checkbox:
<form action="demo_form.asp">
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have
a car <br />
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The checked attribute is supported in all major browsers.
Definition and Usage
The checked attribute is a boolean attribute.
When present, it specifies that an <input> element should be pre-selected (checked) when the page
loads.
The checked attribute can be used with <input type="checkbox"> and <input type="radio">.
The checked attribute can also be set after the page load, with a JavaScript.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<input checked="checked" />
Note: The checked attribute is a boolean attribute, and can be set in the following ways:
<input checked>
<input checked="checked">
<input checked="">
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> disabled Attribute
HTML5 <input> tag
Example
An HTML form with one disabled input field:
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" disabled="disabled" /><br />
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The disabled attribute is supported in all major browsers.
Definition and Usage
The disabled attribute is a boolean attribute.
When present, it specifies that the <input> element should be disabled.
A disabled input element is unusable and un-clickable.
The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.).
Then, a JavaScript could remove the disabled value, and make the <input> element usable.
Tip: Disabled <input> elements in a form will not be submitted.
Note: The disabled attribute will not work with <input type="hidden">.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<input disabled="disabled" />
Note: The disabled attribute is a boolean attribute, and can be set in the following ways:
<input disabled>
<input disabled="disabled">
<input disabled="">
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> form Attribute
HTML5 <input> tag
Example
An input field located outside the HTML form (but still a part of the form):
<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="Submit" />
</form>
Last name: <input type="text" name="lname" form="form1" />
Try it yourself
Browser Support
The form attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The form attribute specifies one or more forms the <input> element belongs to.
Differences Between HTML 4.01 and HTML5
The form attribute is new in HTML5.
Syntax
<input form="form_id" />
Attribute Values
Value
Description
form_id
Specifies a space-separated list of id's to one or more forms the <input>
element belongs to
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> formaction Attribute
HTML5 <input> tag
Example
An HTML form with two submit buttons, with different actions:
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>
Try it yourself
Browser Support
The formaction attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The formaction attribute specifies the URL of the file that will process the input control when the form
is submitted.
The formaction attribute overrides the action attribute of the <form> element.
Note: The formaction attribute is used with type="submit" and type="image".
Differences Between HTML 4.01 and HTML5
The formaction attribute is new in HTML5.
Syntax
<input formaction="URL" />
Attribute Values
Value
Description
URL
Specifies the URL of the file that will process the input control when the form is
submitted.
Possible values:
An absolute URL - the full address of a page (like
href="http://www.example.com/formresult.asp")
A relative URL - points to a file within the current site (like
href="formresult.asp")
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> formenctype Attribute
HTML5 <input> tag
Example
Send form-data that is default encoded (the first submit button), and encoded as "multipart/formdata" (the second submit button):
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formenctype="multipart/form-data" value="Submit as
Multipart/form-data" />
</form>
Try it yourself
Browser Support
The formenctype attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The formenctype attribute specifies how the form-data should be encoded when submitting it to the
server (only for forms with method="post")
The formenctype attribute overrides the enctype attribute of the <form> element.
Note: The formenctype attribute is used with type="submit" and type="image".
Differences Between HTML 4.01 and HTML5
The formenctype attribute is new in HTML5.
Syntax
<input formenctype="value" />
Attribute Values
Value
Description
application/x-www-form-urlencoded
Default. All characters are encoded before sent (spaces are
converted to "+" symbols, and special characters are
converted to ASCII HEX values)
multipart/form-data
No characters are encoded
text/plain
Spaces are converted to "+" symbols, but no special
characters are encoded
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> formmethod Attribute
HTML5 <input> tag
Example
The second submit button overrides the HTTP method of the form:
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST" />
</form>
Try it yourself
Browser Support
The formmethod attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The formmethod attribute defines the HTTP method for sending form-data to the action URL.
The formmethod attribute overrides the method attribute of the <form> element.
Note: The formmethod attribute can be used with type="submit" and type="image".
The form-data can be sent as URL variables (method="get") or as an HTTP post transaction
(method="post").
Notes on the "get" method:
This method appends the form-data to the URL in name/value pairs
This method is useful for form submissions where a user want to bookmark the result
There is a limit to how much data you can place in a URL (varies between browsers), therefore,
you cannot be sure that all of the form-data will be correctly transferred
Never use the "get" method to pass sensitive information! (password or other sensitive
information will be visible in the browser's address bar)
Notes on the "post" method:
This method sends the form-data as an HTTP post transaction
Form submissions with the "post" method cannot be bookmarked
The "post" method is more robust and secure than "get", and "post" does not have size
limitations
Differences Between HTML 4.01 and HTML5
The formmethod attribute is new in HTML5.
Syntax
<input formmethod="get|post" />
Attribute Values
Value
Description
get
Default. Appends the form-data to the URL in name/value pairs: URL?
name=value&name=value
post
Sends the form-data as an HTTP post transaction
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> formnovalidate Attribute
HTML5 <input> tag
Example
A form with two submit buttons (with and without validation):
<form action="demo_form.asp">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formnovalidate="formnovalidate" value="Submit without
validation" />
</form>
Try it yourself
Browser Support
The formnovalidate attribute works in all major browsers, except Internet Explorer and Safari.
Definition and Usage
The novalidate attribute is a boolean attribute.
When present, it specifies that the <input> element should not be validated when submitted.
The formnovalidate attribute overrides the novalidate attribute of the <form> element.
Note: The formnovalidate attribute can be used with type="submit".
Differences Between HTML 4.01 and HTML5
The formnovalidate attribute is new in HTML5.
Syntax
<input formnovalidate="formnovalidate" />
Note: The formnovalidate attribute is a boolean attribute, and can be set in the following ways:
<input formnovalidate>
<input formnovalidate="formnovalidate">
<input formnovalidate="">
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> formtarget Attribute
HTML5 <input> tag
Example
A form with two submit buttons, with different target windows:
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit as normal" />
<input type="submit" formtarget="_blank" value="Submit to a new window" />
</form>
Try it yourself
Browser Support
The formtarget attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
The formtarget attribute overrides the target attribute of the <form> element.
Note: The formtarget attribute can be used with type="submit" and type="image".
Differences Between HTML 4.01 and HTML5
The formtarget attribute is new in HTML5.
Note: Frames and framesets are not supported in HTML5. The _parent, _top and framename values are now mostly used with iframes.
Syntax
<input formtarget="_blank|_self|_parent|_top|framename" />
Attribute Values
Value
Description
_blank
The response is displayed in a new window or tab
_self
The response is displayed in the same frame (this is default)
_parent
The response is displayed in the parent frame
_top
The response is displayed in the full body of the window
framename
The response is displayed in a named iframe
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> height Attribute
HTML5 <input> tag
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Example
Define an image as the submit button, with height and width attributes:
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48"/>
</form>
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
Download XML Editor
FREE Website BUILDER
Try it yourself
Build a FREE Website
Browser Support
The height attribute is supported in all major browsers.
Definition and Usage
The height attribute specifies the height of the <input> element.
Note: The height attribute is used only with <input type="image">.
Tip: Always specify both the height and width attributes for images. If height and width are set, the
space required for the image is reserved when the page is loaded. However, without these attributes,
the browser does not know the size of the image, and cannot reserve the appropriate space to it. The
effect will be that the page layout will change during loading (while the images load).
Differences Between HTML 4.01 and HTML5
The height attribute is new for the <input> tag in HTML5.
Syntax
<input height="pixels" />
Attribute Values
Value
Description
pixels
The height in pixels (e.g. height="100")
HTML5 <input> tag
Content Downloaded from www.w3schools.com
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript,
XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE
Share with
Created By www.ebooktutorials.blogspot.in
HTML5 <input> list Attribute
HTML5 <input> tag
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Example
An <input> element with pre-defined values in a <datalist>:
<input list="browsers" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Google Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
Download XML Editor
FREE Website BUILDER
Build a FREE Website
Try it yourself
W3SCHOOLS EXAMS
Browser Support
Get Certified in:
HTML, CSS, JavaScript,
XML, PHP, and ASP
W3SCHOOLS BOOKS
The list attribute is currently only supported in Firefox and Opera.
Definition and Usage
The list attribute refers to a <datalist> element that contains pre-defined options for an <input>
element.
Differences Between HTML 4.01 and HTML5
The list attribute is new in HTML5.
Syntax
<input list="datalist_id" />
Attribute Values
Value
Description
datalist_id
Specifies the id of the datalist to bind the <input> element to
HTML5 <input> tag
Content Downloaded from www.w3schools.com
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE
Share with
Created By www.ebooktutorials.blogspot.in
HTML5 <input> max Attribute
HTML5 <input> tag
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Example
Use of the min and max attributes:
<form action="demo_form.asp">
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5" />
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Build a FREE Website
<input type="submit" />
W3SCHOOLS EXAMS
</form>
Get Certified in:
HTML, CSS, JavaScript,
XML, PHP, and ASP
Try it yourself
W3SCHOOLS BOOKS
Browser Support
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
The max attribute is currently only supported in Opera and Chrome.
Definition and Usage
The max attribute specifies the maximum value for an <input> element.
Tip: Use the max attribute together with the min attribute to create a range of legal values.
Note: The max and min attributes works with the following input types: number, range, date,
datetime, datetime-local, month, time and week.
Differences Between HTML 4.01 and HTML5
The max attribute is new in HTML5.
Syntax
<input max="number|date" />
Attribute Values
Value
Description
number
Specifies the maximum value allowed
date
Specifies the maximum date allowed
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE
Share with
Created By www.ebooktutorials.blogspot.in
HTML5 <input> maxlength Attribute
HTML5 <input> tag
Example
An <input> element with a maximum length of 10 characters:
<form action="demo_form.asp">
Username: <input type="text" name="usrname" maxlength="10" /><br />
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The maxlength attribute is supported in all major browsers.
Definition and Usage
The maxlength attribute specifies the maximum number of characters allowed in the <input> element.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<input maxlength="number" />
Attribute Values
Value
Description
number
The maximum number of characters allowed in the <input> element
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> min Attribute
HTML5 <input> tag
Example
Use of the min and max attributes:
<form action="demo_form.asp">
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5" />
<input type="submit" />
</form>
Try it yourself
Browser Support
The min attribute is currently only supported in Opera and Chrome.
Definition and Usage
The min attribute specifies the minimum value for an <input> element.
Tip: Use the min attribute together with the max attribute to create a range of legal values.
Note: The max and min attributes works with the following input types: number, range, date,
datetime, datetime-local, month, time and week.
Differences Between HTML 4.01 and HTML5
The min attribute is new in HTML5.
Syntax
<input min="number|date" />
Attribute Values
Value
Description
number
Specifies the minimum value allowed
date
Specifies the minimum date allowed
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> multiple Attribute
HTML5 <input> tag
Example
A file upload field that accepts multiple values:
<form action="demo_form.asp">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
Try it yourself
Browser Support
The multiple attribute works in all major browsers, except Internet Explorer.
Definition and Usage
The multiple attribute is a boolean attribute.
When present, it specifies that the user is allowed to enter more than one value in the <input>
element.
Note: The multiple attribute works with the following input types: email, and file.
Differences Between HTML 4.01 and HTML5
The multiple attribute is new in HTML5.
Syntax
<input multiple="multiple" />
Note: The multiple attribute is a boolean attribute, and can be set in the following ways:
<input multiple>
<input multiple="multiple">
<input multiple="">
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> name Attribute
HTML5 <input> tag
Example
An HTML form with three input fields; two text fields and one submit button:
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The name attribute is supported in all major browsers.
Definition and Usage
The name attribute specifies the name of an <input> element.
The name attribute is used to reference elements in a JavaScript, or to reference form data after a
form is submitted.
Note: Only form elements with a name attribute will have their values passed when submitting a form.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<input name="text" />
Attribute Values
Value
Description
text
Specifies the name of the <input> element
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> pattern Attribute
HTML5 <input> tag
Example
An HTML form with an input field that can contain only three letters (no numbers or special
characters):
<form action="demo_form.asp">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>
Try it yourself
Browser Support
The pattern attribute works in all major browsers, except Internet Explorer and Safari.
Definition and Usage
The pattern attribute specifies a regular expression that the <input> element's value is checked against.
Note: The pattern attribute works with the following input types: text, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Tip: Learn more about regular expressions in our JavaScript tutorial.
Differences Between HTML 4.01 and HTML5
The pattern attribute is new in HTML5.
Syntax
<input pattern="regexp" />
Attribute Values
Value
Description
regexp
Specifies a regular expression that the <input> element's value is checked against
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> placeholder Attribute
HTML5 <input> tag
Example
Two input fields with a placeholder text:
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name" /><br />
<input type="text" name="lname" placeholder="Last name" /><br />
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The placeholder attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g.
a sample value or a short description of the expected format).
The hint is displayed in the input field when it is empty, and disappears when the field gets focus.
Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and
password.
Differences Between HTML 4.01 and HTML5
The placeholder attribute is new in HTML5.
Syntax
<input placeholder="text" />
Attribute Values
Value
Description
text
Specifies a short hint that describes the expected value of the input field
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> readonly Attribute
HTML5 <input> tag
Example
An HTML form with a read-only input field:
<form action="demo_form.asp">
Country: <input type="text" name="country" value="Norway" readonly="readonly"
/><br />
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The readonly attribute works in all major browsers.
Definition and Usage
The readonly attribute is a boolean attribute.
When present, it specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the
text from it).
The readonly attribute can be set to keep a user from changing the value until some other conditions
have been met (like selecting a checkbox, etc.). Then, a JavaScript can remove the readonly value,
and make the input field editable.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<input readonly="readonly" />
Note: The readonly attribute is a boolean attribute, and can be set in the following ways:
<input readonly>
<input readonly="readonly">
<input readonly="">
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> required Attribute
HTML5 <input> tag
Example
An HTML form with a required input field:
<form action="demo_form.asp">
Username: <input type="text" name="usrname" required="required" />
<input type="submit" />
</form>
Try it yourself
Browser Support
The required attribute works in all major browsers, except Internet Explorer and Safari.
Definition and Usage
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.
Note: The required attribute works with the following input types: text, search, url, tel, email,
password, date pickers, number, checkbox, radio, and file.
Differences Between HTML 4.01 and HTML5
The required attribute is new in HTML5.
Syntax
<input required="required" />
Note: The required attribute is a boolean attribute, and can be set in the following ways:
<input required>
<input required="required">
<input required="">
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> size Attribute
HTML5 <input> tag
Example
An HTML form with two input fields with a width of 30 and 8 characters:
<form action="demo_form.asp">
Username: <input type="text" name="email" size="30" /><br />
Password: <input type="password" name="pwd" size="8" /><br />
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The size attribute works in all major browsers.
Definition and Usage
The size attribute specifies the visible width, in characters, of an <input> element.
Note: The size attribute works with the following input types: text, search, tel, url, email, and
password.
Tip: To specify the maximum number of characters allowed in the <input> element, use the maxlength
attribute.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<input size="number" />
Attribute Values
Value
Description
number
Specifies the width of an <input> element, in characters. Default value is 20
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <input> src Attribute
HTML5 <input> tag
Example
An HTML form with an image that represents the submit button:
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"
/>
</form>
Try it yourself
Browser Support
The src attribute is supported in all major browsers.
Definition and Usage
The src attribute specifies the URL of the image to use as a submit button.
Note: The src attribute is required for <input type="image">, and can only be used with <input type="image">.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<input src="URL" />
Attribute Values
Value
Description
URL
Specifies the URL of the image to use as a submit button
Possible values:
An absolute URL - points to another web site (like src="http://www.example.com/submit.gif")
A relative URL - points to a file within a web site (like src="submit.gif")
HTML5 <input> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <ins> Tag
Example
A text with a deleted part, and a new, inserted part:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
Try it yourself
Browser Support
The <ins> tag is supported in all major browsers.
Definition and Usage
The <ins> tag defines a text that has been inserted into a document.
Tip: Also look at the <del> tag to markup deleted text.
Browsers will normally strike a line through deleted text and underline inserted text.
Differences Between HTML 4.01 and HTML5
NONE
Tips and Notes
Tip: Use <ins> together with <del> to markup updates and modifications in a document.
Attributes
Attribute
Value
Description
cite
URL
Specifies a URL to a document that explains the reason
why the text was inserted/changed
datetime
YYYY-MM-DDThh:mm:ssTZD
Specifies the date and time of when the text was
inserted/changed
Global Attributes
The <ins> tag also supports the Global Attributes in HTML5.
Event Attributes
The <ins> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <keygen> Tag
Example
A form with a keygen field:
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
Try it yourself
Browser Support
The <keygen> tag is supported in all major browsers, except Internet Explorer.
Note: Safari supports the <keygen> element on Mac only.
Definition and Usage
The <keygen> tag specifies a key-pair generator field used for forms.
When the form is submitted, the private key is stored locally, and the public key is sent to the server.
Differences Between HTML 4.01 and HTML5
The <keygen> element is new in HTML5.
Attributes
New : New in HTML5.
Attribute
Value
Description
autofocus
New autofocus Specifies that a <keygen> element should automatically get focus
when the page loads
challenge
New challenge Specifies that the value of the <keygen> element should be
challenged when submitted
disabled
New disabled
Specifies that a <keygen> element should be disabled
form
New form_id
Specifies one or more forms the <keygen> element belongs to
keytype
New rsa
dsa
ec
Specifies the security algorithm of the key
name
New name
Defines a name for the <keygen> element
Global Attributes
The <keygen> tag also supports the Global Attributes in HTML5.
Event Attributes
The <keygen> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <em> <strong> <dfn> <code> <samp>
<kbd> <var> Tags
Example
Format text in a document:
<em>Emphasized text</em>
<strong>Strong text</strong>
<dfn>Definition term</dfn>
<code>Computer code</code>
<samp>Sample output from computer program</samp>
<kbd>Keyboard input</kbd>
<var>Variable</var>
Try it yourself
Browser Support
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are supported in all major
browsers.
Definition and Usage
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are all phrase tags. They
are not deprecated, but it is possible to achieve richer effect with CSS.
Tag
Description
<em>
Renders as emphasized text
<strong>
Defines important text
<dfn>
Definesa definition term
<code>
Defines a piece of computer code
<samp>
Defines sample output from a computer program
<kbd>
Defines keyboard input
<var>
Defines a variable
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important
text.
Global Attributes
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags also supports the Global
Attributes in HTML5.
Event Attributes
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags also supports the Event
Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <label> Tag
Example
Two radio buttons with labels:
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
Try it yourself
Browser Support
The <label> tag is supported in all major browsers.
Definition and Usage
The <label> tag defines a label for an <input> element.
The <label> element does not render as anything special for the user. However, it provides a usability
improvement for mouse users, because if the user clicks on the text within the <label> element, it
toggles the control.
The for attribute of the <label> tag should be equal to the id attribute of the related element to bind
them together.
Differences Between HTML 4.01 and HTML5
The "form" attribute is new in HTML5.
Tips and Notes
Tip: A label can be bound to another element either by using the "for" attribute, or by placing the
element inside the <label> element.
Attributes
New : New in HTML5.
Attribute
Value
Description
for
element_id
Specifies which form element a label is bound to
form
New form_id
Specifies one or more forms the label belongs to
Global Attributes
The <label> tag also supports the Global Attributes in HTML5.
Event Attributes
The <label> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <label> for Attribute
HTML5 <label> tag
Example
Two radio buttons with labels:
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female" />
<br />
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The for attribute is supported in all major browsers.
Definition and Usage
The for attribute specifies which form element a label is bound to.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<label for="element_id">
Attribute Values
Value
Description
element_id
The id of the form element the label is bound to
HTML5 <label> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <label> form Attribute
HTML5 <label> tag
Example
A <label> element located outside a form (but still a part of the form):
<form action="demo_form.asp" method="get" id="form1">
<input type="radio" name="sex" id="male" value="male" /><br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female" />
<input type="submit" value="Submit" />
</form>
<label for="male" form="form1">Male</label>
Try it yourself
Browser Support
The form attribute is supported in all major browsers.
Definition and Usage
The form attribute specifies one or more forms the <label> element belongs to.
Differences Between HTML 4.01 and HTML5
The form attribute is new in HTML5.
Syntax
<label form="form_id">
Attribute Values
Value
Description
form_id
Specifies a space-separated list of id's to one or more forms the <label> element belongs to
HTML5 <label> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <legend> Tag
Example
How to group related elements in a form:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
Try it yourself
Browser Support
The <legend> tag is supported in all major browsers.
Definition and Usage
The <legend> tag defines a caption for the <fieldset> element.
Differences Between HTML 4.01 and HTML5
The align attribute is not supported in HTML5. Use CSS instead.
Global Attributes
The <legend> tag also supports the Global Attributes in HTML5.
Event Attributes
The <legend> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <li> Tag
Example
Lists in HTML5:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it yourself
Browser Support
The <li> tag is supported in all major browsers.
Definition and Usage
The <li> tag defines a list item.
The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
Differences Between HTML 4.01 and HTML5
The "type" attribute was deprecated in HTML 4.01, and is NOT supported in HTML5.
The "value" attribute was deprecated in HTML 4.01, but IS supported in HTML5.
Tips and Notes
Tip: Use CSS to define the type of list.
Attributes
Attribute
Value
Description
value
number
Specifies the value of a list item. The following list items will increment from that number
(only for <ol> lists)
Global Attributes
The <li> tag also supports the Global Attributes in HTML5.
Event Attributes
The <li> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <link> Tag
Example
Link to an external style sheet:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Try it yourself
Browser Support
The <link> tag is supported in all major browsers.
Definition and Usage
The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets.
Differences Between HTML 4.01 and HTML5
Some HTML 4.01 attributes are not supported in HTML5.
The "sizes" attribute is new in HTML5.
Tips and Notes
Note: The <link> element is an empty element, it contains attributes only.
Note: This element goes only in the head section, but it can appear any number of times.
Attributes
New : New in HTML5.
Attribute
Value
Description
charset
char_encoding
Not supported in HTML5
href
URL
Specifies the location of the linked document
hreflang
language_code
Specifies the language of the text in the linked document
media
media_query
Specifies on what device the linked document will be
displayed
rel
alternate
archives
author
bookmark
external
first
help
icon
last
licence
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up
Required. Specifies the relationship between the current
document and the linked document
reversed relationship
Not supported in HTML5
rev
sizes
New HeightxWidth
any
Specifies the size of the linked resource. Only for rel="icon"
target
_blank
_self
_top
_parent
frame_name
Not supported in HTML5
type
MIME_type
Specifies the MIME type of the linked document
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Global Attributes
The <link> tag also supports the Global Attributes in HTML5.
Event Attributes
The <link> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <link> href Attribute
HTML5 <link> tag
Example
Link to an external stylesheet:
<link rel="stylesheet" type="text/css" href="demo_link.css" />
Try it yourself
Browser Support
The href attribute is supported in all major browsers.
Definition and Usage
The href attribute specifies the location (URL) of the external resource (most often a style sheet file).
Differences Between HTML 4.01 and HTML5
None.
Syntax
<link href="URL" />
Attribute Values
Value
Description
URL
The location of the linked resource.
Possible values:
An absolute URL - points to another web site (like href="http://www.example.com/theme.css")
A relative URL - points to a file within a web site (like href="/themes/theme.css")
HTML5 <link> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <link> hreflang Attribute
HTML5 <link> tag
Example
Here, the hreflang attribute indicates that the linked document is in English:
<link href="tag_link.asp" rel="parent" rev="subsection" hreflang="en" />
Try it yourself
Browser Support
The hreflang attribute is supported in all major browsers.
Definition and Usage
The hreflang attribute specifies the language of the text in the linked document.
This attribute is only used if the href attribute is set.
Note: This attribute is purely advisory.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<link hreflang="language_code" />
Attribute Values
Value
Description
language_code
A two-letter language code that specifies the language of the linked document.
To view all available language codes, go to our Language code reference.
HTML5 <link> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <link> media Attribute
HTML5 <link> tag
Example
Two different style sheets for two different media types (screen and print):
<head>
<link rel="stylesheet" type="text/css" href="demo_media_screen.css"/>
<link rel="stylesheet" type="text/css" href="demo_media_print.css"
media="print" />
</head>
Try it yourself
Browser Support
The media attribute is supported in all major browsers.
Definition and Usage
The media attribute specifies what media/device the target resource is optimized for.
This attribute is mostly used with CSS stylesheets to specify different styles for different media types.
This attribute can accept several values.
Differences Between HTML 4.01 and HTML5
The media attribute now supports more values.
Syntax
<link media="value" />
Possible Operators
Value
Description
and
Specifies an AND operator
not
Specifies a NOT operator
Specifies an OR operator
Devices
Value
Description
all
Default. Suitable for all devices
aural
Speech synthesizers
braille
Braille feedback devices
handheld
Handheld devices (small screen, limited bandwidth)
projection
Projectors
Print preview mode/printed pages
screen
Computer screens
tty
Teletypes and similar media using a fixed-pitch character grid
tv
Television type devices (low resolution, limited scroll ability)
Values
Value
Description
width
Specifies the width of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-width:500px)"
height
Specifies the height of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-height:700px)"
device-width
Specifies the width of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-width:500px)"
device-height
Specifies the height of the target display/paper.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-height:500px)"
orientation
Specifies the orientation of the target display/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"
aspect-ratio
Specifies the width/height ratio of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio
Specifies the device-width/device-height ratio of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (aspect-ratio:16/9)"
color
Specifies the bits per color of target display.
"min-" and "max-" prefixes can be used.
Example: media="screen and (color:3)"
color-index
Specifies the number of colors the target display can handle.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color-index:256)"
monochrome
Specifies the bits per pixel in a monochrome frame buffer.
"min-" and "max-" prefixes can be used.
Example: media="screen and (monochrome:2)"
resolution
Specifies the pixel density (dpi or dpcm) of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="print and (resolution:300dpi)"
scan
Specifies scanning method of a tv display.
Possible values are "progressive" and "interlace".
Example: media="tv and (scan:interlace)"
grid
Specifies if the output device is grid or bitmap.
Possible values are "1" for grid, and "0" otherwise.
Example: media="handheld and (grid:1)"
HTML5 <link> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <link> rel Attribute
HTML5 <link> tag
Example
An external stylesheet:
<link rel="stylesheet" type="text/css" href="demo_link.css" />
Try it yourself
Browser Support
The rel attribute is supported in all major browsers.
Definition and Usage
The required rel attribute specifies the relationship between the current document and the linked
document/resource.
Differences Between HTML 4.01 and HTML5
Some values are removed, and some new values are added.
Syntax
<link rel="value" />
Attribute Values
Value
Description
alternate
Links to an alternate version of the document (i.e. print page, translated or
mirror)
author
Links to the author of the document
help
Links to a help document
icon
Imports an icon to represent the document
license
Links to copyright information for the document
next
Indicates that the document is a part of a series, and that the next document in
the series is the referenced document
prefetch
Specifies that the target resource should be cached
prev
Indicates that the document is a part of a series, and that the previous
document in the series is the referenced document
search
Links to a search tool for the document
stylesheet
URL to a style sheet to import
HTML5 <link> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <link> sizes Attribute
HTML5 <link> tag
Example
Icon with specified size:
<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />
Try it yourself
Browser Support
The sizes attribute is not currently supported in any of the major browsers.
Definition and Usage
The sizes attribute specifies the sizes of icons for visual media.
This attribute is only used if rel="icon".
Differences Between HTML 4.01 and HTML5
The sizes attribute is new in HTML5.
Syntax
<link sizes="HeightxWidth|any" />
Attribute Values
Value
Description
HeightxWidth
Specifies one or more sizes for the linked icon.
The height and width values are separated by an "x" or "X".
Examples:
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png" />
(1 size)
<link rel="icon" href="favicon.png" sizes="16x16 32x32"
type="image/png" /> (2 sizes)
any
Specifies that the icon is scalable (like an SVG image)
Examples:
<link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml">
(any size)
HTML5 <link> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <link> type Attribute
HTML5 <link> tag
Example
An external stylesheet:
<link rel="stylesheet" type="text/css" href="demo_link.css" />
Try it yourself
Browser Support
The type attribute is supported in all major browsers.
Definition and Usage
The type attribute specifies the MIME type of the linked document/resource.
This attribute is only used if the href attribute is set.
A very common MIME type for <link> is "text/css", which specifies a style sheet.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<link type="MIME_type" />
Attribute Values
Value
Description
MIME_type
The MIME type of the linked document.
Look at IANA MIME types for a complete list of standard MIME types
HTML5 <link> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <map> Tag
Example
An image-map, with clickable areas:
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
Try it yourself
Browser Support
The <map> tag is supported in all major browsers.
Definition and Usage
The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
The name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.
Differences Between HTML 4.01 and HTML5
Note: In HTML5, if the id attribute of the <map> tag is also specified, it must have the same value as the name attribute.
Attributes
Attribute
Value
Description
name
mapname
Required. Specifies the name of an image-map
Global Attributes
The <map> tag also supports the Global Attributes in HTML5.
Event Attributes
The <map> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <map> name Attribute
HTML5 <map> tag
Example
An image-map, with clickable areas:
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
Try it yourself
Browser Support
The name attribute is supported in all major browsers.
Definition and Usage
The required name attribute specifies the name of an image-map.
The name attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<map name="mapname">
Attribute Values
Value
Description
mapname
The name of the image-map
HTML5 <map> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <mark> Tag
Example
Highlight parts of a text:
<p>Do not forget to buy <mark>milk</mark> today.</p>
Try it yourself
Browser Support
The <mark> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <mark> tag.
Definition and Usage
The <mark> tag defines marked text.
Use the <mark> tag if you want to highlight parts of your text.
Differences Between HTML 4.01 and HTML5
The <mark> tag is new in HTML5.
Global Attributes
The <mark> tag also supports the Global Attributes in HTML5.
Event Attributes
The <mark> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <menu> Tag
Example
A toolbar with two menu buttons on it ("File" and "Edit"), each of which has a dropdown menu with
a series of options:
<menu type="toolbar">
<li>
<menu label="File">
<button type="button"
<button type="button"
<button type="button"
</menu>
</li>
<li>
<menu label="Edit">
<button type="button"
<button type="button"
<button type="button"
</menu>
</li>
</menu>
onclick="file_new()">New...</button>
onclick="file_open()">Open...</button>
onclick="file_save()">Save</button>
onclick="edit_cut()">Cut</button>
onclick="edit_copy()">Copy</button>
onclick="edit_paste()">Paste</button>
Try it yourself
Browser Support
The <menu> tag is not currently supported in any of the major browsers.
Definition and Usage
The <menu> tag defines a list/menu of commands.
The <menu> tag is used for context menus, toolbars and for listing form controls and commands.
Differences Between HTML 4.01 and HTML5
The <menu> element is deprecated in HTML 4.01.
The <menu> element is redefined in HTML5.
Tips and Notes
Tip: Use CSS to style menu lists.
Attributes
New : New in HTML5.
Attribute
Value
Description
label
New text
Specifies a visible label for the menu
type
New context
toolbar
list
Specifies which type of menu to display. Default value is
"list"
Global Attributes
The <menu> tag also supports the Global Attributes in HTML5.
Event Attributes
The <menu> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <menu> label Attribute
HTML5 <menu> tag
Example
A toolbar with two menu buttons on it ("File" and "Edit"), each of which has a dropdown menu with
a series of options:
<menu type="toolbar">
<li>
<menu label="File">
<button type="button"
<button type="button"
<button type="button"
</menu>
</li>
<li>
<menu label="Edit">
<button type="button"
<button type="button"
<button type="button"
</menu>
</li>
</menu>
onclick="file_new()">New...</button>
onclick="file_open()">Open...</button>
onclick="file_save()">Save</button>
onclick="edit_cut()">Cut</button>
onclick="edit_copy()">Copy</button>
onclick="edit_paste()">Paste</button>
Try it yourself
Browser Support
The label attribute is not currently supported in any of the major browsers.
Definition and Usage
The label attribute specifies a visible label for the menu.
The label attribute is often used to label nested menus within a menu.
Differences Between HTML 4.01 and HTML5
The <menu> element is redefined in HTML5, and the label attribute is new.
Syntax
<menu label="text">
Attribute Values
Value
Description
text
Specifies a visible label for the menu
HTML5 <menu> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <menu> type Attribute
HTML5 <menu> tag
Example
A toolbar with two menu buttons on it ("File" and "Edit"), each of which has a dropdown menu with
a series of options:
<menu type="toolbar">
<li>
<menu label="File">
<button type="button"
<button type="button"
<button type="button"
</menu>
</li>
<li>
<menu label="Edit">
<button type="button"
<button type="button"
<button type="button"
</menu>
</li>
</menu>
onclick="file_new()">New...</button>
onclick="file_open()">Open...</button>
onclick="file_save()">Save</button>
onclick="edit_cut()">Cut</button>
onclick="edit_copy()">Copy</button>
onclick="edit_paste()">Paste</button>
Try it yourself
Browser Support
The type attribute is not currently supported in any of the major browsers.
Definition and Usage
The type attribute specifies the type of menu.
Differences Between HTML 4.01 and HTML5
The <menu> element is redefined in HTML5, and the type attribute is new.
Syntax
<menu type="list|context|toolbar">
Attribute Values
Value
Description
list
Default. Specifies a list menu. A list of commands (li elements), that the user can perform or activate
context
Specifies a context menu. The menu must be activated before the user can interact with the commands
toolbar
Specifies a toolbar menu. Active commands, allows the user to interact with the commands immediately
HTML5 <menu> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meta> Tag
Example
Describe metadata:
<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Stle Refsnes" />
<meta charset="UTF-8" />
</head>
Try it yourself
Browser Support
The <meta> tag is supported in all major browsers.
Definition and Usage
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the
page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last
modified, and other metadata.
The <meta> tag always goes inside the head element.
The metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services.
Differences Between HTML 4.01 and HTML5
The scheme attribute is not supported in HTML5.
HTML5 has a new attribute, charset, which makes it easier to define charset:
HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8">
Tips and Notes
Note: The <meta> tag always goes inside the head element.
Note: Metadata is always passed as name/value pairs.
Note: The content attribute MUST be defined if the name or the http-equiv attribute is defined. if none
of these are defined, the content attribute CANNOT be defined.
Examples
Example 1 - Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
Example 2 - Define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML and CSS" />
Example 3 - Define the author of a page:
<meta name="author" content="Hege Refsnes" />
Example 4 - Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30" />
Attributes
New : New in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Attribute
charset
Value
New character_set
Description
Specifies the character encoding for the HTML document
content
text
Gives the value associated with the http-equiv or name
attribute
http-equiv
content-type
default-style
refresh
Provides an HTTP header for the information/value of the
content attribute
name
application-name
author
description
generator
keywords
Specifies a name for the metadata
scheme
format/URI
Not supported in HTML5
Global Attributes
The <meta> tag also supports the Global Attributes in HTML
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meta> charset Attribute
HTML5 <meta> tag
Example
Specify the characer encoding for the HTML document:
<head>
<meta charset="UTF-8" />
</head>
Try it yourself
Browser Support
The charset attribute is supported in all major browsers.
Definition and Usage
The charset attribute specifies the character encoding for the HTML document.
Tip: The charset attribute can be locally overridden using the lang attribute on any element.
Differences Between HTML 4.01 and HTML5
The charset attribute is new in HTML5, and replaces the need for: <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
Specifying the character-set using the http-equiv attribute is still allowed, but the new way requires
less code.
Syntax
<meta charset="character_set" />
Attribute Values
Value
Description
character_set
Specifies the character encoding for the HTML document.
Common values:
UTF-8 - Character encoding for Unicode
ISO-8859-1 - Character encoding for the Latin alphabet
In theory, any character encoding can be used, but no browser understands all of
them. The more widely a character encoding is used, the better the chance that
a browser will understand it.
To view all available character encodings, look at IANA character sets.
HTML5 <meta> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meta> content Attribute
HTML5 <meta> tag
Example
Describe metadata within an HTML document:
<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
</head>
Try it yourself
Browser Support
The content attribute is supported in all major browsers.
Definition and Usage
The content attribute gives the value associated with the http-equiv or name attribute.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<meta content="text" />
Attribute Values
Value
Description
text
The content of the meta information
HTML5 <meta> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meta> http-equiv Attribute
HTML5 <meta> tag
Example
Refresh document every 30 seconds:
<head>
<meta http-equiv="refresh" content="30" />
</head>
Try it yourself
Browser Support
The http-equiv attribute is supported in all major browsers.
Definition and Usage
The http-equiv attribute provides an HTTP header for the information/value of the content attribute.
The http-equiv attribute can be used to simulate an HTTP response header.
Differences Between HTML 4.01 and HTML5
Using http-equiv is no longer the only way to specify the character set of an HTML document:
HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8">
Syntax
<meta http-equiv="content-type|default-style|refresh" />
Attribute Values
Value
Description
content-type
Specifies the character encoding for the document.
Example:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
default-style
Specified the preferred style sheet to use.
Example:
<meta http-equiv="default-style" content="id_of_link_element" />
refresh
Defines a time interval for the document to refresh itself.
Example:
<meta http-equiv="refresh" content="300" />
Note: The value "refresh" should be used carefully, as it takes the control of a
page away from the user. Using "refresh" will cause a failure in W3C's Web
Content Accessibility Guidelines.
HTML5 <meta> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meta> name Attribute
HTML5 <meta> tag
Example
Use the name attribute to define a description, keywords, and the author of an HTML document:
<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML5,CSS,JavaScript" />
<meta name="author" content="Hege Refsnes" />
</head>
Try it yourself
Browser Support
The name attribute is supported in all major browsers.
Definition and Usage
The name attribute specifies the name for the metadata.
The name attribute specifies a name for the information/value of the content attribute.
Note: If the http-equiv attribute is set, the name attribute should not be set.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<meta name="value" />
Attribute Values
Value
Description
application-name
Specifies the name of the Web application that the page represents
author
Specifies the name of the author of the document.
Example: <meta name="author" content="Hege Refsnes" />
description
Specifies a description of the page. Search engines can pick up this description to
show with the results of searches.
Example: <meta name="description" content="Free web tutorials" />
generator
Specifies one of the software packages used to generate the document (not used
on hand-authored pages)
Example: <meta name="generator" content="FrontPage 4.0" />
keywords
Specifies a comma-separated list of keywords - relevant to the page (Informs
search engines what the page is about).
Tip: Always specify keywords (needed by search engines to catalogize the page).
Example: <meta name="keywords" content="HTML5, meta tag, tag reference"
/>
HTML5 <meta> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meter> Tag
Example
Use the meter element to measure data within a given range (a gauge):
<meter value="2" min="0" max="10">2 out of 10</meter><br />
<meter value="0.6">60%</meter>
Try it yourself
Browser Support
The <meter> tag is currently supported in Opera and Chrome.
Definition and Usage
The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
Examples: Disk usage, the relevance of a query result, etc.
Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.
Differences Between HTML 4.01 and HTML5
The <meter> tag is new in HTML5
Attributes
New : New in HTML5.
Attribute
Value
Description
form
New form_id
Specifies one or more forms the <meter> element belongs to
high
New number
Specifies the range that is considered to be a high value
low
New number
Specifies the range that is considered to be a low value
max
New number
Specifies the maximum value of the range
min
New number
Specifies the minimum value of the range
optimum
New number
Specifies what value is the optimal value for the gauge
value
New number
Required. Specifies the current value of the gauge
Global Attributes
The <meter> tag also supports the Global Attributes in HTML5.
Event Attributes
The <meter> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meter> form Attribute
HTML5 <meter> tag
Example
A <meter> element located outside a form (but still a part of the form):
<form action="demo_form.asp" method="get" id="form1">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="Submit" />
</form>
<meter form="form1" name="x1" min="0" low="40" high="90"
max="100" value="95"></meter>
Try it yourself
Browser Support
The form attribute is not supported in any of the major browsers.
Definition and Usage
The form attribute specifies one or more forms the <meter> element belongs to.
Differences Between HTML 4.01 and HTML5
The <meter> tag is new in HTML5.
Syntax
<meter form="form_id">
Attribute Values
Value
Description
form_id
Specifies a space-separated list of id's to one or more forms the meter element
belongs to
HTML5 <meter> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meter> high Attribute
HTML5 <meter> tag
Example
A gauge with a current value and min, max, high, and low segments:
<meter min="0" low="40" high="90" max="100" value="95"></meter>
Try it yourself
Browser Support
The high attribute is currently supported in Opera and Chrome.
Definition and Usage
The high attribute specifies the range where the gauge's value is considered to be a high value.
The high attribute value must be less than the max attribute value, and it also must be greater than
the low and min attribute values.
Differences Between HTML 4.01 and HTML5
The <meter> tag is new in HTML5.
Syntax
<meter high="number">
Attribute Values
Value
Description
number
Specifies a floating point number that is considered to be a high value
HTML5 <meter> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meter> low Attribute
HTML5 <meter> tag
Example
A gauge with a current value and min, max, high, and low segments:
<meter min="0" low="40" high="90" max="100" value="95"></meter>
Try it yourself
Browser Support
The low attribute is currently supported in Opera and Chrome.
Definition and Usage
The low attribute specifies the range where the gauge's value is considered to be a low value.
The low attribute value must be greater than the min attribute value, and it also must be less than the high and max attribute values.
Differences Between HTML 4.01 and HTML5
The <meter> tag is new in HTML5.
Syntax
<meter low="number">
Attribute Values
Value
Description
number
Specifies a floating point number that is considered to be a high value
HTML5 <meter> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meter> max Attribute
HTML5 <meter> tag
Example
A gauge with a current value and min, max, high, and low segments:
<meter min="0" low="40" high="90" max="100" value="95"></meter>
Try it yourself
Browser Support
The max attribute is currently supported in Opera and Chrome.
Definition and Usage
The max attribute specifies the upper bound of the gauge.
The max attribute value must be greater than the min attribute value.
If unspecified, the default value is 1.
Tip: The max attribute, together with the min attribute, specifies the full range of the gauge.
Differences Between HTML 4.01 and HTML5
The <meter> tag is new in HTML5.
Syntax
<meter max="number">
Attribute Values
Value
Description
number
Specifies a floating point number that is the maximum value of the gauge.
Default value is "1"
HTML5 <meter> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meter> min Attribute
HTML5 <meter> tag
Example
A gauge with a current value and min, max, high, and low segments:
<meter min="0" low="40" high="90" max="100" value="95"></meter>
Try it yourself
Browser Support
The min attribute is currently supported in Opera and Chrome.
Definition and Usage
The min attribute specifies the lower bound of the gauge.
The min attribute value must be less than the max attribute value.
If unspecified, the default value is 0.
Tip: The min attribute, together with the max attribute, specifies the full range of the gauge.
Differences Between HTML 4.01 and HTML5
The <meter> tag is new in HTML5.
Syntax
<meter min="number">
Attribute Values
Value
Description
number
Specifies a floating point number that is the minimum value of the gauge.
Default value is "0"
HTML5 <meter> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meter> optimum Attribute
HTML5 <meter> tag
Example
A gauge with an optimal value of 0.5:
<meter value="0.3" high="0.9" low="0.1" optimum="0.5"></meter>
Try it yourself
Browser Support
The optimum attribute is currently supported in Opera and Chrome.
Definition and Usage
The optimum attribute specifies the range where the gauge's value is considered to be an optimal
value.
Differences Between HTML 4.01 and HTML5
The <meter> tag is new in HTML5.
Syntax
<meter optimum="number">
Attribute Values
Value
Description
number
Specifies a floating point number that is the optimal value of the gauge
HTML5 <meter> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <meter> value Attribute
HTML5 <meter> tag
Example
A gauge with a current value and min, max, high, and low segments:
<meter min="0" low="40" high="90" max="100" value="95"></meter>
Try it yourself
Browser Support
The value attribute is currently supported in Opera and Chrome.
Definition and Usage
The required value attribute specifies the current, or "measured", value of the gauge.
The value attribute must be between the min and max attribute values.
Differences Between HTML 4.01 and HTML5
The <meter> tag is new in HTML5.
Syntax
<meter value="number">
Attribute Values
Value
Description
number
Required. Specifies a floating point number that is the current value of the gauge
HTML5 <meter> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <nav> Tag
Example
A section of navigation links:
<nav>
<a href="/html/">HTML</a> |
<a href="/html5/">HTML5</a> |
<a href="/css/">CSS</a> |
<a href="/css3/">CSS3</a> |
<a href="/js/">JavaScript</a>
</nav>
Try it yourself
Browser Support
The <nav> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <nav> tag.
Definition and Usage
The <nav> tag defines a section of navigation links.
Not all links of a document must be in a <nav> element. The <nav> element is intended only for major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
Differences Between HTML 4.01 and HTML5
The <nav> tag is new in HTML5.
Global Attributes
The <nav> tag also supports the Global Attributes in HTML5.
Event Attributes
The <nav> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <noframes> Tag. Not Supported in HTML5.
Definition and Usage
The <noframes> tag is not supported in HTML5.
The <noframes> tag was used to display text for browsers that do not handle frames.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <noscript> Tag
Example
Use of the <noscript> tag:
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
Try it yourself
Browser Support
The <noscript> tag is supported in all major browsers.
Definition and Usage
The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their
browser or have a browser that doesnt support client-side scripting.
The <noscript> element can contain all the elements that you can find inside the body element of a
normal HTML page.
The content inside the <noscript> element will only be displayed if scripts are not supported, or are
disabled in the users browser.
Tips and Notes
Tip: It is also a good practice to use the comment tag to "hide" scripts from browsers without support
for client-side scripts (so they don't show them as plain text):
<script type="text/javascript">
<!-function displayMsg()
{
alert("Hello World!")
}
//-->
</script>
Differences Between HTML 4.01 and HTML5
None
Global Attributes and Events
The <noscript> tag also supports the Global Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <object> Tag
Example
How to use the <object> element to embed a Flash file:
<object width="400" height="400" data="helloworld.swf"></object>
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
Try it yourself
$3.98 Unlimited Hosting
Browser Support
Premium Website Design
WEB BUILDING
Download XML Editor
FREE Website BUILDER
The <object> tag is supported in all major browsers.
Build a FREE Website
Definition and Usage
W3SCHOOLS EXAMS
The <object> tag defines an embedded object within an HTML document. Use this element to embed
multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
Get Certified in:
HTML, CSS, JavaScript,
XML, PHP, and ASP
You can also use the <object> tag to embed another webpage into your HTML document.
W3SCHOOLS BOOKS
You can use the <param> tag to pass parameters to plugins that have been embedded with the <object> tag.
New Books:
HTML, CSS
JavaScript, and Ajax
Differences Between HTML 4.01 and HTML5
Some HTML 4.01 attributes are not supported in HTML5.
The "form" attribute is new in HTML5.
Objects can be used and submitted in forms.
Objects can no longer appear inside the <head> element of a document.
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE
Share with
Tips and Notes
Note: An <object> element must appear inside the <body> element. The text between the <object> and
</object> is an alternate text, for browsers that do not support this tag.
Tip: For images use the <img> tag instead of the <object> tag.
Tip: At least one of the "data" or "type" attribute MUST be defined.
Attributes
: New in HTML5.
New
Attribute
Value
Description
align
left
right
top
bottom
Not supported in HTML5
archive
URL
Not supported in HTML5
border
pixels
Not supported in HTML5
classid
class_ID
Not supported in HTML5
codebase
URL
Not supported in HTML5
codetype
MIME_type
Not supported in HTML5
data
URL
Specifies the URL of the resource to be used by the object
declare
declare
Not supported in HTML5
form
New form_id
Specifies one or more forms the object belongs to
height
pixels
Specifies the height of the object
hspace
pixels
Not supported in HTML5
name
name
Specifies a name for the object
standby
text
Not supported in HTML5
type
MIME_type
Specifies the MIME type of data specified in the data attribute
usemap
#mapname
Specifies the name of a client-side image map to be used with
the object
vspace
pixels
Not supported in HTML5
width
pixels
Specifies the width of the object
Global Attributes
The <object> tag also supports the Global Attributes in HTML5.
Event Attributes
The <object> tag also supports the Event Attributes in HTML5.
REPORT
W3Schools is optimized for learning, testing, and training. Examples might be simplifi
Content Downloaded from www.w3schools.com
ERROR
HOME
TOP
FORUM
ABOUT
Created By www.ebooktutorials.blogspot.in
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <object> data Attribute
HTML5 <object> tag
Example
How to use the <object> element to embed a Flash file:
<object width="400" height="400" data="helloworld.swf"></object>
Try it yourself
Browser Support
The data attribute is supported in all major browsers.
Definition and Usage
The data attribute specifies the URL of the resource to be used by the object.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<object data="URL">
Attribute Values
Value
Description
URL
Specifies the URL of the resource to be used by the object.
Possible values:
An absolute URL - points to data on another web site (like
href="http://www.example.com/helloworld.swg")
A relative URL - points to data within a web site (like
href="helloworld.swg")
HTML5 <object> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <object> form Attribute
HTML5 <object> tag
Example
An <object> element located outside a form (but still a part of the form):
<form action="demo_form.asp" method="get" id="form1">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="Submit" />
</form>
<object data="helloworld.swf" height="400" width="400" form="form1"
name="obj1"></object>
Try it yourself
Browser Support
The form attribute is not supported in any of the major browsers.
Definition and Usage
The form attribute specifies one or more forms the <object> element belongs to.
Differences Between HTML 4.01 and HTML5
The form attribute is new in HTML5.
Syntax
<object form="form_id">
Attribute Values
Value
Description
form_id
Specifies a space-separated list of id's to one or more forms the <object>
element belongs to
HTML5 <object> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <object> height Attribute
HTML5 <object> tag
Example
A flash animation with a height and width of 400 pixels::
<object data="helloworld.swf" height="400" width="400"></object>
Try it yourself
Browser Support
The height attribute is supported in all major browsers.
Definition and Usage
The height attribute specifies the height of the object, in pixels.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<object height="pixels">
Attribute Values
Value
Description
pixels
The height of the object, in pixels (i.e. height="100")
HTML5 <object> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <object> name Attribute
HTML5 <object> tag
Example
An <object> element with a name attribute:
<object data="helloworld.swf" width="400" height="400"
name="obj1"></object>
Try it yourself
Browser Support
The name attribute is supported in all major browsers.
Definition and Usage
The name attribute specifies the name of an <object> element.
The name attribute is used for referencing an <object> element in JavaScript (an alternative, is to
reference it by using its id attribute).
Differences Between HTML 4.01 and HTML5
None.
Syntax
<object name="name" />
Attribute Values
Value
Description
name
The name of the <object> element
HTML5 <object> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <object> type Attribute
HTML5 <object> tag
Example
An <object> element with a specified MIME type:
<object width="400" height="400" data="helloworld.swf" type="application/xshockwave-flash"></object>
Try it yourself
Browser Support
The type attribute is supported in all major browsers.
Definition and Usage
The type attribute specifies the MIME type of the object.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<object type="MIME_type">
Attribute Values
Value
Description
MIME_type
The MIME type of the embedded content.
Look at IANA MIME types for a complete list of standard MIME types.
HTML5 <object> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <object> usemap Attribute
HTML5 <object> tag
Example
An <object> element using an image map:
<object data="planets.gif" width="145" height="126"
usemap="#planetmap"></object>
Try it yourself
Browser Support
The usemap attribute is supported in all major browsers, except Chrome and Safari.
Definition and Usage
The usemap attribute specifies the name of an image-map to use with the object.
An image-map is an image with clickable areas.
The usemap attribute is associated with a <map> element's name attribute, and creates a relationship
between the object and the map.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<object usemap="#mapname">
Attribute Values
Value
Description
#mapname
A hash character ("#") plus the name of the map element to use
HTML5 <object> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <object> width Attribute
HTML5 <object> tag
Example
A flash animation with a height and width of 400 pixels::
<object data="helloworld.swf" width="400" height="400"></object>
Try it yourself
Browser Support
The width attribute is supported in all major browsers.
Definition and Usage
The width attribute specifies the width of the object, in pixels.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<object width="pixels">
Attribute Values
Value
Description
pixels
The width of the object, in pixels (i.e. width="100")
HTML5 <object> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <ol> Tag
Example
3 different ordered lists:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol reversed="reversed">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it yourself
Browser Support
The <ol> tag is supported in all major browsers.
Definition and Usage
The <ol> tag defines an ordered list.
Use the <li> tag to define list items.
Differences Between HTML 4.01 and HTML5
The "start" and "type" attributes were deprecated in HTML 4.01, but IS supported in HTML5.
The "reversed" attribute is new in HTML5.
The "compact" attribute was deprecated in HTML 4.01, and is not supported in HTML5.
Tips and Notes
Tip: For unordered list, use the <ul> tag.
Tip: Use CSS to style lists.
Attributes
New : New in HTML5.
Attribute
reversed
Value
New reversed
Description
Specifies that the list order should be descending (9,8,7...)
start
number
Specifies the start value of an ordered list
type
1
A
a
I
i
Specifies the kind of marker to use in the list
Global Attributes
The <ol> tag also supports the Global Attributes in HTML5.
Event Attributes
The <ol> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <ol> reversed Attribute
HTML5 <ol> tag
Example
Descending list order:
<ol reversed="reversed">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it yourself
Browser Support
The reversed attribute is currently supported only in Chrome.
Definition and Usage
The reversed attribute is a boolean attribute.
When present, it specifies that the list order should be descending (9,8,7...), instead of ascending (1,
2, 3...).
Differences Between HTML 4.01 and HTML5
The reversed attribute is new in HTML5.
Syntax
<ol reversed="reversed">
Note: The reversed attribute is a boolean attribute, and can be set in the following ways:
<ol reversed>
<ol reversed="reversed">
<ol reversed="">
HTML5 <ol> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <ol> start Attribute
HTML5 <ol> tag
Example
An ordered list starting at "50":
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it yourself
Browser Support
The start attribute is supported in all major browsers.
Definition and Usage
The start attribute specifies the start value of the first list item in an ordered list.
Differences Between HTML 4.01 and HTML5
The start attribute of the <ol> element is no longer deprecated in HTML5.
Syntax
<ol start="number">
Attribute Values
Value
Description
number
Specifies the start value of the first list item in the ordered list
HTML5 <ol> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <ol> type Attribute
HTML5 <ol> tag
Example
An ordered list with uppercase roman numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it yourself
Browser Support
The type attribute is supported in all major browsers.
Definition and Usage
The type attribute specifies the kind of marker to use in the list (letters or numbers).
Differences Between HTML 4.01 and HTML5
The type attribute was deprecated in HTML 4.01 Strict / XHTML 1.0 Strict DTD.
Syntax
<ol type="1|a|A|i|I">
Attribute Values
Value
Description
Decimal numbers (this is default) (1, 2, 3, 4)
Alphabetically ordered list, lowercase (a, b, c, d)
Alphabetically ordered list, uppercase (A, B, C, D)
Roman numbers, lowercase (i, ii, iii, iv)
Roman numbers, uppercase (I, II, III, IV)
HTML5 <ol> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <optgroup> Tag
Example
Group related options with <optgroup> tags:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="vw">VW</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Try it yourself
Browser Support
The <optgroup> tag is supported in all major browsers.
Definition and Usage
The <optgroup> is used to group related options in a drop-down list.
If you have a long list of options, groups of related options are easier to handle for a user.
Differences Between HTML 4.01 and HTML5
NONE
Attributes
Attribute
Value
Description
label
text
Specifies a label for an option-group
disabled
disabled
Specifies that an option-group should be disabled
Global Attributes
The <optgroup> tag also supports the Global Attributes in HTML5.
Event Attributes
The <optgroup> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <optgroup> label Attribute
HTML5 <optgroup> tag
Example
Two option groups with labels:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="vw">VW</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Try it yourself
Browser Support
The label attribute is supported in all major browsers.
Definition and Usage
The label attribute specifies a label for an option-group.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<optgroup label="text">
Attribute Values
Value
Description
text
Specifies a label/description for the option-group
HTML5 <optgroup> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <optgroup> disabled Attribute
HTML5 <optgroup> tag
Example
A disabled option-group:
<optgroup disabled="disabled" label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
Try it yourself
Browser Support
The disabled attribute is supported in all major browsers.
Definition and Usage
The disabled attribute is a boolean attribute.
When present, it specifies that an option-group should be disabled.
A disabled option-group is unusable and un-clickable.
The disabled attribute can be set to keep a user from selecting the option-group until some other
condition has been met (like selecting a checkbox, etc.). Then, a JavaScript is required to remove the
disabled value, and make the option-group selectable.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<optgroup disabled="disabled">
Note: The disabled attribute is a boolean attribute, and can be set in the following ways:
<optgroup disabled>
<optgroup disabled="disabled">
<optgroup disabled="">
HTML5 <optgroup> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <option> disabled Attribute
HTML5 <option> tag
Example
A drop-down list with one disabled option:
<select>
<option
<option
<option
<option
</select>
disabled="disabled" value="volvo">Volvo</option>
value="saab">Saab</option>
value="vw">VW</option>
value="audi">Audi</option>
Try it yourself
Browser Support
The disabled attribute is supported in all major browsers.
Definition and Usage
The disabled attribute is a boolean attribute.
When present, it specifies that an option should be disabled.
A disabled option is unusable and un-clickable.
The disabled attribute can be set to keep a user from selecting the option until some other condition
has been met (like selecting a checkbox, etc.). Then, a JavaScript is required to remove the disabled
value, and make the option selectable.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<option disabled="disabled">
Note: The disabled attribute is a boolean attribute, and can be set in the following ways:
<option disabled>
<option disabled="disabled">
<option disabled="">
HTML5 <option> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <option> label Attribute
HTML5 <option> tag
Example
Use of the label attribute in <option> elements:
<select>
<option
<option
<option
<option
</select>
label="Volvo">Volvo (Latin for "I roll")</option>
label="Saab">Saab (Swedish Aeroplane AB)</option>
label="Mercedes">Mercedes (Mercedes-Benz)</option>
label="Audi">Audi (Auto Union Deutschland Ingolstadt)</option>
Try it yourself
Browser Support
The label attribute is supported in all major browsers.
Definition and Usage
The label attribute specifies a shorter version of an option.
The shorter version will be displayed in the drop-down list.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<option label="text">
Attribute Values
Value
Description
text
A label for the option
HTML5 <option> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <option> selected Attribute
HTML5 <option> tag
Example
A drop-down list with a pre-selected option:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option selected="selected" value="audi">Audi</option>
</select>
Try it yourself
Browser Support
The selected attribute is supported in all major browsers.
Definition and Usage
The selected attribute is a boolean attribute.
When present, it specifies that an option should be pre-selected when the page loads.
The pre-selected option will be displayed first in the drop-down list.
Tip: The selected attribute can also be set after the page loads, with a JavaScript.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<option selected="selected">
Note: The selected attribute is a boolean attribute, and can be set in the following ways:
<option selected>
<option selected="selected">
<option selected="">
HTML5 <option> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <option> value Attribute
HTML5 <option> tag
Example
A drop-down list inside an HTML form:
<form action="demo_form.asp">
<select name="cars">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<input type="submit" value="Submit" />
</form>
Try it yourself
Browser Support
The value attribute is supported in all major browsers.
Definition and Usage
The value attribute specifies the value to be sent to a server when a form is submitted.
The content between the opening <option> and closing </option> tags is what the browsers will
display in a drop-down list. However, the value of the value attribute is what will be sent to the server
when a form is submitted.
Note: If the value attribute is not specified, the content will be passed as a value instead.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<option value="value">
Attribute Values
Value
Description
value
The value to be sent to the server
HTML5 <option> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <output> Tag
Example
Perform a calculation and show the result in an <output> element:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>
Try it yourself
Browser Support
The <output> tag is supported in all major browsers, except Internet Explorer.
Definition and Usage
The <output> tag represents the result of a calculation (like one performed by a script).
Differences Between HTML 4.01 and HTML5
The <output> tag is new in HTML5.
Attributes
New : New in HTML5.
Attribute
Value
Description
for
New element_id
Specifies the relationship between the result of the calculation,
and the elements used in the calculation
form
New form_id
Specifies one or more forms the output element belongs to
name
New name
Specifies a name for the output element
Global Attributes
The <output> tag also supports the Global Attributes in HTML5.
Event Attributes
The <output> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <p> Tag
Example
A paragraph:
<p>This is some text in a paragraph.</p>
Try it yourself
Browser Support
The <p> tag is supported in all major browsers.
Definition and Usage
The <p> tag defines a paragraph.
Browsers automatically add some space (margin) before and after each <p> element. The margins can
be modified with CSS (with the margin properties).
Differences Between HTML 4.01 and HTML5
The align attribute, which was deprecated in HTML 4.01, is no longer supported in HTML5.
Global Attributes
The <p> tag also supports the Global Attributes in HTML5.
Event Attributes
The <p> tag also supports the Event Attributes in HTML5
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <param> Tag
Example
Set the "autoplay" parameter to "false", so the sound won't start playing as soon as the page loads:
<object data="horse.wav">
<param name="autoplay" value="false">
</object>
Try it yourself
Browser Support
The <param> tag is supported in all major browsers. However, the file format defined in <object> may not be supported in all browsers.
Definition and Usage
The <param> tag is used to define parameters for plugins embedded with an <object> element.
Tip: HTML 5 also includes two new elements for playing audio or video: The <audio> and <video> tags.
Differences Between HTML 4.01 and HTML5
HTML 4.01 attributes "type" and "valuetype" are not supported in HTML5.
Attributes
Attribute
Value
Description
name
name
Specifies the name of the parameter
type
MIME_type
Not supported in HTML5.
value
value
Specifies the value of the parameter
valuetype
data
ref
object
Not supported in HTML5.
Global Attributes
The <param> tag also supports the Global Attributes in HTML5.
Event Attributes
The <param> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <param> name Attribute
HTML5 <param> tag
Example
Set the "autoplay" parameter to "false", so the sound won't start playing as soon as the page loads:
<object data="horse.wav">
<param name="autoplay" value="false">
</object>
Try it yourself
Browser Support
The name attribute is supported in all major browsers. However, the file format defined in <object>
may not be supported in all browsers.
Definition and Usage
The name attribute specifies the name of a <param> element.
This attribute is used together with the value attribute to specify parameters for the plugin specified
with the <object> tag.
The name attribute value can be any name supported by the specified object.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<param name="name" />
Attribute Values
Value
Description
name
The name of the parameter
HTML5 <param> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <param> value Attribute
HTML5 <param> tag
Example
Set the "autoplay" parameter to "false", so the sound won't start playing as soon as the page loads:
<object data="horse.wav">
<param name="autoplay" value="false">
</object>
Try it yourself
Browser Support
The value attribute is supported in all major browsers. However, the file format defined in <object>
may not be supported in all browsers.
Definition and Usage
The value attribute specifies the value of a <param> element.
This attribute is used together with the name attribute to specify parameters for the plugin specified
with the <object> tag.
The value can be any value supported by the specified object.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<param value="value" />
Attribute Values
Value
Description
value
The value of the parameter
HTML5 <param> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <pre> Tag
Example
Preformatted text:
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
Try it yourself
Browser Support
The <pre> tag is supported in all major browsers.
Definition and Usage
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both
spaces and line breaks.
Differences Between HTML 4.01 and HTML5
The "width" attribute was deprecated in HTML 4.01, and is not supported in HTML5.
Tips and Notes
Tip: Use the <pre> element when displaying text with unusual formatting, or some sort of computer
code.
Global Attributes
The <pre> tag also supports the Global Attributes in HTML5.
Event Attributes
The <pre> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <progress> Tag
Example
Downloading in progress:
<progress value="22" max="100"></progress>
Try it yourself
Browser Support
The <progress> tag is currently supported in Firefox, Opera, and Chrome.
Definition and Usage
The <progress> tag represents the progress of a task.
Differences Between HTML 4.01 and HTML5
The <progress> tag is new in HTML5.
Tips and Notes
Tip: Use the <progress> tag in conjunction with JavaScript to display the progress of a task.
Note: The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance
of a query result). To represent a gauge, use the <meter> tag instead.
Attributes
New : New in HTML5.
Attribute
Value
Description
max
New number
Specifies how much work the task requires in total
value
New number
Specifies how much of the task has been completed
Global Attributes
The <progress> tag also supports the Global Attributes in HTML5.
Event Attributes
The <progress> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <progress> max Attribute
HTML5 <progress> tag
Example
Downloading in progress:
<progress value="22" max="100"></progress>
Try it yourself
Browser Support
The max attribute is currently supported in Firefox, Opera, and Chrome.
Definition and Usage
The max attribute specifies how much work the task requires in total.
Differences Between HTML 4.01 and HTML5
The <progress> tag is new in HTML5.
Syntax
<progress max="number">
Attribute Values
Value
Description
number
A floating point number that specifies how much work the task requires in total
HTML5 <progress> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <progress> value Attribute
HTML5 <progress> tag
Example
Downloading in progress:
<progress value="22" max="100"></progress>
Try it yourself
Browser Support
The value attribute is currently supported in Firefox, Opera, and Chrome.
Definition and Usage
The value attribute specifies how much of the task has been completed.
Differences Between HTML 4.01 and HTML5
The <progress> tag is new in HTML5.
Syntax
<progress value="number">
Attribute Values
Value
Description
number
A floating point number that specifies how much of the task has been completed
HTML5 <progress> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <q> Tag
Example
Mark up a short quotation:
<p>WWF's goal is to:
<q>build a future where people live in harmony with nature</q>.
We hope they succeed.</p>
Try it yourself
Browser Support
The <q> tag is supported in all major browsers.
Definition and Usage
The <q> tag defines a short quotation.
Browsers often insert quotation marks around the quotation.
Differences Between HTML 4.01 and HTML5
NONE
Tips and Notes
Tip: Use <blockquote> to mark up long quotations.
Attributes
Attribute
Value
Description
cite
URL
Specifies the source URL of the quote
Global Attributes
The <q> tag also supports the Global Attributes in HTML5.
Event Attributes
The <q> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <rp> Tag
Example
A ruby annotation:
<ruby>
? <rt><rp>(</rp>??`<rp>)</rp></rt>
</ruby>
Try it yourself
Browser Support
The <rp> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <rp> tag.
Definition and Usage
The <rp> tag defines what to show if a browser does NOT support ruby annotations.
Ruby annotations are used for East Asian typography, to show the pronunciation of East Asian
characters.
Use the <rp> tag together with the <ruby> and the <rt> tags: The <ruby> element consists of one or
more characters that needs an explanation/pronunciation, and an <rt> element that gives that
information, and an optional <rp> element that defines what to show for browsers that not support
ruby annotations.
Differences Between HTML 4.01 and HTML5
The <rp> tag is new in HTML5.
Global Attributes
The <rp> tag also supports the Global Attributes in HTML5.
Event Attributes
The <rp> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <rt> Tag
Example
A ruby annotation:
<ruby>
? <rt> ??` </rt>
</ruby>
Try it yourself
Browser Support
The <rt> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <rt> tag.
Definition and Usage
The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.
Use the <rt> tag together with the <ruby> and the <rp> tags: The <ruby> element consists of one or more characters that needs an
explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not
support ruby annotations.
Differences Between HTML 4.01 and HTML5
The <rt> tag is new in HTML5.
Global Attributes
The <rt> tag also supports the Global Attributes in HTML5.
Event Attributes
The <rt> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <ruby> Tag
Example
A ruby annotation:
<ruby>
? <rt> ??` </rt>
</ruby>
Try it yourself
Browser Support
The <ruby> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <ruby> tag.
Definition and Usage
The <ruby> tag specifies a ruby annotation.
Ruby annotations are used for East Asian typography, to show the pronunciation of East Asian
characters.
Use the <ruby> tag together with the <rt> and/or the <rp> tags: The <ruby> element consists of one
or more characters that needs an explanation/pronunciation, and an <rt> element that gives that
information, and an optional <rp> element that defines what to show for browsers that not support
ruby annotations.
Differences Between HTML 4.01 and HTML5
The <ruby> tag is new in HTML5.
Global Attributes
The <ruby> tag also supports the Global Attributes in HTML5.
Event Attributes
The <ruby> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <s> Tag
Example
Mark up text that is no longer correct:
<p><s>My car is blue.</s></p>
<p>My new car is silver.</p>
Try it yourself
Browser Support
The <s> tag is supported in all major browsers.
Definition and Usage
The <s> tag specifies text that is no longer correct, accurate or relevant.
The <s> tag should not be used to define replaced or deleted text, use the <del> tag to define replaced or deleted text.
Differences Between HTML 4.01 and HTML5
The <s> element is deprecated in HTML 4.01, and used to define strikethrough text.
The <s> element is redefined in HTML5, and is now used to define text that is no longer correct.
Global Attributes
The <s> tag also supports the Global Attributes in HTML5.
Event Attributes
The <s> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <em> <strong> <dfn> <code> <samp> <kbd> <var> Tags
Example
Format text in a document:
<em>Emphasized text</em>
<strong>Strong text</strong>
<dfn>Definition term</dfn>
<code>Computer code</code>
<samp>Sample output from computer program</samp>
<kbd>Keyboard input</kbd>
<var>Variable</var>
Try it yourself
Browser Support
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are supported in all major browsers.
Definition and Usage
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are all phrase tags. They are not deprecated, but it is possible to achieve richer
effect with CSS.
Tag
Description
<em>
Renders as emphasized text
<strong>
Defines important text
<dfn>
Definesa definition term
<code>
Defines a piece of computer code
<samp>
Defines sample output from a computer program
<kbd>
Defines keyboard input
<var>
Defines a variable
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important text.
Global Attributes
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags also supports the Global Attributes in HTML5.
Event Attributes
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <script> Tag
Example
Write "Hello world" with JavaScript:
<script type="text/javascript">
document.write("Hello World!")
</script>
Try it yourself
Browser Support
The <script> tag is supported in all major browsers.
Definition and Usage
The <script> tag is used to define a client-side script, such as a JavaScript.
The <script> element either contains scripting statements or it points to an external script file through
the "src" attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
Differences Between HTML 4.01 and HTML5
The "type" attribute is required in HTML 4, but optional in HTML5.
The "async" attribute is new in HTML5.
Some HTML 4.01 attributes are not supported in HTML5.
Tips and Notes
Note: If the "src" attribute is present, the <script> element must be empty.
Note: There are several ways an external script can be executed:
If async="async": The script is executed asynchronously with the rest of the page (the script will
be executed while the page continues the parsing)
If async is not present and defer="defer": The script is executed when the page has finished
parsing
If neither async or defer is present: The script is fetched and executed immediately, before the
browser continues parsing the page
Attributes
New : New in HTML5.
Attribute
Value
Description
async
New async
Specifies that the script is executed asynchronously (only for
external scripts)
defer
defer
Specifies that the script is executed when the page has
finished parsing (only for external scripts)
type
MIME_type
Specifies the MIME type of the script
charset
character_set
Specifies the character encoding used in an external script
file
src
URL
Specifies the URL of an external script file
xml:space
preserve
Not supported in HTML5
Global Attributes and Events
The <script> tag also supports the Global Attributes in HTML5.
Event Attributes
NONE
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <script> async Attribute
HTML5 <script> tag
Example
A script that will be run asynchronously as soon as it is available:
<script type="text/javascript" src="demo_async.js" async="async"></script>
Try it yourself
Browser Support
The async attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The async attribute is a boolean attribute.
When present, it specifies that the script will be executed asynchronously as soon as it is available.
Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).
Note: There are several ways an external script can be executed:
If async="async": The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
If async is not present and defer="defer": The script is executed when the page has finished parsing
If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
Differences Between HTML 4.01 and HTML5
The async attribute is new in HTML5.
Syntax
<script async="async">
Note: The async attribute is a boolean attribute, and can be set in the following ways:
<script async>
<script async="async">
<script async="">
HTML5 <script> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <script> defer Attribute
HTML5 <script> tag
Example
A script that will not run until after the page has loaded:
<script type="text/javascript" src="demo_defer.js" defer="defer"></script>
Try it yourself
Browser Support
The defer attribute is supported in all major browsers.
Definition and Usage
The defer attribute is a boolean attribute.
When present, it specifies that the script is executed when the page has finished parsing.
Note: The defer attribute is only for external scripts (should only be used if the src attribute is
present).
Note: There are several ways an external script can be executed:
If async="async": The script is executed asynchronously with the rest of the page (the script will
be executed while the page continues the parsing)
If async is not present and defer="defer": The script is executed when the page has finished
parsing
If neither async or defer is present: The script is fetched and executed immediately, before the
browser continues parsing the page
Differences Between HTML 4.01 and HTML5
None.
Syntax
<script defer="defer">
Note: The defer attribute is a boolean attribute, and can be set in the following ways:
<script defer>
<script defer="defer">
<script defer="">
HTML5 <script> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <script> type Attribute
HTML5 <script> tag
Example
A script with the type attribute specified:
<script type="text/javascript">
document.write("Hello World!")
</script>
Try it yourself
Browser Support
The type attribute is supported in all major browsers.
Definition and Usage
The type attribute specifies the MIME type of a script.
The type attribute identifies the content between the <script> and </script> tags.
The MIME type consists of two parts: one media type and one subtype. For JavaScript, the MIME type
is "text/javascript".
Differences Between HTML 4.01 and HTML5
In HTML5, the type attribute is no longer required. The default value is "text/javascript".
Syntax
<script type="MIME_type">
Attribute Values
Value
Description
MIME_type
Specifies the MIME type of the script.
Some common values:
text/javascript (this is default)
text/ecmascript
application/ecmascript
application/javascript
text/vbscript
Look at IANA MIME types for a complete list of standard MIME types.
HTML5 <script> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <script> charset Attribute
HTML5 <script> tag
Example
An external JavaScript with an UTF-8 character set:
<script src="myscripts.js" charset="UTF-8"></script>
Try it yourself
Browser Support
The charset attribute is supported in all major browsers.
Definition and Usage
The charset attribute specifies the character encoding used in an external script file.
The charset attribute is used when the character encoding in an external script file differs from the
encoding in the HTML document.
Note: The charset attribute is only for external scripts (can only be used if the src attribute is
present).
Differences Between HTML 4.01 and HTML5
The charset attribute on non-external script elements is unused in HTML 4 and forbidden in HTML5.
Syntax
<script charset="character_set">
Attribute Values
Value
Description
character_set
Specifies the character encoding for the external script file.
Some common values:
"ISO-8859-1" - Standard encoding for the Latin alphabet
"UTF-8" - Character encoding for Unicode. Compatible with ASCII
Look at our Character-sets reference for a complete list of character sets.
HTML5 <script> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <script> src Attribute
HTML5 <script> tag
Example
Point to an external JavaScript file:
<script type="text/javascript" src="demo_time.js"></script>
Try it yourself
Browser Support
The src attribute is supported in all major browsers.
Definition and Usage
The src attribute specifies the URL of an external script file.
If you want to run the same JavaScript on several pages in a web site, you should create an external
JavaScript file, instead of writing the same script over and over again. Save the script file with a .js
extension, and then refer to it using the src attribute in the <script> tag.
Note: The external script file cannot contain the <script> tag.
Note: Point to the external script file exactly where you would have written the script.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<script src="URL">
Attribute Values
Value
Description
URL
The URL of the external script file.
Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/example.js")
A relative URL - points to a file within a web site (like
src="/scripts/example.js")
HTML5 <script> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <section> Tag
Example
A section in a document, explaining what WWF is:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Try it yourself
Browser Support
The <section> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <section> tag.
Definition and Usage
The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other
sections of the document.
Differences Between HTML 4.01 and HTML5
The <section> tag is new in HTML5.
Global Attributes
The <section> tag also supports the Global Attributes in HTML5.
Event Attributes
The <section> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <select> Tag
Example
Create a drop-down list with four options:
<select>
<option
<option
<option
<option
</select>
value="volvo">Volvo</option>
value="saab">Saab</option>
value="opel">Opel</option>
value="audi">Audi</option>
Try it yourself
Browser Support
The <select> tag is supported in all major browsers.
Definition and Usage
The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list.
Differences Between HTML 4.01 and HTML5
HTML5 has some new attributes.
Tips and Notes
Tip: The <select> element is a form control and can be used in a form to collect user input.
Attributes
New : New in HTML5.
Attribute
Value
New autofocus
autofocus
disabled
disabled
Description
Specifies that the drop-down list should automatically get focus when the page loads
Specifies that the drop-down list should be disabled
New form_id
Defines one or more forms the select field belongs to
multiple
multiple
Specifies that multiple items can be selected at once
name
text
Defines a name for the drop-down list
size
number
Defines the number of visible options in the drop-down list
form
Global Attributes
The <select> tag also supports the Global Attributes in HTML5.
Event Attributes
The <select> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <small> Tag
Example
Define a smaller text:
<p>W3Schools.com - the world's largest web development site.</p>
<p><small>Copyright 1999-2050 by Refsnes Data</small></p>
Try it yourself
Browser Support
The <small> tag is supported in all major browsers.
Definition and Usage
The <small> tag defines smaller text (and other side comments).
Differences Between HTML 4.01 and HTML5
Practically none. In HTML 4.01 the small element is displayed as smaller text. In HTML5 the small
element defines small text and other side comments, and is displayed as smaller text.
Global Attributes
The <small> tag also supports the Global Attributes in HTML5.
Event Attributes
The <small> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <source> Tag
Example
An audio player with two source files. The browser should choose which file (if any) it has support
for:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Try it yourself
Browser Support
The <source> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <source> tag.
Definition and Usage
The <source> tag is used to specify multiple media resources for media elements, such as <video>
and <audio>.
The <source> tag allows you to specify alternative video/audio files which the browser may choose
from, based on its media type or codec support.
Differences Between HTML 4.01 and HTML5
The <source> tag is new in HTML5.
Attributes
New : New in HTML5.
Attribute
Value
Description
media
New media_query
Specifies the type of media resource
src
New URL
Specifies the URL of the media file
type
New MIME_type
Specifies the MIME type of the media resource
Global Attributes
The <source> tag also supports the Global Attributes in HTML5.
Event Attributes
The <source> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <source> media Attribute
HTML5 <source> tag
Example
Use of the media attribute:
<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)" />
Try it yourself
Browser Support
The media attribute is not supported in any of the major browsers.
Definition and Usage
The media attribute specifies the type of media resource (what media/device the file is optimized for).
The browser can use this attribute to determine whether it can play the file or not. If it cannot, it can
choose not to download it.
Note: This attribute can accept several values.
Differences Between HTML 4.01 and HTML5
The media attribute is new for the <source> tag in HTML5.
Syntax
<source media="value">
Possible Operators
Value
Description
and
Specifies an AND operator
not
Specifies a NOT operator
Specifies an OR operator
Devices
Value
Description
all
Suitable for all devices. This is default
aural
Speech synthesizers
braille
Braille feedback devices
handheld
Handheld devices (small screen, limited bandwidth)
projection
Projectors
Print preview mode/printed pages
screen
Computer screens
tty
Teletypes and similar media using a fixed-pitch character grid
tv
Television type devices (low resolution, limited scroll ability)
Values
Value
Description
width
Specifies the width of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-width:500px)"
height
Specifies the height of thetargeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-height:700px)"
device-width
Specifies the width of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-width:500px)"
device-height
Specifies the height of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (device-height:500px)"
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
orientation
Specifies the orientation of the target display/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"
aspect-ratio
Specifies the width/height ratio of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio
Specifies the device-width/device-height ratio of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="screen and (aspect-ratio:16/9)"
color
Specifies the bits per color of target display.
"min-" and "max-" prefixes can be used.
Example: media="screen and (color:3)"
color-index
Specifies the number of colors the target display can handle.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color-index:256)"
monochrome
Specifies the bits per pixel in a monochrome frame buffer.
"min-" and "max-" prefixes can be used.
Example: media="screen and (monochrome:2)"
resolution
Specifies the pixel density (dpi or dpcm) of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="print and (resolution:300dpi)"
scan
Specifies scanning method of a tv display.
Possible values are "progressive" and "interlace".
Example: media="tv and (scan:interlace)"
grid
Specifies if the output device is grid or bitmap.
Possible values are "1" for grid, and "0" otherwise.
Example: media="handheld and (grid:1)"
HTML5 <source> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <source> src Attribute
HTML5 <source> tag
Example
An audio player with two source files. The browser should choose which file (if any) it has support
for:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Try it yourself
Browser Support
The src attribute is supported in all major browsers.
Note: Internet Explorer 8 and earlier versions, do not support the <source> tag.
Definition and Usage
The src attribute specifies the URL of the media file to play.
Differences Between HTML 4.01 and HTML5
The <source> tag is new in HTML5.
Syntax
<source src="URL">
Attribute Values
Value
Description
URL
Specifies the URL of the media file.
Possible values:
An absolute URL - points to another web site (like
href="http://www.example.com/song.ogg")
A relative URL - points to a file within a web site (like href="song.ogg")
HTML5 <source> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <source> type Attribute
HTML5 <source> tag
Example
Use of the type attribute:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Try it yourself
Browser Support
The type attribute is supported in all major browsers.
Note: Internet Explorer 8 and earlier versions, do not support the <source> tag.
Definition and Usage
The type attribute specifies the MIME type of the media resource.
Differences Between HTML 4.01 and HTML5
The <source> tag is new in HTML5.
Syntax
<source type="MIME_type">
Attribute Values
Value
Description
MIME_type
Specifies the MIME type of the media resource.
Common MIME types:
For video:
video/ogg
video/mp4
video/webm
For audio:
audio/ogg
audio/mpeg
Look at IANA MIME types for a complete list of standard MIME types
HTML5 <source> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <span> Tag
Example
A text with a <span> element that is styled with CSS:
<p>My mother has <span style="color:lightblue">light blue</span> eyes.</p>
Try it yourself
Browser Support
The <span> tag is supported in all major browsers.
Definition and Usage
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
Tip: When a text is hooked in a <span> element you can add styles to the content, or manipulate the content with for example JavaScript.
Differences Between HTML 4.01 and HTML5
NONE
Global Attributes
The <span> tag also supports the Global Attributes in HTML5.
Event Attributes
The <span> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <strike> Tag.
Not Supported in HTML5.
Definition and Usage
The <strike> tag is not supported in HTML5. Use CSS instead.
The <strike> tag were used to define strikethrough text. Use <del> instead.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <em> <strong> <dfn> <code> <samp> <kbd> <var> Tags
Example
Format text in a document:
<em>Emphasized text</em>
<strong>Strong text</strong>
<dfn>Definition term</dfn>
<code>Computer code</code>
<samp>Sample output from computer program</samp>
<kbd>Keyboard input</kbd>
<var>Variable</var>
Try it yourself
Browser Support
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are supported in all major browsers.
Definition and Usage
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are all phrase tags. They are not deprecated, but it is possible to achieve richer
effect with CSS.
Tag
Description
<em>
Renders as emphasized text
<strong>
Defines important text
<dfn>
Definesa definition term
<code>
Defines a piece of computer code
<samp>
Defines sample output from a computer program
<kbd>
Defines keyboard input
<var>
Defines a variable
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important text.
Global Attributes
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags also supports the Global Attributes in HTML5.
Event Attributes
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <style> Tag
Example
Use of the style element in an HTML document:
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Heading</h1>
<p>A paragraph.</p>
</body>
</html>
Try it yourself
Browser Support
The <style> tag is supported in all major browsers.
Definition and Usage
The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a browser.
Each HTML document can contain multiple <style> tags.
Differences Between HTML 4.01 and HTML5
The "scoped" attribute is new in HTML5, which allows to define styles for a specified section of the
document. If the "scoped" attribute is present, the styles only apply to the style element's parent
element and that element's child elements.
Tips and Notes
Tip: To link to an external style sheet, use the <link> tag.
Tip: To learn more about style sheets, visit our CSS Tutorial.
Note: If the "scoped" attribute is not used, each <style> tag must be located in the head section.
Attributes
New : New in HTML5.
Attribute
Value
Description
type
text/css
Specifies the MIME type of the style sheet
media
media_query
Specifies what media/device the media resource is optimized
for. Default value: all.
scoped
New scoped
Specifies that the styles only apply to this element's parent
element and that element's child elements
Global Attributes
The <style> tag also supports the Global Attributes in HTML5.
Event Attributes
The <style> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <sub> and <sup> Tags
Example
Subscript and superscript text:
<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>
Try it yourself
Browser Support
The <sub> and <sup> tags are supported in all major browsers.
Definition and Usage
The <sub> tag defines subscript text. Subscript text appears half a character below the baseline.
Subscript text can be used for chemical formulas, like H 2 O.
The <sup> tag defines superscript text. Superscript text appears half a character above the baseline.
Superscript text can be used for footnotes, like WWW [1] .
Differences Between HTML 4.01 and HTML5
NONE
Global Attributes
The <sub> tag also supports the Global Attributes in HTML5.
Event Attributes
The <sub> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <summary> Tag
Example
Using the <summary> element:
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company
Refsnes Data.</p>
</details>
Try it yourself
Browser Support
The <summary> tag is currently only supported in Chrome.
Definition and Usage
The <summary> tag defines a visible heading for the <details> element. The heading can be clicked
to view/hide the details.
Differences Between HTML 4.01 and HTML5
The <summary> tag is new in HTML5.
Tips and Notes
Note: The <summary> element should be the first child element of the <details> element.
Global Attributes
The <summary> tag also supports the Global Attributes in HTML5.
Event Attributes
The <summary> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <table> Tag
Example
A simple HTML table, containing two columns and two rows:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Try it yourself
Browser Support
The <table> tag is supported in all major browsers.
Definition and Usage
The <table> tag defines an HTML table.
An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.
A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
Differences Between HTML 4.01 and HTML5
Only the "border" attribute is supported in HTML5, and it only allows the values "" or "1".
Attributes
Attribute
Value
Description
border
""
1
Specifies whether the table cells should have borders or not
cellpadding
pixels
Not supported in HTML5
cellspacing
pixels
Not supported in HTML5
frame
void
above
below
hsides
lhs
rhs
vsides
box
border
Not supported in HTML5
rules
none
groups
rows
cols
all
Not supported in HTML5
summary
text
Not supported in HTML5
width
pixels
%
Not supported in HTML5
Global Attributes
The <table> tag also supports the Global Attributes in HTML5.
Event Attributes
The <table> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <table> border Attribute
HTML5 <table> tag
Example
The following HTML table will be displayed with borders around the table cells:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Try it yourself
Browser Support
The border attribute is supported in all major browsers.
Definition and Usage
The border attribute specifies if a border should be displayed around the table cells or not.
The value "1" indicates borders should be displayed, and that the table is NOT being used for layout
purposes.
Differences Between HTML 4.01 and HTML5
In HTML5, the border attribute is only used to indicate if the table is for layout purposes or not, and
the only allowed attribute values are "" or "1".
Syntax
<table border="1">
Attribute Values
Value
Description
""
No borders around the table cells (the table could be used for layout purposes)
"1"
Add borders around the table cells (the table is NOT being used for layout
purposes)
HTML5 <table> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <tbody> Tag
Example
An HTML table with a thead, tfoot, and a tbody element:
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Try it yourself
Browser Support
The <tbody> tag is supported in all major browsers.
Definition and Usage
The <tbody> tag is used to group the body content in an HTML table.
The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each
part of a table (body, header, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and
footer. Also, when printing a large table that spans multiple pages, these elements can enable the table
header and footer to be printed at the top and bottom of each page.
The <tbody> tag must be used in the following context: As a child of a <table> element, after any
<caption>, <colgroup>, and <thead> elements.
Differences Between HTML 4.01 and HTML5
None of the HTML 4.01 attributes are supported in HTML5.
Tips and Notes
Note: The <tbody> element must have one or more <tr> tags inside.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default.
However, you can use CSS to let these elements affect the table's layout.
Attributes
Attribute
Value
Description
align
right
left
center
justify
char
Not supported in HTML5
char
character
Not supported in HTML5
charoff
number
Not supported in HTML5
valign
top
middle
bottom
baseline
Not supported in HTML5
Global Attributes
The <tbody> tag also supports the Global Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Event Attributes
The <tbody> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <td> Tag
Example
A simple HTML table, with two table cells:
<table border="1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
Try it yourself
Browser Support
The <td> tag is supported in all major browsers.
Definition and Usage
The <td> tag defines a standard cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Standard cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by default.
Differences Between HTML 4.01 and HTML5
Some HTML 4.01 attributes are not supported in HTML5.
Tips and Notes:
Note: The <td> element is not allowed in the <thead> element.
Attributes
Attribute
Value
Description
abbr
text
Not supported in HTML5
align
left
right
center
justify
char
Not supported in HTML5
axis
category_name
Not supported in HTML5
char
character
Not supported in HTML5
charoff
number
Not supported in HTML5
colspan
number
Specifies the number of columns a cell should span
headers
header_id
Specifies one or more header cells a cell is related to
height
pixels
%
Not supported in HTML5
nowrap
nowrap
Not supported in HTML5
rowspan
number
Specifies the number of rows a cell should span
scope
col
colgroup
row
rowgroup
Not supported in HTML5
valign
top
middle
bottom
baseline
Not supported in HTML5
width
pixels
%
Not supported in HTML5
Global Attributes
The <td> tag also supports the Global Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Event Attributes
The <td> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <td> colspan Attribute
HTML5 <td> tag
Example
An HTML table with a table cell that spans two columns:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
Try it yourself
Browser Support
The colspan attribute is supported in all major browsers.
Note: Only Firefox supports colspan="0", which have a special meaning (look below in the "Attribute
Values" table).
Definition and Usage
The colspan attribute defines the number of columns a cell should span.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<td colspan="number">
Attribute Values
Value
Description
number
Specifies the number of columns a cell should span.
Note: colspan="0" tells the browser to span the cell to the last column of the
column group (<colgroup>)
HTML5 <td> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <td> headers Attribute
HTML5 <td> tag
Example
Specify the <th> element each <td> element is related to:
<table border="1">
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
<th id="phone">Phone</th>
<th id="addr">Address</th>
</tr>
<tr>
<td headers="name">John Doe</td>
<td headers="email">someone@example.com</td>
<td headers="phone">+45342323</td>
<td headers="addr">Rosevn 56,4300 Sandnes,Norway</td>
</tr>
</table>
Try it yourself
Browser Support
The headers attribute has no visual effect in ordinary web browsers, but can be used by screen
readers.
Definition and Usage
The headers attribute specifies one or more header cells a table cell is related to.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<td headers="header_id">
Attribute Values
Value
Description
header_id
Specifies a space-separated list of id's to one or more header cells the table cell
is related to
HTML5 <td> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <td> rowspan Attribute
HTML5 <td> tag
Example
An HTML table with a table cell that spans two rows:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Try it yourself
Browser Support
The rowspan attribute is supported in all major browsers.
Note: Only Firefox and Opera support rowspan="0", which have a special meaning (look below in the
"Attribute Values" table).
Definition and Usage
The rowspan attribute defines the number of rows a cell should span.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<td rowspan="number">
Attribute Values
Value
Description
number
Sets the number of rows a cell should span.
Note: rowspan="0" tells the browser to span the cell to the last row of the table
section (<thead>, <tbody>, or <tfoot>)
HTML5 <td> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> Tag
Example
A simple text area:
<textarea rows="4" cols="50">
At W3Schools you will find all the Web-building tutorials you need, from
basic HTML to advanced XML, SQL, ASP, and PHP.
</textarea>
Try it yourself
Browser Support
The <textarea> tag is supported in all major browsers.
Definition and Usage
The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
Differences Between HTML 4.01 and HTML5
HTML5 has some new attributes: autofocus, form, maxlength, placeholder, required, and wrap.
Attributes
New : New in HTML5.
Attribute
Value
New autofocus
autofocus
Description
Specifies that a text area should automatically get focus when the page loads
cols
number
Specifies the visible width of a text area
disabled
disabled
Specifies that a text area should be disabled
form
New form_id
Specifies one or more forms the text area belongs to
maxlength
New number
Specifies the maximum number of characters allowed in the text area
name
text
New text
placeholder
readonly
readonly
required
New required
number
rows
New hard
soft
wrap
Specifies a name for the text area
Specifies a short hint that describes the expected value of a text area
Specifies that a text area should be read-only
Specifies that a text area is required/must be filled out
Specifies the visible number of lines in a text area
Specifies how the text in a text area is to be wrapped when submitted in a form
Global Attributes
The <textarea> tag also supports the Global Attributes in HTML5.
Event Attributes
The <textarea> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> autofocus Attribute
HTML5 <textarea> tag
Example
A text area with autofocus:
<textarea autofocus="autofocus">
At W3Schools you will find all the Web-building tutorials you need,
from basic HTML to advanced XML, SQL, ASP, and PHP.
</textarea>
Try it yourself
Browser Support
The autofocus attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The autofocus attribute is a boolean attribute.
When present, it specifies that the text area should automatically get focus when the page loads.
Differences Between HTML 4.01 and HTML5
The autofocus attribute is new for the <textarea> tag in HTML5.
Syntax
<textarea autofocus="autofocus">
Note: The autofocus attribute is a boolean attribute, and can be set in the following ways:
<textarea autofocus>
<textarea autofocus="autofocus">
<textarea autofocus="">
HTML5 <textarea> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> cols Attribute
HTML5 <textarea> tag
Example
A text area with a specified height and width:
<textarea rows="4" cols="50">
At W3Schools you will find all the Web-building tutorials you need,
from basic HTML to advanced XML, SQL, ASP, and PHP.
</textarea>
Try it yourself
Browser Support
The cols attribute is supported in all major browsers.
Definition and Usage
The cols attribute specifies the visible width of a text area.
Tip: The size of a textarea can also be set by the CSS height and width properties.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<textarea cols="number">
Attribute Values
Value
Description
number
Specifies the width of the text area (in average character width). Default value is
20
HTML5 <textarea> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> disabled Attribute
HTML5 <textarea> tag
Example
A disabled text area:
<textarea disabled="disabled">
At W3Schools you will find all the Web-building tutorials you need,
from basic HTML to advanced XML, SQL, ASP, and PHP.
</textarea>
Try it yourself
Browser Support
The disabled attribute is supported in all major browsers.
Definition and Usage
The disabled attribute is a boolean attribute.
When present, it specifies that the text area should be disabled.
A disabled text area is unusable and the text is not selectable (cannot be copied).
The disabled attribute can be set to keep a user from using the text area until some other condition has been met (like selecting a checkbox, etc.). Then, a
JavaScript could remove the disabled value, and make the text area usable.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<textarea disabled="disabled">
Note: The disabled attribute is a boolean attribute, and can be set in the following ways:
<textarea disabled>
<textarea disabled="disabled">
<textarea disabled="">
HTML5 <textarea> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> form Attribute
HTML5 <textarea> tag
Example
A text area located outside a form (but still a part of the form):
<form action="demo_form.asp" id="usrform">
Name: <input type="text" name="usrname" /><br />
<input type="submit" />
</form>
<textarea name="comment" form="usrform">Enter text here...</textarea>
Try it yourself
Browser Support
The form attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The form attribute specifies one or more forms the text area belongs to.
Differences Between HTML 4.01 and HTML5
The form attribute is new in HTML5.
Syntax
<textarea form="form_id">
Attribute Values
Value
Description
form_id
Specifies a space-separated list of id's to one or more forms the text area
belongs to
HTML5 <textarea> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> maxlength Attribute
HTML5 <textarea> tag
Example
A text area with a maximum length of 50 characters:
<textarea maxlength="50">
Enter text here...
</textarea>
Try it yourself
Browser Support
The maxlength attribute is supported in all major browsers, except Internet Explorer and Opera.
Definition and Usage
The maxlength attribute specifies the maximum length (in characters) of a text area.
Differences Between HTML 4.01 and HTML5
The maxlength attribute is new for the <textarea> tag in HTML5.
Syntax
<textarea maxlength="number">
Attribute Values
Value
Description
number
The maximum number of characters allowed in the text area
HTML5 <textarea> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> name Attribute
HTML5 <textarea> tag
Example
A text area with a name attribute:
<form action="demo_form.asp">
<textarea name="comment">Enter text here...</textarea>
<input type="submit" />
</form>
Try it yourself
Browser Support
The name attribute is supported in all major browsers.
Definition and Usage
The name attribute specifies a name for a text area.
The name attribute is used to reference elements in a JavaScript, or to reference form data after a
form is submitted.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<textarea name="text">
Attribute Values
Value
Description
text
Specifies the name of the text area
HTML5 <textarea> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> placeholder Attribute
HTML5 <textarea> tag
Example
A text area with a placeholder text:
<textarea placeholder="Describe yourself with 4 words...">
</textarea>
Try it yourself
Browser Support
The placeholder attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The placeholder attribute specifies a short hint that describes the expected value of a text area.
The hint is displayed in the text area when it is empty, and disappears when the field gets focus.
Differences Between HTML 4.01 and HTML5
The placeholder attribute is new in HTML5.
Syntax
<textarea placeholder="text">
Attribute Values
Value
Description
text
Specifies a short hint that describes the expected value of the text area
HTML5 <textarea> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> readonly Attribute
HTML5 <textarea> tag
Example
A read-only text area:
<textarea readonly="readonly">
At W3Schools you will find all the Web-building tutorials you need,
from basic HTML to advanced XML, SQL, ASP, and PHP.
</textarea>
Try it yourself
Browser Support
The readonly attribute is supported in all major browsers.
Definition and Usage
The readonly attribute is a boolean attribute.
When present, it specifies that a text area should be read-only.
In a read-only text area, the content cannot be changed, but a user can tab to it, highlight it and copy content from it.
The readonly attribute can be set to keep a user from using a text area until some other condition has been met (like selecting a checkbox, etc.). Then, a
JavaScript is required to remove the readonly value, and make the text area editable.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<textarea readonly="readonly">
Note: The readonly attribute is a boolean attribute, and can be set in the following ways:
<textarea readonly>
<textarea readonly="readonly">
<textarea readonly="">
HTML5 <textarea> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> required Attribute
HTML5 <textarea> tag
Example
A form with a required text area:
<form action="demo_form.asp">
<textarea name="usrtxt" required="required"></textarea>
<input type="submit" />
</form>
Try it yourself
Browser Support
The required attribute is supported in all major browsers, except Internet Explorer and Safari.
Definition and Usage
The required attribute is a boolean attribute.
When present, it specifies that a text area is required/must be filled out (in order to submit the form).
Differences Between HTML 4.01 and HTML5
The required attribute is new in HTML5.
Syntax
<textarea required="required">
Note: The required attribute is a boolean attribute, and can be set in the following ways:
<textarea required>
<textarea required="required">
<textarea required="">
HTML5 <textarea> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> rows Attribute
HTML5 <textarea> tag
Example
A text area with a specified height and width:
<textarea rows="4" cols="50">
At W3Schools you will find all the Web-building tutorials you need,
from basic HTML to advanced XML, SQL, ASP, and PHP.
</textarea>
Try it yourself
Browser Support
The rows attribute is supported in all major browsers.
Definition and Usage
The rows attribute specifies the visible height of a text area.
Note: The size of a textarea can also be specified by the CSS height and width properties.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<textarea rows="number">
Attribute Values
Value
Description
number
Specifies the height of the text area (in lines). Default value is 2
HTML5 <textarea> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <textarea> wrap Attribute
HTML5 <textarea> tag
Example
The text in a text area with wrap="hard" will contain newlines (if any) when submitted in a form:
<textarea rows="2" cols="20" wrap="hard">
At W3Schools you will find free Web-building tutorials.
</textarea>
Try it yourself
Browser Support
The wrap attribute is supported in all major browsers.
Definition and Usage
The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.
Differences Between HTML 4.01 and HTML5
The wrap attribute is new for the <textarea> tag in HTML5.
Syntax
<textarea wrap="soft|hard">
Attribute Values
Value
Description
soft
The text in the textarea is not wrapped when submitted in a form. This is default
hard
The text in the textarea is wrapped (contains newlines) when submitted in a
form. When "hard" is used, the cols attribute must be specified
HTML5 <textarea> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <tfoot> Tag
Example
An HTML table with a <thead>, <tfoot>, and a <tbody> element:
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Try it yourself
Browser Support
The <tfoot> tag is supported in all major browsers.
Definition and Usage
The <tfoot> tag is used to group footer content in an HTML table.
The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each
part of a table (footer, header, body).
Browsers can use these elements to enable scrolling of the table body independently of the header and
footer. Also, when printing a large table that spans multiple pages, these elements can enable the table
header and footer to be printed at the top and bottom of each page.
The <tfoot> tag must be used in the following context: As a child of a <table> element, after any
<caption>, <colgroup>, and <thead> elements and before any <tbody> and <tr> elements.
Note: <tfoot> must appear before <tbody> within a table, so that a browser can render the foot
before receiving all the rows of data.
Differences Between HTML 4.01 and HTML5
None of the HTML 4.01 attributes are supported in HTML5.
Tips and Notes
Note: The <tfoot> element must have one or more <tr> tags inside.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default.
However, you can use CSS to let these elements affect the table's layout.
Attributes
Attribute
Value
Description
align
right
left
center
justify
char
Not supported in HTML5
char
character
Not supported in HTML5
charoff
number
Not supported in HTML5
valign
top
middle
bottom
baseline
Not supported in HTML5
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Global Attributes
The <tfoot> tag also supports the Global Attributes in HTML5.
Event Attributes
The <tfoot> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <th> Tag
Example
A simple HTML table with two header cells and two data cells:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Try it yourself
Browser Support
The <th> tag is supported in all major browsers.
Definition and Usage
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Standard cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by default.
Differences Between HTML 4.01 and HTML5
Some HTML 4.01 attributes are not supported in HTML5.
Attributes
Attribute
Value
Description
abbr
text
Not supported in HTML5
align
left
right
center
justify
char
Not supported in HTML5
axis
category_name
Not supported in HTML5
char
character
Not supported in HTML5
charoff
number
Not supported in HTML5
colspan
number
Specifies the number of columns a header cell should span
headers
header_id
Specifies one or more header cells a cell is related to
height
pixels
%
Not supported in HTML5
nowrap
nowrap
Not supported in HTML5
rowspan
number
Specifies the number of rows a header cell should span
scope
col
colgroup
row
rowgroup
Specifies whether a header cell is a header for a column, row, or group of columns or rows
valign
top
middle
bottom
baseline
Not supported in HTML5
width
pixels
%
Not supported in HTML5
Global Attributes
The <th> tag also supports the Global Attributes in HTML5.
Event Attributes
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <th> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <th> colspan Attribute
HTML5 <th> tag
Example
An HTML table with a header cell that spans two columns:
<table>
<tr>
<th colspan="2">Month</th>
</tr>
<tr>
<td>January</td>
<td>February</td>
</tr>
</table>
Try it yourself
Browser Support
The colspan attribute is supported in all major browsers.
Note: Only Firefox supports colspan="0", which have a special meaning (look below in the "Attribute Values" table).
Definition and Usage
The colspan attribute defines the number of columns a header cell should span.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<th colspan="number">
Attribute Values
Value
Description
number
Sets the number of columns a header cell should span.
Note: colspan="0" tells the browser to span the cell to the last column of the column group (<colgroup>)
HTML5 <th> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <th> headers Attribute
HTML5 <th> tag
Example
Specify the <th> element each header cell is related to:
<table>
<tr>
<th id="name" colspan="2">Name</th>
</tr>
<tr>
<th headers="name">Firsname</th>
<th headers="name">Lastname</th>
</tr>
</table>
Try it yourself
Browser Support
The headers attribute has no visual effect in ordinary web browsers, but can be used by screen
readers.
Definition and Usage
The headers attribute specifies one or more header cells a header cell is related to.
Differences Between HTML 4.01 and HTML5
The headers attribute is new for the <th> tag in HTML5.
Syntax
<th headers="header_id">
Attribute Values
Value
Description
header_id
Specifies a space-separated list of id's to one or more header cells the header
cell is related to
HTML5 <th> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <th> rowspan Attribute
HTML5 <th> tag
Example
An HTML table with a header cell that spans three rows:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th rowspan="3">Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Try it yourself
Browser Support
The rowspan attribute is supported in all major browsers.
Note: Only Firefox and Opera supports rowspan="0", which has a special meaning (look below in the
"Attribute Values" table).
Definition and Usage
The rowspan attribute defines the number of rows a header cell should span.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<th rowspan="number">
Attribute Values
Value
Description
number
Sets the number of rows a header cell should span. Note: rowspan="0" tells the
browser to span the cell to the last row of the table section (thead, tbody, or
tfoot)
HTML5 <th> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <th> scope Attribute
HTML5 <th> tag
Example
Specify that the two header cells are headers for columns:
<table>
<tr>
<th></th>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<td>1</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
Try it yourself
Browser Support
The scope attribute has no visual effect in ordinary web browsers, but can be used by screen readers.
Definition and Usage
The scope attribute specifies whether a header cell is a header for a column, row, or group of columns or rows.
Differences Between HTML 4.01 and HTML5
None.
Syntax
<th scope="col|row|colgroup|rowgroup">
Attribute Values
Value
Description
col
Specifies that the header cell is a header for a column
row
Specifies that the header cell is a header for a row
colgroup
Specifies that the header cell is a header for a group of columns
rowgroup
Specifies that the header cell is a header for a group of rows
HTML5 <th> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <thead> Tag
Example
An HTML table with a <thead>, <tfoot>, and a <tbody> element:
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Try it yourself
Browser Support
The <thead> tag is supported in all major browsers.
Definition and Usage
The <thead> tag is used to group header content in an HTML table.
The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each
part of a table (header, body, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and
footer. Also, when printing a large table that spans multiple pages, these elements can enable the table
header and footer to be printed at the top and bottom of each page.
The <thead> tag must be used in the following context: As a child of a <table> element, after any
<caption>, and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.
Differences Between HTML 4.01 and HTML5
None of the HTML 4.01 attributes are supported in HTML5.
Tips and Notes
Note: The <thead> element must have one or more <tr> tags inside.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default.
However, you can use CSS to let these elements affect the table's layout.
Attributes
Attribute
Value
Description
align
right
left
center
justify
char
Not supported in HTML5
char
character
Not supported in HTML5
charoff
number
Not supported in HTML5
valign
top
middle
bottom
baseline
Not supported in HTML5
Global Attributes
The <thead> tag also supports the Global Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
Event Attributes
The <thead> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <time> Tag
Example
How to define a time and a date:
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14">Valentines day</time>.</p>
Try it yourself
Browser Support
The <time> tag is not supported in any of the major browsers.
Definition and Usage
The <time> tag defines either a time (24 hour clock), or a date in the Gregorian calendar, optionally
with a time and a time-zone offset.
This element can be used as a way to encode dates and times in a machine-readable way so that, for
example, user agents can offer to add birthday reminders or scheduled events to the user's calendar,
and search engines can produce smarter search results.
Differences Between HTML 4.01 and HTML5
The <time> tag is new in HTML5.
Attributes
New : New in HTML5.
Attribute
Value
Description
datetime
New datetime
Gives the date/time being specified. Otherwise, the date/time is
given by the element's contents
pubdate
New pubdate
Indicates that the date/time in the <time> element is the
publication date of the document (or the nearest ancestor
<article> element)
Global Attributes
The <time> tag also supports the Global Attributes in HTML5.
Event Attributes
The <time> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <time> datetime Attribute
HTML5 <time> tag
Example
A time element with a date specified:
<p>I have a date on <time datetime="2008-02-14">Valentines day</time>.</p>
Try it yourself
Browser Support
The datetime attribute is not supported in any of the major browsers.
Definition and Usage
The datetime attribute gives the date or time being specified. This attribute is used if no date or time is
specified in the element's content.
Differences Between HTML 4.01 and HTML5
The <time> tag is new in HTML5.
Syntax
<time datetime="YYYY-MM-DDThh:mm:ssTZD">
Attribute Values
Value
Description
YYYY-MM-DDThh:mm:ssTZD
The date or time being specified. Explanation of components:
YYYY - year (e.g. 2011)
MM - month (e.g. 01 for January)
DD - day of the month (e.g. 08)
T - a required separator if time is also specified
hh - hour (e.g. 22 for 10.00pm)
mm - minutes (e.g. 55)
ss - seconds (e.g. 03)
TZD - Time Zone Designator (Z denotes Zulu, also known as
Greenwich Mean Time)
HTML5 <time> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <time> pubdate Attribute
HTML5 <time> tag
Example
Specify the publication date of an <article> element:
<article>
<time datetime="2011-09-28" pubdate="pubdate"></time>
Hello world. This is an article....
</article>
Try it yourself
Browser Support
The pubdate attribute is not supported in any of the major browsers.
Definition and Usage
The pubdate attribute indicates that the date/time in the <time> element is the publication date of the
document (or the nearest ancestor <article> element).
Differences Between HTML 4.01 and HTML5
The <time> tag is new in HTML5.
Syntax
<time pubdate="pubdate">
Attribute Values
Value
Description
pubdate
Indicates that the date/time in the <time> element is the publication
date of the document (or the nearest ancestor <article> element)
HTML5 <time> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <title> Tag
Example
Define a title for your HTML document:
<html>
<head>
<title>HTML5 Tag Reference</title>
</head>
<body>
The content of the document......
</body>
</html>
Try it yourself
Browser Support
The <title> tag is supported in all major browsers.
Definition and Usage
The <title> tag is required in all HTML documents and it defines the title of the document.
The title element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
Differences Between HTML 4.01 and HTML5
NONE
Tips and Notes
Note: You can NOT have more than one <title> element in an HTML document.
Tip: If you omit the <title> tag, the document will not validate as HTML.
Global Attributes
The <title> tag also supports the Global Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <tr> Tag
Example
A simple HTML table, containing one row with two columns:
<table border="1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
Try it yourself
Browser Support
The <tr> tag is supported in all major browsers.
Definition and Usage
The <tr> tag defines a row in an HTML table.
A <tr> element contains one or more <th> or <td> elements.
Differences Between HTML 4.01 and HTML5
None of the HTML 4.01 attributes are supported in HTML5.
Attributes
Attribute
Value
Description
align
right
left
center
justify
char
Not supported in HTML5
char
character
Not supported in HTML5
charoff
number
Not supported in HTML5
valign
top
middle
bottom
baseline
Not supported in HTML5
Global Attributes
The <tr> tag also supports the Global Attributes in HTML5.
Event Attributes
The <tr> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <track> Tag
Example
A video with two subtitle tracks:
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
Browser Support
The <track> tag is not supported in any of the major browsers.
Definition and Usage
The <track> tag specifies text tracks for media elements ( <audio> and <video>).
This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.
Differences Between HTML 4.01 and HTML5
The <track> tag is new in HTML5.
Optional Attributes
New : New in HTML5.
Attribute
Value
Description
default
New default
Specifies that the track is to be enabled if the user's preferences do not indicate that
another track would be more appropriate
kind
New captions
chapters
descriptions
metadata
subtitles
Specifies the kind of text track
label
New text
Specifies the title of the text track
src
New URL
Required. Specifies the URL of the track file
srclang
New language_code
Specifies the language of the track text data (required if kind="subtitles")
Global Attributes
The <track> tag also supports the Global Attributes in HTML5.
Event Attributes
The <track> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <track> default Attribute
HTML5 <track> tag
Example
A video with two subtitle tracks. "English" subtitle is the default:
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English" default="default">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
Browser Support
The default attribute is not supported in any of the major browsers.
Definition and Usage
The default attribute is a boolean attribute.
When present, it specifies that the track is to be enabled if the user's preferences do not indicate that
another track would be more appropriate.
Note: There must not be more than one track element with a default attribute per media element.
Differences Between HTML 4.01 and HTML5
The <track> tag is new in HTML5.
Syntax
<track src="subtitles_en.vtt" default="default">
Note: The default attribute is a boolean attribute, and can be set in the following ways:
<track default>
<track default="default">
<track default="">
HTML5 <track> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <track> kind Attribute
HTML5 <track> tag
Example
A video with two subtitle tracks:
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
Browser Support
The kind attribute is not supported in any of the major browsers.
Definition and Usage
The kind attribute specifies the kind of text track.
Differences Between HTML 4.01 and HTML5
The <track> tag is new in HTML5.
Syntax
<track src="subtitles_en.vtt" kind="subtitles" srclang="en">
Attribute Values
Value
Description
captions
The track defines translation of dialogue and sound effects (suitable for deaf
users)
chapters
The track defines chapter titles (suitable for navigating the media resource)
descriptions
The track defines a textual description of the video content (suitable for blind
users)
metadata
The track defines content used by scripts. Not visible for the user
subtitles
The track defines subtitles, used to display subtitles in a video
HTML5 <track> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <track> label Attribute
HTML5 <track> tag
Example
A video with two subtitle tracks, both with a label defined:
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
Browser Support
The label attribute is not supported in any of the major browsers.
Definition and Usage
The label attribute specifies the title of the text track.
The title of the text track is used by the browser when listing available text tracks.
Differences Between HTML 4.01 and HTML5
The <track> tag is new in HTML5.
Syntax
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
Attribute Values
Value
Description
label
Specifies the title of the text track
HTML5 <track> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <track> src Attribute
HTML5 <track> tag
Example
A video with two subtitle tracks:
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
Browser Support
The src attribute is not supported in any of the major browsers.
Definition and Usage
The required src attribute specifies the URL of the track file.
Differences Between HTML 4.01 and HTML5
The <track> tag is new in HTML5.
Syntax
<track src="subtitles_en.vtt">
Attribute Values
Value
Description
URL
Specifies the URL of the track
HTML5 <track> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <track> srclang Attribute
HTML5 <track> tag
Example
A video with two subtitle tracks:
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
Browser Support
The srclang attribute is not supported in any of the major browsers.
Definition and Usage
The srclang attribute Specifies the language of the track text data.
This attribute is required if kind="subtitles".
Tip: To view all available language codes, go to our Language code reference.
Differences Between HTML 4.01 and HTML5
The <track> tag is new in HTML5.
Syntax
<track src="subtitles_en.vtt" kind="subtitles" srclang="en">
Attribute Values
Value
Description
language_code
Specifies a two-letter language code that specifies the language of the track text data
HTML5 <track> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
The <tt> Tag. Not Supported in HTML5.
Definition and Usage
The <tt> tag is not supported in HTML5. Use CSS to style elements.
The <tt> tag was used to define teletype text.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <u> Tag
Example
<p>This is a <u>parragraph</u>.</p>
Try it yourself
Browser Support
The <u> tag is supported in all major browsers.
Definition and Usage
The <u> tag represents some text that should be stylistically different from normal text, such as
misspelled words or proper nouns in Chinese.
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the <u> element is deprecated (the <u> element was used to define underlined text).
The <u> element is redefined in HTML5, and it represents some text that should be stylistically
different from normal text, such as misspelled words or proper nouns in Chinese.
Tips and Notes
Note: The HTML 5 specification reminds developers that other elements are almost always more
appropriate than <u>.
Tip: Avoid using the <u> element where it could be confused for a hyperlink.
Global Attributes
The <u> tag also supports the Global Attributes in HTML5.
Event Attributes
The <u> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <ul> Tag
Example
An unordered HTML list:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it yourself
Browser Support
The <ul> tag is supported in all major browsers.
Definition and Usage
The <ul> tag defines an unordered (bulleted) list.
Use the <ul> tag together with the <li> tag to create unordered lists.
Differences Between HTML 4.01 and HTML5
The "compact" and "type" attributes are deprecated in HTML 4.01, and are not supported in HTML5.
Tips and Notes
Tip: To create ordered lists, use the <ol> tag.
Tip: Use CSS to style lists.
Global Attributes
The <ul> tag also supports the Global Attributes in HTML5.
Event Attributes
The <ul> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <em> <strong> <dfn> <code> <samp>
<kbd> <var> Tags
Example
Format text in a document:
<em>Emphasized text</em>
<strong>Strong text</strong>
<dfn>Definition term</dfn>
<code>Computer code</code>
<samp>Sample output from computer program</samp>
<kbd>Keyboard input</kbd>
<var>Variable</var>
Try it yourself
Browser Support
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are supported in all major
browsers.
Definition and Usage
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are all phrase tags. They
are not deprecated, but it is possible to achieve richer effect with CSS.
Tag
Description
<em>
Renders as emphasized text
<strong>
Defines important text
<dfn>
Definesa definition term
<code>
Defines a piece of computer code
<samp>
Defines sample output from a computer program
<kbd>
Defines keyboard input
<var>
Defines a variable
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important
text.
Global Attributes
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags also supports the Global
Attributes in HTML5.
Event Attributes
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags also supports the Event
Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <video> Tag
Example
Play a video:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Try it yourself
Browser Support
The <video> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <video> tag.
Definition and Usage
The <video> tag specifies video, such as a movie clip or other video streams.
Differences Between HTML 4.01 and HTML5
The <video> tag is new in HTML5.
Tips and Notes
Tip: Any text between the <video> and </video> tags will be displayed in browsers that do not support video.
Optional Attributes
New : New in HTML5.
Attribute
Value
Description
autoplay
New autoplay
Specifies that the video will start playing as soon as it is ready
controls
New controls
Specifies that video controls should be displayed (such as a play/pause button etc).
height
New pixels
Sets the height of the video player
loop
New loop
Specifies that the video will start over again, every time it is finished
muted
New muted
Specifies that the audio output of the video should be muted
poster
New URL
Specifies an image to be shown while the video is downloading, or until the user hits
the play button
preload
New auto
metadata
none
Specifies if and how the author thinks the video should be loaded when the page
loads
src
New URL
Specifies the URL of the video file
width
New pixels
Sets the width of the video player
Global Attributes
The <video> tag also supports the Global Attributes in HTML5.
Event Attributes
The <video> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <video> autoplay Attribute
HTML5 <video> tag
Example
A video that will automatically start playing:
<video controls="controls" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Try it yourself
Browser Support
The autoplay attribute is supported in all major browsers.
Note: Internet Explorer 8 and earlier versions, do not support the <video> tag.
Definition and Usage
The autoplay attribute is a boolean attribute.
When present, the video will automatically start playing as soon as it can do so without stopping.
Differences Between HTML 4.01 and HTML5
The <video> tag is new in HTML5.
Syntax
<video autoplay="autoplay">
Note: The autoplay attribute is a boolean attribute, and can be set in the following ways:
<video autoplay>
<video autoplay="autoplay">
<video autoplay="">
HTML5 <video> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <video> controls Attribute
HTML5 <video> tag
Example
A <video> element with browser default controls:
<video controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Try it yourself
Browser Support
The controls attribute is supported in all major browsers.
Note: Internet Explorer 8 and earlier versions, do not support the <video> tag.
Definition and Usage
The controls attribute is a boolean attribute.
When present, it specifies that video controls should be displayed.
Video controls should include:
Play
Pause
Seeking
Volume
Fullscreen toggle
Captions/Subtitles (when available)
Track (when available)
Differences Between HTML 4.01 and HTML5
The <video> tag is new in HTML5.
Syntax
<video controls="controls">
Note: The controls attribute is a boolean attribute, and can be set in the following ways:
<video controls>
<video controls="controls">
<video controls="">
HTML5 <video> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <video> height Attribute
HTML5 <video> tag
Example
A video player with a specified height and width:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Try it yourself
Browser Support
The height attribute is supported in all major browsers.
Note: Internet Explorer 8 and earlier versions, do not support the <video> tag.
Definition and Usage
The height attribute specifies the height of a video player, in pixels.
Tip: Always specify both the height and width attributes for videos. If height and width are set, the
space required for the video is reserved when the page is loaded. However, without these attributes,
the browser does not know the size of the video, and cannot reserve the appropriate space to it. The
effect will be that the page layout will change during loading (while the video loads).
Note: Do not rescale video with the height and width attributes! Downsizing a large video with the
height and width attributes forces a user to download the original video (even if it looks small on the
page). The correct way to rescale a video is with a program, before using it on a page.
Differences Between HTML 4.01 and HTML5
The <video> tag is new in HTML5.
Syntax
<video height="pixels">
Attribute Values
Value
Description
pixels
The height of the video, in pixels (i.e. height="100")
HTML5 <video> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <video> loop Attribute
HTML5 <video> tag
Example
A video that will start over again, every time it is finished:
<video controls="controls" loop="loop">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Try it yourself
Browser Support
The loop attribute is supported in all major browsers, except Opera.
Note: Internet Explorer 8 and earlier versions, do not support the <video> tag.
Definition and Usage
The loop attribute is a boolean attribute.
When present, it specifies that the video will start over again, every time it is finished.
Differences Between HTML 4.01 and HTML5
The <video> tag is new in HTML5.
Syntax
<video loop="loop">
Note: The loop attribute is a boolean attribute, and can be set in the following ways:
<video loop>
<video loop="loop">
<video loop="">
HTML5 <video>
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <video> muted Attribute
HTML5 <video> tag
Example
A muted video:
<video controls="controls" muted="muted">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Try it yourself
Browser Support
The muted attribute is supported in all major browsers, except Internet Explorer and Safari.
Definition and Usage
The muted attribute is a boolean attribute.
When present, it specifies that the audio output of the video should be muted.
Differences Between HTML 4.01 and HTML5
The <video> tag is new in HTML5.
Syntax
<video muted="muted">
Note: The muted attribute is a boolean attribute, and can be set in the following ways:
<video muted>
<video muted="muted">
<video muted="">
HTML5 <video> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <video> poster Attribute
HTML5 <video> tag
Example
A video player with a poster image:
<video controls="controls" poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Try it yourself
Browser Support
The poster attribute is supported in all major browsers.
Note: Internet Explorer 8 and earlier versions, do not support the <video> tag.
Definition and Usage
The poster attribute specifies an image to be shown while the video is downloading, or until the user
hits the play button. If this is not included, the first frame of the video will be used instead.
Differences Between HTML 4.01 and HTML5
The <video> tag is new in HTML5.
Syntax
<video poster="URL">
Attribute Values
Value
Description
URL
Specifies the URL of the image file.
Possible values:
An absolute URL - points to another web site (like
href="http://www.example.com/poster.jpg")
A relative URL - points to a file within a web site (like href="poster.jpg")
HTML5 <video> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <video> preload Attribute
HTML5 <video> tag
Example
Author thinks that the video should NOT be loaded when the page loads:
<video controls="controls" preload="none">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Try it yourself
Browser Support
The preload attribute is supported in all major browsers, except Internet Explorer.
Definition and Usage
The preload attribute specifies if and how the author thinks that the video should be loaded when the
page loads.
The preload attribute allows the author to provide a hint to the browser about what he/she thinks will
lead to the best user experience. This attribute may be ignored in some instances.
Note: The preload attribute is ignored if autoplay is present.
Differences Between HTML 4.01 and HTML5
The <video> tag is new in HTML5.
Syntax
<video preload="auto|metadata|none">
Attribute Values
Value
Description
auto
The author thinks that the browser should load the entire video when the page
loads
metadata
The author thinks that the browser should load only metadata when the page
loads
none
The author thinks that the browser should NOT load the video when the page
loads
HTML5 <video> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <video> src Attribute
HTML5 <video> tag
Example
Play a video:
<video controls="controls" src="movie.ogg">
Your browser does not support the video tag.
</video>
Try it yourself
Browser Support
The src attribute is supported in all major browsers. However, the file format defined may not be
supported in all browsers.
Note: Internet Explorer 8 and earlier versions, do not support the <video> tag.
Definition and Usage
The src attribute specifies the location (URL) of the video file.
The example above uses an Ogg file, and will work in Firefox, Opera and Chrome.
To play the video in Internet Explorer and Safari, we must use an MPEG4 file.
To make it work in all browsers - use <source> elements inside the <video> element. <source>
elements can link to different video files. The browser will use the first recognized format:
Example
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Try it yourself
Differences Between HTML 4.01 and HTML5
The <video> tag is new in HTML5.
Syntax
<video src="URL">
Attribute Values
Value
Description
URL
The URL of the video file.
Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/movie.ogg")
A relative URL - points to a file within a web site (like src="movie.ogg")
HTML5 <video> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <video> width Attribute
HTML5 <video> tag
Example
A video player with a specified width and height:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Try it yourself
Browser Support
The width attribute is supported in all major browsers.
Note: Internet Explorer 8 and earlier versions, do not support the <video> tag.
Definition and Usage
The width attribute specifies the width of a video player, in pixels.
Tip: Always specify both the height and width attributes for videos. If height and width are set, the
space required for the video is reserved when the page is loaded. However, without these attributes,
the browser does not know the size of the video, and cannot reserve the appropriate space to it. The
effect will be that the page layout will change during loading (while the video loads).
Note: Do not rescale video with the height and width attributes! Downsizing a large video with the
height and width attributes forces a user to download the original video (even if it looks small on the
page). The correct way to rescale a video is with a program, before using it on a page.
Differences Between HTML 4.01 and HTML5
The <video> tag is new in HTML5.
Syntax
<video width="pixels">
Attribute Values
Value
Description
pixels
The width of the video, in pixels (i.e. width="100")
HTML5 <video> tag
Content Downloaded from www.w3schools.com
Created By www.ebooktutorials.blogspot.in
HTML5 <wbr> Tag
Example
A text with word break opportunities:
<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request
Object.
</p>
Try it yourself
Browser Support
The <wbr> tag is supported in all major browsers, except Internet Explorer.
Definition and Usage
The Word Break Opportunity (<wbr>) specifies where in a text it would be ok to add a line-break.
Tip: When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word
break opportunities.
Differences Between HTML 4.01 and HTML5
The <wbr> tag is new in HTML5.
Global Attributes
The <wbr> tag also supports the Global Attributes in HTML5.
Event Attributes
The <wbr> tag also supports the Event Attributes in HTML5.
Content Downloaded from www.w3schools.com
You might also like
- Instant ebooks textbook Computing Essentials 2019 27th Edition (eBook PDF) download all chapters100% (2)Instant ebooks textbook Computing Essentials 2019 27th Edition (eBook PDF) download all chapters51 pages
- Basic HTML Code: A Cheat Sheet For Thimble: Text TagsNo ratings yetBasic HTML Code: A Cheat Sheet For Thimble: Text Tags1 page
- SQL Server 2012 Tutorials - Analysis Services Data MiningNo ratings yetSQL Server 2012 Tutorials - Analysis Services Data Mining215 pages
- Building A RESTful Web Service With Spring - Sample ChapterNo ratings yetBuilding A RESTful Web Service With Spring - Sample Chapter13 pages
- Aakarsh Chaudhary: Sensitivity: Internal & RestrictedNo ratings yetAakarsh Chaudhary: Sensitivity: Internal & Restricted8 pages
- Tutorial 1: Serialization: Django REST FrameworkNo ratings yetTutorial 1: Serialization: Django REST Framework10 pages
- HTML5 Elements: Web Technology Assignment - 1947234100% (2)HTML5 Elements: Web Technology Assignment - 194723458 pages
- Full Stack Web Development Outlines: HTML 5100% (1)Full Stack Web Development Outlines: HTML 54 pages
- Naresh Kumar.K: Oracle SQL PL/SQL Developer MobileNo ratings yetNaresh Kumar.K: Oracle SQL PL/SQL Developer Mobile2 pages
- ColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification ReviewFrom EverandColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification ReviewNo ratings yet
- Web 2.0 Web 3.0 Web 4.0 Web 5.0: 1 PointNo ratings yetWeb 2.0 Web 3.0 Web 4.0 Web 5.0: 1 Point13 pages
- C Tv-Out-Cable Ab0abe0b446f4047 1201-1905FK REQAHX96IN296No ratings yetC Tv-Out-Cable Ab0abe0b446f4047 1201-1905FK REQAHX96IN29642 pages
- Manual For eELP European Language EportfolioNo ratings yetManual For eELP European Language Eportfolio20 pages
- Linked Data Evolving The Web Into Global Data Space PDFNo ratings yetLinked Data Evolving The Web Into Global Data Space PDF137 pages
- https___app.oswaalbooks.com_download_sample-qp_subsolution_260Computer_App SAP_Ans-1 uploadingNo ratings yethttps___app.oswaalbooks.com_download_sample-qp_subsolution_260Computer_App SAP_Ans-1 uploading3 pages
- ... - BRS2-CU - BMS - I - 2020-02-21 - en - Englisch (P005675462) - CompressedNo ratings yet... - BRS2-CU - BMS - I - 2020-02-21 - en - Englisch (P005675462) - Compressed240 pages
- Instant ebooks textbook Computing Essentials 2019 27th Edition (eBook PDF) download all chaptersInstant ebooks textbook Computing Essentials 2019 27th Edition (eBook PDF) download all chapters
- Basic HTML Code: A Cheat Sheet For Thimble: Text TagsBasic HTML Code: A Cheat Sheet For Thimble: Text Tags
- SQL Server 2012 Tutorials - Analysis Services Data MiningSQL Server 2012 Tutorials - Analysis Services Data Mining
- Building A RESTful Web Service With Spring - Sample ChapterBuilding A RESTful Web Service With Spring - Sample Chapter
- Aakarsh Chaudhary: Sensitivity: Internal & RestrictedAakarsh Chaudhary: Sensitivity: Internal & Restricted
- HTML5 Elements: Web Technology Assignment - 1947234HTML5 Elements: Web Technology Assignment - 1947234
- Naresh Kumar.K: Oracle SQL PL/SQL Developer MobileNaresh Kumar.K: Oracle SQL PL/SQL Developer Mobile
- Oracle SOA BPEL Process Manager 11gR1 A Hands-on TutorialFrom EverandOracle SOA BPEL Process Manager 11gR1 A Hands-on Tutorial
- ColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification ReviewFrom EverandColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification Review
- C Tv-Out-Cable Ab0abe0b446f4047 1201-1905FK REQAHX96IN296C Tv-Out-Cable Ab0abe0b446f4047 1201-1905FK REQAHX96IN296
- Linked Data Evolving The Web Into Global Data Space PDFLinked Data Evolving The Web Into Global Data Space PDF
- https___app.oswaalbooks.com_download_sample-qp_subsolution_260Computer_App SAP_Ans-1 uploadinghttps___app.oswaalbooks.com_download_sample-qp_subsolution_260Computer_App SAP_Ans-1 uploading
- ... - BRS2-CU - BMS - I - 2020-02-21 - en - Englisch (P005675462) - Compressed... - BRS2-CU - BMS - I - 2020-02-21 - en - Englisch (P005675462) - Compressed