I'm the author of Web Cash - a blog about web design, writing, and making cash on the net. You can read more about How to Display Sample HTML, or check out the latest HTML Tutorials.
If you’re looking to write about web design and HTML, you’ve no doubt run into this problem. How do you display sample mark-up that the user can see?
The problem is simple. You want to display the sample markup. The user’s browser wants to render it as actual mark up. You need to come up with something to tell the browser - “Hey, this isn’t supposed to be rendered!”
There are a few ways to do this.
First, you could use an xmp tag.
The xmp tag was developed for displaying "example" HTML. Once the browser sees an xmp tag, it stops rendering all HTML until it sees a closing tag.
However, the tag is deprecated. It's no longer included in the HTML standards - which will prevent your site from validating - and it may not be supported by all browsers. Use at your own risk.
A second, more reliable method, is to include the markup in a textarea box.
When you create a textarea element, you can include text in between the opening and closing tags as "default" text. Any HTML in this text remains unrendered - which allows you to easily display your sample markup.
There are two problems with this, though. First, you can't include a closing textarea tag within your example - or it will prematurely close the textarea that you are using to display your example. You also cannot style the text at all with css.
The third solution - probably the best - is to escape all of the signs in the sample code.
If you replace < with <, the browser won't think that the tag is real html. It will simply display the markup.
This is by far the surest method of displaying your sample HTML, the only problem is that you need to escape all of the characters. However, you can take a shorcut - use this form to do the escaping for you.
Copy and paste your own code in, and the escaped code will be created on the spot.
- Related Articles
- Related Q&A
- Three Ways to Display Sample Html in a Web Browser
- Using Perl and Regular Expressions to Process Html Files - Part 2
- Doctors in Favor of Prescription Drug Samples
- Prescription Drug Samples Help Gauge Effectiveness of New Medication for Patients
- Free Drug Samples Benefit Uninsured and Medicare Patients
- Access to Prescription Drug Samples Needed for Medicare Patients
- Phrma and Others Endorse Use of Prescription Samples by Doctors
- First Steps to Using the Free Html Editor Kompozer to Create a Profitable Website
Website Design Dos and Don’ts
By: Business Local Listings | 06/07/2009contracting an expert web site developer like Web Dot Com Website Development Philippines, Inc. The company’s programmers and designers who are specialists in php, mysql, JavaScript and other applications craft low cost advanced web site development packages with graphic design and multimedia components including flash animation development. These websites are artistically appealing and effectively achieve the client’s online objectives.
Website Design – An Eye Opener
By: Caitlina Fuller | 05/07/2009There are many reasons that a person or a company would want a website. Internet marketing is a huge reason a company would likely have a website on the internet.
The Differences between Web Development and Web Design
By: Caitlina Fuller | 05/07/2009A person can consider themselves as a web designer if they create websites that are considered social networking websites but as professional web designers are concerned, their job consists of much more that creating a site to upload family pictures.
Corporate Business Promotion, Corporate Marketing Technology
By: Jigney Bhachech | 03/07/2009Offer a wide range of professional seo services like corporate business promotion, search engine marketing, search engine optimization, email marketing, pay per click advertising, seo management, seo maintenance and seo consulting services to launch a successful business website promotion campaign.
The Uses of Color Arts - Photoshop Brush Tools
By: Manish Shrivastava | 03/07/2009Over the past several years, a strong trend towards using various Photoshop Tools is seen in website design and development. Increasingly, clients ask for the ability of their web sites to reach maximum potential customers as possible.
Reasons to Have a Website Redesign
By: Steve Irron | 03/07/2009Website redesigning could be a simple task to perform. Though, it can also be a difficult task. There are certain numbers of things which you can do in order to make your website more powerful than before.
Should You Outsource Pay-Per-Click? - Here's “Seven” Good Reasons Why!
By: Chriss Tyrrell | 03/07/2009One huge difference between pay-per-click agencies and yourself, is that these agencies tend to share and maintain a much closer business relationship with search engine managers, which allows them to do things like resolve issues and contention with these account managers and also upload data much more faster and efficiently. The end result is that their higher level of prioritized service translates directly to a more positive bottom line for these agencies and those who seek out their service
Search Engine Optimisation For Business Success
By: Chriss Tyrrell | 03/07/2009Its a fact that the Internet has become a far more competitive place to do business. So the old adage, “build a better mouse trap and they will buy it” just doesn't apply any more. Now it seems its “build a better mouse trap, develop an effective SEO campaign and then they will know where to come and buy it”.
How to Encrypt and Hash Passwords in Php
By: Brian Rock | 02/02/2008 | Web DesignIf you want to build a user-management system - or work on someone else's - you should know a few basics about how passwords are encrypted or hashed. In other words, how are they made safe for storage?
Three Ways to Display Sample Html in a Web Browser
By: Brian Rock | 16/01/2008 | Web DesignIf you want to display some sample HTML, you've got a tiny problem. The browser thinks that it should render the code. This guide suggests three ways that you can force the browser to display the markup un-rendered.