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