How to Display HTML Tags as Plain Text

How to display HTML tags as plain text

Replace < with < and > with >.

Display html tags as plain text for viewing

To display the html tags as text you need to encode them.

For example :

<span>Hello</span>

How to display raw HTML code on an HTML page

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.¹

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:

<![CDATA[Your <code> here]]>

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.

¹ Case in point:

textarea {border: none; width: 100%;}

<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>

Get HTML content and show this as plain text

Try something like:

<?php

$filePath = __DIR__ . '/myFile.html';

$content = file_get_contents($filePath);
// Escape.
$content = htmlspecialchars($content);
// Makes lines visible.
$content = preg_replace('/\n/', '<br>' . PHP_EOL, $content);

echo $content;

Note that I use single-quotes to improve performance slightly, but when using double-quote, the pattern would be "/\\n/" (to escape Back-slash, but should work even without escaping).

How can I echo tags as plain text within a PHP loop?

You can use < for < and > for >

Like this:

<?php 
while ($row = mysqli_fetch_array($execute)) { 
echo "<name>".$row['name']."</name>";
}
?>

Or like this:

<?php 
while ($row = mysqli_fetch_array($execute)) { 
echo htmlspecialchars("<name>".$row['name']."</name>");
}
?>

Show html with format in Liquid

Ok I figured it out how make it work.

I just had to put the html part inside a capture tag. With the example above it would be like:

{% capture name %} <b>liquid</b> {% end capture %}

And it works, the html is correctly displayed.
Thanks to Tasawer Khan for the answer! I hope it's useful for someone else.

How to show custom html tags as plain text inside innerHtml

If all the possible custom tags are known, you can encode them before passing the string to the [innerHTML] binding. The method encodeCustomTags in the following code snippet uses a regular expression to replace <customTag> with <customTag>:

private customTags = [
  "CUSTOM_TAG",
  "otherTag",
];

myHtml = this.encodeCustomTags("the <CUSTOM_TAG>boy</CUSTOM_TAG> went to the <b>store</b>");

private encodeCustomTags(html: string): string {
  let regex: RegExp;
  for (let tag of this.customTags) {
    regex = new RegExp(`<(/?)${tag}>`, "gi");
    html = html.replace(regex, `<$1${tag}>`)
  }
  return html;
}

See this stackblitz for a demo.

How to Display HTML Tags as Plain Text