SlideShare a Scribd company logo
4
Most read
5
Most read
11
Most read
Introduction to
HTML5
History of HTML
HTML first published1991
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.
Though HTML5 was published officially in 2012, it
has been in development since 2004.
After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
XHTML 2.0 had even stricter standards
than 1.0, rejecting web pages that did not
comply. It fell out of favor gradually and
was abandoned completely in 2009.
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 was created with.
Ad

Recommended

Html
Html
Cerise Anderson
 
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
Himanshu Kumar
 
CSS
CSS
venkatachalam84
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
Hatem Mahmoud
 
Introduction to CSS
Introduction to CSS
Folasade Adedeji
 
CSS.ppt
CSS.ppt
MukulSingh293955
 
Introduction to html
Introduction to html
vikasgaur31
 
Introduction to HTML5
Introduction to HTML5
Gil Fink
 
Web html table tags
Web html table tags
Kainat Ilyas
 
Javascript and DOM
Javascript and DOM
Brian Moschel
 
Css
Css
Hemant Saini
 
Intro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
Shadows Effects in CSS
Shadows Effects in CSS
Webtech Learning
 
Html ppt
Html ppt
santosh lamba
 
HTML Forms
HTML Forms
Ravinder Kamboj
 
Html
Html
Nandakumar Ganapathy
 
Introduction to CSS
Introduction to CSS
Amit Tyagi
 
HTML5
HTML5
Hatem Mahmoud
 
Css lecture notes
Css lecture notes
Santhiya Grace
 
Css selectors
Css selectors
Parth Trivedi
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Java script
Java script
Shyam Khant
 
JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events
WebStackAcademy
 
Flexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Html frames
Html frames
eShikshak
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Html5 tutorial for beginners
Html5 tutorial for beginners
Singsys Pte Ltd
 
Css box-model
Css box-model
Webtech Learning
 
Equailibrium and dis for star wars
Equailibrium and dis for star wars
AmirMajidhaydonmedia
 
FDDiarios
FDDiarios
yisselrobles
 

More Related Content

What's hot (20)

Web html table tags
Web html table tags
Kainat Ilyas
 
Javascript and DOM
Javascript and DOM
Brian Moschel
 
Css
Css
Hemant Saini
 
Intro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
Shadows Effects in CSS
Shadows Effects in CSS
Webtech Learning
 
Html ppt
Html ppt
santosh lamba
 
HTML Forms
HTML Forms
Ravinder Kamboj
 
Html
Html
Nandakumar Ganapathy
 
Introduction to CSS
Introduction to CSS
Amit Tyagi
 
HTML5
HTML5
Hatem Mahmoud
 
Css lecture notes
Css lecture notes
Santhiya Grace
 
Css selectors
Css selectors
Parth Trivedi
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Java script
Java script
Shyam Khant
 
JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events
WebStackAcademy
 
Flexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Html frames
Html frames
eShikshak
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Html5 tutorial for beginners
Html5 tutorial for beginners
Singsys Pte Ltd
 
Css box-model
Css box-model
Webtech Learning
 

Viewers also liked (10)

Equailibrium and dis for star wars
Equailibrium and dis for star wars
AmirMajidhaydonmedia
 
FDDiarios
FDDiarios
yisselrobles
 
Cv paulo vinicius de campos
Cv paulo vinicius de campos
Paulo Vinicius de Campos
 
An analysis of a facebook spam exploited through browser add-ons - Whitepaper
An analysis of a facebook spam exploited through browser add-ons - Whitepaper
n|u - The Open Security Community
 
Splash math 4 - How to use the Scratch Pad?
Splash math 4 - How to use the Scratch Pad?
studypad
 
INVENTARIO MODELO ECONOMICO
INVENTARIO MODELO ECONOMICO
UNIVERSIDAD NACIONAL PEDRO RUIZ GALLO DE LAMBAYEQUE
 
Guardians of the galaxy
Guardians of the galaxy
EllieSchool123
 
Bit locker
Bit locker
vivianvijil1
 
Lojistik süreçlerini doğru organize eden bir perakende zinciri devleşir
Lojistik süreçlerini doğru organize eden bir perakende zinciri devleşir
İlyas Salihoğlu
 
8 POWERFUL MEMORY TECHNIQUES for Developing a Photographic Memory at School, ...
8 POWERFUL MEMORY TECHNIQUES for Developing a Photographic Memory at School, ...
Rod King, Ph.D.
 
Equailibrium and dis for star wars
Equailibrium and dis for star wars
AmirMajidhaydonmedia
 
An analysis of a facebook spam exploited through browser add-ons - Whitepaper
An analysis of a facebook spam exploited through browser add-ons - Whitepaper
n|u - The Open Security Community
 
Splash math 4 - How to use the Scratch Pad?
Splash math 4 - How to use the Scratch Pad?
studypad
 
Guardians of the galaxy
Guardians of the galaxy
EllieSchool123
 
Lojistik süreçlerini doğru organize eden bir perakende zinciri devleşir
Lojistik süreçlerini doğru organize eden bir perakende zinciri devleşir
İlyas Salihoğlu
 
8 POWERFUL MEMORY TECHNIQUES for Developing a Photographic Memory at School, ...
8 POWERFUL MEMORY TECHNIQUES for Developing a Photographic Memory at School, ...
Rod King, Ph.D.
 
Ad

Similar to Introduction to html5 (20)

1._Introduction_to_HTML5 les fonction et les balises
1._Introduction_to_HTML5 les fonction et les balises
aziztara99
 
1._Introduction_to_HTML5 Web Designing.ppt
1._Introduction_to_HTML5 Web Designing.ppt
Divya573916
 
1._Introduction_tyytggyyyyy666o_HTML5.ppt
1._Introduction_tyytggyyyyy666o_HTML5.ppt
meganath16032003
 
1._Introduction_to_HTML5 powerpoint presentation
1._Introduction_to_HTML5 powerpoint presentation
JohnLagman3
 
HTML_new_one is a ppt in markup language
HTML_new_one is a ppt in markup language
ervishalgour
 
Introduction to HTML5
Introduction to HTML5
IT Geeks
 
1. introduction to html5
1. introduction to html5
JayjZens
 
HTML 5 Complete Reference
HTML 5 Complete Reference
EPAM Systems
 
Html 5
Html 5
manujayarajkm
 
Delhi student's day
Delhi student's day
Ankur Mishra
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5
nobel mujuji
 
Sitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_template
Daniel Downs
 
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
Team Mango Media Private Limited
 
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
Kanishka Chakraborty
 
HTML5_3.ppt
HTML5_3.ppt
NEILMANOJC1
 
9781285852645_CH01 research and analysis of data.pptx
9781285852645_CH01 research and analysis of data.pptx
clement swarnappa
 
Oreilly -html_and_xhtml_pocket_reference_%28_december_2009%29_%28at_tica%29_1
Oreilly -html_and_xhtml_pocket_reference_%28_december_2009%29_%28at_tica%29_1
gajapandiyan
 
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
HusnianIlyas
 
HTML 5
HTML 5
Prof. Erwin Globio
 
Report html5
Report html5
Himanshu Phulara
 
1._Introduction_to_HTML5 les fonction et les balises
1._Introduction_to_HTML5 les fonction et les balises
aziztara99
 
1._Introduction_to_HTML5 Web Designing.ppt
1._Introduction_to_HTML5 Web Designing.ppt
Divya573916
 
1._Introduction_tyytggyyyyy666o_HTML5.ppt
1._Introduction_tyytggyyyyy666o_HTML5.ppt
meganath16032003
 
1._Introduction_to_HTML5 powerpoint presentation
1._Introduction_to_HTML5 powerpoint presentation
JohnLagman3
 
HTML_new_one is a ppt in markup language
HTML_new_one is a ppt in markup language
ervishalgour
 
Introduction to HTML5
Introduction to HTML5
IT Geeks
 
1. introduction to html5
1. introduction to html5
JayjZens
 
HTML 5 Complete Reference
HTML 5 Complete Reference
EPAM Systems
 
Delhi student's day
Delhi student's day
Ankur Mishra
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5
nobel mujuji
 
Sitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_template
Daniel Downs
 
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
Kanishka Chakraborty
 
9781285852645_CH01 research and analysis of data.pptx
9781285852645_CH01 research and analysis of data.pptx
clement swarnappa
 
Oreilly -html_and_xhtml_pocket_reference_%28_december_2009%29_%28at_tica%29_1
Oreilly -html_and_xhtml_pocket_reference_%28_december_2009%29_%28at_tica%29_1
gajapandiyan
 
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
html5 _ Fundamentals a Basic Concepts of Understanding HTML.pdf
HusnianIlyas
 
Ad

More from Manav Prasad (20)

Experience with mulesoft
Experience with mulesoft
Manav Prasad
 
Mulesoftconnectors
Mulesoftconnectors
Manav Prasad
 
Mule and web services
Mule and web services
Manav Prasad
 
Mulesoft cloudhub
Mulesoft cloudhub
Manav Prasad
 
Perl tutorial
Perl tutorial
Manav Prasad
 
Hibernate presentation
Hibernate presentation
Manav Prasad
 
Jpa
Jpa
Manav Prasad
 
Spring introduction
Spring introduction
Manav Prasad
 
Json
Json
Manav Prasad
 
The spring framework
The spring framework
Manav Prasad
 
Rest introduction
Rest introduction
Manav Prasad
 
Exceptions in java
Exceptions in java
Manav Prasad
 
Junit
Junit
Manav Prasad
 
Xml parsers
Xml parsers
Manav Prasad
 
Xpath
Xpath
Manav Prasad
 
Xslt
Xslt
Manav Prasad
 
Xhtml
Xhtml
Manav Prasad
 
Css
Css
Manav Prasad
 
Ajax
Ajax
Manav Prasad
 
J query
J query
Manav Prasad
 

Recently uploaded (20)

MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
 
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
Precisely
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Impelsys Inc.
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
 
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
Precisely
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Impelsys Inc.
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 

Introduction to html5

  • 2. History of HTML HTML first published1991 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. Though HTML5 was published officially in 2012, it has been in development since 2004. After HTML 4.01 was released, focus shifted to XHTML and its stricter standards. XHTML 2.0 had even stricter standards than 1.0, rejecting web pages that did not comply. It fell out of favor gradually and was abandoned completely in 2009.
  • 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 was created with.