How Browsers Handle White Space

Understanding whitespace behaviour is essential when choosing between <p> and <pre>.

In ordinary HTML text, browsers typically collapse sequences of spaces, tabs and line breaks into a single rendered space. This means that adding several spaces or pressing Enter repeatedly in the source code does not necessarily produce the same spacing in the browser.

For example:

<p>
  Semantic HTML
  helps organise
  webpage content.
</p>

Although the source is spread across several lines, the browser normally displays the sentence as one continuous paragraph.

By contrast:

<pre><code>Semantic HTML
helps organise
webpage content.</code></pre>

The line breaks are preserved in the rendered output.

Controlling Whitespace with CSS

The CSS white-space property provides additional control over how text is displayed.

For a responsive code example, pre-wrap may help prevent long lines from extending beyond the content area. However, wrapping code can make indentation or line-by-line comparisons less convenient. Horizontal scrolling is often preferable for long code lines.

.article-content pre {
  white-space: pre;
  overflow-x: auto;
}

This preserves the code's formatting and allows the user to scroll horizontally when necessary.

CSS changes presentation, not the fundamental meaning of an element. A paragraph styled with white-space: pre-wrap remains a paragraph; it does not become a semantic substitute for <pre>.

Comparison Matrix and Core Best Practices

The following table summarises the main differences between the three elements.

This is a semantic HTML table: <thead> groups the header row, <tbody> groups the data rows, and each column heading uses <th scope="col"> to identify the column's purpose.

Keep these principles in mind when formatting text:

• Use <p> for paragraphs, not as a general-purpose spacing element.
• Use <blockquote> only when the content is a genuine block quotation.
• Use <q> for short inline quotations where appropriate.
• Provide visible attribution when readers need to identify a quotation's source.
• Use <cite> for the title of a cited work, not simply a speaker's name.
• Use <pre><code> for code samples that require preserved formatting.
• Escape HTML characters in code examples so that the markup is displayed rather than executed.
• Use CSS to manage spacing, typography, colours, borders and responsive behaviour.
• Do not rely on colour, indentation or visual appearance alone to communicate meaning.

Complete Blogger-Safe HTML Example

The following example brings the concepts together in a single article section. It uses semantic HTML, visible headings, a properly structured quotation example, preformatted code and a comparison table.

Paste it into the HTML view of a Blogger post. Replace the quotation placeholders before publishing.

<div class="article-content">

  <h2>Understanding Text Formatting in HTML</h2>
  <p>
    Semantic HTML helps developers communicate the purpose of
    content. Choosing the right element improves the structure
    and maintainability of a webpage.
  </p>
  <p>
    For example, <strong>meaningful markup</strong> is preferable
    to using HTML elements solely to change appearance.
    The <code>&lt;p&gt;</code> element represents a paragraph.
  </p>

  <h3>Using a Block Quotation</h3>
  <figure>
    <blockquote cite="https://example.com/source">
      <p>[PLACEHOLDER ONLY: Insert a verified quotation here.]</p>
    </blockquote>
    <figcaption>
      Source: <cite>Title of the Source</cite>
    </figcaption>
  </figure>

  <p>
    Replace the example source with a real, relevant source.
    Do not publish the placeholder as if it were a genuine quote.
  </p>

  <h3>Displaying HTML Code</h3>
  <p>
    The following example shows how an article section can
    contain a heading and a paragraph.
  </p>

  <pre><code>&lt;article&gt;
  &lt;h2&gt;A Semantic Section&lt;/h2&gt;
  &lt;p&gt;This is a paragraph.&lt;/p&gt;
&lt;/article&gt;</code></pre>

  <h3>Comparing the Elements</h3>
  <table>
    <thead>
      <tr>
        <th scope="col">Element</th>
        <th scope="col">Main purpose</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>&lt;p&gt;</code></td>
        <td>Organises paragraph text.</td>
      </tr>
      <tr>
        <td><code>&lt;blockquote&gt;</code></td>
        <td>Identifies a block quotation.</td>
      </tr>
      <tr>
        <td><code>&lt;pre&gt;</code></td>
        <td>Preserves preformatted whitespace.</td>
      </tr>
    </tbody>
  </table>

  <h3>Final Checklist</h3>
  <ul>
    <li>Choose elements according to their meaning.</li>
    <li>Keep paragraphs separate and logically organised.</li>
    <li>Identify quotation sources accurately.</li>
    <li>Preserve code formatting where necessary.</li>
    <li>Use CSS for visual styling rather than misusing HTML.</li>
  </ul>

</div>

Blogger compatibility note: this example does not require JavaScript or an external library. Blogger themes can vary, so check the published post for table overflow, code wrapping and default heading styles. If Blogger or your theme modifies pasted markup, inspect the HTML view after editing.

Blogger-Ready Visual Styling

Semantic HTML defines what the content means; CSS determines how it looks. To improve readability without changing the HTML's meaning, add the following CSS through your Blogger theme's custom CSS area, if available.

The rules are scoped to .article-content so they are less likely to affect unrelated parts of the theme.

.article-content {
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.article-content h2 {
  margin: 1.8em 0 0.7em;
  line-height: 1.35;
}

.article-content h3 {
  margin: 1.5em 0 0.6em;
  line-height: 1.4;
}

.article-content p {
  margin: 0 0 1.2em;
}

.article-content blockquote {
  margin: 1.5em 0;
  padding: 0.8em 1.2em;
  border-left: 4px solid #64748b;
  background: #f8fafc;
}

.article-content blockquote p {
  margin-bottom: 0.5em;
}

.article-content figcaption {
  margin-top: 0.6em;
  font-size: 0.9em;
  color: #475569;
}

.article-content pre {
  max-width: 100%;
  padding: 1em;
  overflow-x: auto;
  white-space: pre;
  background: #f1f5f9;
  border-radius: 6px;
  line-height: 1.6;
}

.article-content code {
  font-family: Consolas, "Courier New", monospace;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}

.article-content th,
.article-content td {
  padding: 0.75em;
  border: 1px solid #cbd5e1;
  text-align: left;
  vertical-align: top;
}

.article-content th {
  background: #e2e8f0;
}

.article-content ul {
  padding-left: 1.5em;
}

@media (max-width: 600px) {
  .article-content table {
    display: block;
    overflow-x: auto;
  }

  .article-content blockquote {
    padding: 0.7em 0.9em;
  }
}

If the CSS is not available in your theme's customisation panel, the article can still work without it. The browser will apply its default styles, although the final appearance may be less polished.

The <p>, <blockquote> and <pre> elements may all display text, but each serves a distinct purpose. Paragraphs organise ordinary prose, block quotations distinguish substantial quoted material, and preformatted text preserves whitespace when the original layout matters.

Choosing the correct element improves the clarity of the HTML document and helps other tools interpret its content. Combining semantic markup with sensible CSS also produces pages that are easier to maintain and adapt to different screen sizes.

For Blogger publishers, the practical rule is straightforward: write meaningful HTML first, apply visual styling separately, and test the final result after publishing. When every element reflects the content's actual purpose, a webpage becomes more than visually organised—it becomes better structured, more accessible and easier to understand.