Embed Size (px)
Citation preview
Introduction to HTML5
Toni Kolev
Junior QA
PREFACE
We’ve been using HTML 4.01 as main mark up language for the
past decades, althought HTML5 did not reach it’s final version
it’s starting to take over the world. HTML is expected to reach
it’s final version by 2020.
Why HTML5?
• HTML 4.01 is 13 years old
• Not using third-party plugins and API’s to play
video and music – affects performance and
speed
• Limiting the web pages to static images and text
is something of the past
• HTML5 provides more power to the developers
for creation and optimisation
• Better UI experience with CSS3
Why HTML5 is taking over the world?
HTML5 today?
• Not all features are supported by major
browsers
• HTML5 hasn’t changed much since 2009
• Latest versions of browsers support mosf of
HTML5 tags
• Find out how your browser handles HTML5 by
visiting html5test.com
Can I use HTML5 today?
HTML5 today?
• Hardware acceleration – playing audi/video files
does not depend on software
• End of third-party plugins
• Cleaner code
• Widely accepted – across devices, operating
systems, browsers
Can I use HTML5 today?
Semantic differences
DOCTYPE:
HTML 4.01 <!DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 4.01..EN” “http://www.w3.org/TR/html4/strict.dtd”>
HTML5 <!DOCTYPE html>
CHARSET
HTML 4.01 <meta http-equiv=“content-type” content=“text/html”; charset=UTF-8”>
HTML5 <meta charset=“UTF-8”>
SCRIPTS & LINKS
HTML 4.01 <script type=“text/Javascript” src=“js/plugins.js”></script>
HTML5 <script src=“js/plugin.js></script>
Main semantic differences from 4.01
Removed Elements
• acronym
• applet
• basefont
• big
• center
• dir
• font
• frame
• frameset
• noframes
• strike
• tt
• u
Removed elements from 4.01
New elements
The new semantic elements are among the most welcome additions.
New elements
New elements
Following the common sense of millions of developers, the header tag is an
obvious addition that is now part of HTML5.
Instead of defining an header in the old fashion way where we need to write
<div id=“header”></div> now we can simply write <header></header>.
It’s important to note that a header does not need to be limited to the main
section. You can have several headers within your web page structure and
keep styling them with ids or classes. For example you can have 2 different
headers and you want to apply them different styles, you could simply add an
id like this <header id=“secondary”></header>.
<header>
New elements
The nav tag is used to represent navigation of a web page. In terms of
accessibility now the ul is inserted in a nav tags to help screen readers
understand where the navigation is.
<nav>
New elements
Some people get confused with the section and article tags. The
section tag means precisely that, a section. Every web page we create
is divided into sections, those sections can be semantically separated
by the section tag. It can serve the same purpose as the article tag but
is more generic.
Example:
<section><h1>This is a section></h1><p>Some text describing somethinb about somebody that some
times happens something and then someone will somehow do something etc.</p><section>
<section>
New elements
The article tag can be one of the most confusing tags simply because
at first you cank think “hey, I don’t have any articles on my page!”.
There is a secret about the tag, the tag is not menat for articles, it’s
meant for anything that, in a structural point of view, can be similar to
an article. Theoretically, you should use it when there’s a title followed
by its content.
<article>
New elements
Initially, this tag was meant to represent area of the page related to the
content surrounding it. Now the aside tag can be also used for
secondary content. There is one simple rule about it, if we have an
aside tag inside an article tag, the content inside the aside tag will be
directly related to everything else inside the same article tag, however,
if the aside tag is outside the article tag, it will be used as a type of
sidebar with secondary content purpose.
<aside>
New elements
Brand new tag. The role of the tag is to view/hide content by interacting
with the user, similar to .SlideUp() / .SlideDown() jQuery methods.
Example:
<details><summary>Clicking here will collapse or expand the content
below</summary><p>Content</p>
</details>
<details>
Web forms
• No need of JS to put text inside an input field
• HTML5 uses placeholder to put text inside an input field
• No need of extra help for validation on the client side
• HTML5 brings browser-based validation
• Don’t count only on browser-based validation, keep using validation
in the server side.
Webforms – what’s new?
Web forms
• datalist
• output
• keygen
Webforms – new elements
Web forms
• autocomplete
• autoform
• form
• formaction
• formenctype
• novalidate
• pattern
• placeholder
• required
Webforms – new atributes
Web forms
• color
• date
• datetime
• month
• number
• range
• search
• tel
• time
• url
• week
Webforms – new input types
Main Additions
A place holder is just a text inside an input field, in most cases it replaces the
label purpose. When the user focuses on a field with a placeholder, by clicking
inside it, text is removed.
Example:
<form><input name=“name” placeholder=“Your name, please.”>
</form>
Placeholder
Main Additions
Something that could only be achieved trough the use of self-made
validation scripts, can now be easily done with HTML5.
Example:
<form><input type=“email><input type=“submit” value=“Submit”>
</form>
Email input type
Main Additions
There are many widgets out there to help you achieve what HTML 4.01 just
can’t. Javascript has been our friend on this for a long time, however, we
simply don’t need it anymore. The ragen type attribute is a slider that
represents numeric input.
Example:
<input type=“range” name=”Player rating” min=“1” max=“20”>
Range input type
Main Additions
Date and time pickers are now part of HTML5. Finally, we have a way to
include a calendar with date and time picker without the need of using
Javascript.
Example:
<input type=“date” name=”pick” id=“dataselection”>
Data pickers
Main Additions
We are deleting unnecessary validation classes and script files. Similar to
email built-in validation, you can now tell the browser to check if there’s
any mandatory fields left in blank. All you need to do is to add the require
attribute on the desired field.
Example:
<form><input id=“name” required><input type=“submit” value=“Submit>
</form>
Required attribute
Main Additions
Main Additions DEMO
VIDEO & AUDIO
VIDEO AND AUDIO
Native Video and Audio incorporation are the most anticipated
features of HTML5. No need of Flash or QuickTime anymore.
The video tag has one major problem and it is that it does not support
DRM.
Example:
<video src=“myvideo.mp4” poster=“cover.jpg” controls>
This is fallback content to display if the browser does not support the
video element.</video>
Q&A
Questions ?
That’s all folks!
