SlideShare a Scribd company logo
1 of 11
HTML 5
Presented by:-
Ajinkya Nahar
Twitter - @ajinkyanahar
Linked In -
http://in.linkedin.com/pub/ajinky
a-nahar/8/404/77b/
Overview
 HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
 The new standard incorporates features like video
playback and drag-and-drop that have been previously
dependent on third-party browser plug-ins such as Adobe
Flash, Microsoft Silverlight, and Google Gears.
 The latest versions of Apple Safari, Google Chrome,
Mozilla Firefox, and Opera all support many HTML5
features and Internet Explorer 9.0 will also have support
for some HTML5 functionality.
 The mobile web browsers that come pre-installed on
iPhones, iPads, and Android phones all support HTML5
New Features:
 HTML5 introduces a number of new elements and
attributes that helps in building a modern
websites.
 HTML5 is coming with lots of flexibility and would
support the followings:
 Uppercase tag names.
 Quotes are optional for attributes.
 Attribute values are optional.
 Closing empty elements are optional.
 New Semantic Elements: These are like <header>,
<footer>, and <section>
 Server-Sent Events: HTML5 introduces events which
flow from web server to the web browsers and they are
called Server-Sent Events (SSE).
 Canvas: This supports a two-dimensional drawing
surface that you can program with JavaScript.
 Audio & Video: You can embed audio or video on your
web pages without resorting to third-party plugins.
 Geolocation: Now visitors can choose to share their
physical location with your web application.
 Microdata: This lets you create your own vocabularies
beyond HTML5 and extend your web pages with
custom semantics.
 Drag and drop: Drag and drop the items from one
location to another location on a the same webpage.
 WebSocket : A a next-generation bidirectional
communication technology for web applications.
Backward Compatibility
 HTML5 is designed, as much as possible, to be
backward compatible with existing web browsers. New
features build on existing features and allow you to
provide fallback content for older browsers.
 It is suggested to detect support for individual HTML5
features using a few lines of JavaScript.
5
 HTML 5 removes extra information required and you can
use simply following syntax:
 The DOCTYPE:
HTML 5 authors would use simple syntax to specify
DOCTYPE as follows: <!DOCTYPE html>
 Character Encoding:
HTML 5 authors can use simple syntax to specify
Character Encoding as follows: <meta charset="UTF-8">
 The <script> tag:
<script src="scriptfile.js"></script>
 The <link> tag:
<link rel="stylesheet" href="stylefile.css">
HTML5 Document
 The following tags have been introduced for better
structure:
 section: This tag represents a generic document or
application section. It can be used together with h1-
h6 to indicate the document structure.
 article: This tag represents an independent piece of
content of a document, such as a blog entry or
newspaper article.
 aside: This tag represents a piece of content that is
only slightly related to the rest of the page.
 header: This tag represents the header of a section.
 footer: This tag represents a footer for a section and
can contain information about the author, copyright
information, etc.
7
 nav: This tag represents a section of the document
intended for navigation.
 dialog: This tag can be used to mark up a
conversation.
 figure: This tag can be used to associate a caption
together with some embedded content, such as a
graphic or video.
 The markup for an HTML 5 document would
look like the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
References -
 http://www.tutorialspoint.com/html5/
 http://w3schools.com
Html 5

More Related Content

What's hot

Wordpress Custom Child theme
Wordpress Custom Child themeWordpress Custom Child theme
Wordpress Custom Child theme
YouSaf HasSan
 
Html5 flash v3
Html5 flash v3Html5 flash v3
Html5 flash v3
bchen888
 

What's hot (19)

HTML 5 Overview
HTML 5 OverviewHTML 5 Overview
HTML 5 Overview
 
.Net vs JAVA: Which One To Choose In 2022
.Net vs JAVA: Which One To Choose In 2022 .Net vs JAVA: Which One To Choose In 2022
.Net vs JAVA: Which One To Choose In 2022
 
Developing with HTML5
Developing with HTML5Developing with HTML5
Developing with HTML5
 
Adobe Flex
Adobe FlexAdobe Flex
Adobe Flex
 
HTML5 (Mid-Technical)
HTML5 (Mid-Technical)HTML5 (Mid-Technical)
HTML5 (Mid-Technical)
 
Know about cake php framework with vertexplus
Know about  cake php framework with vertexplusKnow about  cake php framework with vertexplus
Know about cake php framework with vertexplus
 
CodeIgniter - PHP MVC Framework by silicongulf.com
CodeIgniter - PHP MVC Framework by silicongulf.comCodeIgniter - PHP MVC Framework by silicongulf.com
CodeIgniter - PHP MVC Framework by silicongulf.com
 
10 Useful Front End Development Tools for Web Apps | 2020
10 Useful Front End Development Tools for Web Apps | 202010 Useful Front End Development Tools for Web Apps | 2020
10 Useful Front End Development Tools for Web Apps | 2020
 
Introduction:
Introduction:Introduction:
Introduction:
 
HTML 5 New Features:
HTML 5 New Features:HTML 5 New Features:
HTML 5 New Features:
 
The world of enterprise solution development with asp.net and C#
The world of enterprise solution development with asp.net and C#The world of enterprise solution development with asp.net and C#
The world of enterprise solution development with asp.net and C#
 
Top Web Development Frameworks Comparison: All You Need To Know
Top Web Development Frameworks Comparison: All You Need To KnowTop Web Development Frameworks Comparison: All You Need To Know
Top Web Development Frameworks Comparison: All You Need To Know
 
Presentation on Visual Studio
Presentation on Visual StudioPresentation on Visual Studio
Presentation on Visual Studio
 
Exciting features in visual studio 2017
Exciting features in visual studio 2017Exciting features in visual studio 2017
Exciting features in visual studio 2017
 
Wordpress Custom Child theme
Wordpress Custom Child themeWordpress Custom Child theme
Wordpress Custom Child theme
 
Html5 flash v3
Html5 flash v3Html5 flash v3
Html5 flash v3
 
New Features of HTML 5.1 to Create More Flexible Web Experiences
New Features of HTML 5.1 to Create More Flexible Web ExperiencesNew Features of HTML 5.1 to Create More Flexible Web Experiences
New Features of HTML 5.1 to Create More Flexible Web Experiences
 
Html5(2)
Html5(2)Html5(2)
Html5(2)
 
One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type script
 

Similar to Html 5

IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
ijceronline
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5
JayjZens
 

Similar to Html 5 (20)

Html5
Html5Html5
Html5
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
 
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT KharagpurHTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5
 
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
 
INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5
 
HTML5 New Tags
HTML5 New TagsHTML5 New Tags
HTML5 New Tags
 
1. Introduction to HTML5.ppt
1. Introduction to HTML5.ppt1. Introduction to HTML5.ppt
1. Introduction to HTML5.ppt
 
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 

Recently uploaded

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 

Html 5

  • 1. HTML 5 Presented by:- Ajinkya Nahar Twitter - @ajinkyanahar Linked In - http://in.linkedin.com/pub/ajinky a-nahar/8/404/77b/
  • 2. Overview  HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.  The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.  The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.  The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all support HTML5
  • 3. New Features:  HTML5 introduces a number of new elements and attributes that helps in building a modern websites.  HTML5 is coming with lots of flexibility and would support the followings:  Uppercase tag names.  Quotes are optional for attributes.  Attribute values are optional.  Closing empty elements are optional.  New Semantic Elements: These are like <header>, <footer>, and <section>
  • 4.  Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).  Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.  Audio & Video: You can embed audio or video on your web pages without resorting to third-party plugins.  Geolocation: Now visitors can choose to share their physical location with your web application.  Microdata: This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.  Drag and drop: Drag and drop the items from one location to another location on a the same webpage.  WebSocket : A a next-generation bidirectional communication technology for web applications.
  • 5. Backward Compatibility  HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.  It is suggested to detect support for individual HTML5 features using a few lines of JavaScript. 5
  • 6.  HTML 5 removes extra information required and you can use simply following syntax:  The DOCTYPE: HTML 5 authors would use simple syntax to specify DOCTYPE as follows: <!DOCTYPE html>  Character Encoding: HTML 5 authors can use simple syntax to specify Character Encoding as follows: <meta charset="UTF-8">  The <script> tag: <script src="scriptfile.js"></script>  The <link> tag: <link rel="stylesheet" href="stylefile.css">
  • 7. HTML5 Document  The following tags have been introduced for better structure:  section: This tag represents a generic document or application section. It can be used together with h1- h6 to indicate the document structure.  article: This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.  aside: This tag represents a piece of content that is only slightly related to the rest of the page.  header: This tag represents the header of a section.  footer: This tag represents a footer for a section and can contain information about the author, copyright information, etc. 7
  • 8.  nav: This tag represents a section of the document intended for navigation.  dialog: This tag can be used to mark up a conversation.  figure: This tag can be used to associate a caption together with some embedded content, such as a graphic or video.
  • 9.  The markup for an HTML 5 document would look like the following: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...</title> </head> <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>