Доброго времени суток и сразу приступим к делу.

Допустим у нас есть такой html - код

<p>Вас зовут <span>?</span></p>
<p>Ваш возраст<span>?</span></p>

и мы хотим вместо знаков вопроса подставить какие то свои данные.

Для этого в html5 был введен атрибут contenteditable, который поддерживается практически всеми элементами. Если элементу установить этот атрибут и передать ему в качестве значения true, то у нас появится возможность редактирования текстового содержимого этого элемента.

Рассмотрим более подробно:

<p>Вас зовут <span contenteditable="true">?</span></p>
<p>Ваш возраст<span contenteditable="true">?</span></p>

Теперь как видите у нас появилась возможность редактирования содержимого тегов span

Но тут следует учитывать , отредактированные данные нигде не сохраняются.

Если вы хотите чтобы ваши данные сохранились после перезагрузки страницы, то можете воспользоваться cookie, локальным хранилищем или ajax. Это уже на ваше усмотрение.

Лично я данным атрибутом пользовался лишь однажды. Когда писал приложение для планирования своего распорядка. Когда мне в таблицы своего расписания нужно было внести поправки.

На этом все дорогие друзья надеюсь вы когда нибудь найдете применение этому атрибуту.

Удачи!