CODEWITHSUNDEEP
javascripthtml
Michael Drum
Michael Drum

Reputation: 1239

Why is this HTML showing up as plain text in browser?

I've been stumped on this for a while. I can't even find a similar scenario online. I have an HTML file from my professor that the browser interprets as plain text. Can someone tell me why?

Browser: Google Chrome Version 61.0.3163.79 (Official Build) (64-bit)

<!-- saved from url=(0062)http://csf11.acs.uwosh.edu/371-17/demos/helloworld/square.html -->
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
  <div class="line-gutter-backdrop"></div>
  <table>
    <tbody>
      <tr>
        <td class="line-number" value="1"></td>
        <td class="line-content"><span class="html-comment">&lt;!--square.html--&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="2"></td>
        <td class="line-content"><span class="html-doctype">&lt;!DOCTYPE html&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="3"></td>
        <td class="line-content"><span class="html-tag">&lt;html&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="4"></td>
        <td class="line-content"><br></td>
      </tr>
      <tr>
        <td class="line-number" value="5"></td>
        <td class="line-content"><br></td>
      </tr>
      <tr>
        <td class="line-number" value="6"></td>
        <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">vertex-shader</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x-vertex</span>"&gt;</span>
        </td>
      </tr>
      <tr>
        <td class="line-number" value="7"></td>
        <td class="line-content"> // GLSL vertex shader code</td>
      </tr>
      <tr>
        <td class="line-number" value="8"></td>
        <td class="line-content"> attribute vec4 vPosition; </td>
      </tr>
      <tr>
        <td class="line-number" value="9"></td>
        <td class="line-content"><br></td>
      </tr>
      <tr>
        <td class="line-number" value="10"></td>
        <td class="line-content"> void main()</td>
      </tr>
      <tr>
        <td class="line-number" value="11"></td>
        <td class="line-content"> {</td>
      </tr>
      <tr>
        <td class="line-number" value="12"></td>
        <td class="line-content"> gl_Position = vPosition; </td>
      </tr>
      <tr>
        <td class="line-number" value="13"></td>
        <td class="line-content"> }</td>
      </tr>
      <tr>
        <td class="line-number" value="14"></td>
        <td class="line-content"> <span class="html-tag">&lt;/script&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="15"></td>
        <td class="line-content"><br></td>
      </tr>
      <tr>
        <td class="line-number" value="16"></td>
        <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">fragment-shader</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x-fragment</span>"&gt;</span>
        </td>
      </tr>
      <tr>
        <td class="line-number" value="17"></td>
        <td class="line-content"> // GLSL fragment shader code</td>
      </tr>
      <tr>
        <td class="line-number" value="18"></td>
        <td class="line-content"> precision mediump float;</td>
      </tr>
      <tr>
        <td class="line-number" value="19"></td>
        <td class="line-content"><br></td>
      </tr>
      <tr>
        <td class="line-number" value="20"></td>
        <td class="line-content"> void main()</td>
      </tr>
      <tr>
        <td class="line-number" value="21"></td>
        <td class="line-content"> {</td>
      </tr>
      <tr>
        <td class="line-number" value="22"></td>
        <td class="line-content"> gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );</td>
      </tr>
      <tr>
        <td class="line-number" value="23"></td>
        <td class="line-content"> }</td>
      </tr>
      <tr>
        <td class="line-number" value="24"></td>
        <td class="line-content"> <span class="html-tag">&lt;/script&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="25"></td>
        <td class="line-content"><br></td>
      </tr>
      <tr>
        <td class="line-number" value="26"></td>
        <td class="line-content"> <span class="html-comment">&lt;!--Include A/S WebGL support libraries--&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="27"></td>
        <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank"
            href="http://csf11.acs.uwosh.edu/371-17/demos/Common/webgl-utils.js">../Common/webgl-utils.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="28"></td>
        <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank"
            href="http://csf11.acs.uwosh.edu/371-17/demos/Common/initShaders.js">../Common/initShaders.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="29"></td>
        <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank"
            href="http://csf11.acs.uwosh.edu/371-17/demos/Common/MV.js">../Common/MV.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="30"></td>
        <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank"
            href="http://csf11.acs.uwosh.edu/371-17/demos/Common/webgl-debug.js">../Common/webgl-debug.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="31"></td>
        <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank"
            href="http://csf11.acs.uwosh.edu/371-17/demos/helloworld/square.js">square.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="32"></td>
        <td class="line-content"><br></td>
      </tr>
      <tr>
        <td class="line-number" value="33"></td>
        <td class="line-content"> <span class="html-tag">&lt;body&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="34"></td>
        <td class="line-content"> <span class="html-tag">&lt;canvas <span class="html-attribute-name">id</span>="<span class="html-attribute-value">gl-canvas</span>" <span class="html-attribute-name">width</span>="<span class="html-attribute-value">512</span>" <span class="html-attribute-name">height</span>="
          <span
            class="html-attribute-value">512</span>"&gt;</span>&gt;</td>
      </tr>
      <tr>
        <td class="line-number" value="35"></td>
        <td class="line-content"> Oops ... your browser doesn't support the HTML5 canvas element</td>
      </tr>
      <tr>
        <td class="line-number" value="36"></td>
        <td class="line-content"> <span class="html-tag">&lt;/canvas&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="37"></td>
        <td class="line-content"> <span class="html-tag">&lt;/body&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="38"></td>
        <td class="line-content"><span class="html-tag">&lt;/html&gt;</span></td>
      </tr>
      <tr>
        <td class="line-number" value="39"></td>
        <td class="line-content"><span class="html-end-of-file"></span></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Upvotes: 1

Views: 33504

Answers (7)

lilo.jacob
lilo.jacob

Reputation: 2414

I had the same issue. The reason was "UTF-8 With Bom" encoding of the file. I have converted the encoding to "UTF-8" and it works correctly now.

Upvotes: 0

Ngayu
Ngayu

Reputation: 17

There's absolutely nothing wrong with the code. Not even the <!DOCTYPE html> has an effect on it. What displays in the browser is the content of the HTML code not the code itself. The content that displays in the browser has been written using HTML entities &lt; and &gt; which are used in place < and > respectively. These entities are used to prevent codes samples from running, instead of being displayed in the browser, especially when you want to explain some pieces of codes to someone and they need to see the codes as an example. So, I think the person who wrote these code wanted to use it as a lecture for his/her students and maybe had not written the description yet. Example: If I write something like this code below,

<!DOCTYPE html>
<html>
<body>
<p>This is how to write the form tag</p>
<!--Take note of this particular bolded code because that's where the point lies-->
<b>&lt;form&gt;&lt;/form&gt;</b>
</body>
</html>
The result will be something like this:

  This is how to write the form tag
  <form></form>

Click here to read more about HTML entities at w3schools. This was the best I could explain as a beginner and using Stack Overflow platform to explain something for the first time.

Upvotes: 0

Petros Boufidis
Petros Boufidis

Reputation: 29

Ok this is kind of funny but make sure you edit and save the file with nodepad++ instead of notepad. As you see below i have created 3 files trying to run the html code on localhost, one.html and two.php where created via notepad, however three.html (which was created using notepad++) seem to work.enter image description here

Upvotes: 1

Ranjith Kumar
Ranjith Kumar

Reputation: 31

It is possible that the content is not html type. I made a similar mistake and was wondering why it is showing as text. Check the content of the file, most probably it is not HTML or some html tags must be missing. Make sure that Doc type is explicitly mentioned as HTML type at the begining of the document.

<!DOCTYPE html>

Upvotes: 0

Jorge Valle
Jorge Valle

Reputation: 637

This HTML isn't being interpreted as plain text: it's being interpreted as HTML.

It's just that the contents of your HTML include markup that has been escaped, such as &lt; and &gt;.

Update

Is this the markup you want?

<!--square.html-->
<!DOCTYPE html>
<html>


<script id="vertex-shader" type="x-shader/x-vertex">
// GLSL vertex shader code
attribute vec4 vPosition;

void main()
{
gl_Position = vPosition;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
// GLSL fragment shader code
precision mediump float;

void main()
{
gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );
}
</script>

<!--Include A/S WebGL support libraries-->
<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="../Common/webgl-debug.js"></script>
<script type="text/javascript" src="square.js"></script>

<body>
<canvas id="gl-canvas" width="512" height=" 512">>
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>

Upvotes: 5

bxorcloud
bxorcloud

Reputation: 689

try adding <title>title</title> in your header.

update

nothing is wrong with your code. it will actually output like and html code. Check your code line by line.

Upvotes: 0

jack
jack

Reputation: 2914

It might be the missing doctype, which tells the browser what kind of document it's looking at. Add <!doctype html> at the very beginning of the file.

Upvotes: 0

Related Questions