The document discusses the key changes and new features in HTML5 compared to previous versions of HTML and XHTML. It notes that the HTML5 specification is larger and covers new elements, forms, APIs, and structural tags. It provides examples of several new elements like <article>, <aside>, <section>, <header>, and <canvas> and explains their purpose in HTML5 pages. It also covers new attributes for multimedia like <audio> and <video> elements and their <source> child elements.
2. HTML 5
• HTML 5 Specification is Much Larger
DOM
HTML 4 XHTML 1.O LEVEL
2
HTML5
3. DOCTYPE has been simplified
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
• <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile
1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
HTML 5
<!DOCTYPE HTML>
4. HTML 5 NEW ELEMENTS
Article, aside, audio, canvas, command,
datalist, details, embed, figcaption, figure,
footer, header, hgroup, keygen, mark,
meter, nav, output, progress, rp, ruby,
section, source, summary, time, video,
track, wbr.
5. FORMS IN HTML 5
• Date pickers, color pickers, and numeric stepper
controls added
• Input field types now include email, search, and
url
8. NEW Structural Tags
• <section></section>
• “The section element represents a generic section of a
document or application. A section, in this context, is
thematic grouping of content, typically with a heading…”
• <article></article>
• “The article element represents a self-contained
composition in a document page, application, or site and
that is intended to be independently distrubutable or
reusable, e.g. in syndication. This could be a forum post, a
magazine or newspaper article, a blog entry, a user-
submitted comment, an interactive widget or gadget. Or
any other independent item of content.”
9. • <aside></aside>
• “The aside element represents a section of a
page that consists 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”
10. • <header></header>
• “A header element is intended to usually contain
the section’s heading (an h1-h6 element or an
hgroup element), but this is not required. The
header element can also be used”
11. • Audio
• <audio> Defines sound content
• <source>Defines multiple media resources for
media elements, such as <video> and <audio>
12. • <video> Defines a video or movie
• <source>Defines multiple media resources for
media elements, such as <video> and <audio>
13. • The <canvas> element is used to draw graphics,
on the fly, on a web page.