Html5

In the name of Allah, the most beneficent
and the most merciful
1

3
HTML 5
Presented by
Bukhtawar Umbreen
Rozeena Ibrahim
Samreen Minhas
3

Table of Contents
•
•
History of HTML
•
Introduction
•
HTML5 – Semantics and Structural Elements
•
Why HTML 5
•
HTML 4 Drawbacks
•
Difference between HTML4 & HTML5
•
HTML5 Overview
•
HTML5 Features
•
HTML5 New APIs
•
HTML5 New Atributes
•
Future Scope

History of HTML
5
HTML first published1991
2012
2002
-
2
0
0
9
2000
HTML 2.0
HTML 3.2
HTML 4.01
XHTML 1.0
XHTML 2.0
HTML5
1995
1997
1999
HTML5 is much more tolerant and can
handle markup from all the prior
versions.
Though HTML5 was published officially in 2012, it
has been in development since 2004.
After HTML 4.01 was released, focus
shifted to XHTML and its stricter
standards.
XHTML 2.0 had even stricter standards
than 1.0, rejecting web pages that
did not comply. It fell out of favor
gradually and was abandoned
completely in 2009.

Introduction

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.

It is still a work in progress. No browsers have full
HTML5 support. It will be many years – perhaps not
until 2018 or later - before being fully defined and
supported.
6

HTML document
7
•
An example of a basic web page:

HTML elements
•
The following is an example of a basic HTML
element with an attribute, value, and content
8
<a href=“http://www.uwplatt.edu” > UW-Platteville </a>
oElement start tag
oAttribute
oValue
oElement content
oElement ending tag

9
• <!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>
HTML5 - <!DOCTYPE>

10
Semantics Explained:
•
The textbook definition of "semantics" is the study of the
relationship between words and their meanings.
•
In the context of HTML, a semantic element is one
whose name describes its actual purpose.
•
Take, for example, the <div> element that we used
extensively in XHTML. It's useful for defining a section
of a web page but it does not indicate anything about the
nature of the section itself.
•
HTML5 introduces new semantic elements that better
define and organize web documents.
HTML5 – Semantics and Structural
Elements

Structure
11
<div id=“header”>
<div id =“nav”><div id
=
“
s
i
d
e
b
a
r
”
>
<div id=“footer”>
Section<div
class-”art
icle”>
<div class=“section”>
HTML4 Structure
<header>
<nav>
<aside>
<footer>
Section
<article>
<section>
HTML5 Structure

Structure
12
HTML5 introduces numerous new elements to
aid in properly structuring HTML5 documents:
 <header> - header information, i.e.
introduction
 <footer> - footer information, i.e. copyright
information
 <nav> - navigational tools used for a website
 <article> - an standalone piece of information
 <section> - a section of text, i.e. chapter

The HTML5 <header> Element
13
HTML5 gives a new semantic element for the header section:
<header>
<h1>My Super Cool Website</h1>
</header>
In the CSS style sheet, adding styling to
the header section is done
using the element itself, rather
than via a <div> class. Notice
there is no preceding dot:
header {
height: 100px;
width: 800px;
background-color: #0033FF;
}
header h1 {
text-size: 24px;
color: #CCCCCC;
}

14
The HTML5 <footer> Element
HTML5 provides with a dedicated <footer> element:
<footer>
<p>© 2013 SuperCool LLC</p>
</footer>
The CSS styling remains the same, but
we are now styling the element
directly, rather than a class:
footer {
height: 40px;
width: 800px;
background-color: #0033FF;
}
footer p {
text-size: 16px;
color: #CCCCCC;
text-align: center;
}

The HTML5 <nav> Element
15
HTML5 provides the semantic <nav> element:
<nav>
<div class="navlink">
<a href="index.html">Home</a>
</div>
<div class="navlink">
<a href="page2.html">Page 2</a>
...
</nav>
The CSS now styles the <nav> element:
nav {
border: 1px solid black;
width: 798px;
height: 35px;
...
}
.navlink {
width: 199px;
...
}

The <article> element
16
 The official specification for <article> states that it is “a
self-contained composition in a page that is
independently distributable or reusable, e.g. in
syndication. This could be a forum post, a magazine or
newspaper article, a blog entry, or any independent item
of content.”
 In HTML5, there can be multiple <article> elements on a
web page. In fact, this is fairly common. For example, a
typical blog has several different blog posts visible on the
home page, with the most recent post at the top.

Using the <article> element
17
And just a little CSS styling:
article {
margin: 15px;
padding: 10px;
background-color: #EEEEEE;
}
<article>
<h2>Why This Website is Cooler
Than Yours</h2>
<p>While the rest of the world
is stuck in the last decade,
this site is built using
HTML5.</p>
...
</article>

The <section> element
 The specification for <section> is “generic
section of a document. A section, in this context,
is a thematic grouping of content, typically with a
heading.”
 It continues to say that “a web site's home page
could be split into sections for an introduction,
news items, and contact information.”
 A common use of <section> is to contain a
group of articles.
18

Using the <section> element
19
And CSS to change the background color:
section {
background-color: #FFFFCC;
padding: 5px;
}
<section>
<h2>Home Page</h2>
<article>
<aside>
...
</aside>
...
</article>
</section>
We could now add more articles to be
contained within the main
<section>.

Block Semantic Element
•
<aside>
•
<figure>
20

The <aside> element
21
 The specification for <aside> is “a section of a
page that consists of content that is tangentially
related to the content around it, and which could
be considered separate from that content. Such
sections are often represented as sidebars in
printed typography.”
 The most common uses of <aside> are for links
to external websites, for advertising, and for
"About Us" or "Contact Us" sidebars.

Using the <aside> element
22
And used CSS to float the box to the right:
aside {
width: 200px;
float: right;
background-color: #CCFFFF;
...
}
<aside>
<img src="images/html5-logo.png"
alt="HTML5 Logo">
<h3>External Resources:</h3>
<ul>
<li>
<a href="http://dev.w3.org...">
HTML5 Specification</a>
</li>
...
</aside>

The <figure> element
•
Specifies self contained content like illustrations,
diagrams, photos, code listings, etc
23
<figure>
<img src=“stone.jpg”
alt=“stonehenge” width=“200”
height=“100”>
</figure>

Inline semantic element
•
<mark>
Defines Marked/Highlighted text area
•
<time>
Defines a date /time
•
<meter>
Defines scalar measurement with known range
•
<progress>
provides a simple and effective way for a web
designer to notify a user of their progress
regarding a specified task
24

Embedded Media
25
•
<audio>
Defines sound such as music or other audio
streams.
•
<video>
Specifies videos such as movie clip or other
video streams
•
<embed>
Defines a container for an external application
or interactive content ( a plug-in)

Interactivity
26
•
<details>
Defines additional details that user can view or
hide .
•
<datalist>
Specifies a list of predefined options for input
controls
•
<menu>
Contains command elements, each of which
cause immediate action

27
Semantic Elements in Site Layout
•
There is no "right way" to create a website layout in
HTML5. The best approach is to use the semantic
elements, within their intended purposes, in the way that
presents our page content most effectively to our
audience.
•
Any of the semantic elements - <header>, <footer>,
<nav>, <article>, <aside>, and <section> - can be used
multiple times within the same page. They can also be
nested one within another.
•
We can still use <div> elements in HTML5 but only when
they are being used solely for styling purposes or when
there is no better choice among the semantic elements.

Why HTML5 ?
•
HTML4 hasn’t been updated for about 10
years.
•
XHTML was introduced but it made things
stricter and not easier.
•
Embedding audio/video was dependent
on flash etc.
•
New websites have to be interactive.


Improve the semantic
definition (i.e.
meaning and
purpose) of page
elements.

Make the rendering of
web content universal
and independent of
the device being
used.

•
Reduce the requirement of external plugins.
•
Better error handling.
•
Such markup that replaces the dificult scripting.
•
New features that were introduced in HTML5
are:
•
New Markup
•
New API’s
•
Support for local storage
•
Error Handling

HTML4 - drawbacks
•
It does not adequately support
web applications.
•
Complex structuring of web pages.
•
Complex DTDs
•
Need plug-ins to embed audio and
video.
•
Does not support drag and drop
features, editing, drawing, error
handling etc

An Overview
•
HTML5 (referred to as Web
Applications 1.0) is an
improvement of HTML4.0 and
XHTML1.0
•
Released a draft version in 2008.
•
A change from document markup
language to a web application
language.
•
An attempt to enhance the
functionality and flexibility of the
web.

•
Provides interoperability.
•
Backward compatible
•
New features like form control,
APIs, multimedia, structure
semantics , local storage etc.
•
Consistent and defined error
handling
•
Internal data storage.

HTML5 vs. HTML4
 Support of multimedia
 Language for web
applications rather than
document markup language
 Localized data speeding up
caching .searching etc
 <canvas> tag for 2D
graphics
 APIs for in-browser
application allowing editing,
drag and drop etc

HTML5 FEATURES
New elements
Structural elements
Multi-media
elements
Inline elements
New input types
New attributes
Local Storage
New APIs

NEW APIs INTRODUCED
•
Timed media playback
•
Online Web Applications
•
Document editing
•
Drag-and-drop
•
Cross-document messaging
•
Browser history management
•
MIME type and protocol handler
registration
•
Micro data

•
Web Storage, a key-value pair storage
framework that provides behavior similar to
cookies but with larger
•
storage capacity and improved API.
•
Scalable Vector Graphics
•
GeoLocation - The most important API
introduced.

New Attributes
•
To complement the new input types, there are a number of new
attributes for actions web developers often need:
•
autocomplete
•
autofocus
•
formaction
•
formenctype
•
formmethod
•
formnovalidate
•
formtarget
•
list

•
min
•
multiple
•
novalidate
•
pattern
•
placeholder
•
readonly
•
required
•
spellcheck
•
step

Future Scope
Can get rid of
proprietary add-ons
(like
Flash/Silverlight/JAVAFX
)
Web apps faster with
better user experience
Difference between
desktop and web apps
blurred.
Standard for web
applications

Html5

More Related Content

What's hot

Viewers also liked

Similar to Html5

Recently uploaded

Html5