Paragraphs and text

Most of a web page is words. This lesson is about marking them up so they mean what you intend — including two pairs of elements that look identical on screen and say completely different things underneath.

The paragraph

<p>The canteen opens at eight and closes at six.</p>
<p>It is closed on Fridays.</p>

Two paragraphs, and the browser puts space between them. That space came from the browser's default styling for , not from anything you wrote.

Every block of prose should be inside a . Loose text floating directly in the body will still display, but it is not marked as anything, so nothing reading your page can tell where one thought ends and the next begins.

Whitespace collapses, and this surprises everyone

Write this:

<p>Biryani        is        ready</p>

The browser shows: Biryani is ready. One space between each word.

Now write this:

<p>Biryani
is
ready</p>

The browser shows exactly the same thing — one line, single spaces.

This is called whitespace collapsing, and the rule is simple: any run of spaces, tabs and newlines in your HTML becomes a single space on screen.

It exists so you can indent your HTML for readability without those indents appearing on the page. It is what lets you nest elements neatly.

The consequence catches everyone once: you cannot lay out a page by pressing space or Enter. Blank lines in your file produce nothing. Rows of spaces do nothing. Spacing on a web page comes from CSS, always.

br, and when it is actually right

  forces a line break:

<p>Karachi Canteen<br>
Near the main gate<br>
Open 8am to 6pm</p>

Those three lines really do appear on three lines.

The trap is using it for spacing:

<p>The canteen opens at eight.</p>
<br><br>
<p>It is closed on Fridays.</p>

That is someone wanting a bigger gap and reaching for the tool that makes gaps. It is wrong for the same reason a heading is the wrong way to make text big: you are describing appearance with an element that means something structural. Those   elements are claiming there are line breaks in the content when there are not. The gap between paragraphs is a CSS margin.

The honest test: is this a line break in the content itself, or do I just want space? A postal address genuinely breaks between lines. A poem breaks between lines. Two separate thoughts are two paragraphs, and the space between them is styling.

strong and b, em and i

Four elements. Two of them describe meaning, two describe appearance, and on screen you cannot tell them apart.

<p><strong>Do not</strong> feed the campus cats.</p>
<p><b>Do not</b> feed the campus cats.</p>

Both render bold. They say different things.

 means this is important. It is about the content. A screen reader can change its tone to convey the emphasis.

 means make this bold, with no claim about importance. It exists for text that is conventionally bold without being more important — a product name in a review, a keyword in a technical listing.

The same split applies to the italic pair.  means emphasis — the word you would stress if you read the sentence aloud.  means italic for convention: a book title, a ship's name, a phrase in another language.

Notice how  changes the sentence:

<p>I never said <em>she</em> took the biryani.</p>
<p>I never said she <em>took</em> the biryani.</p>

Two different accusations, from the same seven words. That is meaning, not decoration, and it is exactly what  is for.

The rule in practice: if the word matters more, use  or . If you only want it to look different, that is a CSS decision. When you genuinely are not sure,  and  are the safer default — being wrong about importance costs less than being silent about it.

Quotes, and the character problem

For a quotation set apart from the text:

<blockquote>
  <p>The best biryani in Lahore is the one nearest you at 2am.</p>
</blockquote>

For a short quote inside a sentence, <q> adds the quotation marks itself:

<p>Omar called it <q>the best in Lahore</q> and left.</p>

There is one more thing worth knowing early. Some characters cannot be typed directly, because HTML is already using them:

<p>Use &lt;p&gt; to mark a paragraph. Rice &amp; bread are both on the menu.</p>

That displays as: Use to mark a paragraph. Rice & bread are both on the menu.

< is a less-than sign, > greater-than, & an ampersand. These are character entities. You need them whenever you want to show HTML code on a page — write  literally and the browser starts a paragraph instead of printing it.

& matters because a bare & sometimes works and sometimes does not, depending on what follows it. Writing & always works.

Putting it together

<body>
  <h1>Lahore Canteen</h1>

  <p>We open at eight in the morning and close at six in the evening,
  every day except Friday.</p>

  <p><strong>Cash only.</strong> The card machine has been broken since
  March and nobody is optimistic.</p>

  <p>Near the main gate<br>
  Model Town, Lahore</p>
</body>

Three paragraphs. The first is wrapped across two lines in the file and appears as one on screen — whitespace collapsing doing its job. The second marks two words as genuinely important. The third uses   correctly, because an address really does break between its lines.

Next: attributes, which are how you attach extra information to an element — and where reusing an id will break things quietly. If you have not read headings yet, read that first; it is the same meaning-not-appearance idea at a larger scale.