Scribd
Upload
257 views

Introduction To HTML5

1. HTML5 is the newest version of HTML that incorporates features from previous versions and adds new tools for web developers. 2. It simplifies elements like the DOCTYPE declaration and aims to reduce the need for plugins while improving semantic markup. 3. New elements added in HTML5 include article, aside, audio, canvas, and video, and it introduces features like built-in media playback and CSS3 support.

Uploaded by

Waqas Mehmood
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
257 views

Introduction To HTML5

1. HTML5 is the newest version of HTML that incorporates features from previous versions and adds new tools for web developers. 2. It simplifies elements like the DOCTYPE declaration and aims to reduce the need for plugins while improving semantic markup. 3. New elements added in HTML5 include article, aside, audio, canvas, and video, and it introduces features like built-in media playback and CSS3 support.

Uploaded by

Waqas Mehmood
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 11

Introduction to

HTML5
History of HTML

1991 HTML first published

1995 HTML 2.0


After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
1997 HTML 3.2

1999 HTML 4.01 XHTML 2.0 had even stricter standards


than 1.0, rejecting web pages that did not
2000 XHTML 1.0 comply. It fell out of favor gradually and
was abandoned completely in 2009.
2002
- XHTML 2.0
HTML5 is much more tolerant and can
2009 handle markup from all the prior versions.

Though HTML5 was published officially in 2012, it


2012 HTML5
has been in development since 2004.
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

<article> <figcaption> <progress>


<aside> <footer> <section>
<audio> <header> <source>
<canvas> <hgroup> <svg>
<datalist> <mark> <time>
<figure> <nav> <video>

These are just some of the new elements introduced in HTML5. We


will be exploring each of these during this course.
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">

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.

Each of the worlds major languages has a two-character code, e.g. Spanish = "es",
French = "fr", German = "de", Chinese = "zh", Arabic = "ar".
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:

<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>

Notice the simplified character set declaration, the shorter CSS stylesheet link
text, and the removal of the trailing slashes for these two lines.
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.

You might also like