ホームページを見たまま編集できる機能を作りたくて調べていたら、HTML5にcontenteditable属性というのがあるのを初めて知りました。
HTMLのテキストが入る要素にcontenteditable属性を追加するだけで、その要素がinput要素のように編集可能になります。
例えば以下のように。

ここ編集できます。

結論

タイトルにあったcontenteditable属性を使うか、使わないかですが
結論は「使いたいけど使いこなせない。」です。

理由は私はvue.jsを使うことが多いのですが、contenteditable属性を指定した要素を編集してもバインディングしないため、inputイベントやfocus, blurイベントを駆使してデータを取得しなければなりませんが、カーソル位置の挙動がおかしくなり私は断念しました。
これは私の能力が低いだけで使いこなせるエンジニアはいます。例えばtwitterです。
twitterのツイート入力エリアはcontenteditableらしく、確認したら本当にそうでした。
twitterのツイート入力エリアはご存知の通り、ハッシュタグを入力しますと自動でハッシュタグのリンクになりますし、URLアドレスを入力しますとリンクになります。これはinputやtextareaでは難しいのではないでしょうか。
twitterもそうですが、入力エリア内に多くの機能を持たせる場合、contenteditable属性は魅力的で奥が深い機能だと思います。

幸い、入力エリア内に機能を持たせる予定は今の所ないので、しばらくはinput要素で頑張ろうと思います。

あべ