2. HTML5 is the newest hyper text
markup language for websites from
the World Wide Web Consortium
(W3C).
The successor of HTML 4.01
5th
revision of the HTML
The first draft was made public in
2008
Finalized, and published, on 28
October 2014
2
3. The new markup language was developed based on pre-set
standards:
★ New features should be based on HTML, CSS, DOM, and JavaScript.
★ The need for external plugins (like Flash) needs to be reduced.
★ Error handling should be easier than in previous versions.
★ Scripting has to be replaced by more markup.
★ HTML5 should be device-independent.
★ The development process should be visible to the public.
3
5. Removed Elements
<acronym> <abbr>
<applet>
<object>
<dir> <ul>
<basefont>
<big> CSS
<center>
Redefined Elements
● New Semantics
● Simplified Syntax
● Character encoding
● Optional type
attributes
● Optional solidus
(/>)
New Elements
● Sectioning Elements
● Inline Elements
● Interactive Elements
} 5
6. The following HTML 4 elements have been removed from
HTML5:
<acronym> <applet> <basefont>
<big> <center> <dir>
<frameset> <noframes> <strike>
<tt> <font> <frame>
6
7. New Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
7
<!DOCTYPE html>
9. The Figure Element
<img src="path/to/image" alt="About
image" />
<p>Image of Mars. </p>
9
<figure>
<img src="path/to/image" alt="About
image" />
<figcaption>
<p>This is an image of something
interesting. </p>
</figcaption>
</figure>
10. Form Handling...
● Input Types
○ Email input
○ datetime
○ Color
○ URL
○ Sliders with the Range Input
● Input Attributes
○ Placeholder
○ Required Attribute
○ Autofocus Attribute
● Regular Expressions
10
● New Form Elements
<datalist> pre-defined options for
input controls
<keygen> key-pair generator field
<output> result of a calculation
15. Canvas
● The HTML <canvas> element is used to draw graphics, on
the fly, via scripting (usually JavaScript).
● The <canvas> element is only a container for graphics. You
must use a script to actually draw the graphics.
● Canvas has several methods for drawing paths, boxes, circles,
text, and adding images.
15
16. HTML5 Graphics
<audio> Sound or music content
<embed> Containers for external applications (plug-ins)
<source> Sources for <video> and <audio>
<track> Tracks for <video> and <audio>
<video> Video or movie content
16
18. <audio>
<audio src="audio.ogg"
controls autoplay loop>
<p>Your browser does not
support the <code>audio</code>
element </p>
</audio>
18
● controls : Displays the standard
HTML5 controls for the audio on
the web page.
● autoplay : Makes the audio play
automatically.
● loop : Make the audio repeat
(loop) automatically.
20. HTML5 Local Storage
Web applications can store data locally within the user's browser;
instead of cookies, included in every server request.
More secure
Large amounts of data can be stored locally (~ 5MB)
Information is never transferred to the server.
20
21. window.localStorage
● Stores data with no expiration
date
● It is per origin
(per domain and protocol)
All pages, from one origin, can
store and access the same data.
21
window.sessionStorage
● Stores data for one session
(data is lost when the browser
tab is closed)
22. <div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not
support Web Storage...";
}
</script>
22
23. HTML5 Style Guide and Coding Conventions (1)
★ Use Correct Document Type
★ Use Lower Case
○ Element Names
○ Attribute Names
○ File Names
★ Close All HTML Elements < tag > … </tag>
★ Close Empty HTML Elements < tag />
23
24. HTML5 Style Guide and Coding Conventions (2)
★ Quote Attribute Values
○ <table class="table striped">
★ Image Attributes - alt, size
★ Do not omit <html> and <body>
★ Metadata - Language and the character encoding should be defined as
early as possible in a document
24
25. HTML5 Style Guide and Coding Conventions (3)
★ Avoid Long Code Lines
★ Blank Lines and Indentation
○ Blank lines to separate large or logical code blocks.
○ Add 2 spaces of indentation. Do not use TAB.
★ Style Sheets
○ Use simple syntax (the type attribute is not necessary)
○ Short rules can be written compressed, on one line.
○ Long rules should be written over multiple lines 25
