Why is my html showing up as text?

Question

Sometimes emails come through with HTML showing on your page. This happens when an email with HTML content is sent through as plain text. Please go through each of these steps until you find the source of the problem.

Table of Contents Show

How to Quickly Replace Lots of < and > Fast
How to Preserve Code Formatting and Indentation
Can I use <plaintext> HTML tag?
How Do I Display HTML Tags as Text in PHP?
Why do I see HTML code showing up as text?
Why does a website appear as text?
How do I not display HTML tags as plain text?
How do I fix a website loading as text?

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

Go to your email notification settings for this email and make sure the box to "Send Emails in Plain Text" is not checked.
Check for a plugin conflict. We've seen several plugins that force all emails to be sent as either plain text or HTML cause this issue. Please deactivate your plugins and resend the email. If it looks fine while other plugins are deactivated, then there is a conflict. Try to narrow it down by activating your plugins one at a time to see when exactly the problem reappears. If you find that there is a conflict, please let us know.
Log into the email account you are using to send the emails from, and make sure there is nothing unusual there. Sometimes this happens when the sending email account is flagged as a spammer.
Install an SMTP plugin like WP Mail SMTP to avoid using PHP mail through your web host. If you are already using an SMTP plugin, try deactivating it to see if it is causing the issue.
Check the "From" address set in your email action. Make sure it either matches your site domain or that it matches the address configured with an SMTP plugin.
Some mail systems will display HTML as plain text in certain cases (commonly anti-spam efforts). Try sending to addresses under different domains, and viewing them using different mail clients. This can show if the HTML is being displayed as plain text in all cases, or only in cases with certain providers.
Certain mail systems will display HTML in emails as plain text if a Reply To address is not specified. You can give one using the "Reply To" button in your email's Form Action.

I looked up the issue and a user said that the code is being interpreted as HTML and that the contents that include Markup have been escaped. I do not know how to fix this though, is there something I have to change in something in settings, an extension I have to add? I had a code that did not include images and hyperlinks and it launched fine, now it is a problem.

Edit: not sure why I got downvoted, I am new to visual studio as well as coding and am confused.

You can show HTML tags as plain text in HTML on a website or webpage by replacing < with < or &60; and > with > or &62; on each HTML tag that you want to be visible.

Ordinarily, HTML tags are not visible to the reader on the browser. They are there but you cannot see them.

However, through HTML entities you can display the HTML tags that are part of the HTML markup code that are not visible on a browser.

Example
So if you want to display: <p> This is a paragraph </p> on the browser, you write it as: <p> This is a paragraph </p>.

HTML has some special characters that make up the language; they are the reserved character. The reserved characters in HTML are < , > , ” and &. The browser will never display them since they have some meaning in HTML.

HTML entities are pieces of text used to display reserved characters, invisible characters(like space) and other non-keyboard characters.

Entities begin with the ‘&’ followed by ‘entity name’ or ‘entity number’ and end with the ‘;’ ie. &entity-name; or &entity-number;

Reserved characters in HTML

List of HTML entities

View the complete lists of HTML entities.

The complete list of HTML entities with their numbers and names.
Character Entity Reference Chart.
HTML entities list

How to Quickly Replace Lots of < and > Fast

The quickest way to replace alot of <(less than) and >(greater than) signs is to use an online HTML tags to entities converter. You copy and paste your HTML code, convert it and copy the resulting text.

Another method you can use is the search and replace feature available in all text editors. In my case, I am using Sublime Text editor.

To use this feature use “CTRL + H” or click on “FIND” on the menu bar and then click on “replace”. Add the symbol you want to replace on the find box and the entity you want to replace with on the replace box.

Then, click on replace or replace all.

I hope by now you can be able to display your HTML code on the web browser.

How to Preserve Code Formatting and Indentation

As by now, you have noted that the indentation on your HTML code has disappeared.
However, you can preserve the indentation by using the pre HTML tags. So wrap the code that you want to display online using the (<pre></pre> pre html tags).

<pre>
  Your HTML code goes in here.
      And can be indented.
</pre>

HTML tags.

Example.

Can I use <plaintext> HTML tag?

Yes. Previously, <plaintext> HTML tag was used to show HTML tags on a webpage.

However, the plaintext HTML tag is deprecated since HTML version 2. That means they were remove from the official HTML language and may not work as expected. My advice: don’t use the <plaintext> HTML tag.

How Do I Display HTML Tags as Text in PHP?

If you want to use PHP to show HTML tags as text, then, you can use the function <code>htmlspecialchars()</code> to escape < and > characters.

  htmlspecialchars('<strong>This shows HTML tags</strong>')

Now go out there and share the code. If you have any question in HTML, ask in the comments below.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Why do I see HTML code showing up as text?

Certain mail systems will display HTML in emails as plain text if a Reply To address is not specified. You can give one using the "Reply To" button in your email's Form Action.

Why does a website appear as text?

The web page is not loaded properly when the browser is blocking the essential files like CSS stylesheet and JavaScript. This causes the page to break and sometimes display only text without visual elements. Check the browser extensions, and system firewall, else reset the chrome browser to fix the page loading issue.

How do I not display HTML tags as plain text?

The <plaintext> element was used to render HTML code as plain text. Since everything after the opening tag was rendered as plain text, there was no closing <plaintext> tag. This element is obsolete and should not be used. Instead, use the <code> or <pre> elements.