Scribd
Upload
271 views

HTML 5

HTML5 is the latest evolution of the standard Hypertext Markup Language (HTML) that defines the structure and layout of web pages. It introduces new semantic elements, removes deprecated elements, and expands the types of content that can be embedded within HTML pages. Some key new features in HTML5 include new semantic elements (<header>, <nav>, <article> etc.), multimedia integration using <video> and <audio> tags, canvas drawing, and offline web applications. While browser support for HTML5 is still evolving, all major browsers have implemented many new features, though full compatibility has not been achieved.

Uploaded by

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

HTML 5

HTML5 is the latest evolution of the standard Hypertext Markup Language (HTML) that defines the structure and layout of web pages. It introduces new semantic elements, removes deprecated elements, and expands the types of content that can be embedded within HTML pages. Some key new features in HTML5 include new semantic elements (<header>, <nav>, <article> etc.), multimedia integration using <video> and <audio> tags, canvas drawing, and offline web applications. While browser support for HTML5 is still evolving, all major browsers have implemented many new features, though full compatibility has not been achieved.

Uploaded by

Ruth Abiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 24

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy