Html теги как текст?

• Чтобы браузер показал угловые скобки как текст, используйте символьные ссылки: < вместо < и > вместо >.
• Пример: <code>&lt;strong&gt;Важно&lt;/strong&gt;</code>. Посетитель увидит <strong>Важно</strong> как образец кода.
• Сам по себе элемент code не отключает HTML-разбор. Незаменённый тег внутри него всё равно может стать настоящим элементом.
• Амперсанд записывайте как &, если требуется показать его буквально и избежать интерпретации начала символьной ссылки.
• При выводе строки через JavaScript присваивайте её свойству textContent, если нужен обычный текст. Не передавайте пользовательский пример в innerHTML ради показа исходника.
• Для нескольких строк можно использовать pre вместе с code, но экранирование угловых скобок всё равно требуется.

Показывайте HTML-пример как текст с экранированными специальными символами. Обёртка code сообщает смысл фрагмента, но сама не заставляет браузер игнорировать теги внутри. Поэтому <code><strong>Важно</strong></code> создаёт элемент выделения, а не показывает запись его тегов.

Для видимого примера используйте <code>&lt;strong&gt;Важно&lt;/strong&gt;</code>. Браузер преобразует символьные ссылки в читаемые угловые скобки. При обычном копировании отображаемого текста посетитель получит сами скобки, а не служебные записи < и >.

Амперсанд тоже требует внимания. Если вы объясняете саму запись <, в исходном документе понадобится <: первый уровень экранирования позволяет показать амперсанд, после которого остаётся буквальный текст. Не запускайте повторное экранирование уже подготовленного фрагмента без понимания, какой именно результат должен увидеть читатель. Иначе на странице начнут появляться лишние служебные последовательности.

Для нескольких строк допустима комбинация pre и code. Первая сохраняет форматирование пробелами и переносами, вторая обозначает компьютерный код. При этом правила HTML-разбора продолжают действовать, поэтому специальные символы всё равно нужно подготовить.

Если строка поступает через JavaScript, вывод обычного текста удобнее делать через textContent. Тогда браузер не использует строку как новую разметку. Присваивание её в innerHTML решает другую задачу и может создать нежелательные элементы, особенно если пример вводит посетитель.

Проверьте результат на образце с открывающим тегом, закрывающим тегом и амперсандом. Он должен выглядеть как читаемый исходный код, сохраняя нужные строки, а окружающая страница не должна менять структуру из-за содержимого примера.