2. Introduction
Quick HTML overview
History
Semantics and structural elements
HTML5 multimedia, video and audio
Flash vs. HTML5
Extended HTML5 forms
HTML5 graphics and animations
3. Quick HTML overview
HTML – Hypertext Markup Language
Markup language used to construct web pages
Web pages connected to other web pages
through hyperlinks
Developed and overseen primarily by World
Wide Web Consortium (W3C)
Structure separated from style and scripting
4. HTML elements
<a href=“http://www.uwplatt.edu” > UW-Platteville </a>
• Element start tag
• Attribute
• Value
• Element content
• Element ending tag
The following is an example of a basic HTML
element with an attribute, value, and content.
6. History
1989 : Tim Berners-Lee working at CERN finds
the need for a global hypertext system
1991 : Berners-Lee shows his hypertext system,
named HTML, to the scientific community
1991 – 1993 : Various names further develop
HTML
1994 : HTML2 is released as a means to
standardize the growing language. Netscape
developed. W3C (World Wide Web Consortium) is
formed
1995 : Microsoft’s Internet Explorer developed.
JavaScript initially released.
7. History (cont.)
1996 : CSS (Cascading Style Sheets) initially
released.
1997 : HTML3.2 released, first completely W3C
developed HTML version
1999 : HTML4.01 released
2004 : WHATWG (Web Hypertext Application
Technology Work Group) starts HTML5
development
2006 : W3C joins HTML5 development
2008 : First working draft of HTML5 released
2010 : Steve Jobs publishes “Thoughts on Flash”
2012: HTML5 becomes a W3C Candidate
Recommendation
8. HTML5 - <!DOCTYPE>
<!DOCTYPE> - The HTML document’s
DOCTYPE is the first line declared in the
document and tells the browser what version of
HTML is being used
HTML4.01 had multiple DOCTYPEs:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
HTML5 has only one, simple DOCTYPE:
<!DOCTYPE html>
9. HTML5 – Semantics and Structural
Elements
HTML5 introduces numerous new elements to
aid in properly structuring HTML5 documents:
<article> - an standalone piece of information
<section> - a section of text, i.e. chapter
<header> - header information, i.e. introduction
<footer> - footer information, i.e. copyright
information
<nav> - navigational tools used for a website
<figure> - structural element for figures and tables
For a full list of these structural elements visit the
W3C HTML5 documentation (in PowerPoint
notes)
12. HTML5 - Video
The newly introduced <video> tag allows for the
in-browser viewing of the following video
compressions:
MP4
Ogg
WebM
Attributes include:
width, height – specify the size of the video player
src – defines the video source
controls – show controls for the video
autoplay – start the video as soon as possible
loop – automatically replay the video upon
competition
13. HTML5 – Video (cont.)
Browser MPEG4 Ogg WebM
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Opera 10.6+ NO YES YES
Safari 5+ NO YES YES
IE 9+ YES NO NO
HTML5 <video> audio compressions
browser compatibility
HTML5 <video> syntax:
<video src=“example.ogg” width=“320” height=“240” controls
autoplay></video>
14. HTML5 – Source
The <source> element is used to specify
source files for the <audio> and <video>
elements
This allows for multiple sources for one <video>
element
HTML5 <source> syntax:
<video width=“320” height=“240” controls>
<source src=“example.mp4” type=“video/mp4”>
<source src=“example.webm” type=“video/webm”>
<source src=“example.ogg” type=“video/ogg”>
</video>
15. HTML5 - Track
The <track> element allows for text tracks to
be loaded into <audio> and <video> elements
HTML5 <source> syntax:
<video width=“320” height=“240” controls>
<source src=“example.mp4” type=“video/mp4”>
<track src=“example.fr.srt” srclang=fr kind=subtitles label=“FrenchSubs” >
</video>
16. HTML5 – Audio
The newly introduced <audio> tag allows for
the in-browser playback of the following audio
compressions:
MP3
Ogg
WAV
Many of the attributes included in the <video>
element are also available for the <audio>
element
17. HTML5 – Audio (cont.)
Browser MP3 WAV Ogg
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Opera 10.6+ NO YES YES
Safari 5+ YES YES NO
IE9+ YES NO NO
HTML5 <audio> audio compressions browser
compatibility
HTML5 <audio> syntax:
<audio src=“example.mp3” width=“320” height=“240” controls autoplay></audio>
18. HTML5 Multimedia vs. Flash
HTML5:
Pros: Standard markup language, cross-platform,
access to DOM and APIs, no thrid-party plug-ins
Cons: No built-in fullscreen, not all users use
HTML5 ready browsers, long-term limitations of
standardization, cannot display live-streaming,
new standards can be difficult to adapt
Adobe Flash
Pros: Much wider userbase, very familiar
Cons: Third-party plug-in, not supported on some
devices, not a web standard
19. HTML5 – Extended Forms
datalist
A datalist allows autocompletion in an input with a
given list of autocomplete options
required
the required attribute forces the user to enter in
data for the input before committing the form to
the server
output
the output element allows for calculation and
output of this calculation using form fields
20. HTML5 – Extended Forms
(cont.)
Many new values have been added for the
<input> element’s type attribute:
date, time, and datetime – display datetime
pickers
number – displays a spinner for inputting a
number
email, url, telephone – these types of inputs,
among others, are used for data validation
range – displays a movable slider to specify
values
color – displays a color picker for choosing color
values in hex
21. HTML5 – Graphics and
Animations
HTML5 allows for the rendering of graphics
and animations in-browser
One way HTML5 accomplishes this is through
the new <canvas> element
<canvas> creates a 2D canvas in which graphics
can be drawn via scripting
JavaScript
WebGL
SVG
22. HTML5 – Graphics and
Animations
CSS3 is fully supported in HTML5 and
improves on styling options available
Skewing, rotation, and scaling can be done in
CSS3
CSS3 allows for easily downloadable fonts locally
stored on the web-server
Animations and transitions can be coded using
CSS3
Page layouts can easily be done using CSS3
23. HTML5 - Conclusion
HTML5 introduces:
Improved semantics to web documents
Multimedia elements, including <video> and
<audio>
Extended information gathering via improved
forms
Graphics and animations without the need for
third-party plugins
24. HTML5 – Further Reading
W3C Documentation:
http://www.w3.org/html/wg/drafts/html/master/
W3Schools (unrelated to W3C), practical
tutorials:
http://www.w3schools.com/html/html5_intro.asp
