w3school_HTML5

8/6/2019 w3school_HTML5

1/49

What is HTML5?

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.

The previous version of HTML came in 1999. The web has changed a lot since then.

HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.

How Did HTML5 Get Started?

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the WebHypertext Application Technology Working Group (WHATWG).

WHATWG was working with web forms and applications, and W3C was working with XHTML2.0. In 2006, they decided to cooperate and create a new version of HTML.

Some rules for HTML5 were established:

New features should be based on HTML, CSS, DOM, and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

New Features

Some of the most interesting new features in HTML5:

The canvas element for drawing

The video and audio elements for media playback

Better support for local offline storage

New content specific elements, like article, footer, header, nav, section

New form controls, like calendar, date, time, email, url, search

Browser Support

HTML5 is not yet an official standard, and no browsers have full HTML5 support.

But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to addnew HTML5 features to their latest versions.

New Elements in HTML5

The internet has changed a lot since HTML 4.01 became a standard in 1999.


2/49

Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they wereintended to. These elements are deleted or re-written in HTML5.

To better handle today's internet use, HTML5 also includes new elements for better structure,drawing, media content, and better form handling.

New Markup Elements

New elements for better structure:

Tag Description

For external content, like text from a news-article, blog, forum, or any othercontent from an external source

For content aside from the content it is placed in. The aside content should berelated to the surrounding content

A button, or a radiobutton, or a checkbox

For describing details about a document, or parts of a document A caption, or summary, inside the details element

For grouping a section of stand-alone content, could be a video

The caption of the figure section

For a footer of a document or section, could include the name of the author,the date of the document, contact information, or copyright information

For an introduction of a document or section, could include navigation

For a section of headings, using to , where the largest is the mainheading of the section, and the others are sub-headings

For text that should be highlighted

For a measurement, used only if the maximum and minimum values areknown

For a section of navigation

The state of a work in progress

For ruby annotation (Chinese notes or characters)

For explanation of the ruby annotation

What to show browsers that do not support the ruby element

For a section in a document. Such as chapters, headers, footers, or any othersections of the document

For defining a time or a date, or both

Word break. For defining a line-break opportunity.

New Media Elements

HTML5 provides a new standard for media content:

Tag Description


3/49

For multimedia content, sounds, music or other audio streams

For video content, such as a movie clip or other video streams

For media resources for media elements, defined inside video or audioelements

For embedded content, such as a plug-in

The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag Description

For making graphics with a script

New Form Elements

HTML5 offers more form elements, with more functionality:

Tag Description

A list of options for input values

Generate keys to authenticate users

For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element's type attribute has many new values, for better input control before

sending it to the server:

Type Description

tel The input value is of type telephone number

search The input field is a search field

url The input value is a URL

email The input value is one or more email addresses

datetime The input value is a date and/or time

date The input value is a date

month The input value is a month

week The input value is a week

time The input value is of type time

datetime-local The input value is a local date/time

number The input value is a number

range The input value is a number in a given range

color The input value is a hexadecimal color, like #FF8800


4/49

Video on the Web

Until now, there has never been a standard for showing video on a web page.

Today, most videos are shown through a plugin (like flash). However, not all browsers havethe same plugins.

HTML5 specifies a standard way to include video, with the video element.

Video Formats

Currently, there are 3 supported video formats for the video element:

Format IE Firefox Opera Chrome Safari

Ogg No 3.5+ 10.5+ 5.0+ No

MPEG 4 9.0+ No No 5.0+ 3.0+

WebM No No 10.6+ 6.0+ No

Ogg = Ogg files with Theora video codec and Vorbis audio codec

MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec

WebM = WebM files with VP8 video codec and Vorbis audio codec

How It Works

To show a video in HTML5, this is all you need:

The control attribute is for adding play, pause, and volume controls.

It is also always a good idea to include the width and height attributes.

Insert content between the and tags for browsers that do not support thevideo element:

Example

Your browser does not support the video tag.

Try it yourself

The example above uses an Ogg file, and will work in Firefox, Opera and Chrome.
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_simplehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_simple


5/49

To make the video work in Internet Explorer, Safari and future versions of Chrome, we mustadd a MPEG4 and WebM file.

The video element allows multiple source elements. Source elements can link to differentvideo files. The browser will use the first recognized format:

Example

Your browser does not support the video tag.

Try it yourself

All AttributesAttribute Value Description

audio muted Defining the default state of the the audio. Currently,only "muted" is allowed

autoplay autoplay If present, then the video will start playing as soonas it is ready

controls controls If present, controls will be displayed, such as a playbutton

height pixels Sets the height of the video player

loop loop If present, the video will start over again, every timeit is finished

poster url Specifies the URL of an image representing the video

preload preload If present, the video will be loaded at page load, andready to run. Ignored if "autoplay" is present

src url The URL of the video to play

width pixels Sets the width of the video player

Audio on the Web

Until now, there has never been a standard for playing audio on a web page.

Today, most audio are played through a plugin (like flash). However, not all browsers have thesame plugins.

HTML5 specifies a standard way to include audio, with the audio element.

The audio element can play sound files, or an audio stream.
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_allhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_all


6/49

Audio Formats

Currently, there are 3 supported formats for the audio element:

Format IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Ogg Vorbis No Yes Yes Yes No

MP3 Yes No No Yes Yes

Wav No Yes Yes No Yes

How It Works

To play an audio file in HTML5, this is all you need:

The control attribute is for adding play, pause, and volume controls.

Insert content between the and tags for browsers that do not support theaudio element:

Example

Your browser does not support the audio element.

Try it yourself

The example above uses an Ogg file, and will work in Firefox, Opera and Chrome.

To make the audio work in Internet Explorer and Safari, add an audio file of the type MP3.

The audio element allows multiple source elements. Source elements can link to differentaudio files. The browser will use the first recognized format:

Example

Your browser does not support the audio element.

Try it yourself
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_simplehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_allhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_simplehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all


7/49

All Attributes

Attribute Value Description

autoplay autoplay Specifies that the audio will start playing as soon asit is ready.

controls controls Specifies that controls will be displayed, such as aplay button.

loop loop Specifies that the audio will start playing again(looping) when it reaches the end

preload preload Specifies that the audio will be loaded at page load,and ready to run. Ignored if autoplay is present.

src url Specifies the URL of the audio to play

The canvas element is used to draw graphics on a web page.

What is Canvas?

The HTML5 canvas element uses JavaScript to draw graphics on a web page.

A canvas is a rectangular area, and you control every pixel of it.

The canvas element has several methods for drawing paths, boxes, circles, characters, andadding images.

Create a Canvas Element

Add a canvas element to the HTML5 page.

Specify the id, width, and height of the element:

Draw With JavaScript

The canvas element has no drawing abilities of its own. All drawing must be done inside aJavaScript:

var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);


8/49

Try it yourself

JavaScript uses the id to find the canvas element:

var c=document.getElementById("myCanvas");

Then, create a context object:

var cxt=c.getContext("2d");

The getContext("2d") object is a built-in HTML5 object, with many methods to draw paths,

boxes, circles, characters, images and more.

The next two lines draws a red rectangle:

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

The fillStyle method makes it red, and the fillRect method specifies the shape, position, andsize.

Understanding Coordinates

The fillRect method above had the parameters (0,0,150,75).

This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).

The canvas' X and Y coordinates are used to position drawings on the canvas.

Mouse over the rectangle below to see the coordinates:

X

Y

More Canvas Examples

Below are more examples of drawing on the canvas element:

Example - Line
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_firsthttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_first


9/49

Draw a line by specifying where to start, and where to stop:

Try it yourself

Example - Circle

Draw a circle by specifying the size, color, and position:

Try it yourself

Example - Gradient

Draw a gradient background with the colors you specify:

Try it yourself

Example - Image

Put an image on the canvas:

Try it yourself

Storing Data on the Client

HTML5 offers two new objects for storing data on the client:

localStorage - stores data with no time limit

sessionStorage - stores data for one session

Earlier, this was done with cookies. Cookies are not suitable for large amounts of data,because they are passed on by EVERY request to the server, making it very slow and in-effective.

In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for.It is possible to store large amounts of data without affecting the website's performance.
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_linehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_circlehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_gradienthttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_imagehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_linehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_circlehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_gradienthttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_image


10/49

The data is stored in different areas for different websites, and a website can only access datastored by itself.

HTML5 uses JavaScript to store and access the data.

The localStorage Object

The localStorage object stores the data with no time limit. The data will be available the nextday, week, or year.

How to create and access a localStorage:

Example

localStorage.lastname="Smith";document.write(localStorage.lastname);

Try it yourself

The following example counts the number of times a user has visited a page:

Example

if (localStorage.pagecount){localStorage.pagecount=Number(localStorage.pagecount) +1;

}else{localStorage.pagecount=1;}

document.write("Visits "+ localStorage.pagecount + " time(s).");

Try it yourself

The sessionStorage Object

The sessionStorage object stores the data for one session. The data is deleted when the usercloses the browser window.

How to create and access a sessionStorage:

Example
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_localhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_local_pagecounthttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_localhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_local_pagecount


11/49

sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);

Try it yourself

The following example counts the number of times a user has visited a page, in the currentsession:

Example

if (sessionStorage.pagecount){sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;}

else{sessionStorage.pagecount=1;}

document.write("Visits "+sessionStorage.pagecount+" time(s) thissession.");

Try it yourself

HTML5 New Input Types

HTML5 has several new input types for forms. These new features allow for better inputcontrol and validation.

This chapter covers the new input types:

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

Browser Support

Input type IE Firefox Opera Chrome Safari

email No 4.0 9.0 10.0 No

url No 4.0 9.0 10.0 No
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_sessionhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_session_pagecounthttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_sessionhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_session_pagecount


12/49

number No No 9.0 7.0 No

range No No 9.0 4.0 4.0

Date pickers No No 9.0 10.0 No

search No 4.0 11.0 10.0 No

color No No 11.0 No No

Note: Opera has the best support for the new input types. However, you can already startusing them in all major browsers. If they are not supported, they will behave as regular textfields.

Input Type - email

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

The value of the email field is automatically validated when the form is submitted.

Example

E-mail:

Try it yourself

Tip: Safari on the iPhone recognizes the email input type, and changes the on-screen

keyboard to match it (adds @ and .com options).

Input Type - url

The url type is used for input fields that should contain a URL address.

The value of the url field is automatically validated when the form is submitted.

Example

Homepage:

Try it yourself

Tip: Safari on the iPhone recognizes the url input type, and changes the on-screen keyboardto match it (adds .com option).

Input Type - number

The number type is used for input fields that should contain a numeric value.

You can also set restrictions on what numbers are accepted:
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_emailhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_urlhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_emailhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_url


13/49

Example

Points:

Try it yourself

Use the following attributes to specify restrictions for the number type:


max number Specifies the maximum value allowed

min number Specifies the minimum value allowed

step number Specifies legal number intervals (if step="3", legalnumbers could be -3,0,3,6, etc)

value number Specifies the default value

Try an example with all the restriction attributes: Try it yourself

Tip: Safari on the iPhone recognizes the number input type, and changes the on-screenkeyboard to match it (shows numbers).

Input Type - range

The range type is used for input fields that should contain a value from a range of numbers.

The range type is displayed as a slider bar.

You can also set restrictions on what numbers are accepted:

Example

Try it yourself

Use the following attributes to specify restrictions for the range type:


max number Specifies the maximum value allowed

min number Specifies the minimum value allowed

step number Specifies legal number intervals (if step="3", legalnumbers could be -3,0,3,6, etc)

value number Specifies the default value

Input Type - Date Pickers
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_numberhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_number_advhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_rangehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_numberhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_number_advhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_range


14/49

HTML5 has several new input types for selecting date and time:

date - Selects date, month and year

month - Selects month and year

week - Selects week and year

time - Selects time (hour and minute)

datetime - Selects time, date, month and year (UTC time) datetime-local - Selects time, date, month and year (local time)

The following example allows you to select a date from a calendar:

Example

Date:

Try it yourself

Input type "month": Try it yourself

Input type "week": Try it yourself

Input type "time": Try it yourself

Input type "datetime": Try it yourself

Input type "datetime-local": Try it yourself

Input Type - search

The search type is used for search fields, like a site search, or Google search.

The search field behaves like a regular text field.

Input Type - color

The color type is used for input fields that should contain a color.

This input type will allow you to select a color from a color picker:

Example

Color:

Try it yourself
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_datehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_monthhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_weekhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_timehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_datetimehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_datetime-localhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_colorhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_datehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_monthhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_weekhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_timehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_datetimehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_datetime-localhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_color


15/49

HTML5 New Form Elements

HTML5 has several new elements and attributes for forms.

This chapter covers the new form elements:

datalist

keygen

output

Browser Support

Attribute IE Firefox Opera Chrome Safari

datalist No 4.0 9.5 No No

keygen No 4.0 10.5 3.0 No

output No No 9.5 10.0 No

datalist Element

The datalist element specifies a list of options for an input field.

The list is created with option elements inside the datalist.

To bind a datalist to an input field, let the list attribute of the input field refer to the id of thedatalist:

ExampleWebpage:

Try it yourself

Tip: The option elements should always have a value attribute.

keygen Element

The purpose of the keygen element is to provide a secure way to authenticate users.

The keygen element is a key-pair generator. When a form is submitted, two keys aregenerated, one private and one public.
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_datalisthttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_datalist


16/49

The private key is stored on the client, and the public key is sent to the server. The public keycould be used to generate a client certificate to authenticate the user in the future.

Currently, the browser support for this element is not good enough to be a useful securitystandard.

Example

Username: Encryption:

Try it yourself

output Element

The output element is used for different types of output, like calculations or script output:

Example

Try it yourself

HTML5 New Form Attributes

This chapter covers some of the new attributes for and .

New form attributes:

autocomplete

novalidate

New input attributes:

autocomplete

autofocus form

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

height and width

list

min, max and step

multiple

pattern (regexp)

placeholder
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_keygenhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_outputhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_keygenhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_output


17/49

required

Browser Support

Attribute IE Firefox Opera Chrome Safari

autocomplete 8.0 3.5 9.5 3.0 4.0

autofocus No 4.0 10.0 3.0 4.0

form No 4.0 9.5 10.0 No

form overrides No 4.0 10.5 10.0 No

height and width 8.0 3.5 9.5 3.0 4.0

list No 4.0 9.5 No No

min, max and step No No 9.5 3.0 No

multiple No 3.5 11.0 3.0 4.0

novalidate No 4.0 11.0 10.0 No

pattern No 4.0 9.5 3.0 No

placeholder No 4.0 11.0 3.0 3.0

required No 4.0 9.5 3.0 No

autocomplete Attribute

The autocomplete attribute specifies that the form or input field should have an autocomplete

function.

Note: The autocomplete attribute works with , and the following types: text,search, url, telephone, email, password, datepickers, range, and color.

When the user starts to type in an autocomplete field, the browser should display options tofill in the field:

Example

First name:
Last name:
E-mail:

Try it yourself

Note: In some browsers you may need to activate the autocomplete function for this to work.

autofocus Attribute
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_autocompletehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_autocomplete


18/49

The autofocus attribute specifies that a field should automatically get focus when a page isloaded.

Note: The autofocus attribute works with all types.

Example

User name:

Try it yourself

form Attribute

The form attribute specifies one or more forms the input field belongs to.

Note: The form attribute works with all types.

The form attribute must refer to the id of the form it belongs to:

Example

First name:Last name:

Try it yourself

Note: To refer to more than one form, use a space-separated list.

Form Override Attributes

The form override attributes allow you to override some of the attributes set for the formelement.

The form override attributes are:

formaction - Overrides the form action attribute

formenctype - Overrides the form enctype attribute

formmethod - Overrides the form method attribute

formnovalidate - Overrides the form novalidate attribute

formtarget - Overrides the form target attribute

Note: The form override attributes works with the following types: submit andimage.
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_autofocushttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_formhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_autofocushttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_form


19/49

Example

E-mail:

Try it yourself

Note: These attributes are helpful for creating different submit buttons.

height and width Attributes

The height and width attributes specifies the height and width of the image used for the inputtype image.

Note: The height and width attributes only works with type: image.

Example

Try it yourself

list Attribute

The list attribute specifies a datalist for an input field. A datalist is a list of options for an inputfield.

Note: The list attribute works with the following types: text, search, url, telephone,email, date pickers, number, range, and color.

ExampleWebpage:
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_overridehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_height_widthhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_overridehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_height_width


20/49

Try it yourself

min, max and step Attributes

The min, max and step attributes are used to specify restrictions for input types containingnumbers or dates.

The max attribute specifies the maximum value allowed for the input field.

The min attribute specifies the minimum value allowed for the input field.

The step attribute specifies the legal number intervals for the input field (if step="3", legalnumbers could be -3,0,3,6, etc).

Note: The min, max, and step attributes works with the following types: datepickers, number, and range.

The example below shows a numeric field that accepts values between 0 and 10, with a stepof 3 (legal numbers are 0, 3, 6 and 9):

Example

Points:

Try it yourself

multiple Attribute

The multiple attribute specifies that multiple values can be selected for an input field.

Note: The multiple attribute works with the following types: email, and file.

Example

Select images:

Try it yourself

novalidate Attribute

The novalidate attribute specifies that the form or input field should not be validated whensubmitted.

If this attribute is present the form will not validate form input.
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_datalisthttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_min_max_stephttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_multiplehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_datalisthttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_min_max_stephttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_multiple


21/49

Note: The novalidate attribute works with: and the following types: text,search, url, telephone, email, password, date pickers, range, and color.

Example

E-mail:

Try it yourself

pattern Attribute

The pattern attribute specifies a pattern used to validate an input field.

The pattern is a regular expression. You can read about this in our JavaScript tutorial.

Note: The pattern attribute works with the following types: text, search, url,telephone, email, and password

The example below shows a text field that can only contain three letters (no numbers orspecial characters):

Example

Country code:

Try it yourself

placeholder Attribute

The placeholder attribute provides a hint that describes the expected value of an input field.

Note: The placeholder attribute works with the following types: text, search, url,telephone, email, and password

The hint is displayed in the input field when it is empty, and disappears when the field getsfocus:

Example

Try it yourself
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_novalidatehttp://www.w3schools.com/js/js_obj_regexp.asphttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_patternhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_placeholderhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_novalidatehttp://www.w3schools.com/js/js_obj_regexp.asphttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_patternhttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_placeholder


22/49

required Attribute

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

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

Example

Name:

Try it yourself

HTML5

HTML5 improves interoperability and reduces development costs by making precise rules onhow 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 ,, , and .

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

Defines the document type

Defines a hyperlink

Defines an abbreviation

Not supported in HTML5.

Defines an address element


Defines an area inside an image map

New Defines an article
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_requiredhttp://www.w3schools.com/w3c/w3c_html.asphttp://www.w3schools.com/html5/tag_comment.asphttp://www.w3schools.com/html5/tag_doctype.asphttp://www.w3schools.com/html5/tag_a.asphttp://www.w3schools.com/html5/tag_abbr.asphttp://www.w3schools.com/html5/tag_acronym.asphttp://www.w3schools.com/html5/tag_address.asphttp://www.w3schools.com/html5/tag_applet.asphttp://www.w3schools.com/html5/tag_area.asphttp://www.w3schools.com/html5/tag_article.asphttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_requiredhttp://www.w3schools.com/w3c/w3c_html.asphttp://www.w3schools.com/html5/tag_comment.asphttp://www.w3schools.com/html5/tag_doctype.asphttp://www.w3schools.com/html5/tag_a.asphttp://www.w3schools.com/html5/tag_abbr.asphttp://www.w3schools.com/html5/tag_acronym.asphttp://www.w3schools.com/html5/tag_address.asphttp://www.w3schools.com/html5/tag_applet.asphttp://www.w3schools.com/html5/tag_area.asphttp://www.w3schools.com/html5/tag_article.asp


23/49

New Defines content aside from the page content

New Defines sound content

Defines bold text

Defines a base URL for all the links in a page


Defines the direction of text display


Defines a long quotation

Defines the body element

Inserts a single line break

Defines a push button

New Defines graphics

Defines a table caption


Defines a citation Defines computer code text

Defines attributes for table columns

Defines groups of table columns

New Defines a command button

New Defines a dropdown list

Defines a definition description

Defines deleted text

New Defines details of an element

Defines a definition term


Defines a section in a document

Defines a definition list


Defines emphasized text

New Defines external interactive content or plugin

Defines a fieldset

New Defines the caption of a figure element

New Defines a group of media content, and their caption

Not supported in HTML5.New Defines a footer for a section or page

Defines a form



to Defines header 1 to header 6

Defines information about the document
http://www.w3schools.com/html5/tag_aside.asphttp://www.w3schools.com/html5/tag_audio.asphttp://www.w3schools.com/html5/tag_b.asphttp://www.w3schools.com/html5/tag_base.asphttp://www.w3schools.com/html5/tag_basefont.asphttp://www.w3schools.com/html5/tag_bdo.asphttp://www.w3schools.com/html5/tag_big.asphttp://www.w3schools.com/html5/tag_blockquote.asphttp://www.w3schools.com/html5/tag_body.asphttp://www.w3schools.com/html5/tag_br.asphttp://www.w3schools.com/html5/tag_button.asphttp://www.w3schools.com/html5/tag_canvas.asphttp://www.w3schools.com/html5/tag_caption.asphttp://www.w3schools.com/html5/tag_center.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_col.asphttp://www.w3schools.com/html5/tag_colgroup.asphttp://www.w3schools.com/html5/tag_command.asphttp://www.w3schools.com/html5/tag_datalist.asphttp://www.w3schools.com/html5/tag_dd.asphttp://www.w3schools.com/html5/tag_del.asphttp://www.w3schools.com/html5/tag_details.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_dir.asphttp://www.w3schools.com/html5/tag_div.asphttp://www.w3schools.com/html5/tag_dl.asphttp://www.w3schools.com/html5/tag_dt.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_embed.asphttp://www.w3schools.com/html5/tag_fieldset.asphttp://www.w3schools.com/html5/tag_figcaption.asphttp://www.w3schools.com/html5/tag_figure.asphttp://www.w3schools.com/html5/tag_font.asphttp://www.w3schools.com/html5/tag_footer.asphttp://www.w3schools.com/html5/tag_form.asphttp://www.w3schools.com/html5/tag_frame.asphttp://www.w3schools.com/html5/tag_frameset.asphttp://www.w3schools.com/html5/tag_hn.asphttp://www.w3schools.com/html5/tag_head.asphttp://www.w3schools.com/html5/tag_aside.asphttp://www.w3schools.com/html5/tag_audio.asphttp://www.w3schools.com/html5/tag_b.asphttp://www.w3schools.com/html5/tag_base.asphttp://www.w3schools.com/html5/tag_basefont.asphttp://www.w3schools.com/html5/tag_bdo.asphttp://www.w3schools.com/html5/tag_big.asphttp://www.w3schools.com/html5/tag_blockquote.asphttp://www.w3schools.com/html5/tag_body.asphttp://www.w3schools.com/html5/tag_br.asphttp://www.w3schools.com/html5/tag_button.asphttp://www.w3schools.com/html5/tag_canvas.asphttp://www.w3schools.com/html5/tag_caption.asphttp://www.w3schools.com/html5/tag_center.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_col.asphttp://www.w3schools.com/html5/tag_colgroup.asphttp://www.w3schools.com/html5/tag_command.asphttp://www.w3schools.com/html5/tag_datalist.asphttp://www.w3schools.com/html5/tag_dd.asphttp://www.w3schools.com/html5/tag_del.asphttp://www.w3schools.com/html5/tag_details.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_dir.asphttp://www.w3schools.com/html5/tag_div.asphttp://www.w3schools.com/html5/tag_dl.asphttp://www.w3schools.com/html5/tag_dt.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_embed.asphttp://www.w3schools.com/html5/tag_fieldset.asphttp://www.w3schools.com/html5/tag_figcaption.asphttp://www.w3schools.com/html5/tag_figure.asphttp://www.w3schools.com/html5/tag_font.asphttp://www.w3schools.com/html5/tag_footer.asphttp://www.w3schools.com/html5/tag_form.asphttp://www.w3schools.com/html5/tag_frame.asphttp://www.w3schools.com/html5/tag_frameset.asphttp://www.w3schools.com/html5/tag_hn.asphttp://www.w3schools.com/html5/tag_head.asp


24/49

New Defines a header for a section or page

New Defines information about a section in a document

Defines a horizontal rule

Defines an html document

Defines italic text

Defines an inline sub window (frame)

Defines an image

Defines an input field

Defines inserted text

New Defines a generated key in a form

Defines keyboard text

Defines a label for a form control

Defines a title in a fieldset

Defines a list item

Defines a resource reference Defines an image map

New Defines marked text

Defines a menu list

Defines meta information

New Defines measurement within a predefined range

New Defines navigation links


Defines a noscript section

Defines an embedded object

Defines an ordered list

Defines an option group

Defines an option in a drop-down list

New Defines some types of output

Defines a paragraph

Defines a parameter for an object

Defines preformatted text

New Defines progress of a task of any kind

Defines a short quotation

New Used in ruby annotations to define what to show browsers that to notsupport the ruby element.

New Defines explanation to ruby annotations.

New Defines ruby annotations

Defines text that is no longer correct

Defines sample computer code

Defines a script
http://www.w3schools.com/html5/tag_header.asphttp://www.w3schools.com/html5/tag_hgroup.asphttp://www.w3schools.com/html5/tag_hr.asphttp://www.w3schools.com/html5/tag_html.asphttp://www.w3schools.com/html5/tag_i.asphttp://www.w3schools.com/html5/tag_iframe.asphttp://www.w3schools.com/html5/tag_img.asphttp://www.w3schools.com/html5/tag_input.asphttp://www.w3schools.com/html5/tag_ins.asphttp://www.w3schools.com/html5/tag_keygen.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_label.asphttp://www.w3schools.com/html5/tag_legend.asphttp://www.w3schools.com/html5/tag_li.asphttp://www.w3schools.com/html5/tag_link.asphttp://www.w3schools.com/html5/tag_map.asphttp://www.w3schools.com/html5/tag_mark.asphttp://www.w3schools.com/html5/tag_menu.asphttp://www.w3schools.com/html5/tag_meta.asphttp://www.w3schools.com/html5/tag_meter.asphttp://www.w3schools.com/html5/tag_nav.asphttp://www.w3schools.com/html5/tag_noframes.asphttp://www.w3schools.com/html5/tag_noscript.asphttp://www.w3schools.com/html5/tag_object.asphttp://www.w3schools.com/html5/tag_ol.asphttp://www.w3schools.com/html5/tag_optgroup.asphttp://www.w3schools.com/html5/tag_option.asphttp://www.w3schools.com/html5/tag_output.asphttp://www.w3schools.com/html5/tag_p.asphttp://www.w3schools.com/html5/tag_param.asphttp://www.w3schools.com/html5/tag_pre.asphttp://www.w3schools.com/html5/tag_progress.asphttp://www.w3schools.com/html5/tag_q.asphttp://www.w3schools.com/html5/tag_rp.asphttp://www.w3schools.com/html5/tag_rt.asphttp://www.w3schools.com/html5/tag_ruby.asphttp://www.w3schools.com/html5/tag_s.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_script.asphttp://www.w3schools.com/html5/tag_header.asphttp://www.w3schools.com/html5/tag_hgroup.asphttp://www.w3schools.com/html5/tag_hr.asphttp://www.w3schools.com/html5/tag_html.asphttp://www.w3schools.com/html5/tag_i.asphttp://www.w3schools.com/html5/tag_iframe.asphttp://www.w3schools.com/html5/tag_img.asphttp://www.w3schools.com/html5/tag_input.asphttp://www.w3schools.com/html5/tag_ins.asphttp://www.w3schools.com/html5/tag_keygen.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_label.asphttp://www.w3schools.com/html5/tag_legend.asphttp://www.w3schools.com/html5/tag_li.asphttp://www.w3schools.com/html5/tag_link.asphttp://www.w3schools.com/html5/tag_map.asphttp://www.w3schools.com/html5/tag_mark.asphttp://www.w3schools.com/html5/tag_menu.asphttp://www.w3schools.com/html5/tag_meta.asphttp://www.w3schools.com/html5/tag_meter.asphttp://www.w3schools.com/html5/tag_nav.asphttp://www.w3schools.com/html5/tag_noframes.asphttp://www.w3schools.com/html5/tag_noscript.asphttp://www.w3schools.com/html5/tag_object.asphttp://www.w3schools.com/html5/tag_ol.asphttp://www.w3schools.com/html5/tag_optgroup.asphttp://www.w3schools.com/html5/tag_option.asphttp://www.w3schools.com/html5/tag_output.asphttp://www.w3schools.com/html5/tag_p.asphttp://www.w3schools.com/html5/tag_param.asphttp://www.w3schools.com/html5/tag_pre.asphttp://www.w3schools.com/html5/tag_progress.asphttp://www.w3schools.com/html5/tag_q.asphttp://www.w3schools.com/html5/tag_rp.asphttp://www.w3schools.com/html5/tag_rt.asphttp://www.w3schools.com/html5/tag_ruby.asphttp://www.w3schools.com/html5/tag_s.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_script.asp


25/49

New Defines a section

Defines a selectable list

Defines small text

New Defines media resources



Defines strong text

Defines a style definition

Defines subscripted text

New Defines the header of a "detail" element

Defines superscripted text

Defines a table

Defines a table body

Defines a table cell

Defines a text area Defines a table footer

Defines a table header


New Defines a date/time

Defines the document title

Defines a table row



Defines an unordered list

Defines a variable

New Defines a video

New Defines a possible line-break


HTML5 Global Attributes

New : New global attributes in HTML5.


accesskey character Specifies a keyboard shortcut to access an element

class classname Specifies a classname for an element (used forstylesheets)

contenteditableNew true Specifies if the user is allowed to edit the content or
http://www.w3schools.com/html5/tag_section.asphttp://www.w3schools.com/html5/tag_select.asphttp://www.w3schools.com/html5/tag_small.asphttp://www.w3schools.com/html5/tag_source.asphttp://www.w3schools.com/html5/tag_span.asphttp://www.w3schools.com/html5/tag_strike.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_style.asphttp://www.w3schools.com/html5/tag_sup.asphttp://www.w3schools.com/html5/tag_summary.asphttp://www.w3schools.com/html5/tag_sup.asphttp://www.w3schools.com/html5/tag_table.asphttp://www.w3schools.com/html5/tag_tbody.asphttp://www.w3schools.com/html5/tag_td.asphttp://www.w3schools.com/html5/tag_textarea.asphttp://www.w3schools.com/html5/tag_tfoot.asphttp://www.w3schools.com/html5/tag_th.asphttp://www.w3schools.com/html5/tag_thead.asphttp://www.w3schools.com/html5/tag_time.asphttp://www.w3schools.com/html5/tag_title.asphttp://www.w3schools.com/html5/tag_tr.asphttp://www.w3schools.com/html5/tag_tt.asphttp://www.w3schools.com/html5/tag_u.asphttp://www.w3schools.com/html5/tag_ul.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_video.asphttp://www.w3schools.com/html5/tag_wbr.asphttp://www.w3schools.com/html5/tag_xmp.asphttp://www.w3schools.com/html5/att_global_accesskey.asphttp://www.w3schools.com/html5/att_global_class.asphttp://www.w3schools.com/html5/att_global_contenteditable.asphttp://www.w3schools.com/html5/tag_section.asphttp://www.w3schools.com/html5/tag_select.asphttp://www.w3schools.com/html5/tag_small.asphttp://www.w3schools.com/html5/tag_source.asphttp://www.w3schools.com/html5/tag_span.asphttp://www.w3schools.com/html5/tag_strike.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_style.asphttp://www.w3schools.com/html5/tag_sup.asphttp://www.w3schools.com/html5/tag_summary.asphttp://www.w3schools.com/html5/tag_sup.asphttp://www.w3schools.com/html5/tag_table.asphttp://www.w3schools.com/html5/tag_tbody.asphttp://www.w3schools.com/html5/tag_td.asphttp://www.w3schools.com/html5/tag_textarea.asphttp://www.w3schools.com/html5/tag_tfoot.asphttp://www.w3schools.com/html5/tag_th.asphttp://www.w3schools.com/html5/tag_thead.asphttp://www.w3schools.com/html5/tag_time.asphttp://www.w3schools.com/html5/tag_title.asphttp://www.w3schools.com/html5/tag_tr.asphttp://www.w3schools.com/html5/tag_tt.asphttp://www.w3schools.com/html5/tag_u.asphttp://www.w3schools.com/html5/tag_ul.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_video.asphttp://www.w3schools.com/html5/tag_wbr.asphttp://www.w3schools.com/html5/tag_xmp.asphttp://www.w3schools.com/html5/att_global_accesskey.asphttp://www.w3schools.com/html5/att_global_class.asphttp://www.w3schools.com/html5/att_global_contenteditable.asp


26/49

false not

contextmenuNew menu_id Specifies the context menu for an element

dir ltrrtl

Specifies the text direction for the content in anelement

draggableNew true

falseauto

Specifies whether or not a user is allowed to drag an

element

dropzoneNew copymovelink

Specifies what happens when dragged items/data isdropped in the element

hiddenNew hidden Specifies that the element is not relevant. Hidden

elements are not displayed

id id Specifies a unique id for an element

lang language_code Specifies a language code for the content in anelement

spellcheckNew truefalse

Specifies if the element must have its spelling andgrammar checked

style style_definition Specifies an inline style for an element

tabindex number Specifies the tab order of an element

title text Specifies extra information about an element

Global Event Attributes

HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScriptwhen a user clicks on an element.

To learn more about programming events, please visit our JavaScript tutorialand our DHTMLtutorial.

Below are the global event attributes that can be inserted into HTML5 elements to defineevent actions.

New : New event attributes in HTML5.

Window Event Attributes

Events triggered for the window object.

Applies to the tag:


onafterprintNew script Script to be run after the document is printed

onbeforeprintNew script Script to be run before the document is printed

onbeforeonloadNew script Script to be run before the document loads
http://www.w3schools.com/html5/att_global_dir.asphttp://www.w3schools.com/html5/att_global_hidden.asphttp://www.w3schools.com/html5/att_global_id.asphttp://www.w3schools.com/html5/att_global_lang.asphttp://www.w3schools.com/html5/att_global_spellcheck.asphttp://www.w3schools.com/html5/att_global_style.asphttp://www.w3schools.com/html5/att_global_tabindex.asphttp://www.w3schools.com/html5/att_global_title.asphttp://www.w3schools.com/js/default.asphttp://www.w3schools.com/js/default.asphttp://www.w3schools.com/dhtml/default.asphttp://www.w3schools.com/dhtml/default.asphttp://www.w3schools.com/html5/att_global_dir.asphttp://www.w3schools.com/html5/att_global_hidden.asphttp://www.w3schools.com/html5/att_global_id.asphttp://www.w3schools.com/html5/att_global_lang.asphttp://www.w3schools.com/html5/att_global_spellcheck.asphttp://www.w3schools.com/html5/att_global_style.asphttp://www.w3schools.com/html5/att_global_tabindex.asphttp://www.w3schools.com/html5/att_global_title.asphttp://www.w3schools.com/js/default.asphttp://www.w3schools.com/dhtml/default.asphttp://www.w3schools.com/dhtml/default.asp


27/49

onblur script Script to be run when the window loses focus

onerrorNew script Script to be run when an error occur

onfocus script Script to be run when the window gets focus

onhaschangeNew script Script to be run when the document has change

onload script Script to be run when the document loads

onmessageNew script Script to be run when the message is triggered

onofflineNew script Script to be run when the document goes offline

ononlineNew script Script to be run when the document comes online

onpagehideNew script Script to be run when the window is hidden

onpageshowNew script Script to be run when the window becomes visible

onpopstateNew script Script to be run when the window's history changes

onredoNew script Script to be run when the document performs a redo

onresizeNew script Script to be run when the window is resized

onstorageNew script Script to be run when a document loads

onundoNew script Script to be run when a document performs an undoonunloadNew script Script to be run when the user leaves the document

Form Events

Events triggered by actions inside a HTML form.

Applies to all HTML5 elements, but is most common in form elements:


onblur script Script to be run when an element loses focusonchange script Script to be run when an element changes

oncontextmenuNew script Script to be run when a context menu is triggered

onfocus script Script to be run when an element gets focus

onformchangeNew script Script to be run when a form changes

onforminputNew script Script to be run when a form gets user input

oninputNew script Script to be run when an element gets user input

oninvalidNew script Script to be run when an element is invalid

onreset script Script to be run when a form is resetNot supported in HTML5

onselect script Script to be run when an element is selected

onsubmit script Script to be run when a form is submitted

Keyboard Events

Events triggered by a keyboard.


28/49

Applies to all HTML5 elements.


onkeydown script Script to be run when a key is pressed

onkeypress script Script to be run when a key is pressed and released

onkeyup script Script to be run when a key is released

Mouse Events

Events triggered by a mouse, or similar user actions:

Applies to all HTML5 elements.


onclick script Script to be run on a mouse click

ondblclick script Script to be run on a mouse double-click

ondragNew script Script to be run when an element is dragged

ondragendNew script Script to be run at the end of a drag operation

ondragenterNew script Script to be run when an element has been dragged to a validdrop target

ondragleaveNew script Script to be run when an element leaves a valid drop target

ondragoverNew script Script to be run when an element is being dragged over avalid drop target

ondragstartNew script Script to be run at the start of a drag operation

ondropNew script Script to be run when dragged element is being dropped

onmousedown script Script to be run when a mouse button is pressedonmousemove script Script to be run when the mouse pointer moves

onmouseout script Script to be run when the mouse pointer moves out of anelement

onmouseover script Script to be run when the mouse pointer moves over anelement

onmouseup script Script to be run when a mouse button is released

onmousewheelNew script Script to be run when the mouse wheel is being rotated

onscrollNew script Script to be run when an element's scrollbar is being scrolled

Media Events

Events triggered by medias like videos, images and audio.

Applies to all HTML5 elements, but is most common in media elements, such as audio, embed,

img, object, and video:



29/49

onabort script Script to be run on an abort event

oncanplayNew script Script to be run when media can start play, but might has tostop for buffering

oncanplaythroughNew script Script to be run when media can be played to the end,without stopping for buffering

ondurationchangeNew script Script to be run when the length of the media is changedonemptiedNew script Script to be run when a media resource element suddenly

becomes empty (network errors, errors on load etc.)

onendedNew script Script to be run when media has reach the end

onerrorNew script Script to be run when an error occurs during the loading of anelement

onloadeddataNew script Script to be run when media data is loaded

onloadedmetadataNew script Script to be run when the duration and other media data of amedia element is loaded

onloadstartNew script Script to be run when the browser starts to load the mediadata

onpauseNew script Script to be run when media data is paused

onplayNew script Script to be run when media data is going to start playing

onplayingNew script Script to be run when media data has start playing

onprogressNew script Script to be run when the browser is fetching the media data

onratechangeNew script Script to be run when the media data's playing rate haschanged

onreadystatechangeNew script Script to be run when the ready-state changes

onseekedNew script Script to be run when a media element's seeking attribute isno longer true, and the seeking has ended

onseekingNew script Script to be run when a media element's seeking attribute istrue, and the seeking has begun

onstalledNew script Script to be run when there is an error in fetching media data(stalled)

onsuspendNew script Script to be run when the browser has been fetching mediadata, but stopped before the entire media file was fetched

ontimeupdateNew script Script to be run when media changes its playing position

onvolumechangeNew script Script to be run when media changes the volume, also whenvolume is set to "mute"

onwaitingNew script Script to be run when media has stopped playing, but isexpected to resume

HTML5

HTML5 improves interoperability and reduces development costs by making precise rules onhow 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 ,, , and .


30/49

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

Defines the document type

Defines a hyperlink

Defines an abbreviation


Defines an address element


Defines an area inside an image map

New Defines an article

New Defines content aside from the page content

New Defines sound content

Defines bold text

Defines a base URL for all the links in a page

Not supported in HTML5. Defines the direction of text display


Defines a long quotation

Defines the body element

Inserts a single line break

Defines a push button

New Defines graphics

Defines a table caption


Defines a citation

Defines computer code text

Defines attributes for table columns

Defines groups of table columns

New Defines a command button

New Defines a dropdown list

Defines a definition description
http://www.w3schools.com/w3c/w3c_html.asphttp://www.w3schools.com/html5/tag_comment.asphttp://www.w3schools.com/html5/tag_doctype.asphttp://www.w3schools.com/html5/tag_a.asphttp://www.w3schools.com/html5/tag_abbr.asphttp://www.w3schools.com/html5/tag_acronym.asphttp://www.w3schools.com/html5/tag_address.asphttp://www.w3schools.com/html5/tag_applet.asphttp://www.w3schools.com/html5/tag_area.asphttp://www.w3schools.com/html5/tag_article.asphttp://www.w3schools.com/html5/tag_aside.asphttp://www.w3schools.com/html5/tag_audio.asphttp://www.w3schools.com/html5/tag_b.asphttp://www.w3schools.com/html5/tag_base.asphttp://www.w3schools.com/html5/tag_basefont.asphttp://www.w3schools.com/html5/tag_bdo.asphttp://www.w3schools.com/html5/tag_big.asphttp://www.w3schools.com/html5/tag_blockquote.asphttp://www.w3schools.com/html5/tag_body.asphttp://www.w3schools.com/html5/tag_br.asphttp://www.w3schools.com/html5/tag_button.asphttp://www.w3schools.com/html5/tag_canvas.asphttp://www.w3schools.com/html5/tag_caption.asphttp://www.w3schools.com/html5/tag_center.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_col.asphttp://www.w3schools.com/html5/tag_colgroup.asphttp://www.w3schools.com/html5/tag_command.asphttp://www.w3schools.com/html5/tag_datalist.asphttp://www.w3schools.com/html5/tag_dd.asphttp://www.w3schools.com/w3c/w3c_html.asphttp://www.w3schools.com/html5/tag_comment.asphttp://www.w3schools.com/html5/tag_doctype.asphttp://www.w3schools.com/html5/tag_a.asphttp://www.w3schools.com/html5/tag_abbr.asphttp://www.w3schools.com/html5/tag_acronym.asphttp://www.w3schools.com/html5/tag_address.asphttp://www.w3schools.com/html5/tag_applet.asphttp://www.w3schools.com/html5/tag_area.asphttp://www.w3schools.com/html5/tag_article.asphttp://www.w3schools.com/html5/tag_aside.asphttp://www.w3schools.com/html5/tag_audio.asphttp://www.w3schools.com/html5/tag_b.asphttp://www.w3schools.com/html5/tag_base.asphttp://www.w3schools.com/html5/tag_basefont.asphttp://www.w3schools.com/html5/tag_bdo.asphttp://www.w3schools.com/html5/tag_big.asphttp://www.w3schools.com/html5/tag_blockquote.asphttp://www.w3schools.com/html5/tag_body.asphttp://www.w3schools.com/html5/tag_br.asphttp://www.w3schools.com/html5/tag_button.asphttp://www.w3schools.com/html5/tag_canvas.asphttp://www.w3schools.com/html5/tag_caption.asphttp://www.w3schools.com/html5/tag_center.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_col.asphttp://www.w3schools.com/html5/tag_colgroup.asphttp://www.w3schools.com/html5/tag_command.asphttp://www.w3schools.com/html5/tag_datalist.asphttp://www.w3schools.com/html5/tag_dd.asp


31/49

Defines deleted text

New Defines details of an element




Defines a definition list


Defines emphasized text

New Defines external interactive content or plugin

Defines a fieldset

New Defines the caption of a figure element

New Defines a group of media content, and their caption


New Defines a footer for a section or page

Defines a form Not supported in HTML5.


to Defines header 1 to header 6

Defines information about the document

New Defines a header for a section or page

New Defines information about a section in a document

Defines a horizontal rule

Defines an html document

Defines italic text

Defines an inline sub window (frame)

Defines an image

Defines an input field

Defines inserted text

New Defines a generated key in a form

Defines keyboard text

Defines a label for a form control

Defines a title in a fieldset

Defines a list item

Defines a resource reference Defines an image map

New Defines marked text

Defines a menu list

Defines meta information

New Defines measurement within a predefined range

New Defines navigation links
http://www.w3schools.com/html5/tag_del.asphttp://www.w3schools.com/html5/tag_details.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_dir.asphttp://www.w3schools.com/html5/tag_div.asphttp://www.w3schools.com/html5/tag_dl.asphttp://www.w3schools.com/html5/tag_dt.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_embed.asphttp://www.w3schools.com/html5/tag_fieldset.asphttp://www.w3schools.com/html5/tag_figcaption.asphttp://www.w3schools.com/html5/tag_figure.asphttp://www.w3schools.com/html5/tag_font.asphttp://www.w3schools.com/html5/tag_footer.asphttp://www.w3schools.com/html5/tag_form.asphttp://www.w3schools.com/html5/tag_frame.asphttp://www.w3schools.com/html5/tag_frameset.asphttp://www.w3schools.com/html5/tag_hn.asphttp://www.w3schools.com/html5/tag_head.asphttp://www.w3schools.com/html5/tag_header.asphttp://www.w3schools.com/html5/tag_hgroup.asphttp://www.w3schools.com/html5/tag_hr.asphttp://www.w3schools.com/html5/tag_html.asphttp://www.w3schools.com/html5/tag_i.asphttp://www.w3schools.com/html5/tag_iframe.asphttp://www.w3schools.com/html5/tag_img.asphttp://www.w3schools.com/html5/tag_input.asphttp://www.w3schools.com/html5/tag_ins.asphttp://www.w3schools.com/html5/tag_keygen.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_label.asphttp://www.w3schools.com/html5/tag_legend.asphttp://www.w3schools.com/html5/tag_li.asphttp://www.w3schools.com/html5/tag_link.asphttp://www.w3schools.com/html5/tag_map.asphttp://www.w3schools.com/html5/tag_mark.asphttp://www.w3schools.com/html5/tag_menu.asphttp://www.w3schools.com/html5/tag_meta.asphttp://www.w3schools.com/html5/tag_meter.asphttp://www.w3schools.com/html5/tag_nav.asphttp://www.w3schools.com/html5/tag_del.asphttp://www.w3schools.com/html5/tag_details.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_dir.asphttp://www.w3schools.com/html5/tag_div.asphttp://www.w3schools.com/html5/tag_dl.asphttp://www.w3schools.com/html5/tag_dt.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_embed.asphttp://www.w3schools.com/html5/tag_fieldset.asphttp://www.w3schools.com/html5/tag_figcaption.asphttp://www.w3schools.com/html5/tag_figure.asphttp://www.w3schools.com/html5/tag_font.asphttp://www.w3schools.com/html5/tag_footer.asphttp://www.w3schools.com/html5/tag_form.asphttp://www.w3schools.com/html5/tag_frame.asphttp://www.w3schools.com/html5/tag_frameset.asphttp://www.w3schools.com/html5/tag_hn.asphttp://www.w3schools.com/html5/tag_head.asphttp://www.w3schools.com/html5/tag_header.asphttp://www.w3schools.com/html5/tag_hgroup.asphttp://www.w3schools.com/html5/tag_hr.asphttp://www.w3schools.com/html5/tag_html.asphttp://www.w3schools.com/html5/tag_i.asphttp://www.w3schools.com/html5/tag_iframe.asphttp://www.w3schools.com/html5/tag_img.asphttp://www.w3schools.com/html5/tag_input.asphttp://www.w3schools.com/html5/tag_ins.asphttp://www.w3schools.com/html5/tag_keygen.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_label.asphttp://www.w3schools.com/html5/tag_legend.asphttp://www.w3schools.com/html5/tag_li.asphttp://www.w3schools.com/html5/tag_link.asphttp://www.w3schools.com/html5/tag_map.asphttp://www.w3schools.com/html5/tag_mark.asphttp://www.w3schools.com/html5/tag_menu.asphttp://www.w3schools.com/html5/tag_meta.asphttp://www.w3schools.com/html5/tag_meter.asphttp://www.w3schools.com/html5/tag_nav.asp


32/49


Defines a noscript section

Defines an embedded object

Defines an ordered list

Defines an option group

Defines an option in a drop-down list

New Defines some types of output

Defines a paragraph

Defines a parameter for an object

Defines preformatted text

New Defines progress of a task of any kind

Defines a short quotation

New Used in ruby annotations to define what to show browsers that to notsupport the ruby element.

New Defines explanation to ruby annotations.

New Defines ruby annotations

Defines text that is no longer correct

Defines sample computer code

Defines a script

New Defines a section

Defines a selectable list

Defines small text

New Defines media resources



Defines strong text

Defines a style definition

Defines subscripted text

New Defines the header of a "detail" element

Defines superscripted text

Defines a table

Defines a table body

Defines a table cell

Defines a text area

Defines a table footer



New Defines a date/time

Defines the document title

Defines a table row
http://www.w3schools.com/html5/tag_noframes.asphttp://www.w3schools.com/html5/tag_noscript.asphttp://www.w3schools.com/html5/tag_object.asphttp://www.w3schools.com/html5/tag_ol.asphttp://www.w3schools.com/html5/tag_optgroup.asphttp://www.w3schools.com/html5/tag_option.asphttp://www.w3schools.com/html5/tag_output.asphttp://www.w3schools.com/html5/tag_p.asphttp://www.w3schools.com/html5/tag_param.asphttp://www.w3schools.com/html5/tag_pre.asphttp://www.w3schools.com/html5/tag_progress.asphttp://www.w3schools.com/html5/tag_q.asphttp://www.w3schools.com/html5/tag_rp.asphttp://www.w3schools.com/html5/tag_rt.asphttp://www.w3schools.com/html5/tag_ruby.asphttp://www.w3schools.com/html5/tag_s.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_script.asphttp://www.w3schools.com/html5/tag_section.asphttp://www.w3schools.com/html5/tag_select.asphttp://www.w3schools.com/html5/tag_small.asphttp://www.w3schools.com/html5/tag_source.asphttp://www.w3schools.com/html5/tag_span.asphttp://www.w3schools.com/html5/tag_strike.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_style.asphttp://www.w3schools.com/html5/tag_sup.asphttp://www.w3schools.com/html5/tag_summary.asphttp://www.w3schools.com/html5/tag_sup.asphttp://www.w3schools.com/html5/tag_table.asphttp://www.w3schools.com/html5/tag_tbody.asphttp://www.w3schools.com/html5/tag_td.asphttp://www.w3schools.com/html5/tag_textarea.asphttp://www.w3schools.com/html5/tag_tfoot.asphttp://www.w3schools.com/html5/tag_th.asphttp://www.w3schools.com/html5/tag_thead.asphttp://www.w3schools.com/html5/tag_time.asphttp://www.w3schools.com/html5/tag_title.asphttp://www.w3schools.com/html5/tag_tr.asphttp://www.w3schools.com/html5/tag_noframes.asphttp://www.w3schools.com/html5/tag_noscript.asphttp://www.w3schools.com/html5/tag_object.asphttp://www.w3schools.com/html5/tag_ol.asphttp://www.w3schools.com/html5/tag_optgroup.asphttp://www.w3schools.com/html5/tag_option.asphttp://www.w3schools.com/html5/tag_output.asphttp://www.w3schools.com/html5/tag_p.asphttp://www.w3schools.com/html5/tag_param.asphttp://www.w3schools.com/html5/tag_pre.asphttp://www.w3schools.com/html5/tag_progress.asphttp://www.w3schools.com/html5/tag_q.asphttp://www.w3schools.com/html5/tag_rp.asphttp://www.w3schools.com/html5/tag_rt.asphttp://www.w3schools.com/html5/tag_ruby.asphttp://www.w3schools.com/html5/tag_s.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_script.asphttp://www.w3schools.com/html5/tag_section.asphttp://www.w3schools.com/html5/tag_select.asphttp://www.w3schools.com/html5/tag_small.asphttp://www.w3schools.com/html5/tag_source.asphttp://www.w3schools.com/html5/tag_span.asphttp://www.w3schools.com/html5/tag_strike.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_style.asphttp://www.w3schools.com/html5/tag_sup.asphttp://www.w3schools.com/html5/tag_summary.asphttp://www.w3schools.com/html5/tag_sup.asphttp://www.w3schools.com/html5/tag_table.asphttp://www.w3schools.com/html5/tag_tbody.asphttp://www.w3schools.com/html5/tag_td.asphttp://www.w3schools.com/html5/tag_textarea.asphttp://www.w3schools.com/html5/tag_tfoot.asphttp://www.w3schools.com/html5/tag_th.asphttp://www.w3schools.com/html5/tag_thead.asphttp://www.w3schools.com/html5/tag_time.asphttp://www.w3schools.com/html5/tag_title.asphttp://www.w3schools.com/html5/tag_tr.asp


33/49



Defines an unordered list

Defines a variable

New Defines a video

New Defines a possible line-break


HTML5 Global Attributes

New : New global attributes in HTML5.


accesskey character Specifies a keyboard shortcut to access an element

class classname Specifies a classname for an element (used forstylesheets)

contenteditableNew truefalse

Specifies if the user is allowed to edit the content ornot

contextmenuNew menu_id Specifies the context menu for an element

dir ltrrtl

Specifies the text direction for the content in anelement

draggableNew truefalseauto

Specifies whether or not a user is allowed to drag anelement

dropzoneNew copy

movelink

Specifies what happens when dragged items/data is

dropped in the element

hiddenNew hidden Specifies that the element is not relevant. Hiddenelements are not displayed

id id Specifies a unique id for an element

lang language_code Specifies a language code for the content in anelement

spellcheckNew truefalse

Specifies if the element must have its spelling andgrammar checked

style style_definition Specifies an inline style for an element

tabindex number Specifies the tab order of an element

title text Specifies extra information about an element

HTML Tags
http://www.w3schools.com/html5/tag_tt.asphttp://www.w3schools.com/html5/tag_u.asphttp://www.w3schools.com/html5/tag_ul.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_video.asphttp://www.w3schools.com/html5/tag_wbr.asphttp://www.w3schools.com/html5/tag_xmp.asphttp://www.w3schools.com/html5/att_global_accesskey.asphttp://www.w3schools.com/html5/att_global_class.asphttp://www.w3schools.com/html5/att_global_contenteditable.asphttp://www.w3schools.com/html5/att_global_dir.asphttp://www.w3schools.com/html5/att_global_hidden.asphttp://www.w3schools.com/html5/att_global_id.asphttp://www.w3schools.com/html5/att_global_lang.asphttp://www.w3schools.com/html5/att_global_spellcheck.asphttp://www.w3schools.com/html5/att_global_style.asphttp://www.w3schools.com/html5/att_global_tabindex.asphttp://www.w3schools.com/html5/att_global_title.asphttp://www.w3schools.com/html5/tag_tt.asphttp://www.w3schools.com/html5/tag_u.asphttp://www.w3schools.com/html5/tag_ul.asphttp://www.w3schools.com/html5/tag_phrase_elements.asphttp://www.w3schools.com/html5/tag_video.asphttp://www.w3schools.com/html5/tag_wbr.asphttp://www.w3schools.com/html5/tag_xmp.asphttp://www.w3schools.com/html5/att_global_accesskey.asphttp://www.w3schools.com/html5/att_global_class.asphttp://www.w3schools.com/html5/att_global_contenteditable.asphttp://www.w3schools.com/html5/att_global_dir.asphttp://www.w3schools.com/html5/att_global_hidden.asphttp://www.w3schools.com/html5/att_global_id.asphttp://www.w3schools.com/html5/att_global_lang.asphttp://www.w3schools.com/html5/att_global_spellcheck.asphttp://www.w3schools.com/html5/att_global_style.asphttp://www.w3schools.com/html5/att_global_tabindex.asphttp://www.w3schools.com/html5/att_global_title.asp


34/49

HTML5Tag

Example

An HTML comment:

This is a paragraph.

Try it yourself

Definition and Usage

The comment tag is used to insert a comment in the source code. A comment will be ignoredby the browser. You can use comments to explain your code, which can help you when youedit the source code at a later date.

You can also store program-specific information inside comments. In this case they will not bevisible for the user, but they are still available to the program. A good practice is to commentthe text inside scripts and style elements to prevent older browsers, that do not supportscripting or styles, from showing it as plain text.

Differences Between HTML 4.01 and HTML5

NONE

Global AttributesThe comment tag does not support any global attributes.

More information about Global Attributes.

Event Attributes

The comment tag does not support any event attributes.

More information about Event Attributes.

HTML5Declaration

Example
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_commenthttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asphttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_commenthttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asp


35/49

An HTML5 document with the correct doctype:

Title of the document

The content of the document......

Try it yourself


The declaration must be the very first thing in your HTML5 document, before the tag.

The doctype declaration is not an HTML tag; it is an instruction to the web browser about whatversion of the markup language the page is written in.

It is important that you specify the doctype in all HTML documents, so that the browser knowswhat type of document to expect.

The doctype in HTML 4.01 required a reference to a DTD, because HTML 4.01 was based onSGML. HTML5 is not based on SGML, and does not require a reference to a DTD, but need thedoctype for browsers to behave as they should.


There are 3 different doctypes in HTML 4.01, In HTML5 there is only one:

Tips and Notes

Note: The tag does not have an end tag.

Tip: The declaration is NOT case sensitive.
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_doctypehttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_doctype


36/49

HTML5Tag

Example

A link to W3Schools.com:

Visit W3Schools.com!

Try it yourself


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

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


In HTML 4.01, the tag could be either a hyperlink or an anchor. In HTML5, the tag isalways 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, ping, rel, target, and type attributes cannot be present ifthe 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 : New in HTML5.


charset char_encoding Not supported in HTML5
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_ahttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_a


37/49

coords coordinates Not supported in HTML5

href URL Specifies the destination of the target URL

hreflang language_code Specifies the language of the target URL

mediaNew media query Specifies what media/device the target URL is optimizedfor. Default value: all

name section_name Not supported in HTML5

rel alternateauthorbookmarkexternalhelp

licensenextnofollownoreferrerprefetchprevsearch

sidebartag

Specifies the relationship between the current documentand the target URL

rev text Not supported in HTML5

shape defaultrectcirclepoly

Not supported in HTML5

target _blank_parent_self_topframename

Specifies where to open the target URL

typeNew mime_type Specifies the MIME type of the target URL

Global Attributes

The tag also supports the Global Attributes in HTML5.

Event Attributes

The tag also supports the Event Attributes in HTML5.

HTML5Tag

Example

An abbreviation is marked up as follows:
http://www.w3schools.com/html5/att_a_href.asphttp://www.w3schools.com/html5/att_a_hreflang.asphttp://www.w3schools.com/html5/att_a_media.asphttp://www.w3schools.com/html5/att_a_rel.asphttp://www.w3schools.com/html5/att_a_target.asphttp://www.w3schools.com/html5/att_a_type.asphttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asphttp://www.w3schools.com/html5/att_a_href.asphttp://www.w3schools.com/html5/att_a_hreflang.asphttp://www.w3schools.com/html5/att_a_media.asphttp://www.w3schools.com/html5/att_a_rel.asphttp://www.w3schools.com/html5/att_a_target.asphttp://www.w3schools.com/html5/att_a_type.asphttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asp


38/49

The WHO was founded in1948.

Try it yourself


The tag indicates an abbrevation 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.


NONE

Tips and Notes

Tip: The title attribute is used to show the full version of the expression when you mouse overthe abbreviation.

Global Attributes


Event Attributes


TheTag.Not Supported inHTML5.


The tag is not supported in HTML5. Use the tag instead.

The tag was used to define acronyms in HTML 4.01. An acronym can be spoken asif it were a word, example NATO, NASA, ASAP, GUI.
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_abbrhttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asphttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_abbrhttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asp


39/49

HTML5Tag

Example

Contact information for W3Schools.com:

Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78

Try it yourself


The tag defines the contact information for the author or owner of a document.

If the element is inside an element, it represents the contact informationof the author/owner of that article.

The address element is usually added to the header or footer of a webpage.


HTML 4.01 does not support the tag, so in HTML 4.01 the tag always

defines the contact information of the document's author/owner.

Tips and Notes

Note: The tag should NOT be used to describe a postal address, unless it is a partof the contact information.

Note: The address usually renders in italic. Most browsers will add a line break before andafter the address element.

Global Attributes


Event Attributes

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_addresshttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asphttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_addresshttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asp


40/49

TheTag.Not Supported in

HTML5.


The tag is not supported in HTML5. Use the tag instead.

The tag was used to define an embedded applet.

HTML5Tag

Example

An image-map, with clickable areas:

Try it yourself


The tag defines an area inside an image-map (an image-map is an image withclickable areas).

The area element is always nested inside a tag.

Note: The usemap attribute in the tag is associated with themap element's name

attribute, and creates a relationship between the image and the map.


HTML5 has some new attributes, and some HTML 4.01 attributes are no longer supported.
http://www.w3schools.com/html5/tag_object.asphttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_areahttp://www.w3schools.com/html5/tag_img.asphttp://www.w3schools.com/html5/tag_map.asphttp://www.w3schools.com/html5/tag_map.asphttp://www.w3schools.com/html5/tag_object.asphttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_areahttp://www.w3schools.com/html5/tag_img.asphttp://www.w3schools.com/html5/tag_map.asp


41/49

Attributes

New : New in HTML5.


alt text Specifies an alternate text for the area. Required ifthe href attribute is present

coords coordinates Specifies the coordinates of an area

href URL Specifies the target URL of the area

hreflangNew language_code Specifies the language of the target URL

mediaNew media query Specifies what media/device the target URL isoptimized for. Default value: all

nohref nohref Not supported in HTML5

relNew alternateauthorbookmark

externalhelplicensenextnofollownoreferrerprefetchprevsearchsidebartag

Specifies the relationship between the currentdocument and the target URL

shape rectrectanglecirc

circlepolypolygon

Specifies the shape of the area

target _blank_parent_self_topframename

Specifies where to open the target URL

typeNew mime_type Specifies the MIME type of the target URL

Global Attributes


Event Attributes

http://www.w3schools.com/html5/att_area_alt.asphttp://www.w3schools.com/html5/att_area_coords.asphttp://www.w3schools.com/html5/att_area_href.asphttp://www.w3schools.com/html5/att_area_hreflang.asphttp://www.w3schools.com/html5/att_area_media.asphttp://www.w3schools.com/html5/att_area_rel.asphttp://www.w3schools.com/html5/att_area_shape.asphttp://www.w3schools.com/html5/att_area_target.asphttp://www.w3schools.com/html5/att_area_type.asphttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asphttp://www.w3schools.com/html5/att_area_alt.asphttp://www.w3schools.com/html5/att_area_coords.asphttp://www.w3schools.com/html5/att_area_href.asphttp://www.w3schools.com/html5/att_area_hreflang.asphttp://www.w3schools.com/html5/att_area_media.asphttp://www.w3schools.com/html5/att_area_rel.asphttp://www.w3schools.com/html5/att_area_shape.asphttp://www.w3schools.com/html5/att_area_target.asphttp://www.w3schools.com/html5/att_area_type.asphttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asp


42/49

HTML5Tag

Example

Netscape is dead
AOL has a long history on the internet, being one ofthe first companies to really get people online.....

Try it yourself


The tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute itindependently from the rest of the site.

Examples of possible articles:

forum post

newspaper article

blog entry

user comment


The tag is new in HTML5.

Global Attributes


Event Attributes

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_articlehttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asphttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_articlehttp://www.w3schools.com/html5/html5_ref_globalattributes.asphttp://www.w3schools.com/html5/html5_ref_eventattributes.asp


43/49

HTML5Tag

Example

My family and I visited The Epcot center this summer.
Epcot CenterThe Epcot Center is a theme park in Disney World, Florida.
Try it yourself


The tag defines some content aside from the content it is placed in.

The aside content should be related to the surrounding content.


The tag is new in HTML5.

Tips and Notes

Tip

Documents

w3school_HTML5