Introduction to HTML5eecs.csuohio.edu/~sschung/CIS408/LectureNotesHtml5_XhtmlCombined_1.pdfHistory...

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 By combining the strengths of

HTML and XML, XHTML was developed.

XHTML is HTML redesigned as XML.

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.

HTML 5

� Latest revision of HTML

� Backward compatible

� New key features:

�video and audio tags

�content-specific tags

� tags for form elements

�canvas element

�storage of user data© 2016 Pearson Education,

Inc., Hoboken, NJ. All rights

reserved. 12

Video and Audio Tags

� Allow simple code for adding video and audio on Web pages

� Video and audio are played back by the Web browser's built-in player, not plug-ins

© 2016 Pearson Education,


reserved. 13

Content-Specific Tags

� Examples: <footer>, <header>, <nav>, <article>, <section>, <figure>, <summary>, <aside>

� Allow mark up content by semantics

� Provide a standardized system to classify the information on Web pages



reserved. 14

Form Elements

� Examples: date picker, color picker, numeric stepper, new input types (email, url, and search)

� To enhance user experience of filling out forms



reserved. 15

Canvas

� Allows drawing graphics and placing images dynamically inside it using JavaScript

� Visual content inside it can be scripted to change over time (hence animation) and in response to the user interaction (mouse clicks and key presses)

� Used for animation and game development



reserved. 16

Storage of User Data

� Approx. 5 MB depending on browsers

� Larger data limit than cookies (4 KB limit)

� Storage and retrieval of data on the user's device; i.e., no need for databases or user accounts set up on the server



reserved. 17

XHTML vs. HTML 5

� DOCTYPE declaration

� Character encoding

� Cases for tag and attribute names

� Values of attributes

� Boolean attribute

� End tag



reserved. 18

DOCTYPE Declaration

XHTML HTML 5

Three doctypes: Strict, Transitional, and Frameset

For example:<!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0

Transitional//EN" "

http://www.w3.org/TR/xhtm

l1/DTD/xhtml1-

transitional.dtd ">

Only one simplified doctypedeclared likethis:<!DOCTYPE HTML>



reserved. 19

Character Encoding

XHTML HTML 5

<meta http-

equiv="Content-

Type"

content="text/html;

charset=utf-8" />

Simplified as follows:<meta charset"UTF-

8"/>



reserved. 20

Cases for Tag and Attribute

NamesXHTML HTML 5

All lowercase No restriction



reserved. 21

Value of an Attribute

XHTML HTML 5

Enclosed in quotation marks Does not have to be in

quotation marks



reserved. 22

Boolean Attribute

XHTML HTML 5

The value "true" or "false" has to

be written out and enclosed in

quotation mark; for example:

<div hidden="true" />

No need to write out the value—

just the

presence of the attribute means it

is true;

for example:

<div hidden />



reserved. 23

End Tag

XHTML HTML 5

Required for each start tag Not required; thus, self-closing

is not required for those tags

without content, such as br and img



reserved. 24

HTML 5 Basic Structure

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>This is a title of the page</title>

</head>

<body>

<p>This is the content of the Web page

</body>

</html>



reserved. 25

An HTML 5 DocumentOK to still follow the rules of XHTML

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>This is a title of the page</title>

</head>

<body>

<p>This is the content of the Web page.<br>

<img src="images/demo.png" alt="demo">

</p>

</body>

</html>

Arbitrary: cases for tags, pairing tags, uses of quotation marks.

Still a valid HTML 5 document.

<!doctype html>

<HtML lang=en>

<hEAd>

<meta charset=utf-8>

<TITLe>This is a title of the

page</tiTLE>

<boDY>

<P>This is the content of the

Web page.<br>

<IMg src=images/demo.png

alt=demo>



reserved. 26

Easy to read Hard to read

Markup Validator

http://validator.w3.org/

to validate Web documents



reserved. 27

Date post:	19-Jan-2020
Category:	Documents
Upload:	others
View:	9 times
Download:	0 times

Introduction to HTML5eecs.csuohio.edu/~sschung/CIS408/LectureNotesHtml5_XhtmlCombined_1.pdfHistory...

Documents