HTML5 - Quick Guide
Download as PPTX, PDF0 likes395 views
HTML5 is the latest version of the hypertext markup language introduced by W3C, with its first public draft in 2008 and a significant release in 2011 when browser support improved. It includes new semantic elements, form elements, and input types, along with enhanced graphics capabilities using <canvas> and <svg>. HTML5 now allows for various attribute syntaxes, enhancing web development and standards across all major browsers.
HTML5 - Quick Guide
- 1. HTML5 is the latest evolution of the standard that defines HTML.
- 2. 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.
- 3. New Semantic/Structural Elements New Form Elements New Input Types HTML5 - New Attribute Syntax HTML5 Graphics New Media Elements
- 4. 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>
- 5. 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).
- 6. New Input Types color date datetime datetime-local email 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
- 7. 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'>
- 8. 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> Element The 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.
- 9. 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
- 10. https://html5test.com/ http://caniuse.com/ http://html5please.com/ http://mobilehtml5.org/