2. Web Technologies Timeline
YEAR WEB TECHNOLOGY
1991 HTML
1994 HTML 2
1996 CSS1 + JAVA SCRIPT
1997 HTML 4
1998 CSS2
2000 XHTML 1
2002 TABLELESS WEB DESIGN
2005 AJAX
2009 HTML 5
2
9. METADATA CONTENT
Metadata content is content that sets up the
presentation or behavior of the rest of the content, or
that sets up the relationship of the document with other
documents, or that conveys other "out of band"
information.
<base>, <command>, <link>, <eta>, <noscript>, <script>,
<style>, <title>
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#metadata-content-0 for more information
9
10. FLOW CONTENT
Most elements that are used in the body of
documents and applications are categorized as flow
content.
<a>, <article>, <section>, <span>
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#flow-content-0 for the complete list
10
11. SECTIONING CONTENT
Sectioning content is content that defines the scope of
headings and footers.
<article>, <aside>, <nav>, <section>
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#sectioning-content-0 for more information
11
12. HEADING CONTENT
Heading content defines the header of a section
(whether explicitly marked up using sectioning content
elements, or implied by the heading content itself).
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#heading-content-0 for more information
12
13. PHRASING CONTENT
Phrasing content is the text of the document, as well
as elements that mark up that text at the intra-
paragraph level. Runs of phrasing
content form paragraphs.
<b>, <button>, <canvas>, <cite>, <code>, <em>, <embed>,
<i>, <iframe>, <img>, <input>, <script>, <select>,
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#phrasing-content-0 for the complete list
13
14. EMBEDDED CONTENT
Embedded content is content that imports another
resource into the document, or content from another
vocabulary that is inserted into the document.
<audio>, <canvas>, <embed>, <iframe>, <img>, <math>,
<object>, <svg>, <video>
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#embedded-content-0 for more information
14
15. INTERACTIVE CONTENT
Interactive content is content that is specifically
intended for user interaction.
<a>, <button>, <details>, <embed>, <iframe>, <keygen>,
<label>, <select>, <textarea>
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#interactive-content-0 for more information
15
17. A basic HTML document looks
like this:
<!DOCTYPE html>
<html>
<head>
<title>Sample Pages</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a>
sample.</p>
<!-- this is a comment -->
<p>Example paragraph</p>
</body>
</html>
17
19. Here is an example document that
conforms to the HTML syntax:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
19
20. Here is an example document that
conforms to the XML syntax of HTML:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
20
21. New Structural Elements
For better structure
SECTION
ARTICLE
MAIN
ASIDE
HEADER
FOOTER
NAV
FIGURE & FIGCAPTION
TEMPLATE
21
25. <nav> element
Group of navigational links
The nav element represents a section of a document
that links to other documents or to parts within the
document itself; that is, a section of navigation links.
25
26. <article> element
The article element represents a section of content that
forms an independent part of a document or site; for
example, a magazine or newspaper article, or a blog
entry.
26
27. <section> element
The section element represents a section of a
document, typically with a title or heading.
27
28. <main> element
The main element represents the main content section
of the body of a document or application.
The main content section consists of content that is
directly related to or expands upon the central topic of
a document or central functionality of an application.
28
29. <aside> element
Tangential content
The aside element represents content that is
tangentially related to the content that forms the main
textual flow of a document.
29
30. <footer> element
he footer element represents the footer for the section
it applies to.
30
33. <figure> element
The figure element represents a unit of content,
optionally with a caption, that is self-contained, that is
typically referenced as a single unit from the main flow
of the document, and that can be moved away from the
main flow of the document without affecting the
document’s meaning.
33
36. Other New Element
VIDEO AND AUDIO
TRACK
EMBED
MARK
PROGRESS
METER
TIME
RUBY, RT, AND RP
BDI
WBR
CANVAS
DATALIST
KEYGEN
OUTPUT
36
37. <video> element
The video element represents a video or movie.
Some useful attributes:
src (none empty URL, potentially surrounded by spaces)
autoplay ("autoplay" or "" (empty string) or empty)
controls ("controls" or "" (empty string) or empty)
loop ("loop" or "" (empty string) or empty Instructs the UA
to seek back to the start of the video upon reaching the
end.)
height (non-negative integer. The height of the video, in
CSS pixels.)
width (non-negative integer. The width of the video, in
CSS pixels.)
37
39. <audio> element
An audio element represents an audio stream.
Some useful attributes:
src (URL potentially surrounded by spaces. The URL for the
audio stream.)
autoplay ("autoplay" or "" (empty string) or empty.
Instructs the UA to automatically begin playback of the
audio stream as soon as it can do so without stopping.)
controls ("controls" or "" (empty string) or empty. Instructs
the UA to expose a user interface for controlling playback
of the audio stream.)
loop ("loop" or "" (empty string) or empty. Instructs the UA
to seek back to the start of the audio stream upon
reaching the end.)
39
Instructs the UA to expose a user interface for controlling playback of the audio stream.
40. Sample Code:
<figure>
<audio controls>
<source src="http://media.w3.org/2010/07/bunny/04-
Death_Becomes_Fur.mp4" type='audio/mp4'>
<source src="http://media.w3.org/2010/07/bunny/04-
Death_Becomes_Fur.oga" type='audio/ogg;
codecs=vorbis'>
<p>Your user agent does not support the HTML5 Audio
element.</p>
</audio>
<figcaption>
This is a sample audio
</figcaption>
40
41. <canvas> element
Canvas for Dynamic Graphics
The canvas element represents a resolution-dependent
bitmap canvas, which can be used for dynamically
rendering of images such as game graphics, graphs, or
other images.
Some useful attributes:
height (non-negative integer. The height of the canvas, in
CSS pixels.)
width (non-negative integer. The width of the canvas, in
CSS pixels.)
41
42. Using Canvas
<canvas id="myCanvas" width="200"
height="100” style="border:1px solid
#c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script> 42
43. • The input element's type attribute now has
the following new values:
tel
search
url
email
date
time
number
range
color
43
44. Some New Attributes
Several attributes have been introduced to various
elements that were already part of HTML4:
charset attribute for the meta element
autofocus attribute can be specified on several form
elements.
placeholder attribute can be specified on the input and
textarea elements.
required attribute for several form elements
disabled attribute for a fieldset element.
autocomplete, min, max, multiple, pattern and step
attributes for input element.
list attribute for the input element.
maxlength, minlength and wrap attributes for the textarea
element
44
46. The following elements are not in HTML because their
effect is purely presentational and their function is
better handled by CSS:
basefont
big
center
font
strike
tt
46
47. The following elements are not in HTML because using
them damages usability and accessibility:
frame
frameset
noframes
47
48. The following elements are not included because they
have not been used often, created confusion, or their
function can be handled by other elements:
acronym is not included because it has created a lot of
confusion. Web developers are to use abbr for
abbreviations.
applet has been obsoleted in favor of object.
isindex usage can be replaced by usage of form controls.
dir has been obsoleted in favor of ul.
48