• X

    How to Display HTML code on a Webpage

    By in Tips and trick

    Bluehost hosting

    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 How to Display HTML code on a Webpage

    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.

    Subscribe to Download WordPress Guide Worth $99

    Discover more awesome articles

    Article by

    Samir has written 1 articles.

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

    { 10 comments… read them below or add one }

    Namit Gupta

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

    Reply

    Samir

    I’m glad you found it useful!

    Reply

    beben

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

    Reply

    beben

    this is work, nice…small but usefully

    Reply

    Samir

    It’s great you found it useful.

    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

    Jessilicious

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

    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

    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

    Leave a Comment

    Previous post:

    Next post:

    `