previewing HTML code in an HTML page - html

Question

I want to preview some HTML code in an HTML page. but when I do this, the browser treats it as a actual HTML, instead of just previewing it (including its tags for example). How can I prevent this from happening?
You may think of this page as a tutorial to HTML that wants to present some HTML examples to the learners.

Answer 1

Turn the < signs to < and the > signs to >.
htmlspecialchars() will do this for you in PHP.

Answer 2

Put the HTML code between <xmp></xmp> tags.

Answer 3

Here's a JavaScript module I wrote for writing a report. The user can enter HTML or Markdown in a textarea, and then see the finished result, and toggle between them.
function Report (id) {
this.div = gel(id);
this.div.style.height = '100%';
this.trip;
}
//initializes the Report object and renders the HTML of the report to this.div
Report.prototype.init = function(trip) {
this.report = {'author':trip.owner,
'time_created':trip.time_created,
'title':trip.title,
'text':trip.summary,
'url':trip.url,
'category':trip.category,
'id':trip.id}
this.div.appendChild(this.renderHTML());
}
//show the edit form when the user clicks the edit link
Report.prototype.editForm = function() {
var r = this.report;
var form = dec('form');
form.action = '/trips/submit_link';
form.method = 'POST';
var t = dec('table');
t.style.width ='95%';
t.style.paddingBottom ='10px';
var tr = dec('tr');
t.appendChild(tr);
var td = dec('td');
td.style.width = '15%';
var strong = dec('strong');
strong.appendChild(dct('Title'));
td.appendChild(strong);
tr.appendChild(td);
td = dec('td');
td.style.width = '100%';
var input = dec('input');
input.type = 'text';
input.style.width = '100%';
input.className = "required"
input.name = 'reportTitle';
input.value = r.title;
td.appendChild(input);
tr.appendChild(td);
tr = dec('tr');
t.appendChild(tr);
td = dec('td');
var input = dec('input');
var strong = dec('strong');
strong.appendChild(dct('URL '));
td.appendChild(strong);
tr.appendChild(td);
td = dec('td');
input.type = 'text';
input.name = 'reportURL';
//input.className = "validate-url"
input.value = r.url;
input.style.width = '100%';
td.appendChild(input);
tr.appendChild(td);
form.appendChild(t);
var strong = dec('strong');
strong.appendChild(dct('Summary or Report '));
form.appendChild(strong);
var input = dec('textarea');
input.style.width = '96%';
input.style.height = '350px';
input.name = 'reportBody';
var converter = new Showdown.converter();
input.innerHTML = converter.makeHtml(r.text);
input.style.marginTop = "5px";
input.style.marginBottom = "5px";
form.appendChild(input);
var strong = dec('strong');
strong.appendChild(dct('Category'));
strong.style.marginRight = '10px';
form.appendChild(strong);
var input = dec('input');
input.type = 'text';
input.name = 'category';
input.style.width = '75%';
input.value = r.category;
form.appendChild(input);
form.appendChild(dec('br'));
form.appendChild(dec('br'));
input = dec('input');
input.type = 'submit';
input.value = 'Save';
input.style.cssFloat = 'left';
input.style.styleFloat = 'left';
input.style.fontWeight = 'bold';
form.appendChild(input);
input = dec('input');
input.type = 'button';
input.value = 'Cancel';
input.style.color = '#cc5500';
input.style.fontWeight = 'bold';
input.style.cssFloat = 'right';
input.style.styleFloat = 'right';
var self = this;
input.onclick = function() {
rac(self.div);
self.div.appendChild(self.renderHTML());
}
form.appendChild(input);
input = dec('input');
input.type = 'hidden';
input.name = 'tripID';
input.value = tripID;
form.appendChild(input);
return form;
}
//renders the HTML of the report to this.div
Report.prototype.renderHTML = function() {
var report = this.report
var rDiv = dec('div');
rDiv.style.height = '100%';
var h1 = dec ('h1')
if (report.url) {
var a = dec('a')
a.href = report.url;
a.target = '_blank';
a.appendChild(dct(report.title));
h1.appendChild(a);
var img = dec('img');
img.src = '/site_media/images/external_link.gif';
img.style.marginLeft = '5px';
h1.appendChild(img);
} else {
h1.appendChild(dct(report.title));
}
if (report.author == user) {
var a = dec('a');
var self = this;
a.onclick = function() {
rac(self.div);
self.div.appendChild(self.editForm());
attachToForms();
}
a.className = 'jLink';
a.appendChild(dct('(edit)'));
h1.appendChild(dct(' '));
h1.appendChild(a);
}
rDiv.appendChild(h1);
rDiv.appendChild(dct('Posted on '));
rDiv.appendChild(dct(report.time_created));
rDiv.appendChild(dct(' by '));
var a = dec('a');
a.href = '/user/' + report.author;
a.appendChild(dct(report.author));
rDiv.appendChild(a);
if (report.url) {
var div = dec('div');
div.style.color = 'green';
div.style.fontSize = '.8em';
div.appendChild(dct(report.url));
rDiv.appendChild(div);
}
rDiv.appendChild(dec('hr'));
var div = dec('div');
div.style.height = '75%';
div.style.overflowY = 'auto';
if (report.text) {
var converter = new Showdown.converter();
div.innerHTML = converter.makeHtml(report.text);
}
rDiv.appendChild(div)
rac(this.div)
this.div.appendChild(rDiv)
return rDiv;
}

Answer 4

I'm not sure what you mean by 'previewing' the html code, since you're seeing it when you are typing it into your text editor. Perhaps you're looking for the "View Source" option in a web browser when visiting a page?
If you are looking to prevent a browser from 'eating' your html code and interpretting it, and are interested in seeing the code rather than rendering it, you can use htmlspecialchars().