Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Basics (Retired) Storing and Tracking Information with Variables Strings and Numbers

Posted by A X
A X
12,842 Points

Why Doesn't the HTML tag Appear Inside this Quote from JavaScript?

I re-watched Dave's Beginning JS video on Strings/Numbers, and I noticed this time that he did the following: 

var htmlSnippet = '<h1 class = "special">Important Headline</h1>';

What I'm not understanding is if we were to print this to the page or return the value the quote marks normally mean that the text string is shown on our browser/Workspaces/etc., but if that was the case the result of running this be: <h1 class = "special">Important Headline</h1>

Instead however the HTML tag isn't shown when run and is instead interpreted as HTML. Why is this?

4 Answers

Idan Melamed
Idan Melamed
16,285 Points
Idan Melamed
Idan Melamed
16,285 Points

Hi Nekilof It can be a bit confusing at the start. Here's what I think is happening...

document.write(htmlSnippet) sends whatever is inside htmlSnippet to your browser to interpret. It's the equivalent of writing <h1 class = "special">Important Headline</h1> directly into your HTML file.

The browser will then display Important Headline as a Header 1 element.

I hope this helps.

MarQwann Brown
MarQwann Brown
6,598 Points
MarQwann Brown
MarQwann Brown
6,598 Points

JavaScript isn't always used just for printing a message to the screen, it can also be used to edit the HTML like Dave did. If you want to show the HTML tags as plain text on the page you have to use HTML special characters to get it to show correctly. In this case you would need the 'less than' < and the 'greater than'< symbol

Less Than can be shown using the special characters &lt Greater Than can be shown using *&gt

//This edits the HTML to make the text a H1 with the class "special"
var htmlSnippet = '<h1 class ="special">Important Headline</h1>';

//This shows the HTML as plain text
var htmlSnippet = "&lth1 class=\"special\"&gtImportant Headline&lt/h1&gt";

Here is a StackOverflow post on the topic that might explain it better than I can

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points 
document.write(htmlSnippet);
Melvin Ray
PLUS
Melvin Ray
Courses Plus Student 6,312 Points
Melvin Ray
Melvin Ray
Courses Plus Student 6,312 Points

The text inside the quote marks (<h1 class ="special">Important Headline</h1>) is meant to be inserted into an existing webpage. That webpage will already have <html></html> tags. If you supply a second set of <html></html> tags inside of the webpage's existing <html></html> tags that would be a syntax error. The code would end up looking like:

<html>
  <head>
    <title>Nested webpage?</html>
  </head>
  <body>
    <html> 
      <h1 class ="special">Important Headline</h1>
    </html>
  </body>
</html>