Scribd
Upload
2 views42 pages

HTML5

HTML5 is the new standard for HTML, evolving from HTML 4.01, and aims to improve web development by reducing reliance on external plugins and enhancing error handling. It is a collaborative effort between W3C and WHATWG, focusing on a visible development process and device independence. The document outlines key HTML5 elements, their usage, and provides code snippets for practical understanding.

Uploaded by

tejaskapse190204
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views42 pages

HTML5

HTML5 is the new standard for HTML, evolving from HTML 4.01, and aims to improve web development by reducing reliance on external plugins and enhancing error handling. It is a collaborative effort between W3C and WHATWG, focusing on a visible development process and device independence. The document outlines key HTML5 elements, their usage, and provides code snippets for practical understanding.

Uploaded by

tejaskapse190204
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Html 5

What is HTML5?

HTML5 will be the new standard for HTML.

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

HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

How Did HTML5 Get Started?

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

WHATWG was working with web forms and applications, and W3C was working with XHTML 2.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

1
Html 5

HEAD
1) DOCTYPE

A DOCTYPE is a required preamble and must consist of the following characters, in this order:

1. A string that is an ASCII case-insensitive match for the string "<!DOCTYPE".

2. One or more space characters.

3. A string that is an ASCII case-insensitive match for the string "html".


4. Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE string (defined below).
5. Zero or more space characters.

6. A U+003E GREATER-THAN SIGN character (>).

Code Snippet :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Doctor | Element Index</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body id="home">
<p>content</p>
</body>
</html>

2) HTML
The html element represents the root of an HTML document.

Code Snippet :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Doctor | Element Index</title>

<link rel="stylesheet" type="text/css" href="media/css/[Link]" />


</head>
<body id="home">
<p>
content
</p>
</body>
</html>

3) HEAD

The head element represents a collection of metadata for the Document.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Doctor | Element Index</title>

2
Html 5

<link rel="stylesheet" type="text/css" href="media/css/[Link]" />


</head>
<body id="home">
<p>content</p>
</body></html>
4) TITLE

The title element represents the document's title or name. Authors should use titles that identify their documents
even when they are used out of context, for example in a user's history or bookmarks, or in search results. The
document's title is often different from its first heading, since the first heading does not have to stand alone when
taken out of context.

<!DOCTYPE html>
<html lang="en_UK">
<head>
<meta charset="UTF-8">
<title>My Super Page</title>
<meta name="robots" content="index,follow" />
<link rel="stylesheet" href="css/[Link]">
</head>

5) BASE

The base element allows authors to specify the document base URL for the purposes of resolving relative URLs,
and the name of the default browsing context for the purposes of following hyperlinks. The element does not
represent any content beyond this information.
There must be no more than one base element per document. A base element must have either an href attribute,
a target attribute, or both.

<head>
<title>The Company</title>
<base href="[Link]
</head>

<!DOCTYPE html>
<html>
<head>
<base href="[Link] />
</head>
<body>

<p>
<img src="[Link]" width="24" height="39" alt="Stickman" /> - Notice that we have only specified a relative address for the
image. Since we have specified a base URL in the head section, the browser will look for the image at
"[Link]
</p>

</body>
</html>

6) LINK

The link element allows authors to link their document to other resources.

The destination of the link(s) is given by the href attribute, which must be present and must contain a valid non-empty URL
potentially surrounded by spaces. If the href attribute is absent, then the element does not define a link.

A link element must have rel attribute.

<!DOCTYPE html>
<html lang="en_UK">
<head>
<meta charset="UTF-8">
<title>My Super Page</title>

<meta name="robots" content="index,follow" />


<link rel="stylesheet" href="css/[Link]">
</head>

7) META

The meta element represents various kinds of metadata that cannot be expressed using the title, base, link, style, and script
elements.

3
Html 5

The meta element can represent document-level metadata with the name attribute, pragma directives with the http-equiv attribute,
and the file's character encoding declaration when an HTML document is serialized to string form (e.g. for transmission over the
network or for disk storage) with the charset attribute.

<!DOCTYPE html>

<html lang="en_UK">
<head>
<meta charset="UTF-8">
<title>My Super Page</title>
<meta name="robots" content="index,follow" />
<link rel="stylesheet" href="css/[Link]">

</head>

Sections
1) BODY

The body element represents the main content of the document.

<body id="index">
<p>content</p>
</body

2) ARTICLE

Represents a section of a page that consists of a composition that forms an independent part of a document, page,
or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment,
or any other independent item of content.

Code Snippet :

<article>
<header>
<h4><a href="#comment-2" rel="bookmark">Comment #2</a>
by <a href="[Link] Osborne</a></h4>

<time datetime="2007-08-29T13:58Z">August 29th, 2007 at13:58</time>


</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae,ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat
eleifend leo. Quisquesit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi,condimentum sed, commodo vitae, ornare sit amet,
wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis
pulvinar facilisis. Ut felis. Praesentdapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam
erat volutpat. Nam dui mi, tincidunt quis,accumsan porttitor, facilisis luctus, metus.</p>
</article>

3) NAV

Represents navigation for a document. The nav element is a section containing links to other documents or to
parts within the current document.

Not all groups of links on a page need to be in a nav element — only groups of primary navigation links. In
particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is
more appropriate in such cases.

<nav>
<ul>
<li>Nav Link</li>
<li>Nav Link</li>

<li>Nav Link</li>
<ul>
</nav>

4) ASIDE

4
Html 5

REPRESENTS A SECTION OF A PAGE CONSISTING OF CONTENT THAT IS TANGENTIALLY RELATED TO THE CONTENT AROUND THE ASIDE ELEMENT, AND
WHICH COULD BE CONSIDERED SEPARATE FROM THAT CONTENT. SUCH SECTIONS ARE OFTEN REPRESENTED AS SIDEBARS IN PRINTED TYPOGRAPHY.

<aside>
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>

<li><a href="#">My Other Friend</a></li>


<li><a href="#">My Best Friend</a></li>
</ul>

</aside>

5) SECTION

REPRESENTS A GENERIC DOCUMENT OR APPLICATION SECTION. IN THIS CONTEXT, A SECTION IS A THEMATIC GROUPING OF CONTENT, TYPICALLY WITH A
HEADER, POSSIBLY WITH A FOOTER. EXAMPLES INCLUDE CHAPTERS IN A BOOK, THE VARIOUS TABBED PAGES IN A TABBED DIALOG BOX, OR THE
NUMBERED SECTIONS OF A THESIS. A WEB SITE'S HOME PAGE COULD BE SPLIT INTO SECTIONS FOR AN INTRODUCTION, NEWS ITEMS, CONTACT
INFORMATION.

<section>
<h1>Level 1</h1>
<section>

<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>

</section>

6) HEADER

Represents the "header" of a document or section of a document. The header element is typically used to group a
set of h1–h6 elements to mark up a page's title with its subtitle or tagline. header elements may, however, contain
more than just the section's headings and subheadings — e.g., version history information or publication date.

<header>
<h1>[Link]</h1>
</header>

7) FOOTER

Represents the "footer" of a document or section of a document. The footerelement typically


contains metadata about its enclosing section, such as who wrote it, links to related documents, copyright data,
etc. Contact information for the section given in a footer should be marked up using the address element.

<footer>
© 2010 [Link]
</footer>

8) H1-H6
Represent headings and subheadings. These elements rank in importance according to the number in their name.
The h1 element is said to have the highest rank, the h6element has the lowest rank, and two elements with the
same name have equal rank.

<h(n)>Heading Title</h(n)>

9) HGROUP

5
Html 5

Represents the heading of a section. The hgroup element is used to group a set of h1–h6 elements when the
heading has multiple levels, such as subheadings, alternative titles, or taglines.

<hgroup>
<h1>[Link]</h1>
<h2>helping you implement HTML5 today</h2>

</hgroup>

10) ADDRESS

Represents the contact information for its enclosing section. If it is a child of the bodyelement, then it applies to
the document as a whole.

<address>Jack Osborne</address>

---------------------------------------

<article>
<header>
<h1>All About Flour<h1>
<p class=”byline”>by Jane Doe</p>
</header>
<section>
<h2>The Two Types of Wheat</h2>
<p>There … to rise.</p>
<p>Where … with less protein.</p>
</section>
<blockquote>
<q>
Wholemeal flour, the whole grain milled as finely as possible with all
of the outer bran and inner germ intact, is one of the best white flour
improvers I know of. </q><br />
<address>Dan Lepard, [Link]</address>
</blockquote>
</article>

---------------------------------------

Definition and Usage

The <address> tag defines the contact information for the author/owner of a document or an article.

If the <address> element is inside the <body> element, it represents contact information for the document.

If the <address> element is inside an <article> element, it represents contact information for that article.

The text in the <address> element usually renders in italic. Most browsers will add a line break before and after the address element.

6
Html 5

Tips and Notes

Tip: The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information.

Tip: The <address> element will typically be included along with other information in a <footer>element.

<!DOCTYPE html>

<html>

<body>

<address>

Written by <a href="[Link] Doe</a>.<br>

Visit us at:<br>

[Link]<br>

Box 564, Disneyland<br>

USA

</address>

</body>

</html>

7
Html 5

Grouping
1) P
The p element represents a paragraph.

<p>This is an example of the p tag.</p>

2) HR
Represents a paragraph-level thematic break. The "paragraph-level" bit means between blocks of text, so it can't
be used to separate sections of a site. Instead, hrnow separates different topics within a section of prose, or
between scenes in a novel.

<p>Lorem Ipsum dolor set amet</p>


<hr />
<p>Lorem Ipsum dolor set amet</p>

3) PRE
The pre element represents a block of preformatted text, in which structure is represented by typographic
conventions rather than by elements.

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Ex1: <p>The code for a basic JavaScript message is:</p><pre><script>alert("hello world");</script>

</pre>

Ex2 :

<!DOCTYPE html>
<html>
<body>

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

8
Html 5

</body>
</html>

4) BLOCKQUOTE

The blockquote element represents a section that is quoted from another source.
Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the
cite attribute.

The <blockquote> tag specifies a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

<blockquote>What we have here is a quotation from another source


</blockquote>

EX2:
<!DOCTYPE HTML>
<HTML>
<BODY>

<H1>ABOUT WWF</H1>
<P>HERE IS A QUOTE FROM WWF'S WEBSITE:</P>

<BLOCKQUOTE CITE="HTTP://[Link]/WHO/[Link]">
FOR 50 YEARS, WWF HAS BEEN PROTECTING THE FUTURE OF NATURE. THE WORLD’S LEADING CONSERVATION ORGANIZATION, WWF WORKS IN 100
COUNTRIES AND IS SUPPORTED BY 1.2 MILLION MEMBERS IN THE UNITED STATES AND CLOSE TO 5 MILLION GLOBALLY.
</BLOCKQUOTE>

</BODY>
</HTML>

OL
The ol element represents a list of items, where the items have been intentionally ordered, such that changing the
order would change the meaning of the list.

<ol>
<li>Ordered List Item One</li>

<li>Ordered List Item One</li>


</ol>

LI

The li element represents a list item. If its parent element is an ol, ul, or menuelement, then the element is an item
of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related
relationship to any other li element.

<ol>

<li>Ordered List Item One</li>


<li>Ordered List Item Two</li>
</ol>

9
Html 5

<ol type=""> values Equivalent list-style-type

type="1" decimal (default style)

type="a" lower-alpha

type="A" upper-alpha

type="i" lower-roman

type="I" upper-roman

type attribute values and their corresponding list


counter types

<!-- Continuing a previous list with value="" -->


<ol type="I">
<li value="7">seventh item</li>
<li>eighth item</li>
<li>ninth item</li>
</ol>
<!-- Continuing a previous list with start="" -->
<ol type="I" start="7">
<li>seventh item</li>
<li>eighth item</li>
<li>ninth item</li>
</ol>

seventh item (using <livalue="7">)


eighth item
ninth item
seventh item (using <olstart="7">)
eighth item
ninth item

Counting It Down with reverse


By default, <ol reversed> starts from the total number of list items and counts down to one, so there’s no need to

also specify start unless you want something different to happen. Unfortunately, as we’ll see in the browser
support table in just a moment, none of them do yet, so in the meantime you can make a reversed list by
manually specifying each list item’s number with value (as you can see in the following example) or via CSS
counters.

<!-- default list -->


<ol>
<li>three</li>
<li>two</li>
<li>one</li>
</ol>
<!-- using the reversed attribute (will look the same as the third list in a supporting browser) -->
<ol reversed>
<li>three</li>
<li>two</li>
<li>one</li>
</ol>
<!-- using value attributes on li -->
<ol>
<li value="3">three</li>
<li value="2">two</li>
<li value="1">one</li>
</ol>

10
Html 5

1. three
2. two
3. one
1. three
2. two
3. one
3. three
2. two
1. one

A normal ordered list, an ordered list with reversed, and an ordered list with each list item
numbered manually via value

UL
The ul element represents a list of items, where the order of the items is not important — that is, where changing
the order would not materially change the meaning of the list.

<ul>
<li>Unordered List Item One</li>
<li>Unordered List Item One</li>

</ul>

DL

Represents a description list consisting of zero or more name-value groups. Each group must consist of one or
more names (dt elements) each followed by one or more values (dd elements).
Name-value groups may be terms and definitions, metadata topics and values, or any other groups of name-value
data. The values within a group are alternatives; multiple paragraphs forming part of the same value must all be
given within the same dd element.
<dl>
<dt>address</dt>

<dd>The address element represents the contact information for the section it applies to. If it applies to the body element, then it
instead applies to the document as a whole.</dd>
<dt>article</dt>
<dd>The article element represents a section of a page that consists of a composition that forms an independent part of a document,
page, or site. Thiscould be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other
independent item of content.</dd>
</dl>

DT

The dt element represents the term, or name, part of a term-description group in a description list ( dl element).

<dl>
<dt>address</dt>
<dd>The address element represents the contact information for the section it applies to. If it applies to the body element, then it
instead applies to the document as a whole.

</dd>
<dt>article</dt>
<dd>The article element represents a section of a page that consists of a composition that forms an independent part of a
document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment,
or any other independent item of content.</dd>
</dl>

FIGURE

11
Html 5

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically
referenced as a single unit from the main flow of the document.
The figure element can be used to annotate illustrations, diagrams, photos, code listings, etc., that are referenced
in the main content of the document, but that could, without affecting the flow of the document, be moved away
from that primary content — e.g., to the side of the page, to dedicated pages, or to an appendix.
<figure>
<img ... > (or video, table etc)
<figcaption>A rabid unicorn goring a fairy.</figcaption>
</figure>

FIGCAPTION

The figcaption element represents a caption or legend for the rest of the contents of the figcaption element's
parent figure element, if any.

<figure>

<img ... > (or video, table etc)


<figcaption>A rabid unicorn goring a fairy.</figcaption>
</figure>

DIV

The div element has no special meaning at all. It represents its children. It can be used with the class, lang,
and title attributes to mark up semantics common to a group of consecutive elements.

<div>
<p>content</p>
</div>

Certainly: you can still use <div>! Despite HTML5 bringing us new elements
like <article>, <section>, and <aside>, the<div> element still has its place.

12
Html 5

Tables
TABLE

The table element represents data with more than one dimension, in the form of a table. Tables must not be used
as layout aids.

<table>

<tr>
<th scope="col">dog</th>
<th scope="col">cat</th>
<th scope="col">horse</th>

<th scope="col">iguana</th>
</tr>
<tr>
<td>5</td>
<td>2</td>

<td>10</td>
<td>500</td>
</tr>

</table>

CAPTION

The caption element represents the title of the table that is its parent, if it has a parent and that is a table element.
When a table element is the only content in a figure element other than thefigcaption, the caption element should be
omitted in favor of the figcaption.

<table><caption>Animals on our farm</caption>


<colgroup>
<col class="column1" />
<col class="column2" />

<col class="column3-4" span="2" />


</colgroup>
<tr>
<th>dog</th>
<th>cat</th>

<th>horse</th>

13
Html 5

<th>iguana</th>
</tr>
<tr>
<td>5</td>

<td>2</td>
<td>10</td>
<td>500</td>
</tr>

...
</table>

THEAD

The thead element represents the block of rows that consist of the column labels (headers) for the parent table
element, if the thead element has a parent and it is a table.

<table>
<thead>
<tr>
<th scope="col">Header 1</th>

<th scope="col">Header 2</th>


<th scope="col">Header 3</th>
</tr>
</thead>
<tfoot>

<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>

</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>

<td>Cell 3</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>

<td>Cell 9</td>
</tr>
...
</tbody>
</table>

TBODY

14
Html 5

The tbody element represents a block of rows that consist of a body of data for the parent table element, if
the tbody element has a parent and it is a table.

<table>
<thead>
<tr>
<th scope="col">Header 1</th>

<th scope="col">Header 2</th>


<th scope="col">Header 3</th>
</tr>
</thead>
<tfoot>

<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>

</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>

<td>Cell 3</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>

<td>Cell 9</td>
</tr>
...
</tbody>
</table>

TFOOT

The tfoot element represents the block of rows that consist of the column summaries (footers) for the parent table
element, if the tfoot element has a parent and it is a table.

<table>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>

<th scope="col">Header 3</th>


</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>

<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>

TR

The tr element represents a row of cells in a table.

<table>
<tr>
<th scope="col">dog</th>

15
Html 5

<th scope="col">cat</th>
<th scope="col">horse</th>
<th scope="col">iguana</th>
</tr>

<tr>
<td>5</td>
<td>2</td>
<td>10</td>

<td>500</td>
</tr>
...
</table>

TH

The th element represents a header cell in a table.

<table>

<tr>
<th scope="col">dog</th>
<th scope="col">cat</th>
<th scope="col">horse</th>

<th scope="col">iguana</th>
</tr>
<tr>
<td>5</td>
<td>2</td>

<td>10</td>
<td>500</td>
</tr>
...
</table>

TD

The td element represents a data cell in a table.

<table>
<tr>
<th scope="col">dog</th>
<th scope="col">cat</th>

<th scope="col">horse</th>
<th scope="col">iguana</th>
</tr>
<tr>
<td>5</td>

<td>2</td>
<td>10</td>
<td>500</td>
</tr>

...
</table>

COL

16
Html 5

If a col element has a parent and that is a colgroup element that itself has a parent that is a table element, then
the col element represents one or more columns in the column group represented by that colgroup.

<table>

<colgroup>
<col class="column1" style="background-color: #09F" />
<col class="column2" style="background-color: #9C0" />
<col class="column3-4" span="2" style="background-color:red" />
</colgroup>
<tr>

<th>dog</th>
<th>cat</th>
<th>horse</th>
<th>iguana</th>

</tr>
<tr>
<td>5</td>
<td>2</td>
<td>10</td>

<td>500</td>
</tr>
...
</table>

COLGROUP

The colgroup element represents a group of one or more columns in the table that is its parent, if it has a parent
and that is a table element.
If the colgroup element contains no col elements, then the element may have aspan content attribute specified,
whose value must be a valid non-negative integer greater than zero.

<table>
<colgroup>
<col class="column1" />
<col class="column2" />
<col class="column3-4" span="2" />

</colgroup>
<tr>
<th>dog</th>
<th>cat</th>
<th>horse</th>

<th>iguana</th>
</tr>
<tr>
<td>5</td>
<td>2</td>

<td>10</td>
<td>500</td>
</tr>
...
</table>

The scope attribute has no visual effect in ordinary web browsers, but can be used by screen readers.
<th scope="col|row|colgroup|rowgroup">

Forms
The form element represents a collection of form-associated elements, some of which can represent editable
values that can be submitted to a server for processing.

<form id="app-login" action="[Link]">


<fieldset>
<legend>Login Details</legend>
<div>
<label for="user-name">Username:</label>

<input name="user-name" type="email" placeholder="Your username is your email address" required autofocus>
</div>
<div>

<label for="password">Password:</label>

17
Html 5

<input name="password" type="password" placeholder="6 digits, a combination of numbers and letters" required>
</div>
<div>
<input name="login" type="submit" value="Login">
</div>
</fieldset>
</form>

LABEL

The label represents a caption in a user interface. The caption can be associated with a specific form control,
known as the label element's labeled control, either using for attribute, or by putting the form control inside
the label element itself.

The "form" attribute is new in HTML5.

Attributes

New : New in HTML5.

Attribute Value Description

for element_id Specifies which form element a label is bound to

formNew form_id Specifies one or more forms the label belongs to

INPUT

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

BUTTON

The button element represents a button. If the element is not disabled, then the user agent should allow the user
to activate the button.

<button>Do something!</button>

SELECT

The select element represents a control for selecting amongst a set of options.

<label for="title">Title</label>
<select id="title" name="title">
<option value="" selected>Please choose</option>

<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>

<option value="Dr">Dr</option>
<option value="Other">Other</option>
</select>
DATALIST
The datalist element represents a set of option elements that represent predefined options for other controls. The
contents of the element represents fallback content for legacy user agents, intermixed with option elements that
represent the predefined options. In the rendering, the datalist element represents nothing and it, along with its
children, should be hidden.
The datalist element is hooked up to an input element using the list attribute on the input element.

<label>Your favourite fruit:


<input type="text" name="fruit" list="fruits">
<datalist id="fruits">

18
Html 5

<option value="Blackberry">Blackberry</option>
<option value="Blackcurrant">Blackcurrant</option>

<option value="Blueberry">Blueberry</option>
<!-- … -->
</datalist>
</label>

OPTGROUP

The optgroup element represents a group of option elements with a common label. The element's group of option
elements consists of the option elements that are children of the optgroup element.
When showing option elements in select elements, user agents should show the option elements of such groups as
being related to each other and separate from other option elements.

<label for="country">Country</label>

<select name="country" id="country">


<optgroup label="Europe">
<option value="UK">UK</option>
<option value="Germany">Germany</option>
<option value="France">France</option>

</optgroup>
<optgroup label="North America">
<option value="">USA</option>
<option value="">Canada</option>
</optgroup>
</select>

OPTION
The option element represents an option in a select element or as part of a list of suggestions in a datalist element.
In certain circumstances described in the definition of the select element, an option element can be a select
element's placeholder label option. A placeholder label option does not represent an actual option, but instead
represents a label for the select control.

TEXTAREA

The textarea element represents a multiline plain text edit control for the element's raw value. The contents of the
control represent the control's default value.

<textarea rows="4" cols="50">


At W3Schools you will find all the Web-building
tutorials you need, from basic HTML to advanced
XML, SQL, ASP, and PHP.</textarea>

KEYGEN

The keygen element represents a key pair generator control. When the control's form is submitted, the private key
is stored in the local keystore, and the public key is packaged and sent to the server.

<form action="/submit_key.php" method="post" enctype="multipart/form-data">


<keygen name="key">
<input type="submit" value="Submit">
</form>

OUTPUT

Represents the result of a calculation.

19
Html 5

The optional for attribute allows an explicit relationship to be made between the result of a calculation and the
elements representing the values that influenced the calculation. If specified, the for attribute must contain a
string consisting of an unordered set of unique, space-separated tokens, each of which must be the ID of an
element in the same document.
Along with the standard global attributes, <output> also accepts the following:

for

A space-separated list containing the IDs of the elements whose values went into the calculation.

form
Associates the <output> element with its form owner. The value must be the ID of a form in the same document. This allows you
to place an<output> element outside of the <form> with which it is associated.

name

The name of the element.

Implementing <output>
We’ll start by creating a simple example that adds two whole numbers together (Figure 1). We’ll
use the new-in-HTML5 number input type and the parseInt JavaScript function to convert the input
strings to integers:
<form onsubmit="return false" oninput="[Link] =parseInt([Link]) + parseInt([Link])">
<input name="a" type="number" step="any"> +
<input name="b" type="number" step="any"> =
<output name="o"></output>
</form>

<form oninput="[Link]=parseInt([Link])+parseInt([Link])">0

<input type="range" name="a" value="50">100

+<input type="number" name="b" value="50">

=<output name="x" for="a b"></output>

</form>

PROGRESS

20
Html 5

Represents the completion progress of a task. Progress may be either indeterminate — meaning it is unclear how
much work remains before the task is complete (e.g., the task is waiting for a response from a remote host) — or a
numeric value between 0 and a given maximum, explicitly specifying the fraction of work that has so far been
completed.

<section>
<p>Progress: <progress> <span id="p">0</span>% </progress> </p>

<script>
var progressBar = [Link]('p');
function updateProgress(newValue) {
[Link] = newValue;
}
</script>
</section>

METER

When the meter binding applies to a meter element, the element is expected to render as an 'inline-block' box with
a 'height' of '1em' and a 'width' of '5em', a 'vertical-align' of '-0.2em', and with its contents depicting a gauge.
When the element is wider than it is tall(or square), the depiction is expected to be of a horizontal gauge, with the
minimum value on the right if the 'direction' property on this element has a computed value of ' rtl', and on the left
otherwise. When the element is taller than it is wide, it is expected to depict a vertical gauge, with the minimum
value on the bottom.

Your score is: <meter> 2 out of 10 </meter>

<meter value="2" min="0" max="10">2 out of 10</meter><br>

<meter value="0.6">60%</meter>

21
Html 5

Interactive
DETAILS

The details element represents a disclosure widget from which the user can obtain additional information or
controls. However, the details element is not appropriate for footnotes.

Attributes

New : New in HTML5.

Attribute Value Description

openNew open Specifies that the details should be visible (open) to the user

<details>
<summary>Name & Extension:</summary>

<p><input type=text name=fn value="Pillar [Link]">


<p><label><input type=checkbox name=ext checked> Hide extension</label>
</details>

Using <details>
There are two relevant elements here: <details> and, optionally,<summary>. <details> is the wrapper for all the
content we want to show and hide, and <summary> contains the — well, the summary and title of the section.
Technically we don’t need the <summary>. If absent, the browser will use some default text (in Chrome:
“details”). Let’s have a look at some markup:
<details> <summary>Show/Hide me</summary> <p>Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p> </details>
You can see this in action over at jsbin. It’s a simple example, but it shows off the toggle effect nicely. All this
without JavaScript!
The open attribute
In the example above, the content is hidden when the page loads. We can make it visible by default by adding the
boolean open attribute to the <details> element (jsbin example):
<details open> <summary>Show/Hide me</summary> <p>Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details>
There is no closed attribute. It’s the default, so by omitting open, you imply closed.
The <summary> element
We’ve briefly seen <summary> in action. Since it is phrasing content, we can use inline elements such
as <span> or <strong> inside it. Why thought would we do this? Perhaps for an extra styling hook or as the spec
suggests: a label for a form element. At least it would be handy if it worked properly when implemented:
<details> <summary><label for="name">Name:</label></summary> <input
type="text" id="name" name="name" /> </details>
Normally, clicking anywhere on the summary reveals the content of the <details> element. But in this example,
clicking the summary doesn’t reveal the content because you’re actually clicking the <label>, which then focuses
the <input> element — even though it’s hidden by the collapsed <details> element.
Clearly this needs addressing, what do you think should happen? Maybe any browser vendors reading this can
take a look :)
Nesting multiple <details> elements
You can nest <details> within <details> if you like, as seen in this perfectly valid example:
<details> <summary>Question 1</summary> <p><strong>Pellentesque habitant
morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec
eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>

22
Html 5

Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit
amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum
orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis
pulvinar facilisis. Ut felis.</p> <details> <summary>Related
documents</summary> <ul> <li><a href="#">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.</a></li> <li><a href="#">Aliquam tincidunt mauris
eu risus.</a></li> <li><a href="#">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.</a></li> <li><a href="#">Aliquam tincidunt mauris eu
risus.</a></li> </ul> </details> </details>

Example uses
So when could you use <details>? FAQs immediately spring to mind. People often use accordions for FAQs
anyway, so they’re a great candidate for <details>.
Also consider a table of contents. It could be a fixed area that scrolls with the content. Something like this
perhaps?
You could use <details> to toggle the comments section of a blog, member profiles, details of a download, complex
forms, or in web applications as shown in this example from the spec:

An example of the <details> element from the spec

In fact, just looking around WordPress as I write, I see plenty of opportunities to use <details>. Let us know your
thoughts and ideas in the comments.

23
Html 5

Styling
How can we style this thing? Well, to style the disclosure widget itself in WebKit, you can apply some CSS to the
pseudo-class ::-webkit-details-marker. You can see a little demo here:

details summary::-webkit-details-marker { background: red; color: #fff; font-size: 500%; }


We can also position the disclosure widget (to an extent). Here it is floated right. That’s about all we have initially.
So how do we replace the disclosure widget with a custom icon? Using an attribute selector, you can detect
whether the <details> element is open or closed and apply an appropriate background image. We do something
similar in this example, except that instead of using a background image, we use the :after pseudo-element:

summary::-webkit-details-marker { display: none } summary:after { background:


red; border-radius: 5px; content: "+"; color: #fff; float: left; font-size: 1.5em;
font-weight: bold; margin: -5px 10px 0 0; padding: 0; text-align: center; width:
20px; } details[open] summary:after { content: "-"; }

The above example uses literal “+” and “-” characters as the disclosure widget. Depending on your styling, you
might need to use :beforeinstead of :after, but both pseudo-elements allow using an image.
The details[open] attribute selector creates some interesting possibilities. And because we’re nice doctors, here’s a

more polished example as seen in the screenshot below:


Styled <details> element in Chrome

It would be interesting (though not necessarily good design) if you could use CSS transitions to animate
the <details> opening and closing, but we can’t just yet.

24
Html 5

Edits
DEL

The del element represents a removal from the document. Thedel elements should not cross implied paragraph
boundaries

<p>I am <del>very</del> <ins>extremely</ins> happy that you visited this page :)</p>

I am very extremely happy that you visited this page :)

Embedded
IMG

n img element represents an image. The image given by the src attribute is the embedded content, and the value
of the alt attribute is the img element's fallback content.
The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces
referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.
The img element must not be used as a layout tool. In particular, img elements should not be used to display
transparent images, as they rarely convey meaning and rarely add anything useful to the document.

<img src="[Link]" alt="HTML5 Doctor Logo" />

IFRAME

The iframe element represents a nested browsing context.


For iframe elements in HTML documents, the attribute, if present, must have a value using the HTML syntax that
consists of the following syntactic components, in the given order:
 Any number of comments and space characters.

 Optionally, a DOCTYPE.

25
Html 5

 Any number of comments and space characters.

 The root element, in the form of an html element.


 Any number of comments and space characters.

Attributes

New : New in HTML5.

Attribute Value Description

align left Not supported in HTML5. Deprecated in HTML [Link]


right the alignment of an <iframe> according to surrounding
top elements
middle
bottom

frameborder 1 Not supported in HTML5. Specifies whether or not to display a


0 border around an <iframe>

height pixels Specifies the height of an <iframe>

longdesc URL Not supported in HTML5. Specifies a page that contains a


long description of the content of an <iframe>

marginheight pixels Not supported in HTML5. Specifies the top and bottom
margins of the content of an <iframe>

marginwidth pixels Not supported in HTML5. Specifies the left and right margins
of the content of an <iframe>

name name Specifies the name of an <iframe>

sandboxNew "" Enables a set of extra restrictions for the content in the
allow-forms <iframe>
allow-same-origin
allow-scripts
allow-top-
navigation

scrolling yes Not supported in HTML5. Specifies whether or not to display


no scrollbars in an <iframe>
auto

seamlessNew seamless Specifies that the <iframe> should look like it is a part of the
containing document

src URL Specifies the address of the document to embed in the


<iframe>

srcdocNew HTML_code Specifies the HTML content of the page to show in the
<iframe>

width pixels Specifies the width of an <iframe>

Code:
[Link]
<!DOCTYPE html >
<html >
<head>
<title>Title of document</title>
</head>

26
Html 5

<body>
<p><strong>iframe</strong><b> tag Example.</b></p>
<p><b>Implementation of &lt;iframe&gt; in HTML5.</b></p>
<iframe src="[Link] name="Bharat" >
</iframe><br>
<iframe src="[Link] ></iframe>
<br>
</body>
</html>

EMBED

Represents an integration point for an external(typically non-HTML) application or interactive content.


The optional src attribute specifies the URL of the resource being embedded.
The optional type attribute specifies the MIME type of the plugin to instantiate. The value must be a
valid MIME type, optionally with parameters. If both the type attribute and the src attribute are present, then the
type attribute must specify the same MIME type as the explicit Content-Type metadata of the resource given by
the src attribute.

27
Html 5

<embed src="[Link]">

<embed src="[Link]">

The <embed> tag is new in HTML5.

Attributes

New : New in HTML5.

Attribute Value Description

heightNew pixels Specifies the height of the embedded content

srcNew URL Specifies the address of the external file to embed

typeNew MIME_type Specifies the MIME type of the embedded content

widthNew pixels Specifies the width of the embedded content

OBJECT

The object element can represent an external resource, which, depending on the type of the resource, will either
be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.

<object>
<param name="movie" value="[Link]

<param name="allowFullScreen" value="true"></param>


<param name="allowscriptaccess" value="always"></param>
<embed src="[Link]
allowscriptaccess="always"allowfullscreen="true" width="640" height="390"></embed>

</object>

<object width="400" height="400" data="[Link]"></object>


Definition and Usage

The <object> tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX,
PDF, and Flash) in your web pages.

You can also use the <object> tag to embed another webpage into your HTML document.

You can use the <param> tag to pass parameters to plugins that have been embedded with the <object> tag.

Tips and Notes

Note: An <object> element must appear inside the <body> element. The text between the <object> and </object> is an alternate text, for browsers
that do not support this tag.

Tip: For images use the <img> tag instead of the <object> tag. Tip: At least one of the "data" or "type" attribute MUST be defined.

Differences Between HTML 4.01 and HTML5

Some HTML 4.01 attributes are not supported in HTML5.

The "form" attribute is new in HTML5.

In HTML5, objects can be used and submitted in forms.

In HTML5, objects can no longer appear inside the <head> element of a document.

28
Html 5

Attributes New : New in HTML5.


Attribute Value Description

align top Not supported in HTML5. Deprecated in HTML [Link]


bottom the alignment of the <object> element according to
middle surrounding elements
left
right

archive URL Not supported in HTML5. A space separated list of URL's to


archives. The archives contains resources relevant to the
object

border pixels Not supported in HTML5. Deprecated in HTML [Link]


the width of the border around an <object>

classid class_ID Not supported in HTML5. Defines a class ID value as set in


the Windows Registry or a URL

codebase URL Not supported in HTML5. Defines where to find the code for
the object

codetype MIME_type Not supported in HTML5. The internet media type of the code
referred to by the classid attribute

data URL Specifies the URL of the resource to be used by the object

declare declare Not supported in HTML5. Defines that the object should only
be declared, not created or instantiated until needed

formNew form_id Specifies one or more forms the object belongs to

height pixels Specifies the height of the object

hspace pixels Not supported in HTML5. Deprecated in HTML [Link]


the whitespace on left and right side of an object

name name Specifies a name for the object

standby text Not supported in HTML5. Defines a text to display while the
object is loading

type MIME_type Specifies the MIME type of data specified in the data attribute

usemap #mapname Specifies the name of a client-side image map to be used


with the object

vspace pixels Not supported in HTML5. Deprecated in HTML [Link]


the whitespace on top and bottom of an object

width pixels Specifies the width of the object

PARAM

The param element defines parameters for plugins invoked by object elements. It does not represent anything on
its own.

<object>
<param name="movie" value="[Link]
<param name="allowFullScreen" value="true"></param>

<param name="allowscriptaccess" value="always"></param>


<embed src="[Link]
allowscriptaccess="always"allowfullscreen="true" width="640" height="390"></embed>

29
Html 5

</object>

VIDEO

Represents a video or movie.


Content may be nested inside the video element. User agents should not show this content to the user. Authors
should use this content to force older browsers to use a legacy video plugin or to inform the user of how to access
the video content.

<video src="[Link]" controls poster="[Link]" width="320" height="240">


<a href="[Link]">Download song</a>
</video>

<video width="320" height="240" controls="controls">


<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>

AUDIO

Represents a sound or audio stream.

Content may be nested inside the audio element. User agents should not show this content to the user. Authors
should use this content to force older browsers to use a legacy audio plugin or to inform the user of how to access
the audio content.
Supported audio codecs:
 Chrome 3+ supports .ogg and .wav
 Firefox 3.5+ supports .ogg and .wav
 Opera 10.5+ supports .ogg and .wav
 Safari 4+ supports .mp3 and .wav
<audio src="[Link]" controls>
<a href="[Link]">Download song</a>

</audio>

<audio controls="controls">
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>

Tips and Notes

Tip: Any text inside the between <audio> and </audio> will be displayed in browsers that do not support audio.

Attributes

New : New in HTML5.

Attribute Value Description

autoplayNew autoplay Specifies that the audio will start playing as soon as it is
ready

controlsNew controls Specifies that audio controls should be displayed (such


as a play/pause button etc).

loopNew loop Specifies that the audio will start over again, every time
it is finished

preloadNew auto Specifies if and how the author thinks the audio should
metadata

30
Html 5

none be loaded when the page loads

srcNew URL Specifies the URL of the audio file

Ogg MP WA
Browser Vorbis 3 V

FireFox 3.6+ ✓ ✓

Safari 5+ ✓ ✓

Chrome 6 ✓ ✓

Opera 10.5+ ✓ ✓

Internet Explorer 9
(beta) ✓ ✓

Codec support in modern desktop browsers

To create our own controls, we can use the API methods defined by the spec:
 play() — plays the audio
 pause() — pauses the audio
 canPlayType() — interrogates the browser to establish whether the given mime type can be played
 buffered() — attribute that specifies the start and end time of the buffered part of the file

SOURCE

The source element allows authors to specify multiple alternative media resources for media elements. It does not
represent anything on its own. The src attribute gives the address of the media resource. The value must be a
valid non-empty URL potentially surrounded by spaces. This attribute must be present.

<video controls>
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">

<source src="[Link]" type="video/ogg">


</video>

CANVAS

Represents a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or
other visual images on the fly.
Authors should not use the canvas element in a document when a more suitable element is available. For example,
it is inappropriate to use a canvas element to render a page heading. If the desired presentation of the heading is
graphically intense, it should be marked up using appropriate elements (typically h1) and then styled
using CSS and supporting technologies such as XBL.
When authors use the canvas element, they must also provide content that, when presented to the user, conveys
essentially the same function or purpose as the bitmap canvas. This content should be nested within the canvas
element as a fallback.

Tips and Notes

Note: Any text inside the <canvas> element will be displayed in browsers that does not support <canvas>.

Tip:For a complete reference of all the properties and methods that can be used with the canvas object, go to our HTML Canvas Reference.

31
Html 5

Attributes

New : New in HTML5.

Attribute Value Description

heightNew pixels Specifies the height of the canvas

widthNew pixels Specifies the width of the canvas

<canvas id="myCanvas" width="300" height="150">


Fallback content, in case the browser does not support Canvas.
</canvas>

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=[Link]('myCanvas');

var ctx=[Link]('2d');

[Link]='#FF0000';

[Link](0,0,80,100);

</script>

</body>

</html>

32
Html 5

Hello Canvas
The <canvas> element by itself is an invisible block of space, by default 300×150 pixels (in all browsers):
<canvas id="c"></canvas>

So now we’ve got a blank canvas in front of us. To draw, we need thedrawing context, which we can get using
JavaScript. Once we have the context, we can draw abominations to our hearts’ content:
<script>
// declare the two variables at once using a comma
var canvas = [Link]("c"),
context = [Link]("2d");

// now you're ready to draw


</script>

Code snippet
The context is our direct access to draw and paint on the canvas. Without it, we can’t paint a thing.

Painting Shapes
The 2D drawing API is fairly large (not too huge, but bigger than most other HTML-esque APIs), so I’m just going
to show you how to draw something simple: a solid blue rectangle and a pink semi-circle.
Using the context object from earlier, we’re going to call fillRect(), passing the method the coordinates of the top
left corner (x, y) and the width and height of the rectangle we want to paint:
<script>
var canvas = [Link]("c"),
context = [Link]("2d");

// x = 10, y = 20, width = 200, height = 100


[Link](10, 20, 200, 100);
</script>

Code snippet

Simple filled rectangle created with canvas

If you don’t specify a colour, the default fill and stroke colours will be black. So let’s change that to blue by setting
the fillStyle() beforewe call fillRect(). We’re choosing our colour before drawing because this <canvas> is just like a
real canvas — if you’re going to paint, you need to dip your brush in to the paint pot first:
var canvas = [Link]("c"),
context = [Link]("2d");

[Link] = 'blue';
[Link](10, 20, 200, 100);

Code snippet

Blue filled rectangle created with canvas

33
Html 5

Being the eagle-eyed HTML5 ninja that you are, you noticed that I’ve used the string blue as the fill colour. You
can use any CSS colour properties in the canvas API. That means blue, #0000ff, #00f,rgb(0, 0, 255), and
even rgba(0, 0, 255, 0.5) are all valid colours.
How about we turn this thing up to eleven? Let’s add a pink semi-circle. Oh yeah! Let’s do this!
var canvas = [Link]("c"),
context = [Link]("2d");

[Link] = 'blue';
[Link](10, 20, 200, 100);

// setup the line style


[Link] = '#fa00ff';
[Link] = 5;
[Link] = 'round';

// draw the arc path


// (I'll walk you through these values momentarily - bear with me!)
[Link](50, 50, 20, 0, [Link], false);

// colour the path


[Link]();

Code snippet

Blue filled rectangle with a semi-circle created with


canvas

There are three things that we’ve added to our JavaScript:


1. Configuring the line style
2. Drawing the semi-circle path
3. Stroking the path (i.e., painting the line)
When drawing paths, until you fill or stroke the path, nothing appears on the canvas. In this case, our path is an
arc of a 180 degrees. The arc() method takes the following arguments: x coordinate, y coordinate, radius, start
angle, end angle, and whether the arc should be drawn anti-clockwise. All of these arguments are required.
(Technically, if you’re drawing a circle, it doesn’t matter whether you’re going clockwise or anti-clockwise, but
you still need the argument.)
The tricky parts are the start and end angle. They’re both in radians. Remember those? I didn’t, so I’ll forgive you
if you don’t! Here’s how to convert from degrees to radians:
var radians = degrees * [Link] / 180;

It’s common to pass 360 degrees to the drawing methods, which is simply [Link] * 2. Similarly, 180 degrees
is [Link], which we used to create our semi-circle.
Once you have your path, you need to stroke (or fill) it. This applies the line style and colours to the path and
completes our drawing. Do please remember that with this drawing: a) you can’t recover those lost blue pixels
under the pink semi-circle, and b) this example would be much simpler in SVG!
So remember to choose the <canvas> element based on its strengths as I outlined at the top of this article.

[Link]

34
Html 5

MAP

The map element, in conjunction with any area element descendants, defines an image map. The element
represents its children.

<section>

<h1>Clothing</h1>
<img src="/images/[Link]" alt="Select a department to go to its page."usemap="#nav">
</section>
...
<footer>
<map name="nav">

<p><a href="/women/">Women</a>
<area alt="Women" coords="0,0,100,50" href="/women/"> |
<a href="/men/">Men</a>
<area ALT="Men" coords="0,0,100,50" href="/men/"> |
<A HREF="/kids/">Kids</A>

<area alt="Food" coords="0,0,100,50" href="/kids/"> |


</p>
</map>
</footer>

Attributes
Attribute Value Description

name mapname Required. Specifies the name of an image-map

<!DOCTYPE html>

<html>

<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="[Link]" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">

<area shape="rect" coords="0,0,82,126" alt="Sun" href="[Link]">

<area shape="circle" coords="90,58,3" alt="Mercury" href="[Link]">

<area shape="circle" coords="124,58,8" alt="Venus" href="[Link]">

</map>

35
Html 5

</body>

</html>
AREA

The area element represents either a hyperlink with some text and a corresponding area on an image map, or a
dead area on an image map.
If the area element has no href attribute, then the area represented by the element cannot be selected, and
the alt attribute must be omitted.

<img src="[Link]" usemap="#rooms" alt="1 bedroom, a kitchen, lounge and bathroom">

<map name="rooms">
<area shape="rect" coords="20,20,140,140" href="[Link]"alt="Bedroom">
<area shape="rect" coords="20,140,140,280" href="[Link]"alt="Lounge">
<area shape="poly" coords="140,140,140,280,280,140" href="[Link]"alt="Kitchen">
<area shape="rect" coords="140,20,280,140" href="[Link]"alt="Bathroom">
</map>
Attributes

New : New in HTML5.

Attribute Value Description

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

coords coordinates Specifies the coordinates of the area

href URL Specifies the hyperlink target for the area

hreflangNew language_code Specifies the language of the target URL

mediaNew media query Specifies what media/device the target URL is optimized
for

nohref nohref Not supported in HTML5. Specifies that an area has no


associated link

relNew alternate Specifies the relationship between the current


author document and the target URL
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag

shape default Specifies the shape of the area


rect
circle
poly

target _blank Specifies where to open the target URL


_parent
_self
_top
framename

typeNew MIME_type Specifies the MIME type of the target URL

36
Html 5

Text-level
A

If the a element has an href attribute, then it represents a hyperlink (ahypertext anchor). If the a element has
no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if
it had been relevant.
The target, rel, media, hreflang, and type attributes must be omitted if thehref attribute is not present.

<a href="#">Jack Osborne</a>

EM
Represents stress emphasis of its contents. The level of emphasis that a particular piece of content has is given by
its number of ancestor em elements. The 'stress' being referred to is linguistic. If spoken, this stress would be
emphasised pronunciation on a word that can change the nuance of a sentence.

Call a doctor <em>now</em>

STRONG

Represents strong importance for its contents. Indicate relative importance by nesting strong elements;
each strong element increases the importance of its contents. Changing the importance of a piece of text with the
strong element does not change the meaning of the sentence.

<strong>Warning</strong>. This dungeon is dangerous. <strong>Avoid the ducks.</strong> Take any gold you find.

Represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a
taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or
some other prose whose typical typographic presentation is italicized.
Only use i when nothing more suitable is available — e.g., em for text with stress emphasis, strong for text with
semantic importance, cite for titles in a citation or bibliography, dfn for defining a word, and var for mathematical
variables.

The term <i>prose content</i> is defined above.


<i class="taxonomy">Nanotyrannus</i> ("dwarf tyrant") is a genus of tyrannosaurid dinosaur, and is possibly a juvenile specimen of
<iclass="taxonomy">Tyrannosaurus</i>.

We ate <i lang="ja-latn" title="eel">unagi</i>, <i lang="ja-latn" title="seared salmon">aburi-zake</i>, and <i lang="ja-latn"
title="octopus">tako</i> sushi last night.

The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation
(when you are annotating something, but not explicitly saying what it is). Examples include indicating misspelt
words, labeling proper names in traditional Chinese prose, or indicating a family name when the name’s order is
non-western.

<span itemscope itemtype="[Link] lang="ja-latn">


<u itemprop="familyName">Son</u> <span itemprop="givenName">Goku</span>
</span>
<p>This is a <u>parragraph</u>.</p>

37
Html 5

The s element represents contents that are no longer accurate or no longer relevant.

<p>Sale on now!</p>
<p><s>Get up to 25% off</s></p>

<p><strong>Now down to 50% off</strong></p>

The <s> tag specifies text that is no longer correct, accurate or relevant. The <s> tag should not be used to define replaced or deleted text, use
the <del> tag to define replaced or deleted text.

SMALL

Represents side comments such as small print. It is not intended to be presentational. The small element should
not be used for extended spans of text such as multiple paragraphs, lists, or sections of text. It is only intended for
short runs of text.

<footer>
<address>
For more details, contact
<a href="[Link] Doctor</a>.
</address>
<small> © copyright HTML5 Doctor. </small>

</footer>

ABBR

Represents an abbreviation or acronym. The optional title attribute may be used to provide an expansion of the
abbreviation. If specified, the title attribute must contain an expansion of the abbreviation and nothing else.

The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> started working on HTML5 in 2004.

The q element represents some phrasing content quoted from another source.

<p>And then he said <q>I heart HTML5</q></p>

<!DOCTYPE html>

<html>

<body>

<p>WWF's goal is to:

<q>Build a future where people live in harmony with nature.</q>

We hope they succeed.</p>

</body>

</html>

Result : WWF's goal is to: “Build a future where people live in harmony with nature.” We hope
they succeed.
CITE

The cite element represents 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, a

38
Html 5

legal case report, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just
be a work that is mentioned in passing.
A person's name is not the title of a work — even if people call that person a piece of work — and the element
must therefore not be used to mark up people's names. (In some cases, the b element might be appropriate for
names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to
draw attention to them. In other cases, if an element is really needed, the span element can be used.)
My favourite book is <cite>Introducing HTML5</cite> by Bruce and Remy

The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

DFN

The dfn element represents the defining instance of a term. The paragraph, description list group, or section that
is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.

<p>While they're essential reading material for our job, the <dfn><abbrtitle="World Wide Web Consortium">W3C</abbr></dfn>
specifications are not exactly George R. R. Martin-level reading material.</p>

<dfn>Definition term</dfn><br>

SUB

The sub element can be used inside a var element, for variables that have subscripts.

H<sub>2</sub>O is the chemical formula for water

SUP

The sup element represents a superscript and the sub element represents a subscript.

Today is the 2<sup>nd</sup> of May

<p>This text contains <sub>subscript</sub> text.</p>

<p>This text contains <sup>superscript</sup> text.</p>

TIME

Represents a precise date and/or time in the proleptic Gregorian calendar. The time element encodes modern
dates and times in a machine-readable way, so that, for example, user agents could offer to add an event to the
user's calendar.

<time datetime="2007-08-29T13:58Z">
August 29th, 2007 at 13:58
</time>

Definition and Usage

The <time> tag defines either a time (24 hour clock), or a date in the Gregorian calendar, optionally with a time and a time-zone offset.

This element can be used as a way to encode dates and times in a machine-readable way so that, for example, user agents can offer to add birthday
reminders or scheduled events to the user's calendar, and search engines can produce smarter search results.

ttributes

New : New in HTML5.

39
Html 5

Attribute Value Description

datetimeNew datetime Gives the date/time being specified. Otherwise, the date/time is
given by the element's contents

pubdateNew pubdate Indicates that the date/time in the <time> element is the
publication date of the document (or the nearest ancestor
<article> element)

CODE

The code element represents a fragment of computer code. This could be an XMLelement name, a filename, a
computer program, or any other string that a computer would recognize.

To get started with HTML5 you just need at this top of your page <code><!DOCTYPE html></code>
KBD

The kbd element represents user input (typically keyboard input, although it may also be used to represent other
input, such as voice commands).
When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system.
When the kbd element contains a samp element, it represents input based on system output, for example invoking
a menu item.
When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of
input as appropriate for the input mechanism.

<p>Mac users: To take a screenshot press <kbd><kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>3</kbd></kbd></p>

SAMP

The samp element represents (sample) output from a program or computing system

<pre><samp>mike:mysite mike$ <kbd>git status</kbd>

# On branch master
nothing to commit (working directory clean)
mike:mysite mike$</samp></pre>

VAR

The var element represents a variable. This could be an actual variable in a mathematical expression or
programming context, or it could just be a term used as a placeholder in prose.

<p><var>E</var> energy is equal to <var>m</var> mass multiplied by the<var>c</var> speed of light, squared.</p>

MARK

Represents a run of text in one document marked or highlighted because of its relevance in another context.
When used in a quotation or other block of text referenced in a document, it indicates a highlight that was not
present in the original document — e.g., a portion of text in an academic publication that has recently come under
additional scrutiny.
In this sentence we'll be using the mark element. <mark>HTML5</mark> Can you see where it has been used?

BDO

The bdo element represents explicit text directionality formatting control for its children. It allows authors to
override the Unicode bidirectional algorithm by explicitly specifying a direction override.

<p><bdo dir="rtl">Don't cheat by reading this in a mirror!</bdo></p>

Attributes

40
Html 5

Attribute Value Description

dir ltr Required. Specifies the text direction of the text inside the <bdo>
rtl element

RUBY
Represents a container for base text and ruby text — small annotations used for phonetic readings in languages
such as Japanese and Chinese. Examples include furigana and zhùyin fúhào (bopomofo).
<ruby>??<rp>(</rp><rt>????</rt><rp>)</rp>???<rp>(</rp><rt>?????</rt><rp>)</rp></ruby>
RP
Represents a container for parentheses used to wrap ruby text ( <rt>) inside a<ruby> element. These are displayed
by browsers which don't support <ruby>, allowing for graceful degradation of ruby content. Browsers which
support <ruby>hide <rp> via display:none.
RT
Represents a container for ruby text inside a <ruby> element. <rt> content becomes the small annotations
rendered by default above horizontal base text or to the right of vertical base text.

SPAN
The span element doesn't mean anything on its own, but can be useful when used together with the global
attributes, e.g. class, lang, or dir. It represents its children.
<span>This is an example of the span element</span>

BR
The br element represents a line break. br elements must be used only for line breaks that are actually part of the
content, as in poems or addresses. br elements must not be used for separating thematic groups in a paragraph.

<br />

WBR

The wbr element represents a line break opportunity. Any content inside wbrelements must not be considered part
of the surrounding text.

The <wbr> tag is supported in all major browsers, except Internet Explorer.

Definition and Usage

The Word Break Opportunity (<wbr>) specifies where in a text it would be ok to add a line-break.

Tip: When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word
break opportunities.

html5<wbr>[Link]

<!DOCTYPE html>

<html>

<body>

<p>Try to shrink the browser window, to view how the word "XMLHttpRequest" in

the paragraph below will break:</p>

<p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.</p>

41
Html 5

<p><b>Note:</b> The &lt;wbr&gt; tag is not supported in IE.</p>

</body>

</html>

42

You might also like