Stop browser reading tags?

[divtag33]

Hi how do you stop the browser reading tags?

ie if I wanted to write a tutorial on HTML I'd need to be able to tell people to write:

<p>Duck</p>

and not have it appear as Duck (ie have the <p> tags interpreted)

I've tried blockquote and pre tags, but no joy...

[mburt]

Replace "<" with "&lt;" and replace ">" with "&gt;"

[jscheuer1]

mburt is right, that is the correct way to do this but, sometimes that can get to be a bit tedious. I think this is invalid but, it works in most modern browsers:

<textarea cols="30" rows="5" style="border-width:0;font-family:sans-serif;">
<p>Duck</p>
</textarea>

If you allow enough rows and cols for the displayed content there should be no scrollbars and it will look like ordinary text - useful if you have a lot of content of this nature to display.

Or, you can just skip the style and have a textarea for your users to easily know they can select and copy from it.

[Twey]

Better:

<![CDATA[
  <p>Duck</p>
]]>

[mburt]

It would be wise to add 'readonly' to the textarea tag. You could make it like a normal div with some style:

<textarea readonly style="height:300px;width:500px;border:0px;overflow:hidden;font:12px arial"><p>The tags will appear here</p></textarea>

[Twey]

I'm not sure if that boolean shorthand is valid HTML Strict or not, but it's certainly not valid XHTML. For maximum portability, readonly="readonly" is preferable.

[jscheuer1]

I'm not sure if that boolean shorthand is valid HTML Strict or not, but it's certainly not valid XHTML. For maximum portability, readonly="readonly" is preferable.

For HTML, readonly="readonly" is invalid. Or, at the very east, what you call shorthand is the preferred method. And, why worry about portability? Aren't you one of the ones going around telling people not to write XHTML unless it is XHTML?

[mwinter]

I think this is invalid but, it works in most modern browsers:

<textarea cols="30" rows="5" style="border-width:0;font-family:sans-serif;">
<p>Duck</p>
</textarea>

Yes, it is.

To avoid the tediousness, one could just use a region-limited search and replace operation. Any good text editor should be capable of it.

Better:

<![CDATA[ <p>Duck</p> ]]>

In theory, but not in practice unless one is serving an application of SGML or XML to be processed as SGML or XML (for which neither HTML nor XHTML as HTML qualifies).

I'm not sure if that boolean shorthand is valid HTML Strict or not

The document type doesn't matter, and it is valid.

For maximum portability, readonly="readonly" is preferable.

The recommendation has been to the contrary, though it may not be quite as significant as it once was.

For HTML, readonly="readonly" is invalid.

Not at all. The readonly attribute has only one value: readonly.

See towards the end of section 3.3.4 Attribute declarations and appendix B.3.4 Boolean attributes for more information on boolean attributes.

Mike

[Twey]

And, why worry about portability? Aren't you one of the ones going around telling people not to write XHTML unless it is XHTML?

That doesn't mean that it's wrong to use something that's valid in XHTML if it's also valid HTML While there's no downside, there's no real reason not to do so.

The recommendation has been to the contrary

Why so?

[djr33]

Another simple answer... if you're using dreamweaver or any other html wysiwyg editor, just copy and paste the code into the preview view.
That will automatically convert for you.
Then go to the code, and cut/paste that, and it will have the &gt; and &lt; tags all done for you.