Scribd
Upload
34 views

The Beginner Training Session: Ganesan

The document provides an overview of HTML5, including: - New features such as new elements, full CSS3 support, video/audio capabilities, and local storage. - Browser support from Chrome, Firefox, Internet Explorer, Safari, and Opera. - New elements like <canvas> for drawings, <video> and <audio> for media, and <article>, <header>, <footer>, etc. for structure. - Some elements removed from HTML4 like <acronym>, <applet>, etc. - Examples of using new semantic elements like <section>, <article>, and <nav>.

Uploaded by

கணேசன் சந்திரசேகரன்
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
34 views

The Beginner Training Session: Ganesan

The document provides an overview of HTML5, including: - New features such as new elements, full CSS3 support, video/audio capabilities, and local storage. - Browser support from Chrome, Firefox, Internet Explorer, Safari, and Opera. - New elements like <canvas> for drawings, <video> and <audio> for media, and <article>, <header>, <footer>, etc. for structure. - Some elements removed from HTML4 like <acronym>, <applet>, etc. - Examples of using new semantic elements like <section>, <article>, and <nav>.

Uploaded by

கணேசன் சந்திரசேகரன்
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

HTML 5

The Beginner Training Session

GANESAN CHANDRASEKARAN
Sap Id: 51450717
WWW – THE BIG WORLD

• HTML – Hyper Text Markup Language


• HTML 5 – The latest Standard of HTML
• This replaces HTML 4, XHTML and HTML DOM L2
• HTML 5 is Cross Platform – Works in PC, Tablet, Smart phones.
• It reduces the requirement of External Plugins like Flash
• Error handling is much better
• Device Independent
THE NEW DEVELOPMENTS

• New Elements
• New Attributes
• Full CSS3 Support
• Video and Audio
• 2D/3D Graphics
• Local Storage
• Local SQL Database
• Web Applications
BROWSER SUPPORT FOR HTML5

• Chrome

• Firefox

• Internet Explorer

• Safari

• Opéra
<!DOCTYPE>

HTML 5 provides a very simple declaration for <!doctype> as follows


<!DOCTYPE html>
The minimum HTML Document is,

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Page Title</title>
</head>

<body>
HTML Page Content
</body>

</html>
NEW FEATURES

• The <canvas> element for 2D drawing


• The <video> and <audio> elements for media playback
• Support for local storage
• New content-specific elements, like <article>, <footer>,
<header>, <nav>, <section>
• New form controls, like calendar, date, time, email, url, search
HTML5 NEW ELEMENTS

• HTML5 has included new elements for drawing graphics, displaying media
content, for better page structure and better form handling, and several
new APIs, such as drag and drop, get the geographical position of a user,
store local data, and more.
• Media Elements
• Form Elements
• Structure Elements
• And Some of the elements are removed
NEW MEDIA ELEMENTS

• <canvas> Defines graphic drawing using JavaScript


• <audio> Defines sound or music content
• <embed> Defines containers for external applications (like plug-ins)
• <source> Defines sources for <video> and <audio>
• <track> Defines tracks for <video> and <audio>
• <video> Defines video or movie content
NEW FORM ELEMENTS

• <datalist> Defines pre-defined options for input controls


• <keygen> Defines a key-pair generator field (for forms)
• <output> Defines the result of a calculation
NEW SEMANTIC/STRUCTURAL ELEMENTS

• <article> Defines an article in the document


• <aside> Defines content aside from the page content
• <bdi> Defines a part of text that might be formatted in a different
direction from other text outside it
• <details> Defines additional details that the user can view or hide
• <dialog> Defines a dialog box or window
• <figcaption> Defines a caption for a <figure> element
• <figure> Defines self-contained content, like illustrations, diagrams,
photos, code listings, etc.
• <footer> Defines a footer for the document or a section
CONT.

• <header> Defines a header for the document or a section


• <main> Defines the main content of a document
• <mark> Defines marked or highlighted text
• <menuitem> Defines a command/menu item that the user can invoke
from a popup menu
• <meter> Defines a scalar measurement within a known range (a
gauge)
• <nav> Defines navigation links in the document
• <progress> Defines the progress of a task
• <rp> Defines what to show in browsers that do not support ruby
annotations
CONT.

• <rt> Defines an explanation/pronunciation of characters (for East Asian


typography)
• <ruby> Defines a ruby annotation (for East Asian typography)
• <section> Defines a section in the document
• <summary> Defines a visible heading for a <details> element
• <time> Defines a date/time
• <wbr> Defines a possible line-break
REMOVED ELEMENTS

• Some of HTML 4.01 Elements are removed from HTML 5 and they are,
• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>
HTML5 SEMANTIC/STRUCTURE ELEMENTS

• The Structure Elements are the elements are the element which give
meaning about the content to the browser. We can not identify the
meaning without the browser help.
• Example: <div> <span>
• The Semantic Elements are able to give meaning to both the user and
browser. To the user, It tells about the content.
• Example: <form> <table> <img>
NEW SEMANTIC ELEMENTS IN HTML 5

• <header> • <figcaption>
• <nav> • <footer>
• <section> • <details>
• <article> • <summary>
• <aside> • <mark>
• <figure> • <time>
SAMPLE STRUCTURE

<header>

<nav>

<section>

<aside>

<article>

<footer>
HTML5 <SECTION> ELEMENT

• The <section> element defines a section in a document. Each defined


section will be separated by a redefined space
• As per the definition from W3C Documentation, usage of section tag with
Header tag will give proper effect in the design.
• The Sample code to use <section> element is

<section>
<h1>Title for the Section</h1>
<p>The Section Contents.</p>
</section>
HTML5 <ARTICLE> ELEMENT

• The <article> element specifies independent, self-contained content. The


article should be ready to distribute without other content of website.
• The Article can be used with the following types of contents.
• Forum post
• Blog post
• News story
• Comments
<article>
<h1>Ganesh Says: </h1>
<p> The Usage of HTML 5 is great…</p>
</article>
HTML5 <NAV> ELEMENT

• The <nav> element defines a set of navigation links.


• This is to have large block of navigation links, but not all the links

You might also like