html5 - quick guide
TRANSCRIPT
![Page 1: HTML5 - Quick Guide](https://reader035.vdocuments.site/reader035/viewer/2022073118/55aac2d41a28abd4758b4807/html5/thumbnails/1.jpg)
HTML5 is the latest evolution of the standard that defines HTML.
![Page 2: HTML5 - Quick Guide](https://reader035.vdocuments.site/reader035/viewer/2022073118/55aac2d41a28abd4758b4807/html5/thumbnails/2.jpg)
HTML5 is the newest hyper text markup language for websites from the World Wide Web Consortium (W3C). The first draft was made public in 2008, but not much happened until 2011. In 2011, HTML5 was released and people started writing about it and using it, but the support in different browsers was still poor. Today all major browsers (Chrome, Safari, Firefox, Opera, IE) offer HTML5 support, therefore the newest HTML technology can be used at its best today.
![Page 3: HTML5 - Quick Guide](https://reader035.vdocuments.site/reader035/viewer/2022073118/55aac2d41a28abd4758b4807/html5/thumbnails/3.jpg)
New Semantic/Structural Elements
New Form Elements
New Input Types
HTML5 - New Attribute Syntax
HTML5 Graphics
New Media Elements
![Page 4: HTML5 - Quick Guide](https://reader035.vdocuments.site/reader035/viewer/2022073118/55aac2d41a28abd4758b4807/html5/thumbnails/4.jpg)
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.
HTML5 offers new semantic elements to define different parts of a web page:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
![Page 5: HTML5 - Quick Guide](https://reader035.vdocuments.site/reader035/viewer/2022073118/55aac2d41a28abd4758b4807/html5/thumbnails/5.jpg)
HTML5 added the following form elements:<datalist>The <datalist> element specifies a list of pre-defined options for an <input> element.Users will see a drop-down list of pre-defined options as they input data.
<keygen>The purpose of the <keygen> element is to provide a secure way to authenticate users.The <keygen> element specifies a key-pair generator field in a form.
<output>The <output> element represents the result of a calculation (like one performed by a script).
![Page 6: HTML5 - Quick Guide](https://reader035.vdocuments.site/reader035/viewer/2022073118/55aac2d41a28abd4758b4807/html5/thumbnails/6.jpg)
New Input Types
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
New Input Attributes
![Page 7: HTML5 - Quick Guide](https://reader035.vdocuments.site/reader035/viewer/2022073118/55aac2d41a28abd4758b4807/html5/thumbnails/7.jpg)
HTML5 allows four different syntaxes for attributes.
This example demonstrates the different syntaxes used in an <input> tag:
Type Example
Empty <input type="text" value="John" disabled>
Unquoted <input type="text" value=John>
Double-quoted <input type="text" value="John Doe">
Single-quoted <input type="text" value='John Doe'>
![Page 8: HTML5 - Quick Guide](https://reader035.vdocuments.site/reader035/viewer/2022073118/55aac2d41a28abd4758b4807/html5/thumbnails/8.jpg)
Tag Description
<canvas> Defines graphic drawing using JavaScript
<svg> Defines graphic drawing using SVG
What is HTML Canvas?The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The HTML <svg> ElementThe HTML <svg> element (introduced in HTML5) is a container for SVG graphics.SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
![Page 9: HTML5 - Quick Guide](https://reader035.vdocuments.site/reader035/viewer/2022073118/55aac2d41a28abd4758b4807/html5/thumbnails/9.jpg)
Tag Description
<audio> Defines sound or music content
<embed> Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content
![Page 10: HTML5 - Quick Guide](https://reader035.vdocuments.site/reader035/viewer/2022073118/55aac2d41a28abd4758b4807/html5/thumbnails/10.jpg)
https://html5test.com/
http://caniuse.com/
http://html5please.com/
http://mobilehtml5.org/