HTML and CSS Reference
In-Depth Information
B
advanced HTML5 Features
Unfortunately, the scope and intended market of this topic 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 topic, the HTML5 speciication 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
Le conTenT
ediTab
Tab
T
How many times have you come across a web page with some compelling or meaningful con-
tent 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>
<p>Here's a few items to get you started — feel free to add your own and
then print out the page!</p>
<ol id=”editableList”
contenteditable=”true”
>
