How do I show HTML code on a web page.

Hi, I am wanting to show someone a h1 tag like it appears in html

<h1>heading goes here</h1>

How do I get aroudn the browser rendering this tag? I have tried the <pre> and <code> tags but they don't seem to work.

 

Use the XMP tag

<xmp> code here </xmp>

 

Could also include the content with the HTML number.

HTML number translation site www.ascii.cl/htmlcodes.htm

 

There are couple of ways...One is to use a textarea tag as the characters within the <textarea> tags does not get parsed.

<textarea>

Code You Want Display

</textarea>


Another way is to use an html coded Character Set (listed here at the W3C).

Example:

To display

<p><a href="#top"><img src="img/top.gif" border="0" width="33" height="16" alt="go to top" /></a></p>


you would use

&lt;p&gt;&lt;a href="#top"&gt;&lt;img src="img/top.gif" border="0" width="33" height="16" alt="go to top" /&gt;&lt;/a&gt;&lt;/p&gt;


One handy tool for you to convert into html coded Character Set

http://www.felgall.com/htmlt47.htm

 

Cheers everyone, will give those a try, Think I like the look of the text box though.

 

<xmp> and textarea are the wrong way to do it. So yeah, don't do them.

Use the following signs for characters:

< = &t;
> = &lt;
" = &quot;


BP

 

Why are they the wrong ways, will they not validate?

 

I have no clue what xmp is, but a while a text area will validate, it's not semantically the right way to write a site. Textarea means something and "code showing" isn't it.
It would be the same as having a <p> styled in CSS to look like a header to use in place of the <h1>. That will validate too, it's just not semantic (removes the meanings of the tags).

I would recommend the <pre>(preserve) or <code> tags for short bits of code.

 

In almost 5 years, this is the first time I've ever heard of an <xmp> element.

I would use character entities, so would 99% of experienced developers.
&lt; in place of <
&gt; in place of >

Using the character entity of &quot; in place of a quote is a little overboard IMO, but that one's up to you.

<pre><code>
&lt;body&gt;
   &lt;div&gt;text&lt;/div&gt;
&lt;/body&gt;
</code></pre>

Code (markup):

Internet Explorer will act strange in the sense of ignoring newlines with the formatting of a <pre><code> combination sometimes, forcing you to explicitly tell it how to handle it with CSS.

pre code {
   white-space: pre;
}

Code (css):

 

check the below link:

http://www.angelfire.com/nm/thehtmlsource/jazzup/htmlcodes.html

 

Again thanks for all the replies, will try to stick with the semantic methods. ;o)

 

I always use this method, because it works with all browsers.

Q...

 

I've created a little app that will do this automatically for you (if you enter the HTML you want encoded!)

http://www.marcfraser.co.uk/html-encode.php

Good luck!

 

Thanks Marc, That will save me a load of time ;o)

 

Nice job, will use this for future projects!

 

Wow, I have learned a lot from this thread I have been designing for years, and I guess I really have never had to embed HTML code on a HTML page. In class we just briefly went over the <xmp> tag. That sounds pretty obsolete now and doesn't seem to be W3 valid. I guess just ignore my post!