SlideShare a Scribd company logo
Introduction to
HTML5
History of HTML
HTML first
published
1991
2012
2002
-
2009
2000
HTML 2.0
HTML 3.2
HTML 4.01
XHTML 1.0
XHTML 2.0
HTML5
1995
1997
1999
HTML5 is much more tolerant and can
handle markup from all the prior versions.
A working draft was released in 2012 and it
is scheduled to be finalized by the end of
2014.
After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
XHTML 2.0 had very strict standards but
was abandoned in 2009 in favor of HTML5.
2014 HTML5.1 HTML5.1 is currently under development
and expected to be finalized in late 2016.
What is HTML5?
 HTML5 is the newest version of HTML, only recently
gaining partial support by the makers of web browsers.
 It incorporates all features from earlier versions of HTML,
including the stricter XHTML.
 It adds a diverse set of new tools for the web developer
to use.
 It is still a work in progress. No browsers have full
HTML5 support. It will be many years – perhaps not
until 2018 or later - before being fully defined and
supported.
Goals of HTML5
 Support all existing web pages. With HTML5, there is no
requirement to go back and revise older websites.
 Reduce the need for external plugins and scripts to show
website content.
 Improve the semantic definition (i.e. meaning and
purpose) of page elements.
 Make the rendering of web content universal and
independent of the device being used.
 Handle web documents errors in a better and more
consistent fashion.
New Elements in HTML5
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<nav>
<progress>
<section>
<source>
<svg>
<time>
<video>
These are just some of the new elements introduced in HTML5. We will be
exploring each of these during this course.
<article>
<aside>
<audio>
<canvas>
<datalist>
<figure>
Other New Features in HTML5
 Built-in audio and video support (without plugins)
 Enhanced form controls and attributes
 The Canvas (a way to draw directly on a web page)
 Drag and Drop functionality
 Support for CSS3 (the newer and more powerful version
of CSS)
 More advanced features for web developers, such as
data storage and offline applications.
First Look at HTML5
Remember the DOCTYPE declaration from XHTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In HTML5, there is just one possible DOCTYPE declaration and it is simpler:
<!DOCTYPE html>
Just 15 characters!
The DOCTYPE tells the browser which type and version of document to
expect. This should be the last time the DOCTYPE is ever changed. From
now on, all future versions of HTML will use this same simplified declaration.
The <html> Element
This is what the <html> element looked like in XHTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Again, HTML5 simplifies this line:
<html lang="en">
Each of the world’s major languages has a two-character code, e.g. Spanish = "es",
French = "fr", German = "de", Chinese = "zh", Arabic = "ar".
The lang attribute in the <html> element declares which language the page
content is in. Though not strictly required, it should always be specified, as it
can assist search engines and screen readers.
The <head> Section
Here is a typical XHTML <head> section:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
And the HTML5 version:
Notice the simplified character set declaration, the shorter CSS stylesheet link
text, and the removal of the trailing slashes for these two lines.
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
Basic HTML5 Web Page
Putting the prior sections together, and now adding the <body> section and
closing tags, we have our first complete web page in HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>
Let's open this page in a web browser to see how it looks…
Viewing the HTML5 Web Page
Even though we used HTML5, the page looks exactly the same in a web
browser as it would in XHTML. Without looking at the source code, web
visitors will not know which version of HTML the page is in.

More Related Content

PPT
Introduction to html55
PPT
1. Introduction to HTML5.ppt
PPT
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
PPT
Introduction to html5
PPT
1. introduction to html5
PPT
Introduction to HTML5
PPT
HTML 5 Complete Reference
PPTX
Introduction to html55
1. Introduction to HTML5.ppt
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
Introduction to html5
1. introduction to html5
Introduction to HTML5
HTML 5 Complete Reference

Similar to HTML_new_one is a ppt in markup language (20)

PPTX
Delhi student's day
PPTX
Chapter 2 introduction to html5
PDF
HTML5 Introduction – Features and Resources for HTML5
PDF
Sitepoint.com a basic-html5_template
DOC
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
PPT
HTML5_3.ppt
PPTX
9781285852645_CH01 research and analysis of data.pptx
DOCX
Report html5
PPTX
PPTX
Lecture-1.pptx
PPTX
Html5
PDF
Oreilly -html_and_xhtml_pocket_reference_%28_december_2009%29_%28at_tica%29_1
PDF
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
PPTX
Learn HTML and HTML5
PPT
Html5 tags
PPTX
HTML.pptx
PDF
Html5 tutorial
PDF
Html5 tutorial
PDF
Html5 tutorial
Delhi student's day
Chapter 2 introduction to html5
HTML5 Introduction – Features and Resources for HTML5
Sitepoint.com a basic-html5_template
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5_3.ppt
9781285852645_CH01 research and analysis of data.pptx
Report html5
Lecture-1.pptx
Html5
Oreilly -html_and_xhtml_pocket_reference_%28_december_2009%29_%28at_tica%29_1
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
Learn HTML and HTML5
Html5 tags
HTML.pptx
Html5 tutorial
Html5 tutorial
Html5 tutorial
Ad

Recently uploaded (20)

PPTX
Cloud computing and distributed systems.
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Spectral efficient network and resource selection model in 5G networks
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Modernizing your data center with Dell and AMD
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PPTX
MYSQL Presentation for SQL database connectivity
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
NewMind AI Monthly Chronicles - July 2025
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
cuic standard and advanced reporting.pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
Cloud computing and distributed systems.
Encapsulation_ Review paper, used for researhc scholars
Spectral efficient network and resource selection model in 5G networks
20250228 LYD VKU AI Blended-Learning.pptx
Modernizing your data center with Dell and AMD
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Understanding_Digital_Forensics_Presentation.pptx
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
MYSQL Presentation for SQL database connectivity
The Rise and Fall of 3GPP – Time for a Sabbatical?
Agricultural_Statistics_at_a_Glance_2022_0.pdf
“AI and Expert System Decision Support & Business Intelligence Systems”
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
Digital-Transformation-Roadmap-for-Companies.pptx
NewMind AI Monthly Chronicles - July 2025
Building Integrated photovoltaic BIPV_UPV.pdf
cuic standard and advanced reporting.pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Ad

HTML_new_one is a ppt in markup language

  • 2. History of HTML HTML first published 1991 2012 2002 - 2009 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0 HTML5 1995 1997 1999 HTML5 is much more tolerant and can handle markup from all the prior versions. A working draft was released in 2012 and it is scheduled to be finalized by the end of 2014. After HTML 4.01 was released, focus shifted to XHTML and its stricter standards. XHTML 2.0 had very strict standards but was abandoned in 2009 in favor of HTML5. 2014 HTML5.1 HTML5.1 is currently under development and expected to be finalized in late 2016.
  • 3. What is HTML5?  HTML5 is the newest version of HTML, only recently gaining partial support by the makers of web browsers.  It incorporates all features from earlier versions of HTML, including the stricter XHTML.  It adds a diverse set of new tools for the web developer to use.  It is still a work in progress. No browsers have full HTML5 support. It will be many years – perhaps not until 2018 or later - before being fully defined and supported.
  • 4. Goals of HTML5  Support all existing web pages. With HTML5, there is no requirement to go back and revise older websites.  Reduce the need for external plugins and scripts to show website content.  Improve the semantic definition (i.e. meaning and purpose) of page elements.  Make the rendering of web content universal and independent of the device being used.  Handle web documents errors in a better and more consistent fashion.
  • 5. New Elements in HTML5 <figcaption> <footer> <header> <hgroup> <mark> <nav> <progress> <section> <source> <svg> <time> <video> These are just some of the new elements introduced in HTML5. We will be exploring each of these during this course. <article> <aside> <audio> <canvas> <datalist> <figure>
  • 6. Other New Features in HTML5  Built-in audio and video support (without plugins)  Enhanced form controls and attributes  The Canvas (a way to draw directly on a web page)  Drag and Drop functionality  Support for CSS3 (the newer and more powerful version of CSS)  More advanced features for web developers, such as data storage and offline applications.
  • 7. First Look at HTML5 Remember the DOCTYPE declaration from XHTML? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> In HTML5, there is just one possible DOCTYPE declaration and it is simpler: <!DOCTYPE html> Just 15 characters! The DOCTYPE tells the browser which type and version of document to expect. This should be the last time the DOCTYPE is ever changed. From now on, all future versions of HTML will use this same simplified declaration.
  • 8. The <html> Element This is what the <html> element looked like in XHTML: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Again, HTML5 simplifies this line: <html lang="en"> Each of the world’s major languages has a two-character code, e.g. Spanish = "es", French = "fr", German = "de", Chinese = "zh", Arabic = "ar". The lang attribute in the <html> element declares which language the page content is in. Though not strictly required, it should always be specified, as it can assist search engines and screen readers.
  • 9. The <head> Section Here is a typical XHTML <head> section: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>My First XHTML Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> And the HTML5 version: Notice the simplified character set declaration, the shorter CSS stylesheet link text, and the removal of the trailing slashes for these two lines. <head> <meta charset="utf-8"> <title>My First HTML5 Page</title> <link rel="stylesheet" href="style.css"> </head>
  • 10. Basic HTML5 Web Page Putting the prior sections together, and now adding the <body> section and closing tags, we have our first complete web page in HTML5: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My First HTML5 Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>HTML5 is fun!</p> </body> </html> Let's open this page in a web browser to see how it looks…
  • 11. Viewing the HTML5 Web Page Even though we used HTML5, the page looks exactly the same in a web browser as it would in XHTML. Without looking at the source code, web visitors will not know which version of HTML the page is in.