1 
<pre>
    <button>323</button> // I see button
</pre>

<code>
     <button>323</button>  // I see button
</code>

How can I show the code, i.e. plain text in browser ?

And what is then, generally speaking, the purpose of code and pre tags at all ?

Improve this question
10
  • Ctrl + U (on windows)? Commented Nov 29, 2015 at 9:52
  • @Vucko, I need the code in the main window, because the code is part of a lesson. Commented Nov 29, 2015 at 9:55
  • I see your answers and can't believe that there is no a simple tag for this purpose. Ands what is than the purpose of pre and code tag at all ? Commented Nov 29, 2015 at 9:58
  • @bonaca code elements are used to represent code (and are generally inline elements). <pre> elements will preserve any spacing you have (including whitespace). Commented Nov 29, 2015 at 10:00
  • Possible duplicate of How to display HTML tags as plain text Commented Nov 29, 2015 at 10:00

4 Answers 4

Reset to default
4

Use HTML entities (i.e. replacing < with &lt; and < with &gt;) as follows:

<code>
    &lt;button&gt;323&lt;/button&gt;
</code>

And similarly using <pre>:

<pre>
    &lt;button&gt;323&lt;/button&gt;
</pre>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

You need to use &lt; instead of < and &gt; instead of > respectively, for the code that should be displayed in the browser. These are called HTML entities as @BenM mentioned.

Here is a list of all HTML entities: http://dev.w3.org/html5/html-author/charref

Checkout this working example:

<pre>
    &lt;button&gt;323&lt;/button&gt;
</pre>

<code>
     &lt;button&gt;323&lt;/button&gt;
</code>

Note that <pre> keeps the indent while <code> doesnt.

Source: http://www.sitepoint.com/everything-need-know-html-pre-element/

Should you be using <pre> or <code> or something else?

Readup: <code> vs <pre> vs <samp> for inline and block code snippets

Improve this answer

Comments

1

Either the <code> tag or the <pre> tag works here, but you need to use codes to get the proper glyphs. Using <pre> will keep your formatting (i.e. the spaces in front).

<code>
    &lt;button&gt;323&lt;/button&gt;
</code>

or 

<pre>
    &lt;button&gt;323&lt;/button&gt;
</pre>

Details:

&lt; gives the <

&gt; gives the >

Improve this answer

11 Comments

There's no need to wrap <code> inside of <pre>.
If he wants to keep his indent, I think we need it. Just using the code tags eats the spaces he's got in front there.
1. Where does the OP says the indent needs to be retained? 2. <pre> alone will do that.
His example asks how to show ` <button>323</button>` with spaces in it, so I put in the <pre> to keep them. Just seemed to be sticking with his exact example.
It's like one line from his code, which has spaces in it. I even explain that my example has <pre> just to keep his formatting.
|
0

Try using textarea element with disabled attribute set to true 

textarea:disabled {
  min-width:200px;
  max-width:200px;
  min-height:50px;
  max-height:50px;
}
<textarea disabled="true">
  <button>323</button>
</textarea>

Improve this answer

8 Comments

@BenM Not certain about meaning of semantic , at present Question ?
You must have heard of the semantic web? w3.org/standards/semanticweb
Also, not sure if OP wants to see the textarea. Maybe hide the borders?
@BenM Yes. Not certain how applicable to present Question ? , possible solution at post ? Appear capable of being parsed by a consumer of semantic data ?
@RahulDesai Did not adjust border or background ; appeared OP expected <code> type display ? , using html tags
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.