Scribd
Upload
43 views29 pages

HTML5 and CSS3 - The Future of The Web Programming

HTML5 and CSS3 are the future of web programming. HTML5 introduces several new semantic elements like <header>, <nav>, <article>, and <footer> that help describe different parts of a page. It also supports new features like video and audio elements. The document discusses how a typical blog page can be structured with the new HTML5 elements compared to HTML4 and provides examples. It also lists several resources for learning more about HTML5 and CSS3.

Uploaded by

millercuesta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
43 views29 pages

HTML5 and CSS3 - The Future of The Web Programming

HTML5 and CSS3 are the future of web programming. HTML5 introduces several new semantic elements like <header>, <nav>, <article>, and <footer> that help describe different parts of a page. It also supports new features like video and audio elements. The document discusses how a typical blog page can be structured with the new HTML5 elements compared to HTML4 and provides examples. It also lists several resources for learning more about HTML5 and CSS3.

Uploaded by

millercuesta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

HTML5 and CSS3 The Future of the

Web Programming

HTML5
Sergio Lujn Mora

HTML5 & CSS3

Content

What is HTML5?
HTML5 support
New tags in HTML5
Transformation of a document from HTML4 to
HTML5
More information

HTML5 & CSS3

WHAT IS HTML5?

HTML5 & CSS3

What is HTML5?
In 1998, the W3C decided that they
would not continue to evolve HTML
The future was based on XML: XHTML
HTML 4.01 XHTML 1.0

HTML5 & CSS3

What is HTML5?
XHTML:
XML syntax rules such as case-sensitive
tags, quoting attributes, closing some tags
while self-closing others, and others
Three flavors were developed
XHTML Strict
XHTML Transitional, designed to help people
move to XHTML Strict
XHTML Frameset

HTML5 & CSS3

What is HTML5?
Opera + Mozilla + Apple formed
WHATWG (Web Hypertext Application
Technology Working Group) in 2004
http://www.whatwg.org

HTML5 & CSS3

HTML5 & CSS3

HTML5 & CSS3

HTML5 SUPPORT

HTML5 & CSS3

HTML5 & CSS3

HTML5 & CSS3

HTML5 & CSS3

HTML5 & CSS3

NEW TAGS IN HTML5

HTML5 & CSS3

HTML5
New semantic elements:
<section>
<nav>
<article>
<aside>
<hgroup>
<header>
<footer>
<time>
<mark>

HTML5 & CSS3

TRANSFORMATION OF A
DOCUMENT FROM HTML4 TO
HTML5

HTML5 & CSS3

<!DOCTYPE html PUBLIC "-//W3C//DTD


XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-strict.dtd">

HTML5 & CSS3

HTML5
<!DOCTYPE html>

HTML5 & CSS3

<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">

10

HTML5 & CSS3

HTML5
<html lang="en">

HTML5 & CSS3

<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">

11

HTML5 & CSS3

HTML5
<meta charset="utf-8" />

HTML5 & CSS3

HTML5
All of these are equally valid in HTML5:

<META
<META
<META
<META
<meta
<meta
<meTa
<meTa

CHARSET=UTF-8>
CHARSET=UTF-8 />
CHARSET=UTF-8>
CHARSET=UTF-8 />
charset=utf-8>
charset=utf-8 />
CHARset=utf-8>
CHARset=utf-8 />

12

HTML5 & CSS3

HTML5
Just because you can use any of the
aforementioned syntaxes doesnt mean
you should mix them all up

HTML5 & CSS3

HTML5
Valid (strange) document:
<!DOCTYPE html>
<meta charset=utf-8>
<title>Valid document</title>
<p>This is a valid page!</p>

13

HTML5 & CSS3

HTML5 & CSS3

HTML5
Browsers add the missing elements
Omitting these elements from your
markup is likely to confuse

14

HTML5 & CSS3

HTML5
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Valid document</title>
</head>
<body>
<p>This is a valid page!</p>
</body>
</html>

HTML5 & CSS3

Compatibility with old browsers


/* Helps to show the new elements in
block mode*/
article, aside, details, figcaption,
figure, footer, header, hgroup, menu,
nav, section
{
display: block;
}

15

HTML5 & CSS3

Compatibility with old browsers


Internet Explorer < 9:
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
// And the other new HTML5 elements
// ...
</script>

HTML5 & CSS3

Compatibility with old browsers


<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas," +
"datalist,details,figure,footer,header,hgroup," +
"mark,menu,meter,nav,output," +
"progress,section,time,video").split(',');
for(var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->

16

HTML5 & CSS3

Lets analyze the typical structure of a


nowadays web page (a blog page):
How its written with HTML 4, XHTML 1.0
How it can be written now with HTML5

HTML5 & CSS3

<div id=header>

<div
id=nav>

<div id=entry>

<div id=footer>

17

HTML5 & CSS3

<header>

<nav>

<article>

<footer>

HTML5 & CSS3

<div id="header">
<h1>My Weblog</h1>
<p class="tagline">A lot of effort
went into making this effortless.</p>
</div>

18

HTML5 & CSS3

HTML5
<header>
<h1>My Weblog</h1>
<p class="tagline">A lot of effort
went into making this effortless.</p>
</header>

HTML5 & CSS3

HTML5
<header>
<hgroup>
<h1>My Weblog</h1>
<h2>A lot of effort went into making
this effortless.</h2>
</hgroup>
</header>

19

HTML5 & CSS3

<div class="entry">
<p class="post-date">October 22, 2009</p>
<h2>
<a href="#" rel="bookmark" title="link to this
post"> Travel day </a>
</h2>
<!-- The content of the entry -->
<p></p>
</div>

HTML5 & CSS3

HTML5
<article>
<header>
<p class="post-date">October 22, 2009</p>
<h1>
<a href="#" rel="bookmark" title="link to this
post"> Travel day </a>
</h1>
</header>
<!-- The content of the entry -->
<p></p>
</article>

20

HTML5 & CSS3

HTML5
<article>
<header>
<time datetime="2009-10-22" pubdate>October
22, 2009</time>
<h1>
<a href="#" rel="bookmark" title="link to this
post"> Travel day </a>
</h1>
</header>
<!-- The content of the entry -->
<p></p>
</article>

HTML5 & CSS3

HTML5
<article>
<header>
<time datetime="2009-10-22"
pubdate>22/10/2009</time>
<h1>
<a href="#" rel="bookmark" title="link to this
post"> Travel day </a>
</h1>
</header>
<!-- The content of the entry -->
<p></p>
</article>

21

HTML5 & CSS3

HTML5
<article>
<header>
<time datetime="2009-10-22"
pubdate>22.10.2009</time>
<h1>
<a href="#" rel="bookmark" title="link to this
post"> Travel day </a>
</h1>
</header>
<!-- The content of the entry -->
<p></p>
</article>

HTML5 & CSS3

<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</div>

22

HTML5 & CSS3

HTML5
<nav>
<ul>
<li><a
<li><a
<li><a
<li><a
</ul>
</nav>

href="#">home</a></li>
href="#">blog</a></li>
href="#">gallery</a></li>
href="#">about</a></li>

HTML5 & CSS3

<div id="footer">
<p>&#167;</p>
<p>&#169; 2001&#8211;9 <a
href="#">Mark Pilgrim</a></p>
</div>

23

HTML5 & CSS3

HTML5
<footer>
<p>&#167;</p>
<p>&#169; 2001&#8211;9 <a
href="#">Mark Pilgrim</a></p>
</footer>

HTML5 & CSS3

MORE INFORMATION

24

HTML5 & CSS3

http://www.20thingsilearned.com/

HTML5 & CSS3

http://diveintohtml5.org/

25

HTML5 & CSS3

http://www.html5rocks.com/en/

HTML5 & CSS3

http://html5demos.com/

26

HTML5 & CSS3

HTML5 & CSS3

http://introducinghtml5.com/

27

HTML5 & CSS3

HTML5 & CSS3

28

HTML5 & CSS3

29

You might also like