HTML5 24-Hour Trainer

Appendix B. Advanced HTML5 Features

Unfortunately, the scope and intended market of this book did not allow the inclusion of some of the more advanced HTML5 features. Fortunately, they're the perfect subject for a brief appendix. In addition to semantic tags, advanced form controls, native audio and video, and the other enhancements covered in the lessons in this book, the HTML5 specification has a good number of truly cutting-edge technologies just waiting to be supported by the majority of browsers. This appendix takes a look at the top three "oh, wow" features:

• Editable content

• Local storage

• Geolocation

EDITABLE CONTENT

How many times have you come across a web page with some compelling or meaningful content that sparked a clear response from you and thought, "Oh, I've got to write that down." Then, if you're like me, something happens that interrupts your attempt to save and/or print out the web page and add your own thoughts — and the moment (and your reaction) is lost.

The contenteditable attribute, when set to true, allows any user to click into your web page and modify the designated text. The modified content only appears in the user's browser and only until that page is refreshed or reloaded, but the ability to interact with web-hosted content is quite exciting.

To convert any amount of content into editable text, all you need to do is add contenteditable="true" to any text-based tag, such as a heading, paragraph or, as in this example, list:

<section> <h2>Items to Take to College</h2> ...