56

How does a <pre> HTML tag differs from <code> html tag.

I have checked on W3Schools page, it seems they are just the same.

If there any major difference between them ?

Parimal Raj
  • 20,189
  • 9
  • 73
  • 110
  • The official references are here: [HTML 4](http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html) and [HTML 5](http://www.w3.org/TR/2012/CR-html5-20121217/index.html#elements-1). – Jocelyn Apr 17 '13 at 16:48
  • Please visit [code-vs-pre-vs-samp-for-inline-and-block-code-snippets][1] [1]: http://stackoverflow.com/questions/4611591/code-vs-pre-vs-samp-for-inline-and-block-code-snippets – akushwaha Apr 17 '13 at 16:49
  • 2
    This question is not answered below in a factual unambiguous way. As far as I know, the only actual practical physical difference is that spaces and NLs are rendered in Pre, not in Code (looking at the answers below, before I did my own research, I thought .. well Code probably does that too, but it doesn't). So I can't answer the question better because someone closed it (and cross ref'd a question which is quite different and certainly does NOT address the differences). Lesson? STOP CLOSING QUESTIONS. – www-0av-Com Mar 19 '18 at 22:20
  • 1
    `
    ` and its behavior can be kept in mind as the word _**”pre**_**cisely”**
     – Soner from The Ottoman Empire Jun 21 '19 at 16:57

2 Answers2

111

Don't go to w3schools. Check the w3c documentation for pre and code instead.

PRE:

The PRE element tells visual user agents that the enclosed text is "preformatted". When handling preformatted text, visual user agents:

  • May leave white space intact.
  • May render text with a fixed-pitch font.
  • May disable automatic word wrap.
  • Must not disable bidirectional processing.

CODE:

Designates a fragment of computer code.

gpojd
  • 22,558
  • 8
  • 42
  • 71
  • 43
    I guess it's worth nothing that w3schools is not affiliated with the W3 consortium, which is why they tend to be inaccurate. I never actually knew that until a few months ago. – austin Apr 17 '13 at 16:53
  • 10
    Sorry, but this doesn't answer the question. You don't give actual practical physical differences. You just give differences in documented description (and have an unnecessary pop at w3schools which I use constantly as a quick reference which is all it's designed to be). I can't answer the question because someone closed it (and cross ref'd a question which is quite different). The only difference I know of is that Pre preserves spaces, Codes doesn't. – www-0av-Com Mar 19 '18 at 22:12
  • 5
    @user1863152, This question is 5 years old. Maybe w3schools has changed since when I originally answered, but at the time I answered the site was a terrible reference. The information was dated, innacurate, and just plain wrong. As for my answer, the way W3C defines the tags is clear on how the browsers are supposed to handle the styles and what they are used for. – gpojd Mar 21 '18 at 18:14
  • 3
    Another point not brought up yet is that is an inline element, and therefore can be placed within other non-block tags (i.e.

    ), whereas a 

     tag is a block element, and as example, would not render as expected within a 
    .
     – Josh Green Jan 10 '20 at 22:40
55

<pre> says "The whitespace in this element is important" (so new lines and spaces get rendered as new lines and spaces).

<code> says "This is code".

They have nothing in common aside from being HTML elements.

W3Schools page, it seems they are just the same

W3Schools is often wrong, often out of date, and often teaches worst practises. If they claim the two elements do the same thing, then that is just another reason to avoid the site.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 29
    I agree with W3schools being a bad reference. I use Mozilla Developer Network https://developer.mozilla.org/en-US/docs/HTML/Element – austin Apr 17 '13 at 16:49
  • 3
    W3schools is a pretty bad reference. Unfortunately, they are google's preferred choice in search results. I just want to remove all their pages in my search results. – jerrymouse Jan 22 '14 at 21:00
  • 5
    @jerrymouse If you have Chrome, you can, using the W3Schools Hider extension https://chrome.google.com/webstore/detail/w3schools-hider/igiahejkpbnbnekdaefddmdceocmjpll?hl=en-US. – Tim Destan May 21 '14 at 01:59
  • 7
    This doesn't really answer the question either. You give a hint at actual practical physical differences such as spaces and NLs, but you don't state this as fact (ie: looking at your answer, before I did my own research, I thought .. well Code probably does that too). Like others, you have an unnecessary pop at w3schools which I find an OK quick reference -- all it's designed to be). I can't answer the question because someone closed it (and cross ref'd a question which is quite different). – www-0av-Com Mar 19 '18 at 22:13