Как вывести символы и теги html на странице сайта
Браузеры интерпретируют html-теги в свой синтаксис. В итоге любой html-тег при написании его в виде <тег> не отображается на странице, так как мы видим его в коде. Рассмотрим все способы как можно выводить теги html на странице сайта так, как они написаны в коде.
Существует три способа. Каждый из них не идеален. Я пользуюсь первым.
Замена левой и правой скобки на коды < и >
Чем характеризуется любой html-тег? Наличием открывающей и закрывающий скобки: < и >. Если мы будем писать эти скобки с помощью html-кодов, то добьемся как раз нужного нам результата, а точнее, что браузер поймет этот код, как простой текст.
Например, мы хотим вывести следующий html-код на странице сайта:
Для этого заменяем
- < на <
- > на >
Заменять каждую знак муторно и долго. Поэтому проще всего определиться сразу какой код нужно вывести, а потом массово сделать замену. Это делается с помощью любого блокнота (например, notepad++). Открыв код в блокноте, нажмите комбинацию «CTRL + H» (заменить). Заполните поля что заменить и чем. Таким образом, можно автоматом массово заменить все нужные символы на другие.
В интернете есть специальные онлайн генераторы для замены.
В целом я придерживаюсь этого метода, т.к. он кроссбраузерный и валидный (отвечает всем стандартам).
Используя теги <xmp> и <plaintext>
В html есть специальные теги для отображения кода как есть: <xmp> . </xmp> и <plaintext> . </plaintext> . Весь html-код нужно поместить как есть между открывающим и закрывающим тегами и все.
В целом этот метод работает во всех браузерах. Однако этот код не проходит валидацию.
Пользоваться этим методом или нет? Конечно, вряд ли это может как-то сказаться на позициях сайта и траста сайта со стороны поисковых систем, но лично я придерживаюсь к мнению, что если делать код, то сразу отвечающим всем стандартам. Сейчас это не важно, а завтра может быть это станет уже критично.
Пример с <plaintext>
Из этих двух тегов, советую выбирать <plaintext> , т.к. он более новый и есть шансы пройти валидность кода.
ОСНОВНЫ ЯЗЫКА HTML
HTML это язык, который позволяет представлять информацию (например, научные исследования) в Internet. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы увидеть HTML-код страницы в браузере Chrome
, необходимо кликнуть правой кнопкой мыши на выбранной странице и выбрать "View Page Source".
ℹ️ Важно
Если вы хотите создавать web-сайты, вы не обойдётесь без HTML. Даже если вы используете для создания web-сайтов такие программы, как Dreamweaver, знание основ HTML значительно упростит вам жизнь, а ваш web-сайт станет намного интересней. Хорошей новостью является то, что HTML достаточно легко изучать и использовать.
Почитать про историю развития HTML можно здесь
Что такое HTML-Тег ? ��
Теги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт. Все Теги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">". Обычно имеются два Тега — открывающий: <html> и закрывающий: </html> . Различие в том, что в закрывающем имеется слэш "/". Всё содержимое, помещённое между открывающим и закрывающим Тегами, является содержимым Тега. Но, как говорится, из каждого правила есть исключения, и в HTML также имеются Теги, которые являются и открывающими, и закрывающими. Эти Теги не содержат текста, а являются метками, например, перенос строки выглядит так: <br /> . Большинству браузеров безразлично, в каком регистре введены буквы Тегов. <HTML> , <html> или <HtMl> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому привыкайте печатать Теги в нижнем регистре.
Структура HTML страницы
Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо. Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст. Во-первых необходимо сообщить браузеру, что вы будете "говорить" с ним на языке HTML. Это делается Тегом <html> (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить Тег " <html> ". Как Вы помните <html> это открывающий Тег, который должен иметь и закрывающий Тег после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий Тег " </html> " на пару строк ниже и вводите весь текст документа между <html> и </html> . Следующее, что необходимо, это "head" (голова или "шапка"), которая содержит служебную информацию о вашем документе, и "body" (тело), содержимое самого документа. Поскольку HTML логичен, head ( <head> и </head> ) находятся выше body ( <body> и </body> ). Давайте скажем пару слов о том, как собственно создать веб-страницу на практике. Все очень просто, для этого понадобится текстовый редактор, желательно с подсветкой синтаксиса HTML (Sublime Text 2, Notepad++).
❗️ Важно
Примечание: Главную страницу сайта принято называть index (index.html, index.php,index.js).
Все, что будет отображаться на создаваемой web странице, должно быть размещено внутри открывающего и закрывающего <body> . Внутри <head> размещается служебная информация, которая может понадобиться браузеру для правильной интерпретации кода документа. Эта служебная информация внутри <head> не будет видна на web странице.
❗️ Важно
Не забывайте про табуляцию, чтобы Ващ код был читаемым.
Что такое HTML-атрибуты ?��
Теги это метки, указывающие браузеру, как нужно представлять ваш web-сайт. (Например, <br /> информирует браузер, что нужно сделать перевод строки). В некоторых Тегах вы можете вводить дополнительную информацию. Такая дополнительная информация называется "атрибут". Атрибуты всегда записываются внутри Тега, после них следует знак равенства и детали атрибута, заключённые в двойные кавычки. Точка с запятой после атрибута служит для разделения команд разных стилей. Мы к этому ещё вернёмся.
Вложенные Теги
Как вы заметили в разделе структура HTML-страницы, между открывающим и закрывающим Тегами могут быть и другие Теги. Такие Теги называются вложенные. А Тег, внутрь которого они вложены, называется родитель.
Ссылка <a>
Сайт это множество перелинкованных между собой страниц. Ссылка устанавливается с помощью «закрывающегося» тега <a> , у которого есть 12 атрибутов. Ознакомиться со всеми доступными атрибутами можно здесь
Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:
Если page 2 помещена в подпапку "subfolder", ссылка выглядит так:
Вы можете также создавать ссылки-переходы внутри самой страницы — например, оглавление со ссылками на главы. Всё, что вам необходимо, — использовать атрибут id и символ "#". Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:
Теперь можно создать ссылку на этот элемент с помощью знака "#" в атрибуте ссылки. Знак "#" сообщает браузеру, что это переход на той же самой странице. После "#" должен следовать id Тега, на который выполняется переход. Например:
Вы можете также сделать ссылку на e-mail адрес почти так же, как в ссылке на документ:
Блочные и строковые элементы
В описании элементов разметки языка HTML существует понятие строкового (in-line) элемента разметки и блочного (block) элемента разметки. Объяснить различие между блочным и строковым элементами можно на примере: -параграф — это блочный элемент разметки; -выделение курсивом — это строковый элемент разметки.
Блочные элементы HTML (BLOCK) занимают по ширине всю область, в которой они находятся. Высота блочного HTML элемента если он пустой равна нулю, если блочный элемент имеет какое-либо содержимое, то его высота равна высоте содержимого плюс внутренний отступ блочного элемента. Строчные элементы HTML (INLINE) – это такие HTML элементы, ширина которых равна ширине их содержимого, если у строчного элемента HTML нет содержимого, то его ширина равна нулю. Высота строчного элемента равна высоте его содержимого. Ширина строчного элемента HTML не подстраивается ни под один элемент, поэтому содержимое строчного элемента может быть перенесено на другую строку в том случае если ширина области просмотра недостаточно для отображения всего содержимого строчного элемента HTML.
Типичным блочным элементом HTML является HTML тег <div> , HTML тегу <div> доступны все универсальные атрибуты и события HTML, уникальных атрибутов у тега <div> нет, оформление содержимого элемента <div> производится при помощи таблиц стилей CSS. Типичным строчным элементом HTML является HTML тег <span> , для которого доступны универсальные HTML атрибуты и атрибуты событий HTML, у тега <span> нет ни одного уникального атрибута.
Теги для форматирования текста
- <strong> — важный фрагмент текста, жирный;
- <em> — акцентирование внимания, курсив;
- <mark> — подсвеченный участок текста;
- <b> — жирный шрифт;
- <i> — курсив, наклонный шрифт;
- <s> — зачеркнутый текст;
- <small> — текст меньшего размера;
- <sup> — верхний индекс;
- <sub> — нижний индекс;
- <pre> — предварительно отформатированный текст;
- <dfn> — термин;
- <h1> — <h6> — заголовки;
- <q> — короткая внутристрочная цитата;
- <blockquote> — цитата;
- <cite> — сноска на название материала;
- <code> — программный код;
- <samp> — результат вывода компьютерной программы;
- <kbd> — клавиатурный ввод;
- <var> — переменная компьютерной программы.;
- <time> — дата и/или время.
ℹ️ Примечание
Примечание: Возможно использовать комбинации Тегов внутри друг друга, так, например, чтобы получить жирный курсивный текст надо написать следующее:
Изображения
Для того чтобы вставить изображение используется тег <img> . Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a> . При этом вокруг изображения в некоторых браузерах отображается рамка, которую можно убрать, добавив атрибут border=«0» в тег <img> . Также изображение можно маштабировать, указав в атрибутах width и height , желаемый размер. Атрибут alt содержит описание изображения, которое выводится до загрузки изображения.
Для того чтобы задать позицию изображения (слева, справа, по центру) используется атрибут align , который может принимать пять значений: bottom, left, middle, right, top.
Полный список атрибутов img можно посмотреть здесь
Можно легко вставлять изображения, размещённые в других папках, или даже на других web-сайтах:
❗️ Примечание
При использовании аттрибутов width и height, неплохо помнить, что реальный размер файла изображения в килобайтах останется неизменным, и этот файл будет занимать то же время для загрузки, как и раньше, хотя и будет выглядеть на экране уменьшенным. Следовательно, никогда не уменьшайте размер изображения атрибутами width и height. Вместо этого уменьшайте размер изображения в программе редактирования.
Таблицы
Таблицы используются, когда вам необходимо показать "табличные данные", например, информацию, логически упорядоченную в столбцы и ряды. Построение таблиц в HTML может показаться сложным на первый взгляд, но, если вы не будете дёргаться, это окажется строго логичным — как и всё в HTML.
Для вставки таблиц используются 3 базовых Тега:
- <table> — начало и конец таблицы. Логично.
- <tr> — "table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек. Тоже логично.
- <td> — сокращение от "table data/табличные данные". Этот Тег начинает и заканчивает каждую ячейку ряда таблицы. Всё просто и логично.
Список атрибутов Тега table можно посмотреть здесь
Списки
Тег <ul> устанавливает начало маркированного списка, и как Вы, наверное, уже догадались, тег </ul> — его конец.
Что значит маркированный? ��
Это значит что перед каждым элементом списка располагается маркер, он же буллит, — типографский знак, используемый для выделения элементов списка. Каждый элемент такого списка заключен между тегами <li> и </li> . У данного тега есть один собственный атрибут type, который может принимать 3 значения square (квадрат), disc (диск), circle (кольцо).
По умолчанию для элемент списка устанавливается тип disc.
ℹ️ Примечание
атрибут type для тега <li> позволяет установить тип для каждого из элементов списка в отдельности, для того, чтобы применить тип для всего списка, атрибут type нужно использовать для тега <ul> .
Рассмотрим код простого маркированного списка:
Также в HTML существует такое понятие, как нумерованный список, который устанавливается с помощью тега <ol> . У данного тега есть три собственных атрибута:
- type — Устанавливает вид маркера списка.
- reversed — Нумерация в списке становится в обратном порядке (3,2,1).
- start — Число, с которого будет начинаться нумерованный список.
Код простого нумерованного списка:
На самом деле, списки применяются не только при выводе списка, как может показаться на первый взгляд. Зачастую меню сайта также выводят при помощи списка, при выводе рубрик на блогах также используют списки. Список может отображаться как вертикально, так и горизонтально. Но во втором случае силой одного HTML не обойтись.
Пример ниже содержит большинство описанных выше элементов.
Формы
Форма HTML представляет собой документ, созданный с использованием элементов HTML. Назначением формы является сбор информации от пользователей. После того как пользователь заполнит форму и запускает процесс ее обработки, информация из нее попадает в программу, работающую на сервере.
У тега <form> есть свои атрибуты:
- accept-charset — Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
- action — Адрес программы или документа, который обрабатывает данные формы.
- autocomplete — Включает автозаполнение полей формы.
- enctype — Способ кодирования данных формы.
- method — Метод протокола HTTP.
- name — Имя формы.
- novalidate — Отменяет встроенную проверку данных формы на корректность ввода.
- target — Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.
Элемент <INPUT> используется для определения области внутри формы, где собираются данные. Данный элемент представляет собой поле для ввода информации пользователем (обычно одна строка текста). В этом случае требуется наличие атрибута NAME для определения наименования переменной поля.
Можно использовать следующие атрибуты:
- MAXLENGTH — ограничивает число вводимых символов (по умолчанию ограничений нет)
- SIZE — размер видимой на экране области, занимаемой текущим полем. Если MAXLENGTH > SIZE, броузер будет прокручивать данные в окне.
- VALUE — определяет начальное значение поля ввода.
Атрибут CHECKBOX
При создании форм часто бывает необходимо получить ответ пользователя на вопрос типа (Да/Нет) или (Правда/Ложь). Например, нужно выбрать из списка несколько значений. Для создания независимых кнопок в формах можно использовать атрибут CHECKBOX . В зависимости от содержания можно отметить несколько флагов. Вместе с атрибутом CHECKBOX должны использоваться следующие атрибуты:
- CHECKED — инициализировать данный флаг, как отмеченный
- NAME — наименование поля ввода формы
- VALUE — значение поля ввода
Атрибут RADIO
Данный атрибут используется для организации выбора одного единственного варианта из нескольких возможных. Вместе с атрибутом RADIO должны использоваться следующие атрибуты:
- CHECKED — инициализировать данный флаг, как отмеченный
- NAME — наименование поля ввода формы
- VALUE — значение поля ввода
Элемент SELECT
Для организации списков с прокруткой и выпадающим меню можно использовать элемент <SELECT> .
Для определения списка пунктов используются элементы <OPTION> внутри <SELECT> .
Вместе с атрибутом SELECT можно использовать следующие атрибуты:
- NAME — наименование обьекта
- MULTIPLE — позволяет выбрать более чем одно наименование
- SIZE — определяет число пунктов, видимых для пользователя.
SIZE = 1 — броузер выводит список на экран в виде выпадающего меню (видно одно наименование) SIZE > 1 — броузер представляет на экране обычный список (число — количество видимых наименований)
C элементом OPTION можно использовать следующие атрибуты:
- SELECTED — для первоначального выбора значения элемента по умолчанию
- VALUE — значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно элементу <OPTION> . Когда пользователь заполняет форму, атрибут NAME элемента <SELECT> состыковывается с атрибутом VALUE элемента.
Атрибут SUBMIT
Данный атрибут используется при окончании ввода пользователем данных. Браузер, в свою очередь выводит данный элемент, как кнопку, на которой пользователь может щелкнуть, чтобы завершить процесс редактирования. Вместе с атрибутом SUBMIT можно использовать следующие атрибуты:
- NAME — наименование кнопки SUBMIT
- VALUE — значение переменной поля в вашей форме
Элемент TEXTAREA
Данный элемент используется для ввода большого количества текстовой информации (несколько строк). Вместе с элементом TEXTAREA можно использовать следующие атрибуты:
- NAME — наименование поля
- COLS — число колонок (символов) в текстовой области
- ROWS — число видимых строк в текстовой области
Следующий пример содержит большинство описанных выше элементов.
Валидация HTML
Валидацией HTML документа это проверка на соответствие веб-стандартам и выявление существующих ошибок. Соответственно, валидным является такой веб-документ, который прошел подобную процедуру и не имеет замечаний по коду. Код веб-страницы должен подчиняться определенным правилам, которые называются спецификацией, ее разрабатывает W3 Консорциум при поддержке разработчиков браузеров. Проверить HTML-документ можно здесь
Практика ��������
Используя материал лекции наверстать небольшую персональную страничку о себе:
Отображение HTML кода на странице с помощью тега
<!doctype html> <html> <head> <meta charset=»utf-8″ /> <title>новый сайт</title> </head> <header> <h1>Блог почтальона Печкина</h1> <h2>Всегда свежие газеты на завтрак</h2> </header> ( ) на спец код ( заменял на > ) И в браузере данный код отображался вот так
Правда строки не переносятся и чтобы был перенос строки приходилось еще добавлять
В общем довольно муторно было, надо было сначала написать все, а потом в текстовом редакторе (с функцией массовой замены символов) заменить все символы и уже потом размещать в статье.
Тек-же опробовал теги и
Но они не заработали у меня и код не отображался на странице, а воспринимался браузерами как команды
Пример с тегом
Потом я нашел информацию что код заключенный в тег прекрасно отображается на странице. Естественно проверил и обрадовался такому счастью. Теперь не нужно заменять символы, а сразу вставлять код и чтобы он отобразился как обычный текст, его нужно просто заключить в тег .
Пример заключения в тег, внизу где закрывающий тег нужно убрать пробел, я поставил пробел чтобы браузер его отобразил. В этом теге строчки не переносятся и надо для переноса строк использовать тег новый сайт
How to display raw HTML code on an HTML page
How can I show HTML snippets on a webpage without needing to replace each < with < and > with > ?
In other words, is there a tag for don’t render HTML until you hit the closing tag?
30 Answers 30
The tried and true method for HTML:
- Replace the & character with &
- Replace the < character with <
- Replace the > character with >
- Optionally surround your HTML sample with <pre> and/or <code> tags.
sample 1:
sample 2:
sample 3: (If you are actually "quoting" a block of code, then the markup would be)
is there a tag for don’t render HTML until you hit the closing tag?
No, there is not. In HTML proper, there’s no way short of escaping some characters:
- & as &
- < as <
(Incidentally, there is no need to escape > but people often do it for reasons of symmetry.)
And of course you should surround the resulting, escaped HTML code within <pre><code>…</code></pre> to (a) preserve whitespace and line breaks, and (b) mark it up as a code element.
All other solutions, such as wrapping your code into a <textarea> or the (deprecated) <xmp> element, will break. 1
XHTML that is declared to the browser as XML (via the HTTP Content-Type header! — merely setting a DOCTYPE is not enough) could alternatively use a CDATA section:
But this only works in XML, not in HTML, and even this isn’t a foolproof solution, since the code mustn’t contain the closing delimiter ]]> . So even in XML the simplest, most robust solution is via escaping.
1 Case in point:
Kind of a naive method to display code will be including it in a textarea and add disabled attribute so its not editable.
Hope that help someone looking for an easy way to get stuff done.
But warning, this won’t escape the tags for you, as you can see here (the following obviously does not work):
Deprecated, but works in FF3 and IE8.
The deprecated <xmp> tag essentially does that but is no longer part of the XHTML spec. It should still work though in all current browsers.
Here’s another idea, a hack/parlor trick, you could put the code in a textarea like so:
Putting angle brackets and code like this inside a text area is invalid HTML and will cause undefined behavior in different browsers. In Internet Explorer the HTML is interpreted, whereas Mozilla, Chrome and Safari leave it uninterpreted.
If you want it to be non-editable and look different then you could easily style it using CSS. The only issue would be that browsers will add that little drag handle in the bottom-right corner to resize the box. Or alternatively, try using an input tag instead.
The right way to inject code into your textarea is to use server side language like this PHP for example:
Then it bypasses the html interpreter and puts uninterpreted text into the textarea consistently across all browsers.
Other than that, the only way is really to escape the code yourself if static HTML or using server-side methods such as .NET’s HtmlEncode() if using such technology.
If your goal is to show a chunk of code that you’re executing elsewhere on the same page, you can use textContent (it’s pure-js and well supported: http://caniuse.com/#feat=textcontent)
To get multi-line formatting in the result, you need to set css style «white-space: pre;» on the target div, and write the lines individually using «\r\n» at the end of each.
This method has an advantage over using textarea: Code wont be reformatted as it would in a textarea. (Things like are removed entirely in a textarea)
In XML/XHTML? You could use a CDATA block.
- you want to write 100% valid HTML5
- you want to place the code snippet (almost) literal in the HTML
- especially < should not need escaping
All your options are in this tree:
- with HTML syntax
- there are five kinds of elements
- those called «normal elements» (like <p> )
- can’t have a literal <
- it would be considered the start of the next tag or comment
- they have no content
- you could put your HTML in a data attribute (but this is true for all elements)
- that would need JavaScript to move the data elsewhere
- in double-quoted attributes, » and &thing; need escaping: " and &thing; respectively
- <script> and <style> only
- they are never rendered visible
- but embedding your text in Javascript might be feasable
- Javascript allows for multi-line strings with backticks
- it could then be inserted dynamically
- a literal </script is not allowed anywhere in <script>
- <textarea> and <title> only
- <textarea> is a good candidate to wrap code in
- it is totally legal to write </html> in there
- not legal is the substring </textarea for obvious reasons
- escape this special case with </textarea or similar
- elements from MathML and SVG namespaces
- at least SVG allows embedding of HTML again.
- and CDATA is allowed there, so it seems to have potential
- covered by Konrad’s answer
Note: > never needs escaping. Not even in normal elements.
It’s vey simple . Use this xmp code
works fine for me..
«keeping in mind Alexander’s suggestion, here is why I think this is a good approach»
if we just try plain <textarea> it may not always work since there may be closing textarea tags which may wrongly close the parent tag and display rest of the HTML source on the parent document, which would look awkward.
using htmlentities converts all applicable characters such as < > to HTML entities which eliminates any possibility of leaks.
There maybe benefits or shortcomings to this approach or a better way of achieving the same results, if so please comment as I would love to learn from them 🙂
This is a simple trick and I have tried it in Safari and Firefox
It will show like this:
You can see it live Here
This is a bit of a hack, but we can use something like:
With that CSS, the browser will display scripts inside the body. It won’t attempt to execute this script, as it has an unknown type text/html . It’s not necessary to escape special characters inside a <script> , unless you want to include a closing </script> tag.
I’m using something like this to display executable JavaScript in the body of the page, for a sort of «literate progamming».
it will return the escaped Html
Ultimately the best (though annoying) answer is «escape the text».
There are however a lot of text editors — or even stand-alone mini utilities — that can do this automatically. So you never should have to escape it manually if you don’t want to (Unless it’s a mix of escaped and un-escaped code. )
This is by far the best method for most situations:
I would have up voted the first person who suggested it but I don’t have reputation. I felt compelled to say something though for the sake of people trying to find answers on the Internet.
You could use a server side language like PHP to insert raw text:
then dump out the value of $str htmlencoded:
There are a few ways to escape everything in HTML, none of them nice.
Or you could put in an iframe that loads a plain old text file.
Actually there is a way to do this. It has limitation (one), but is 100% standard, not deprecated (like xmp), and works.
And it’s trivial. Here it is:
Please let me explain. First of all, ordinary HTML comment does the job, to prevent whole block be interpreted. You can easily add in it any tags, all of them will be ignored. Ignored from interpretation, but still available via innerHTML ! So what is left, is to get the contents, and filter the preceding and trailing comment tokens.
Except (remember — the limitation) you can’t put there HTML comments inside, since (at least in my Chrome) nesting of them is not supported, and very first ‘—>’ will end the show.
Well, it is a nasty little limitation, but in certain cases it’s not a problem at all, if your text is free of HTML comments. And, it’s easier to escape one construct, then a whole bunch of them.
Now, what is that weird LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo string? It’s a random string, like a hash, unlikely to be used in the block, and used for? Here’s the context, why I have used it. In my case, I took the contents of one DIV, then processed it with Showdown markdown, and then the output assigned into another div. The idea was, to write markdown inline in the HTML file, and just open in a browser and it would transform on the load on-the-fly. So, in my case, <!— became transformed to <p><!—</p> , the comment properly escaped. It worked, but polluted the screen. So, to easily remove it with regex, the random string was used. Here’s the code:
If somebody is interested, this article is written using this technique. Feel free to download, and look inside the HTML file.
It depends what you are using it for. Is it user input? Then use <textarea> , and escape everything. In my case, and probably it’s your case too, I simply used comments, and it does the job.
If you don’t use markdown, and just want to get it as is from a tag, then it’s even simpler: