Edit HTML 5 Content In Your Browser Trick

Here’s a trick you may find useful for websites running HTML 5.

This basic example shows how you can edit a paragraph of text in your browser.

HTML 5 offers many other high level functions which you can use on any element.

Live Demo

–>Edit This Content Here. Yes You Can Edit Or Delete This Content

Here’s the code you can use to create your own example or editable text when using HTML 5:

How To Create An Editable Content File

• Simply create a new file using a text editor like Notepad++
• Paste this code into the file and save it with a html extension.
• Click the file on your desktop to open it in a browser.
• Edit the text in the file while its in your browser.
• Go to file, save as and save the changes you made to the file.

Make Your Own Content Editable

All you need to do is wrap your content in these tags to make any element editable content.

<p contenteditable=true>Insert Editable Content Here</p>

You can use this code on any HTML 5 element.

Download Demo File

Click this link to download the html editable content demo file.

HTML 5 Themes

I bet you already knew Genesis 2.0 supports HTML 5?

StudioPress theme owners can now convert old XHTML child themes to the new HTML 5 markup.

Be aware that Genesis 2.0 is still in beta and its not officially recommended you update until its officially released shortly after WordPress 3.6.

WP Sites runs on the Genesis Design Framework and a StudioPress child theme.