An inline element that allows for markup to be visible on the web

There’s a way to make HTML markup (like <h3>, <div class=“clear”/>, <em>, etc.,) visible on a web page. Right, so usually if I edit an HTML page and say

<p>Content of some kind goes here</p>

The <p> element is interpreted by the browser, and disappears for the web viewer. But what if I’m talking about the <p> element, and want people to see it? Isn’t there a way to do this?

I appreciate any insight.

Personally I would just use the HTML entities for the <, <, and >, >, symbols. Alternately, you could use the <pre> which I believe is a block level element, but will display you code as desired.

Woa that <pre> element is scary. It doesn’t do what I want it to. How does it work? Like

<pre>Stuff here. Including a few </span> and stuff.</pre> ?

Your first suggestion is probably best.

I think I get it now. Thanks guys. :slight_smile:

Don’t forget that if you’re showing html markup, you must escape at least the opening angle bracket, i.e. “<” on each element tag. I tend to escape both opening and closing brackets; for symmetry?

I have found it a royal PITA to escape a block of markup as I type, and creating some temp file/buffer for search and replace prior to pasting into my html document to be another.

In a productive editor, as a basic feature, you should be able to select some text and do a search/replace, or any other action, only on that region.

For example, in Emacs it’s called narrowing, as in narrowing the focus. You select your region of interest, narrow the focus to that region, do your thing, and then widen the focus to the whole buffer again.



A lot of editors have a search and replace option where you can choose between a global change and changing just the selected text (assuming you select the text before doing the search).

That’s why I called it a basic feature of a productive editor. There are editors that don’t have this necessary function.



Normally, you should be able to surround the code fragments you want to display literally with <![CDATA[ ... ]]>. Unfortunately, only one browser (Opera) supports this for HTML, as far as I know.

If you’re using XML (including XHTML served properly), a CDATA section is still an option, since browsers that support XML also support CDATA sections.

Other than that, you have to escape every ‘<’ as <. And an inline example should be marked up with <code>...</code>, too.