Introduction to html5
Transcript of Introduction to html5
![Page 1: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/1.jpg)
Introduction to HTML5
Toni Kolev
Junior QA
![Page 2: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/2.jpg)
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.
![Page 3: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/3.jpg)
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?
![Page 4: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/4.jpg)
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?
![Page 5: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/5.jpg)
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?
![Page 6: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/7.jpg)
Removed Elements
• acronym
• applet
• basefont
• big
• center
• dir
• font
• frame
• frameset
• noframes
• strike
• tt
• u
Removed elements from 4.01
![Page 8: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/8.jpg)
New elements
The new semantic elements are among the most welcome additions.
New elements
![Page 9: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/9.jpg)
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>
![Page 10: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/10.jpg)
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>
![Page 11: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/11.jpg)
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>
![Page 12: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/12.jpg)
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>
![Page 13: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/13.jpg)
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>
![Page 14: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/14.jpg)
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>
![Page 15: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/15.jpg)
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?
![Page 16: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/16.jpg)
Web forms
• datalist
• output
• keygen
Webforms – new elements
![Page 17: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/17.jpg)
Web forms
• autocomplete
• autoform
• form
• formaction
• formenctype
• novalidate
• pattern
• placeholder
• required
Webforms – new atributes
![Page 18: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/18.jpg)
Web forms
• color
• date
• datetime
• month
• number
• range
• search
• tel
• time
• url
• week
Webforms – new input types
![Page 19: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/23.jpg)
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
![Page 24: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/24.jpg)
Main Additions
Main Additions DEMO
![Page 25: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/25.jpg)
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>
![Page 26: Introduction to html5](https://reader033.fdocuments.in/reader033/viewer/2022052316/557db8b8d8b42a11428b507c/html5/thumbnails/26.jpg)
Q&A
Questions ?
That’s all folks!