58

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 ?

4
  • The official references are here: HTML 4 and HTML 5.
    – Jocelyn
    Apr 17, 2013 at 16:48
  • 1
    Please visit [code-vs-pre-vs-samp-for-inline-and-block-code-snippets][1] [1]: stackoverflow.com/questions/4611591/…
    – akushwaha
    Apr 17, 2013 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. Mar 19, 2018 at 22:20
  • 1
    <pre> and its behavior can be kept in mind as the word ”precisely” Jun 21, 2019 at 16:57

2 Answers 2

113

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.

4
  • 44
    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, 2013 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. Mar 19, 2018 at 22:12
  • 6
    @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, 2018 at 18:14
  • 3
    Another point not brought up yet is that <code> is an inline element, and therefore can be placed within other non-block tags (i.e. <p>), whereas a <pre> tag is a block element, and as example, would not render as expected within a <p>.
    – Josh Green
    Jan 10, 2020 at 22:40
56

<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.

4
  • 30
    I agree with W3schools being a bad reference. I use Mozilla Developer Network developer.mozilla.org/en-US/docs/HTML/Element
    – austin
    Apr 17, 2013 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, 2014 at 21:00
  • 5
    @jerrymouse If you have Chrome, you can, using the W3Schools Hider extension chrome.google.com/webstore/detail/w3schools-hider/….
    – Tim Destan
    May 21, 2014 at 1: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). Mar 19, 2018 at 22:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.