Scribd
Upload
172 views

HTML 5

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. HTML5 addresses this issue by introducing new elements for representing each of these different sections. Div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

Uploaded by

Indrajeet Kumar
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
172 views

HTML 5

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. HTML5 addresses this issue by introducing new elements for representing each of these different sections. Div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

Uploaded by

Indrajeet Kumar
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

By: INDRAJEET KUMAR 2SD08CS041 VIIIth SEM CSE DEPT.

What is HTML? What is HTML5? HTML5 Structure HTML5 Tags Difference of HTML5 with HTML4 Whats new in HTML5? Limitations of HTML5 Advantages of HTML5 Web sites that using HTML5 Browser Support References

A Web Page is created using a language called, Hypertext Markup Language, better known as HTML Code. HTML is used to define the structure and layout of a Web page. HTML is not a programming language, it is a markup language

File Extension :- .html or .htm

HTML 5 is the next version of Hyper Text Markup Language(HTML4) It is developing by World Wide Web consortium W3C and WHATWG.

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
The previous version of HTML came in 1999. The web has changed a lot since then.
HTML5 Logo

It is common to mark them up using div elements, giving each a descriptive id or class.

The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically.

HTML4 document structure

HTML 5 addresses this issue by introducing new elements for representing each of these different sections. The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.
HTML5 document structure

The markup for that document could look like the following: <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>

Header-represents the header of a section, may contain more than just the sections heading ex.-sub headings, version history information or bylines. Footer-for marking up the footer of, not only the current page, but each section contained in the page. Ex-<footer> 2007 Example Inc.</footer> Nav- represents a section of navigation links. It is suitable for either site navigation or a table of contents.

Aside -for content that is tangentially related to the content around it, represents content related to the main area of the document. Section- represents a generic section of a document or application, such as a chapter. Article- represents an independent section of a document, page or site, which can stand alone, for content like news or blog articles.

Tag <article>New <aside>New <audio>New <canvas>New <command>New <datalist>New <details>New <dialog>New <embed>New <figure>New <footer>New <header>New <hgroup>New

Description Defines an article Defines content aside from the page content Defines sound content Defines graphics Defines command button Defines a dropdown list Defines details of an element Defines a dialog (conversation) Defines external interactive content or plugin Defines a group of media content, and their caption Defines a footer for a section or page Defines a header for a section or page

<keygen>New <mark>New <meter>New <nav>New <output>New <progress>New <rp>New

Defines a generated key in a form Defines marked text Defines measurement within a predefined range Defines navigation links Defines some types of output Defines progress of a task of any kind

<rt>New <ruby>New
<section>New <source>New <time>New

Used in ruby annotations to define what to show browsers that to not support the ruby element. Defines explanation to ruby annotations. Defines ruby annotations. Defines a section Defines media resources Defines a date/time Defines a video

Defines information about a section in a <video>New document

HTML4 Elements like nav, header were not present.

HTML5 It brought new element for web structure like nav, header etc

Lack of rules of parsing, so it is difficult to handle error.


No multimedia supported without third party

Strictly parsing rules introduced in html5 to handle the error.


Inbuilt multimedia element in html5 like Audio,video,convas

It was not available

It contains attributes like control menu, spell check etc.

WEB WORKERIt is a Hyper-Threading for web browsers. Separate background threads are used to do processing without effecting the performance of a webpage. You can continue to do whatever you want, selecting thing, clicking etc, while all Web Worker computation is in the background.

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>

<!DOCTYPE HTML> <html> <body>

Audio tag- input

<audio src="song.ogg" controls="controls"> Your browser does not support the audio element. </audio>
</body> </html>

APPLICATION CACHE Provides the ability to store web apps like email locally and access it without having to connect to the internet.

Google gears, which helps you access Gmail offline, is an implementation of HTML 5 specifications for Applications Cache. Reading static web pages offline is easy: connect to the Internet, load a web page, disconnect from the Internet.

GEOLOCATION This API defines location information with high-level interface (GPS) associated with the device hosting the API.

Geo location Sample

navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } );

LOCAL STORAGE Provides a way for web sites to store information on computer and retrieve it later. Cookies are limited in size, browser sends them back to the web server every time it requests a new page.

HTML5 storage stays on computer, and web sites can access it with JavaScript after the page is loaded.

INPUT TYPES HTML5 defines over a dozen new input types that we can use in our forms. 1. <input type="search"> for search boxes 2. <input type="number"> for spinboxes 3. <input type="range"> for sliders 4. <input type="tel"> for telephone numbers 5. <input type="url"> for web addresses 6. <input type="email"> for email addresses 7. <input type="date"> for calendar date pickers 8. <input type="month"> for months 9. <input type="week"> for weeks 10.<input type="time"> for timestamps

BROWSERS DO NOT PROVIDE FULL SUPPORT FOR HTML5- None of the web browsers for mobile or desktop have full HTML 5 implementations at present.

CROSS PLATFORM / BROWSER COMPATIBILITYEvery browser has its own rendering mechanism so an application developed for iPad Safari is not guaranteed to work well in other browsers like in IE. Developers will have to make modifications in the code to make it work in different browsers.

AUDIO/VIDEO SUPPORT-HTML5 has added new video and audio tags that can play video/audio in a browser without a plug-in but it doesnt officially support any video or audio format. Ogg Theora and H.264 formats are are supported. DEVELOPMENT TOOLS As of now there are no tools available (except Dreamweaver CS5) that can create animations for HTML5.

Cleaner markup / Improved Code Improved Semantics Elegant forms Improved Accessibility Fulfill the need of Web application Offline Application cache Client-side database Geo location support

YouTube uses HTML5 Google wave, a collaboration tool from Google uses several html5 tags. Only some of the browser only supports HTML5 features currently.

HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions. Currently only Apples Safari is fully HTML 5 ready. Mozilla Firefox 3.5 supports the new coding but is not 100% compatible

Will HTML 5 Re-standardize the Web? By Steven J Nicholas

http://dev.w3.org/html5/spec/Overview.html#introduction
http://www.w3.org/TR/html5/video.html#audio http://dev.w3.org/html5/html4-differences/ http://www.whatwg.org/specs/web-apps/current-work/#dnd http://dev.w3.org/html5/postmsg/#introduction-0

http://www.w3schools.com/html5

You might also like