3

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?

2

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;
}
  • 1
    Thanks for your answer and thoughts around this. However your suggestion makes me think you misunderstood why I used <pre>, it's not to emulate a look of anything, it's just because I like writing pre-formatted text, like here at SE :) It also makes the text a bit easier to read while working with it to get rid of the <p>s. – PetaspeedBeaver Jan 15 '18 at 2:56
  • 1
    <pre> is for unformatted text in the HTML while <p> is designed for paragraphs, <span> and <div> are favoured for tag-lines or shorter sentences but also okay to use on longer paragraphs. The markup you see on SE is due to <code> and in conjunction with <pre>. Either way... there should be no reason to use <pre> for styling purposes, that can be achieved with CSS classes within other elements. – Simon Hayter Jan 15 '18 at 9:55
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

  • You have some really good points there ... Thanks! – PetaspeedBeaver Jan 17 '18 at 3:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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