Advanced HTML5 and CSS3 for Responsive Web Design Course By High School Technology Services myhsts.org What’s Up, HTML5?

By High School Technology Services myhsts.org Overview of HTML5

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts: ▪ It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows more diverse and powerful Web sites and applications. ▪ The most interesting new HTML5 elements are: ▪ New semantic elements like

,

,

, and

. ▪ New attributes of form elements like number, date, time, calendar, and range. ▪ New graphic elements:

▪Some Tags That Have Been Redefined with New HTML5 Standards:

▪Deprecated items - http://w3c.github.io/html/obsolete.html Meet the APIs

▪ Semantics: allowing you to describe more precisely what your content is. ▪ Connectivity: allowing you to communicate with the server in new and innovative ways. ▪ Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently. ▪ Multimedia: making video and audio first-class citizens in the Open Web. ▪ 2D/3D graphics and effects: allowing a much more diverse range of presentation options. ▪ Performance and integration: providing greater speed optimization and better usage of computer hardware. ▪ Device access: allowing for the usage of various input and output devices. ▪ Styling: letting authors write more sophisticated themes.

Canvas ▪ Canvas is a javascript API for drawing vector graphics to a bitmap of a specific size. ▪ Pixel based (Dynamic .png) ▪ Single HTML element.(Inspect element in Developer tool. You can see only canvas tag) ▪ Modified through script only ▪ Event model/user interaction is granular (x,y) ▪ Performance is better with smaller surface, a larger number of objects (>10k), or both Final Word

Basically HTML5 has it’s many new syntactical features, which include the

,

,

and

which enrich the semantic value of the document. Other major advantages of HTML5 are described below. ▪ Cleaner markup / Improved Code - HTML 5 will enable web designers to use cleaner, neater code, we can remove most div tags and replace them with semantic HTML 5 elements. ▪ Improved Semantics - Now it is easy to see which parts of the page are headers, nav, footers, aside, etc as the tags are specific for these all and most importantly know what their meaning and purpose is in whole the format. By using HTML5 elements we can increase the semantic value of the web page as the codes are very standardized. Final Word

▪ Elegant forms - HTML5 enables designer to use more fancier forms. Even it makes form validation native to HTML, User interface enhancements and reduced need for JavaScript (only needed in browsers that don’t support form types). There will be different type of text inputs, search and different fields for different purpose. ▪ Consistency - As websites adopt the new HTML5 elements we will see more greater consistency in terms of the HTML used to code a web page on one site compared to another. This will make it more easier for designers and developers to immediately understand how a web page is structured. ▪ Improved Accessibility - Different technologies can elaborate on the features with the help of HTML5, as they can Immediately make more detailed understanding of the structure of a page by take a look at HTML5 elements it has. ▪ And many more.. Looking Forward

In the next session we will dive deep into the above stated APIs. We’ll cover -

▪ New HTML5 elements ▪ New form input types ▪ HTML5 video ▪ The canvas element Thank You.

By High School Technology Services myhsts.org