Well-structured web content is about more than choosing the right font, adjusting line spacing or making a page look attractive. HTML provides specific elements that communicate the meaning and structure of text to browsers, search engines, assistive technologies and other tools that interpret web pages.

Three elements are particularly useful when working with text: <p>, <blockquote> and <pre>. Although all three can display text, they serve different purposes. The paragraph element groups ordinary prose, the block quotation element identifies a substantial quotation, and the preformatted text element preserves whitespace and line breaks.

Understanding these distinctions helps developers write more accessible, maintainable and meaningful HTML. It also prevents a common mistake: choosing elements simply because their default appearance suits a particular design.

This guide explains when to use each element, how browsers handle whitespace, and how to implement semantic text formatting in a Blogger article.

The Paragraph Tag (<p>): Beyond Mere Line Breaks

The <p> element represents a paragraph of text. It is intended for a self-contained block of prose, such as an introduction, an explanation, a description or a concluding statement.

Consider this example:

<div class="article-content">
  <p>
    Semantic HTML helps developers communicate the purpose
    of content through meaningful elements.
  </p>

  <p>
    Clear structure can improve accessibility, maintainability
    and the consistency of a website.
  </p>
</div>

Each paragraph is marked explicitly. The browser normally displays these paragraphs as separate blocks, with spacing determined by its default stylesheet or the website's CSS.

Structural blocks versus inline spans

HTML distinguishes between elements that organise blocks of content and elements that operate within a line of text.

The <p> element represents a paragraph, while inline elements such as <strong>, <em>, <code> and <span> can appear within paragraph content.

For example:

<p>
  Always choose <strong>semantic HTML</strong> when the meaning
  of the content matters. Use <code>&lt;p&gt;</code> for paragraphs
  and <em>emphasis</em> where appropriate.
</p>

Here, <strong> indicates importance, <em> conveys emphasis, and <code> identifies a fragment of computer code. These elements communicate more than appearance alone.

The <span> element is a generic inline container. It is useful when a specific piece of text needs a class or other styling hook but has no more appropriate semantic element.

<p>
  The current status is
  <span class="status-label">under review</span>.
</p>

The class allows the phrase to be styled with CSS without changing the meaning of the surrounding paragraph.

A paragraph should not be used simply to create vertical spacing. Similarly, multiple <br> elements should not be inserted to simulate separate paragraphs. Use separate <p> elements for separate paragraphs and CSS for layout.

It is also important to remember that <p> has content restrictions: it cannot contain arbitrary block-level structures such as another paragraph, a <div> or a <blockquote>. Close the paragraph before introducing another block element.

Meaningful Quotations with <blockquote>

The <blockquote> element represents a section of content quoted from another source. It is appropriate when a quotation forms a distinct block rather than appearing as a short phrase within the surrounding sentence.

For instance, a web development article might include a verified quotation from a published technical guide:

<figure class="quoted-source">
  <blockquote cite="https://example.com/technical-guide">
    <p>[PLACEHOLDER ONLY: Insert a verified quotation from the original source here.]</p>
  </blockquote>

  <figcaption>
    Source: <cite>Title of the Technical Guide</cite>
  </figcaption>
</figure>

Important: The quotation and URL above are placeholders, not a genuine quotation or verified source. Replace them with accurate source material before publication, or remove the example if no suitable quotation is available.

The <figure> element groups the quotation with its caption, while <figcaption> provides a visible description or attribution. This structure is useful when the quotation and its source information are presented as one content unit.

The difference between the cite attribute and visible attribution

The cite attribute can provide the URL of the source from which the quotation was taken. However, it does not automatically display the source's name, author or link on the page.

If readers need to know where a quotation came from, include visible attribution in the document.

For example:

<blockquote cite="https://example.com/research-report">
  <p>[PLACEHOLDER ONLY: Insert an accurately transcribed quotation.]</p>
</blockquote>

<p>
  Source: <cite>Title of the Research Report</cite>.
</p>

In this example, the source title is visible to readers, while the cite attribute provides source metadata. The URL must be replaced with the real source URL before publication.

The <cite> element is intended for the title of a creative work or cited source, such as a book, report, article or film. It should not be used solely to mark the name of the person who said something.

When should you use <blockquote> or <q>?

Use <blockquote> for a substantial quotation that deserves its own block. Use <q> for a short quotation embedded naturally within a sentence.

<p>
  The guide describes semantic HTML as
  <q>[PLACEHOLDER ONLY: Insert a short, verified quotation.]</q>
  within its discussion of accessible web development.
</p>

Replace the placeholder with a genuine quotation before publishing. If the wording is your own summary rather than a quotation, remove the quotation element and write the sentence as a normal paraphrase.

Do not use <blockquote> merely to indent an announcement, create a promotional callout or make ordinary text look different. Use an appropriate element for the content's meaning and CSS for visual presentation.

Preserving White Space with the <pre> Element

The <pre> element represents preformatted text in which whitespace and line breaks are significant. Browsers normally preserve the text's spaces and line breaks inside this element, unlike ordinary HTML prose.

This makes <pre> useful for displaying source code, terminal output, fixed-width text, ASCII diagrams and some forms of poetry.

When publishing a code example, combine <pre> with <code>:

<pre><code>&lt;article&gt;
  &lt;h2&gt;Understanding Semantic HTML&lt;/h2&gt;
  &lt;p&gt;Meaningful elements describe content.&lt;/p&gt;
&lt;/article&gt;</code></pre>

The <pre> element preserves the layout of the example, while <code> identifies its contents as computer code. The angle brackets are written as HTML character references so that the browser displays the example rather than interpreting it as actual markup.

For an article that discusses a terminal command, the same principle applies:

<pre><code>npm run build
npm run test</code></pre>

Each command appears on its own line, matching the intended presentation.

Tabular layouts, ASCII art and poetry

Preformatted text can also preserve alignment in text-based diagrams:

<pre><code>Website
├── Header
├── Main content
└── Footer</code></pre>

This example uses line breaks and spacing to communicate a simple hierarchy. Such formatting can be useful in technical tutorials, although complex diagrams may be better presented as accessible lists, tables or images with appropriate text alternatives.

Poetry may also require intentional line breaks. If the line structure is central to the work, <pre> can preserve it. For poetry that benefits from ordinary semantic markup, separate lines or stanzas can instead be represented using suitable HTML structure and CSS.

Avoid using <pre> to create the entire layout of a webpage. Its purpose is to preserve preformatted text, not to replace modern layout tools such as CSS Grid or Flexbox.

Now that we have explored the purpose of <p>, <blockquote> and <pre>, the next step is to understand how browsers handle whitespace and how these elements behave in practical layouts. In Part 2, we will compare their key characteristics, examine a complete Blogger-ready HTML example, and apply CSS styling without compromising semantic meaning.

Continue reading: Formatting Text with Intent, Part 2: Whitespace, Best Practices and Blogger Implementation.