How do I use indentation in a `tag?`

Question

I have a code tag with some computer code:

<code>
    int main(){  <br/ >
        printf("Hello World!");<br/ >
    }
</code>

But when I display it in the browser, there will be no indentation. How can I do this, besides using  ? Writing them would be a very tedious job.

Possible duplicate of [How to preserve whitespace indentation of text enclosed in HTML
tags excluding the current indentation level of the
tag in the document?](https://stackoverflow.com/questions/4631646/how-to-preserve-whitespace-indentation-of-text-enclosed-in-html-pre-tags-exclu) — mikemaccana, Apr 16 '18 at 14:13

score 16 · Accepted Answer · edited Oct 17 '22 at 18:35

16

<pre>
    <code>
        int main(){  
            printf("Hello World!");
        }
    </code>
</pre>

You can use the "pre" tag, which defines preformatted text. Text in a "pre" element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. It is used when displaying text with unusual formatting, or some sort of computer code. And you will not need additional "br" tags.

Your code should look like the above one.

You can find more about the tag here.

edited Oct 17 '22 at 18:35

str

42,689
17
109
127

answered Feb 08 '14 at 13:49

Lilit.Petrosyan

184
3

I have checked, it gives errors and warnings on your answer too. – Lilit.Petrosyan Feb 08 '14 at 16:10
1

If you have comments on my answer, please comment under it, and specify which of the codes you mean and what error messages you got. – Jukka K. Korpela Feb 08 '14 at 17:03

score 4 · Answer 2 · answered Feb 08 '14 at 14:32

The code element does not change normal HTML formatting rules, which collapse consecutive whitespace to a single space. It does not do much else either, beyond setting the font to monospace by default, though in special cases it may have some effect (e.g., automatic translation software might treat code elements so that their content is left untranslated).

You could use CSS to request different formatting:

<style>
code { white-space: pre }
</style>

But this is unnecessarily fragile (CSS rules might be ignored for various reasons), when you can simply use the pre element (and remove the br tags):

<pre>
    int main(){  
        printf("Hello World!");
    }
</pre>

If you wish to additionally use the code element for some reason, then the valid way is to nest code inside pre, not vice versa. Here you then need to notice that special rules about ignoring a line break after a <pre> tag do not apply here (since there would be an intervening tag), so to avoid getting an extra line break at the beginning, you would need to write like this:

<pre><code>   int main(){  
        printf("Hello World!");
    }</code></pre>

P.S. Neither code nor pre changes the rules about the markup-significant characters < and &, which should be encoded as < and &, respectively. For example, text like a<b&c would need to be written as a<b&c.

score 2 · Answer 3 · answered Feb 08 '14 at 13:16

2

<code>
<pre>
    int main(){  <br/ >
        printf("Hello World!");<br/ >
    }
</pre>
</code>

answered Feb 08 '14 at 13:16

Alex Jurado - Bitendian

1,027
6
9

How do I use indentation in a `tag?`

3 Answers3

Linked

How do I use indentation in a tag?

3 Answers3

Linked

How do I use indentation in a `tag?`