What follows is an excerpt from HTML5 CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris and Estelle Weyl. This post was originally published in 2013 and. A showcase of sites using html5 markup, with twin primary aims to help web designers and developers of how to implement html5 into their sites now, and to showcase to. Animate elements in JavaScript using the power of CSS keyframes animation with the Web Animation API In this tutorial, Ill introduce you to WAAPI, browser support. There has been a lot of buzz about HTML5 and the potential it has when combined with CSS3 and JavaScript. The use of frameworks which bring these three technologies. Extending HTML5 Microformats HTML5 Doctor. While HTML5 has a bunch of semantic elements, including new ones like lt article and lt nav, sometimes there just isnt an element with the right meaning. What we want are ways to extend what weve got, to add extra semantics that are machine readable data that a browser, script, or robot can use. Native ways to extend HTMLThere were five fundamental ways we could extend HTML 4 lt meta elementclass attributerel attributerev attributeprofile attribute. In HTML5, rev has fallen by the wayside, becoming obsolete since hardly anyone used it correctly, and because it can be replaced by rel. HTML5. However, lt meta, class, and relare all in HTML5. In fact, lt meta now has spec defined names and a way to submit new name values, and rel has several new link types defined in the HTML5 specification and a way to submit more too. Safari is the best way to see the sites on iPhone, iPad, and Mac. Thanks to blazingfast performance and industryleading energy efficiency, hundreds of millions of. Document outlines have changed a bit in HTML5. For a start, theyre actually in the spec and have been for years 2008. The HTML5 Doctor is here to explain. Even better, WAI ARIAs role and aria attributes are allowed in HTML5, and HTML5 validators can check HTML5ARIA. Other new methods of extending HTML5 include custom data attributes data, microdata, and RDFa. Finally there are microformats. As Dr. Bruce touched on microformats in his article on the lt time element, lets delve a little deeper into what microformats are and how to use them in HTML5. Introducing microformats. Microformats are a collection of vocabularies for extending HTML with additional machine readable semantics. They are designed for humans first and machines second. This is currently accomplished via agreed upon class, rel, rev and profile attributes, coding patterns, and nesting. Being machine readable means a robot or script that understands the microformat vocabulary being used can understand and process the marked up data. Each microformat defines a specific type of data and is usually based on existing data formats like vcard address book data RFC2. RFC 2. 44. 5 or common coding patterns paving the cowpaths of the web. Despite their humble beginnings, microformats have also been a runaway success, and theyre far more widely deployed than other big S Semantic web technologies. For example, many services, such as Twitter and Flickr, offer profile information in h. Card format by default, so you may already have a microformatted profile even if youve never used microformats before. Microformat specifications. There are currently 3. Published microformats. Elemental simple microformats. XFN specify relationships with people. XMDP add metadata profiles. Vote. Links indicate agreement or disagreement with, or indifference to, the links destinationrel nofollow dont give weight to a link dont give Google juice mainly for search enginesrel license specify license informationrel tag add tags. Compound microformats. Card contact information for people and organisationsh. Calendar time based information, such as events. XOXO outlines Draft microformatsadrgeoh. Atomh. Audioh. Listingh. Mediah. Newsh. Producth. Recipeh. Resumeh. Reviewrel directoryrel enclosurerel homerel paymentrobots exclusion. Speciesx. Folk. Despite being drafts, many of these are in widespread use. Microformat patterns. These common coding patterns are just best practices that are frequently used in writing plain old semantic HTML POSH to create microformats. These specifications and patterns cover many common types of data. Theyve been created by a grass roots organisation of interested people, and anyone is welcome to contribute or even propose a new microformat. A lightning introduction to using microformats. More and more we see people using horizontal sliding panels on their websites. And they usually look very nice Some will put a contact or login form in there, others. Feeding Program Meat Goat'>Feeding Program Meat Goat. Uber is closing in on a pick to replace its former CEO Travis Kalanick, who departed the ridehailing giant under a storm of allegations he tolerated a widespread. For those of you that havent used microformats before, Ill briefly introduce some simple microformats hopefully so simple youll be encouraged to use them right away Using rel license for licensing information. Adding license information is quite a common activity, and while we can add a link to Creative Commons or another license easily enough, someone would have to read it to understand the contents license lt small This article is licensed under a. Creative Commons Attribution Non commercial Share alike. Race Club Setup more. By lt abbr NClt abbr lt abbr SAlt abbr licenselt a. If this information was machine readable, search engines could use it to help consumers searching by license. By using the rel license microformat to add rellicense to the license link indicating its the license for the pages main content, we can do just that lt small This article is licensed under a. Creative Commons Attribution Non commercial Share alike. By lt abbr NClt abbr lt abbr SAlt abbr licenselt a. This article is licensed under a Creative Commons Attribution Non commercial Share alike By NC SA license. A rel license formatted code sample with an example rendering. This may be so easy you dont even realise youve just microformatted the link In fact, Google already uses this data to allow us to search by license look in, in the extra options. Using XHTML Friends Network XFNMaybe we should term this one e. Xtensible Friends Network instead XFN is a way of specifying your relationship with people everything from met to sweetheart using the rel attribute on a link to their homepage. There are two main values relcontact for someone you know how to get in touch with, and relme. The relme value allows you to claim ownership of your various websites, including your accounts on social networks. For example, I could have a profile with a link to my Twitter account lt p Oli Studholme lt a hrefhttp twitter. Twitter bobletlt a lt p A person can infer that boblet is my Twitter username, but by adding relme we can state this relationship in a machine readable way. Oli Studholme lt a relme hrefhttp twitter. Twitter bobletlt a lt p In order to actually work, this would need to be on my personal homepage, with the same homepage added to my Twitter profile. By doing this, a social web app that understands XFN could confirm boblet is me, check my friends on Twitter, check if those people are already registered, and then allow me to follow them all with one click much easier. For more on this idea, check out Identity consolidation and the XFNrelme value, the Rel. Me. Auth proposal on the microformats wiki, and Googles Social Graph API. It seems Facebook is supporting relme too. Rel license and XFN are simple rel based microformats, but even with their simplicity you can see the potential power in this machine readable stuff. Now lets look at microformats for contact and event information. Using h. Card for contact information. Almost every website has an about page with some contact information lt p Oli Studholme lt a hrefhttp oli. Twitter bobletlt a. Unfortunately, adding someones contact information to your phone or address book generally involves a lot of copying and pasting. If the data was machine readable, however, we could use a tool to do that. Lets add the h. Card microformat to this code snippet. Oli Studholmelt span. Twitter. lt span classnickname bobletlt span lt a. Oli Studholme http oli.