Para usar essa funcionalidade, é só colocar o atributo ContentEditable no seu elemento ex.:
<p contenteditable>Seu texto</p>
Você também pode permitir a edição de todos os elementos filhos se declarar que o elemento vai herdar a propriedade do pai:
<div contenteditable="true">
<h3 contenteditable="inherit">Seu titulo</h3>
<p contenteditable="inherit">Seu parágrafo</p>
</div>
...Você pode editar esse texto, tente!...
Mas claro, o conteúdo alterado não será salvo a não ser que você utilize código back-end ou o localStorage do HTML 5.
Esse atributo permite que seja desenvolvido páginas com uma maior interação do usuário mantendo a elegância e o design sem ser trabalhoso!
Mas sempre que falamos de HTML 5, vem a cabeça "é cross-browser?".
É ai que vem a parte boa, o ContentEditable é suportado por todos os maiores browsers, isso inclui todos IE's (é, também não acreditei!), FF, Chrome, Safari, Opera e até alguns mobiles! Veja a relação completa aqui!
E você? Está pensando onde pode aplicar esse atributo no seu dia-a-dia?
Comente você tambem