Html 5 - What's new?

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

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

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

The following HTML 4 elements have been removed from
HTML5:
<acronym> <applet> <basefont>
<big> <center> <dir>
<frameset> <noframes> <strike>
<tt> <font> <frame>
6

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>

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

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>

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

11
New Semantic Elements in HTML5

12
HTML5 adds a number of
new semantic HTML tags to
give a better definition to the
various parts (elements) that
form the structure of a
webpage.

13
<header>
<h1>Header</h1>
</header>
<nav> … </nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
</article>
</section>

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

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

<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.

<video>
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg"
controls>
Your browser does not support the <code>video</code> element.
</video>
19

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

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)

<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

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

★ 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

★ 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

Html 5 - What's new?

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to Html 5 - What's new?

Similar to Html 5 - What's new? (20)

More from Bethmi Gunasekara

More from Bethmi Gunasekara (6)

Recently uploaded

Recently uploaded (20)

Html 5 - What's new?