Is using the <pre> tag for ordinary text in a page likely to impact SEO?

Question

When coding pages by hand, I sometimes want to skip having to write all those <p> tags and use:

<pre>
  <h2>Heading written as usual is no problem within a pre</h2>

  <i>First paragraph</i> is here.

  This is the second paragraph, but since I use the pre-tag I don't need to use the p tag to get a space in between the two. 

  Next paragraph etc &hellip;
</pre>

Which if css:

pre {
  whitespace: normal

and same font as the regular text is set for<pre>s will render something like this:

---

Heading written as usual is no problem within a pre

First paragraph is here.

This is the second paragraph, but since I use the pre-tag I don't need to use the p tag to get a space in between the two.

Next paragraph etc …

---

Is using the <pre> to save on typing some <p>s in this way likely to affect SEO? If so, why and how?

Answer 1

Both Google & Bing does not consider markup as a ranking factor, it uses markup to understand content and not directly reward, this includes Schema and other micro data formats.

So using <pre> or <p> is not going to going to make any real world differences in terms of rankings but that's not to say you should treat <pre> the same as <p> because some e-readers and browsers may render those differently, never mind it's also lazy to do this way.

Your gap between elements should come from the CSS not using a hack like PRE because as mentioned browsers including different versions of those browsers can render them differently if not set by the CSS. If you want everything to look the same across devices and browsers then use the CSS, that's what it was designed for.

Best practice would be to mimic the style of <pre><code> by adding a container around the <p> with something like:

<!-- HTML -->
<div class="pre">
   <h2>Identical Header</h2>
   <p>This looks identical to PRE</p>
   <p>I have a gap because P and H have margin-bottom</p>
</div>

/* CSS */
.pre {
    whitespace: normal;
    font-size: 1em;
    font-family: 'Same Font As PRE or CODE';
}
.pre h1, .pre h2, .pre h3, .pre h4, .pre h5 {
    margin-bottom: 1.5em;
    font-size: 1.5em
    font-family: inherit;
}
.pre p {
    font-size: inherit;
    font-family: inherit;
    margin-bottom: 1em;
}

Answer 2

Not strictly an SEO answer, but your code sample is not actually valid HTML, so rendering is likely to differ between browsers (notably between the big two: Chrome and Firefox). Some browsers will close the pre element before the opening h2, because pre elements can only contain phrasing content (ie. no block-level elements like Hn, p, ul, etc.).

Consequently this would also break if you ever needed to traverse your content using the DOM.

So, it's not really an SEO issue, but a browser rendering issue that should dissuade you from marking up your content like this.

If you want to save on explicitly marking up your content then perhaps write your content in markdown ("like here at SE") and incorporate a markdown parser in your site (or as part of your workflow). Or invest in a decent editor (or plugins) that auto-complete your HTML markup as you type?

Reference:
http://w3c.github.io/html/single-page.html#the-pre-element