<!

DOCTYPE>
The HTML <!DOCTYPE> tag is used for specifying which language and version the document is using. This
is referred to as the document type declaration (DTD).
With the introduction of HTML5, the <!DOCTYPE> tag is mostly useless, as HTML 5 does not require a
reference to a DTD. Having said that, for legacy reasons, the HTML5 specification recommends including
the <!DOCTYPE> header at the top of all HTML documents.
In HTML5, the <!DOCTYPE> declaration is much simpler than in previous versions of HTML:


<a>
The HTML <a> tag is used for creating a hyperlink to another web page.
You can use the target attribute to specify whether to open the web page in a new browser window or
not.
You can also use this tag to link an image.


<abbr>
The HTML <abbr> tag is used for indicating an abbreviation.
This tag is often used in conjunction with the global title attribute in order to provide an expansion of
the abbreviation. When this attribute is specified, it should only contain an expansion of the
abbreviation and nothing else.
Example:
The <abbr title="HyperText Markup Language">HTML</abbr> tag. Note that, at the
time of writing, the <abbr title="HyperText Markup Language">HTML</abbr> abbr tag has
limited browser support.
The HTML tag. Note that, at the time of writing, the HTML abbr tag has
limited browser support.

<address>
The HTML <address> tag is used for indicating an address, usually related to authorship of the current
document, or a section of the document.
If the tag applies to the body element, then it applies to the document as a whole.
The <address> tag must not be used to represent arbitrary addresses (e.g. postal addresses), unless
those addresses are contact information for the section. To display postal addresses, simply use
the <p> tag.
The <address> tag cannot
contain <article>, <aside>, <nav>, <section>, <header>, <footer>, <hgroup>, <h1>-<h6> or
other <address> elements.
Example: <address>This document was written by:<br />
<a href="mailto:homer@example.com">Homer Simpson</address>

<area>
The HTML <area> tag is used for defining an area in an image map. Image maps are images with
clickable areas (sometimes referred to as "hotspots") that usually link to another page.
Note that this tag is always nested within the <map> tag.
Example: <img src ="../../pix/mueller_hut/mueller_hut_t.jpg" width="225" height="151" border="0"
alt="Mueller Hut, Mount Cook, and I" usemap ="#muellermap" />
<map id ="muellermap" name="muellermap">
<area shape ="rect" coords ="90,80,120,151" href ="javascript:alert('Me');" alt="Me" />
<area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55" href
="http://en.wikipedia.org/wiki/Mount_Cook" target="_blank" alt="Mount Cook" />
<area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80" href
="http://www.natural-environment.com/places/mueller_hut.php" target="_blank" alt="Mueller Hut" />
</map>

<article>
The HTML <article> tag is used to represent an article. More specifically, the content within
the <article> tag is independent from the other content on the site (even though it could be related). By
"independent" I mean that its contents could stand alone, for example in syndication.
Examples of article content could include a forum post, a newspaper article, a blog entry, or a user-
submitted comment.
The <article> tag was introduced in HTML 5.
Example: <article>
<h4>Environmentally Friendly City</h4>
<p>A <a href="http://www.natural-environment.com/blog/2008/12/14/masdar-city-the-worlds-first-
zero-carbon-zero-waste-city/" target="_blank">brand new city</a> is being built in Abu Dhabi in the
United Arab Emirates which, when finished, will be the worlds first zero carbon, zero waste city.</p>
<p>Masdar City, a completely self sustaining city, will be powered by renewable energy and all waste
will be recycled or reused.</p>
</article>


<aside>
The HTML <aside> tag is used to represent content that is related to the surrounding content within an
article or web page, but could still stand alone in its own right. This type of content is often represented
in sidebars.
An example is a "pull quote" from a longer article. A pull quote (also known as a lift-out quote or a call-
out) is a quotation or edited excerpt from an article that is placed in a larger typeface on the same page,
serving to lead readers into an article and to highlight a key topic.
The <aside> tag was introduced in HTML 5.
Example: <div style="font:0.8em/1.2em Arial, Helvetica, Sans-Serif;">
<aside style="font-size:larger;font-style:italic;color:green;float:right;width:35%;padding-left:5px;">
70% of the world's reefs will be destroyed over the next 40 years.
</aside>
<p>Global warming is affecting coral reefs all over the world. At the current rate, 70% of the world's
reefs will be destroyed over the next 40 years.</p>
<p>As hopeless as this may sound, there are things we can do to help. By developing greener habits, we
can all do our part in reducing global warming. For example, here are <a href="http://www.natural-
environment.com/blog/2008/01/29/5-easy-ways-to-reduce-greenhouse-gas/" target="_blank">5 ways
to reduce greenhouse gases</a>. And here are some simple steps you can take to <a
href="http://www.natural-environment.com/sustainable_living/sustainable_habits.php"
target="_blank">live sustainably</a>.</p>
</div>


<audio>
The HTML <audio> tag is used to specify audio on an HTML document.
For example, you could embed a music file on your web page for your visitors to listen to.
The <audio> tag was introduced in HTML 5.
Any content between the opening and closing <audio> tags is fallback content. This content is displayed
only by browsers that don't support the <audio> tag.
Ex: <audio src="../../music/good_enough.mp3" controls>
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>

Element-Specific Attributes
Attribute Description
src Specifies the location of the audio file. Its value must be the URI of an audio file.
crossorigin This attribute is a CORS settings attribute. CORS stands for Cross-Origin Resource
Sharing. The purpose of the crossorigin attribute is to allow you to configure the
CORS requests for the element's fetched data. The values for
the crossorigin attribute are enumerated.
Possible values:
Value Description
anonymous Cross-origin CORS requests for the element will not have the credentials flag set. In other words, there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP
authentication.
use-
credentials
Cross-origin CORS requests for the element will have the credentials flag set.
If this attribute is not specified, CORS is not used at all.
An invalid keyword and an empty string will be handled as the anonymous value.
preload Specifies whether the audio should be preloaded or not, and if so, how it should be
preloaded. This attribute allows the author to provide a hint to the browser/user
agent about what the author thinks will lead to the best user experience. This
attribute may be ignored in some instances. For example, if the user has disabled
preloading or if there are network connectivity issues.
Possible values:
none
metadata
auto
Note that the autoplay attribute can overrride the preload attribute (since if the
media plays, it naturally has to buffer first, regardless of the hint given by the
preload attribute). Despite this, you can still provide both attributes.
autoplay Specifies whether or not to start playing the audio as soon as the object has loaded.
This attribute is a boolean attribute. Therefore, the mere presence of this attribute
equates to a true value. You can also specify a value that is a case-insensitive match
for the attribute's canonical name, with no leading or trailing whitespace (i.e.
either autoplay or autoplay="autoplay").
Possible values:
[Empty string]
autoplay
mediagrou
p
For synchronizing playback of audio files (or media elements). Allows you to specify
media elements to link together. The value is a string of text, for
example: mediagroup=movie. Audio files/media elements with the same value are


<b>
The HTML <b> tag is used for specifying bold text.
The intention with this tag is to markup text as bold without conveying any extra importance. For
example, this could be useful in article abstracts, where the beginning of an article is set in bold text.
According to the HTML 5 specification, this tag should be used as a last resort when no other tag is more
appropriate. In particular, headers should use the <h1> to <h6> tags, stress emphasis should use
the <em> tag, importance should be denoted with the <strong> element, and text marked or highlighted
should use the <mark> tag.
You can also use the CSS 'font-weight' property to set bold text.
Ex: The HTML b tag specifies <b>bold</b> text.
automatically linked by the user agent/browser.
An example of where the mediagroup attribute could be used is where you need to
overlay a sign-languge interpreter track from one movie file over the top of another.
loop Specifies whether to keep re-playing the audio once it has finished.
This attribute is a boolean attribute. Therefore, the mere presence of this attribute
equates to a true value. You can also specify a value that is a case-insensitive match
for the attribute's canonical name, with no leading or trailing whitespace (i.e.
either loop or loop="loop").
Possible values:
[Empty string]
loop
controls Specifies whether or not to display audio controls (such as a play/pause button etc).
This attribute is a boolean attribute. Therefore, the mere presence of this attribute
equates to a true value. You can also specify a value that is a case-insensitive match
for the attribute's canonical name, with no leading or trailing whitespace (i.e.
either controls or controls="controls").
Possible values:
[Empty string]
controls
<base>
The HTML <base> tag is used to specify a base URI, or URL, for relative links. For example, you can set
the base URL once at the top of your page, then all subsequent relative links will use that URL as a
starting point.
The <base> tag must be between the document's <head> tags. Also, there must be no more than one
base element per document.
Ex: <head>
<base target="_blank" />
</head>
<body>
<p>Learn about <a href="../../javascript/tutorial/javascript_arrays.html">JavaScript Arrays</a></p>
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
Attribute Description
href Specifies the URI/URL to use.
target Target frame/window


<bdi>
The HTML <bdi> tag is used on a span of text that is to be isolated from its surroundings for the
purposes of bidirectional text formatting.
This can be useful when displaying right-to-left text (such as Arabic) inside left-to-right text (such as
English) when the text-direction is unknown. The <bdi> element allows you to honor the correct
directionality of text when this is unknown (such as in the case with user-generated content).
Ex: <p>And the top five contributors are:</p>
<ol>
<li>User <bdi>homerjay</bdi>: 1601 posts</li>
<li>User <bdi>msimpson</bdi>: 335 posts</li>
<li>User <bdi> </bdi>: 195 posts</li>
<li>User <bdi>barts</bdi>: 6 posts</li>
<li>User <bdi>moe</bdi>: 2 posts</li>
</ol>

<bdo>
The HTML <bdo> tag is used for overriding the text direction.
This can be useful when displaying right-to-left written text (such as Hebrew, Arabic, and other
languages/scripts that are written from right to left) within left-to-right text (such as English) or vice
versa.
EX: <p>How to <bdo dir="rtl">override text direction? I think you already know!</bdo></p>

Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
Attribute Description
dir* * Although this element has no local attributes, you must use the dir global attribute.
The dir attribute specifies the direction of the text:
ltr: Left to right
rtl: Right to left
This attribute must have the value ltr to specify a left-to-right override and with the
value rtl to specify a right-to-left override.


<blockquote>
The HTML <blockquote> tag is used for indicating long quotations (i.e. quotations that span multiple
lines).
Browsers generally render blockquote text as indented text. If your quoted text needs to display within a
non-quoted paragraph, you should use the HTML <q> tag. Most browsers surround q text with
quotation marks.
Ex: <p>According to the Quackit website: <blockquote>Browsers generally render blockquote text as
indented text. If your quoted text needs to display within a non-quoted paragraph, you should use the
<a href="html_q_tag.html" target="_blank">HTML q tag</a>. Most browsers surround q text with
quotation marks.</blockquote></p>

<body>
The HTML <body> tag is used for indicating the main content section of the HTML document. The body
tag is placed between the </head> and the </html> tags.
Note that the attributes for the body tag are no longer supported in HTML (these were previously
specified as deprecated in HTML 4.01). You should now use CSS for defining the presentation of your
document body. For example, see CSS background-color and CSS text-decoration.


<br>
The HTML <br> tag is used for specifying a line break. The <br> tag is an empty tag. In other words, it has
no end tag.
Ex: <p>This is before the line break<br />and this after the line break.</p>


<button>
The HTML <button> tag is used for creating a button control.
Although this tag is often used in conjunction with the <form> element, it can also be used as a
standalone control.
Ex: <!-- Example 1 -->
<button onclick="JavaScript:alert('Well done!')">Click Me!</button>
<!-- Example 2 -->
<button onclick="JavaScript:alert('You will love this book!')">
<img src="../../pix/web_graphics/free_website_graphics/icons/books/book13.gif" alt="Read book" />
<br />Read Book!</button>
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
Attribute Description
autofocus Automatically gives focus to this control when the page loads. This allows the
user to start using the control without having to select it first. There must not be
more than one element in the document with the autofocus attribute specified.
This is a boolean attribute. If the attribute is present, its value must either be the
empty string or a value that is an ASCII case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace (i.e.
either autofocus or autofocus="autofocus").
Possible values:
[Empty string]
autofocus
disabled Disables the control. Therefore, if the user tries to use the control, nothing will
happen.
This is a boolean attribute. If the attribute is present, its value must either be the
empty string or a value that is an ASCII case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace (i.e.
either disabled or disabled="disabled").
Possible values:
[Empty string]
disabled
form Specifies the ID of a form to which this control belongs.
Possible values:
[The ID of a form element in the element's owner Document]
formaction Specifies the URL of the file that will process the control when submitted.
formenctype Specifies the content type used to encode the form data set when it's submitted
to the server.
Possible values:
application/x-www-form-urlencoded (default)
multipart/form-data (use this when uploading files)
text/plain (use this when uploading files)
formmethod Specifies the HTTP method to use when the control is submitted.
Possible values:
get (the form data is appended to the URL when submitted)
post (the form data is not appended to the URL)
put
delete
formnovalidate Specifies that the form is not to be validated during submission.
This is a boolean attribute. If the attribute is present, its value must either be the
empty string or a value that is an ASCII case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace (i.e.
either novalidate or novalidate="novalidate").
Possible values:
[Empty string]
novalidate
formtarget Specifies the browsing context to load the destination indicated in
the action attribute.
Possible values:
_blank
_self
_top
_parent
menu If the type attribute has a value of menu, the menu attribute must be provided in
order to specify the element's menu. The value must be the ID of
a <menu> element in the same home subtree whose type attribute is in the
popup menu state.
The menu attribute can only be used when the type attribute has a value of menu.
name Assigns the name of the control.
type Specifies the type of button.
Possible values:
submit Submits the form. This is the default value.
reset Resets the form.
button Does nothing. You can use JavaScript to make the control actually
do something.
menu Displays a menu. When using this value, you must specify the menu
using the menu attribute (see above).
value Assigns an initial value to the control. This attribute must only be present if
the form attribute is present.


<canvas>
The HTML <canvas> tag is used for creating graphics on the fly. It can be used for rendering graphs,
game graphics, or other visual images.
To draw on the canvas, the <canvas> tag is used in conjunction with the getContext(contextId) method.
Any content between the <canvas></canvas> tags is "fallback content"- meaning, it will be displayed
only if the canvas cannot be displayed.
The <canvas> tag was introduced in HTML 5.
Ex: <html>
<head>
<script type="application/x-javascript">
function displayCanvas()
{
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (0, 0, 150, 75);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (40, 30, 125, 75);

ctx.fillStyle = "rgb(0,0,150)";
ctx.strokeRect (20, 20, 50, 100);
}
}
</script>
</head>

<body onload="displayCanvas();">
<canvas id="myCanvas" width="300" height="200">Your browser does not support the canvas tag. At
the time of writing, Firefox, Opera, and Chrome support this tag.</p>
<p>Here's an <a href="../../pix/html_5/tags/html_canvas_tag.html">image of what it's supposed to look
like</a>.</canvas>
</body>

<!-- Mirrored from www.quackit.com/html_5/tags/html_canvas_tag.cfm by HTTrack Website Copier/3.x
[XR&CO'2013], Sun, 06 Apr 2014 14:48:36 GMT -->
</html>

Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
Attribute Description
width Specifies the canvas width in pixels. The default value is 300.
Possible values:
[Non-negative integer] (for example, 300)
height Specifies the canvas height in pixels. The default value is 150.
Possible values:
[Non-negative integer] (for example, 150)


<caption>
The HTML <caption> tag is used for creating table captions. It is used in conjunction with
the <table> tag and represents the title of the table.
The <caption> tag must be inserted immediately after the <table> tag. A table should have no more than
one caption.
Ex: <table border="1">
<caption>Table caption</caption>
<tr>
<td>Left cell</td>
<td>Right cell</td>
</tr>
</table>


<cite>
The HTML <cite> tag is used for indicating a citation.
Text enclosed in <cite> tags is intended to represent the title of a work (e.g. a book, a
paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a
sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition,
etc).
Ex: According to <cite title="HTML & XHTML: The Definitive Guide. Published by O'Reilly Media, Inc.;
fifth edition (August 1, 2002)">Chuck Musciano and Bill Kennedy</cite>, the HTML cite tag actually
exists!


<code>
The HTML <code> tag is used for indicating a piece of code. The code tag surrounds the code being
marked up.
The code being marked up could represent an XML element name, a filename, a computer program, or
any other string that a computer would recognize.
Browsers often display text surrounded by <code> tags in a monospaced font (also called a fixed-width
or non-proportional font) such as Courier (unless it has been styled otherwise using CSS).
Multiple lines of code can be marked up by surrounding the <code> tags with <pre> tags.
Ex: To create a new array, type the following: <code>var faq = new Array(3)</code>

<col>
The HTML <col> tag is used for specifying column properties for each column within a colgroup.
You would normally only use this tag if the values for each column is different. Otherwise, you can
specify the properties as part of the colgroup tag.
Must be used within a HTML colgroup element that doesn't have a span attribute.
Ex: <table border="1">
<colgroup span="2" style="background-color:orange">
<col width="50"></col>
<col width="100"></col>
</colgroup>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
Attribute Description
span Specifies how many columns to span. This attribute's value must be a valid non-
negative integer greater than zero.


<colgroup>