Designing Rich Internet Applications Using HTML5, CSS3 and jQuery- Beginner Level

By High School Technology Services myhsts.org HTML5 Fundamentals

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: and . ▪ New multimedia elements:

▪ XHTML is essentially identical to HTML4 (the fourth iteration of HTML), but with elements of XML that extend HTML’s capabilities. XHTML came along before HTML5, right after HTML4, solving for some cross-browser compatibility issues and offering a “best of both worlds” scenario. It’s a bit stricter than HTML, providing more precise standards and specifications for how a site’s data is broken down and transmitted. This does make it a bit unforgiving, however, and it can be tougher to debug. ▪ HTML’s latest evolution, HTML5, is a versatile game-changer. HTML5 adds a ton of new features to the HTML repertoire, making it able to do so much more on its own. It’s a hybrid of three types of code—HTML, CSS, and JavaScript—and by bundling these three components, HTML5 lets developers work faster and more efficiently. The resulting site architecture is agile, mobile-friendly, and compatible with more browsers. ▪ HTML came along first, XHTML was designed to fix problems with HTML, and HTML5 solved problems XHTML was designed to fix. They’re all markup languages that provide structure and organization to the content of webpages and applications, but their relevance has shifted as newer versions of HTML have evolved, rising to the challenges of mobile demands, responsive design, and developers who want to accomplish more with less. Changes to Existing Tags, Deprecated Elements and Attributes

▪Some Tags That Have Been Redefined with New HTML5 Standards: ▪Deprecated items - http://w3c.github.io/html/obsolete.html Browser Support

▪ HTML5 is supported in all modern browsers. ▪ In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements. ▪ Because of this, you can "teach" older browsers to handle "unknown" HTML elements. ▪ HTML5 defines eight new semantic elements. All these are block-level elements. - To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block. ▪ However, IE8 (and earlier) does not allow styling of unknown elements! ▪ You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9. HTML5 Shiv

▪ The HTML5Shiv is placed within the tag. ▪ The HTML5Shiv is a file that is referenced in a ▪ As mentioned above, you can create CSS rules based on the feature availability and these rules would apply automatically on the webpage if browser does not support a new feature. Looking Forward

In the next session we will cover HTML5 Structural Elements – ▪ New Block-Level Semantic Elements ▪

▪
▪
▪
, etc ▪ New Text-Level Semantic Elements ▪