Introduction of
Contents
O What is HTML?
O What is HTML5?
O How did HTML5 get started?
O History of HTML5
O What’s new in HTML5?
O Advantages of HTML5
O Difference of HTML5 with HTML4
O Web sites that using HTML5
O Browser Support
O HTML5 Tags
O References
What is HTML?
O A Web Page is created using a
languag+e called, Hypertext
Markup Language, better known
as HTML Code.
O HTML is used to define the
structure and layout of a Web
page.
O HTML is not a programming
language, it is a markup language
O File Extension :- .html or .htm
What is
O HTML 5 is the next version of Hyper Text
Markup Language(HTML4)
O It is developing by World Wide Web
consortium W3C and WHATWG.
O HTML5 will be the new standard for
HTML, XHTML, and the HTML DOM. HTML5
Logo
O The previous version of HTML came in
1999. The web has changed a lot since
then.
How Did HTML5 Get Started?
O HTML5 is a cooperation between the World Wide Web
Consortium (W3C) and the Web Hypertext Application
Technology Working Group (WHATWG).
O WHATWG was working with web forms and applications, and
O W3C was working with XHTML 2.0.
O In 2006, they decided to cooperate and create a new version of
HTML.
History of
O 1992 HTML is first defined
O 1993 HTML+ (some physical layout, fill-out forms, tables, math)
O 1994 HTML2.0 and HTML 3.0
O 1996 HTML 3.2
O 1997 HTML 4.0 (separates structure and presentation with
stylesheets)
O 1999 HTML 4.01 (slight modifications only)
O 2000 XHTML 1.0 (XML version of HTML 4.01)
O 2001 XHTML 1.1
O 2002 XHTML 2.0
O 2003 HTML 5 (to extend HTML 4's forms to provide many of the
features the XForms 1.0 introduced)
What’s New in
O New Doctype and Charset
O New Structure
O New Inline Elements
O New Dynamic Pages Support
O New Form Types
O New Elements
O Removes Some Elements
New Doctype and Charset
O You can use the HTML 5 doctype, which is very simple and
streamlined:
<!doctype html>
O The character set for HTML 5 is streamlined as well. It uses
UTF-8 and you define it with just one meta tag:
<meta charset="UTF-8">
New Structure
In general, Web pages have navigation, body content, and sidebar
content plus headers, footers, and other features. The tags for this
are:-
O <section>
O <header>
O <footer>
O <nav>
O <article>
O <aside>
O <figure>
New Inline elements and Dynamic support
New Inline Elements
O <mark>
O <time>
O <meter>
O <progress>
New Dynamic Pages Support
O Context menus
O async attribute
O <details>
O <datagrid>
O <menu>
O <command>
New Form types and Other elements
New Form Types New Elements
O HTML 5 supports all the O <canvas> - an element to give
standard form input types, but it you a drawing space in
adds a few more: JavaScript on your Web pages.
O datetime
O datetime-local
O date O <video> - add video
O month
O week O <audio> - add sound to your Web
O time pages
O number
O range
O email
O url
Removes Some Elements
There are also some elements in O frame
HTML 4 that will no longer be O frameset
supported by HTML 5.
O isindex
O acronym
O noframes
O applet
O noscript
O basefont
O s
O big
O strike
O center
O tt
O dir
O u
O font
To Quote or not to Quote
O HTML5 is not XHTML. You don’t have to wrap your attributes in quotation
marks if you don’t want to you.
<img src = “DSC00624.jpg” alt = “About image” />
OR
<img src = DSC00624.jpg alt = About image />
O Make up your own mind on this one. If you prefer a more structured
document, by all means, stick with the quotes.
Make your Content Editable
<!DOCTYPE html> <li> Gurpreet Kaur(155)
<html lang="en"> </li>
<li> Meeru Gupta
<head>
<li> Jyoti Batra </li>
<meta charset="utf-8">
<li> Jaskiran Kaur </li>
<title>untitled</title> </ul>
</head> </body>
</html>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
Email Inputs
<!DOCTYPE html> <button type="submit"> Submit
<html lang="en"> Form </button> </form>
<body> </body>
<form action="" method="get"> </html>
<label
for="email">Email:</label>
<input id="email"
name="email" type="email" />
Video Format HTML tags input
<!DOCTYPE HTML>
<html>
<body>
<video src="movie.ogg"
width="320" height="240"
controls="controls">
Your browser does not support
the video tag.
</video> </body> </html>
Audio tag- input
<!DOCTYPE HTML>
<html>
<body>
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
</body>
</html>
New Tags in HTML5
Tag Description <keygen>New Defines a generated key in a form
<article>New Defines an article <mark>New Defines marked text
<aside>New Defines content aside from the page <meter>New Defines measurement within a predefined
content range
<audio>New Defines sound content <nav>New Defines navigation links
<canvas>New Defines graphics <output>New Defines some types of output
<command>New Defines command button
<progress>New Defines progress of a task of any kind
<datalist>New Defines a dropdown list
<rp>New Used in ruby annotations to define what to
<details>New Defines details of an element
show browsers that to not support the ruby
<dialog>New Defines a dialog (conversation) element.
<embed>New Defines external interactive content or <rt>New Defines explanation to ruby annotations.
plugin <ruby>New Defines ruby annotations.
<figure>New Defines a group of media content, and
<section>New Defines a section
their caption
<footer>New Defines a footer for a section or page <source>New Defines media resources
<header>New Defines a header for a section or page <time>New Defines a date/time
<hgroup>New Defines information about a section in a
<video>New Defines a video
document
O Mutuality
O Cleaner markup / Improved Code
O Improved Semantics
O Elegant forms
O Consistency
O Improved Accessibility
O Fulfill the need of Web application
O Offline Application cache
O Client-side database
O Geolocation support
Difference between HTML4 and HTML5
HTML4 HTML5
Elements like nav, header were It brought new element for web
not present. structure like nav, header etc
Lack of rules of parsing, so it is Strictly parsing rules introduced
difficult to handle error. in html5 to handle the error.
No multimedia supported Inbuilt multimedia element in
without third party html5 like Audio,video,convas
It was not available It contains attributes like control
menu, spell check etc.
Web sites that using HTML5
O YouTube uses HTML5
O Google wave, a collaboration tool from Google uses several
html5 tags.
O Only some of the browser only supports HTML5 features
currently.
Browser Support
O HTML5 is not yet an official standard, and no browsers have full HTML5
support.
O But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer)
continue to add new HTML5 features to their latest versions.
O Currently only Apples Safari is fully HTML 5 ready.
O Mozilla Firefox 3.5 “supports” the new coding but is not 100% compatible
References
O http://en.wikipedia.org/wiki/HTML
O http://www.w3.org
O http://www.whatwg.org
O http://www.w3schools.com
