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

HTML

Adam Fajder
Adam Fajder
5,182 Points
Posted by Adam Fajder
Adam Fajder
5,182 Points

Should I use the entity references inside <pre> tags?

https://teamtreehouse.com/library/html-entities-and-reserved-characters

In the teacher's notes the example for <pre> tags uses escape codes, however if I understand correctly the <pre> tags should keep the text as it is. I checked the Preformatted Text element description on https://developer.mozilla.org, linked in the teacher's notes and theres is an example without escape codes:

<pre>

     \   ^__^ 
      \  (oo)\_______
         (__)\       )\/\
             ||----w |
             ||     ||

</pre>

So I am not sure which rule to follow for <pre></pre>. Should I use for example "<" or "& l t ;" when I'm inside of a pre tag?

1 Answer

theodevries
theodevries
15,895 Points
theodevries
theodevries
15,895 Points

Hi Adam,

It's a good question.

The HTML code is still interpreted in <pre> tags. As far as I know the only way to show html tags for the user is to use html entities. The <pre> tag makes no difference for the interpretation and is not meant to show html as text. The thing with <pre> is that it keeps your text nicely formatted (monospaced font). That's why the mozilla example makes a drawing inside the pre tags. Than there is no way font settings on the users computer will mess up the drawing. I liked the answer in the link below where they said: <pre> means "White space in this markup is significant"

See also this link that touches your question: https://stackoverflow.com/questions/11386586/how-to-show-div-tag-literally-in-code-pre-tag

Conclusion. You need to use the entity references in the <pre> tags to show the user html tags in the browser.

Kind regards

Adam Fajder
Adam Fajder
5,182 Points
Adam Fajder
Adam Fajder
5,182 Points

Thank you for the detailed answer!