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 HTML Text Preformatted Text

Posted by nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

How to include a HTML codes inside a HTML document?

I have tried to include a HTML codes inside a HTML document through html <code> element

But web browsers such as Google Chrome, Mozilla Firefox do not display HTML codes inside html <code> element.

What I see is a blank space instead of HTML codes. Here is the HTML code I used. 

<h1 id="global">Global Structure - HTML</h1>
          <pre>
              <code>
                <!DOCTYPE html>
                <html>
                    <head>
                    </head>
                    <body>
                    </body>
                </html>
              </code>
          </pre>

Thanks in advance,

Regards,

Karthikeyan Palaniswamy

4 Answers

Mousa Alqarni
Mousa Alqarni
22,619 Points

but it like this

chenge the <> to & lt; & gt;

delete the space between & lt; and & gt;

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Mousa Alqarni Thanks for your response. It works perfectly now. Many thanks!

Meredith Wiegman
Meredith Wiegman
1,227 Points
Meredith Wiegman
Meredith Wiegman
1,227 Points

The < and > are reserved characters in HTML. Character entities are used to display reserved characters in HTML. In order to represent the < and >, the character entities &lt; or &#60; (for < ) and &gt; or &#62; (for > ) should be used. Source

For example, instead of writing:

<!DOCTYPE html>

You would write:

&#60;!DOCTYPE html&#62;

Unsubscribed User
Unsubscribed User
3,136 Points
Unsubscribed User
Unsubscribed User
3,136 Points

Adrain, the symbols '<' and '>' when seen by your browser assume that you're about to start another html tag. that's the reason your initial code would not display since it thinks that you're simply nesting a couple more void tags into the <pre></pre> element. however, since you want the tag to show, you'll have to include the code representation for the characters: < and >. the character code for < is &#60 and the code for > is &#62. so in place of actually putting in < and > you put in the codes. this way the browser interprets the code and displays the corresponding character. character codes can be found in this link http://www.ascii.cl/htmlcodes.htm and an example code is provided below

  <p> The code below is a snippet of html code i want to include here </p>
    <pre><code>
        &#60 !doctype html &#62

            &#60html lang="en"&#62

            &#60head&#62 &#60/head&#62

            &#60body&#62 

                &#60p&#62 this will be displayed &#60p&#62

            &#60/body&#62

            &#60/html&#62
        </code>
    </pre>
Adrian Hoyle
Adrian Hoyle
3,596 Points
Adrian Hoyle
Adrian Hoyle
3,596 Points

Could someone please elaborate more on this? Maybe show an example.