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 -2009
XHTML 2.0
HTML5 is much more tolerant and can
handle markup from all the prior versions.
Though HTML5 was published officially in 2012,
2012
HTML5
it 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.
• All browsers have full HTML5 support.
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.
• 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>
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)
Support for CSS3 (the newer and more powerful version
of CSS)
More advanced features for web developers, such as
data storage and offline applications.
Example - audio
The controls attribute adds audio controls, like play,
pause, and volume.
The <source> element allows you to specify alternative
audio files which the browser may choose from. The
browser will use the first recognized format.
The text between the <audio> and </audio> tags will
only be displayed in browsers that do not support the
<audio> element.
Example - audio
HTML Audio - Media Types
File Format Media Type
•MP3 audio/mpeg
•Ogg audio/ogg
•Wav audio/wav
Example - audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Example - video
The controls attribute adds video controls, like play,
pause, and volume.
It is a good idea to always include width and height
attributes. If height and width are not set, the page
might flicker while the video loads.
The <source> element allows you to specify
alternative video files which the browser may choose
from. The browser will use the first recognized
format.
The text between the <video> and </video> tags will
only be displayed in browsers that do not support the
<video> element
Example - video
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
NB:To start a video automatically use
the autoplay attribute:
