Атрибут `contenteditable` тега `<main>`

Описание

Атрибут contenteditable позволяет сделать содержимое элемента <main> редактируемым прямо в браузере. Это глобальный атрибут, который может применяться к любому HTML-элементу, включая основной контейнер содержимого страницы.

Пример использования:

<main contenteditable="true"> <h1>Редактируемый заголовок</h1> <p>Вы можете изменить этот текст прямо в браузере.</p> <ul> <li>Редактируемый список</li> <li>Добавляйте или удаляйте элементы</li> </ul> </main>

Значения атрибута:

Значение	Описание	Поведение
`true` или пустая строка	Разрешает редактирование	Контент можно изменять
`false`	Запрещает редактирование	Контент нельзя изменить (по умолчанию)

Особенности работы с <main>:

Изменения сохраняются только в браузере (не на сервере)
Для сохранения нужно использовать JavaScript
Поддерживает базовое форматирование текста
Может конфликтовать с некоторыми CSS-свойствами

Пример с сохранением содержимого:

<main id="editable-main" contenteditable="true"> <h1>Мои заметки</h1> <p>Редактируйте это содержимое...</p> </main> <button onclick="saveContent()">Сохранить</button> <script> // Загрузка сохраненного содержимого document.getElementById('editable-main').innerHTML = localStorage.getItem('savedContent') || '<h1>Мои заметки</h1><p>Редактируйте это содержимое...</p>'; function saveContent() { const content = document.getElementById('editable-main').innerHTML; localStorage.setItem('savedContent', content); alert('Содержимое сохранено!'); } </script>

Стилизация редактируемой области:

Атрибут contenteditable тега <main>