ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu

How to Display HTML code on a Webpage

How to Display HTML code on a Webpage

You must’ve tried adding some piece of html/javascript to a blog post at some point. And to your dismay, the code simply refused to show itself! Instead what you got was the output of the code.

HTML

For example, to display the html code for adding a simple anchor  text-link,

<a href=”http://shoutmeloud.com”>Shoutmeloud</a>

you might have gone crazy, with the result being

Shoutmeloud

In order to prevent this, you can use any of the following ways :

1. Convert all your ‘<‘ and ‘>’ to ‘&lt’ and ‘&gt’ respectively

<a href=”http://shoutmeloud.com”>Shoutmeloud</a>

equivalent :

&lt a href=”http://shoutmeloud.com”&gt Shoutmeloud &lt /a &gt

2. Add the short and simple <xmp> tag to the particular piece of code you want to display as it is.

<a href=”http://shoutmeloud.com”>Shoutmeloud</a>

equivalent :

<xmp> <a href=”http://shoutmeloud.com”>Shoutmeloud</a></xmp>

I like the second one simply because it’s elegant and easier to carry out.

*one more alternative is to use the html-editing mode while adding that piece of code which you want to display.

You may use the <xmp> tag anywhere you like, in the post body, in text-widgets etc.

If you find this post useful, do let me know via comments.

  • Author Bio

  • Latest Post

Article by Samir Saurav Majhi

Samir has written 1 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


    { 10 comments… add one }

    • Matthew

      So I am trying to use the tag, and it works, but it is running off the frame – is there anyway I can make it autowrap at the edge of the frame?

      Reply
    • Scotty

      OMG! You sir, are a saint and scholar! I have been needing that xmp tag for months now. Reach around and pat yourself on the back for me. I will check here first for other solutions I routinely need from now on. 1000 thank you’s my friend! And I agree with John up there, it’s a shame anyone would remove something so helpful from their browser. I just stick with IE, the best, and never have those issues. I write and sell custom mini-pages for bulletins and ads for members on a MMORPG social site and getting code to clients who didn’t want to use any other means of communication other than the built in mail system which acts on html code, so that they not reveal anything other than their game id was a nightmare at times and ate up my profit just trying to get the code to them. If their browser won’t support the xmp tag, then they have a crap browser and can get their ads elsewhere or get a free skype account. lol

      Regards,
      Scotty

      Reply
    • Jessilicious

      Hi! This was SUPER helpful – thank you! I’ll definitely use this again and again. I love the xmp tag – so easy! :)

      Reply
    • john corrigan

      Useful, but you might want to point out that the tag has been deprecated for many years now (it wasn’t even included in html 4 specs), and will not be understood by all browsers — so it should be tested against any browsers you wish to support.
      Which is a shame, really, since it was quite useful, and there really isn’t a good alternative. The tag and tags are only partly useful, and using a tag requires a little more work.

      Reply
      • john corrigan

        Hah, not paying attention and entered the html tag code in as-is. Meant to say:
        Useful, but you might want to point out that the &ltxmp&gt tag has been deprecated for many years now (it wasn’t even included in html 4 specs), and will not be understood by all browsers — so it should be tested against any browsers you wish to support.
        Which is a shame, really, since it was quite useful, and there really isn’t a good alternative. The &ltpre&gt tag and &ltcode&gt tags are only partly useful, and using a &lttextarea&gt tag requires a little more work.

        Reply
    • beben

      this is work, nice…small but usefully

      Reply
      • Samir

        It’s great you found it useful.

        Reply
    • beben

      whats this can use for writing script to for show on post?

      Reply
    • Namit Gupta

      I was searching for this from quiet some time, thanks for sharing :).

      Reply
      • Samir

        I’m glad you found it useful!

        Reply

    Leave a Comment