HTML Paragraphs

What a Paragraph Element Actually Does

The <p> element marks one paragraph of running text. That is a statement about meaning, not about appearance: it says "these sentences belong together as one unit of prose". The blank space you see above and below it on screen is just the browser's default margin, and you can change or remove it in CSS without changing what the element means.

Because it is a statement about meaning, use it for prose and not for anything else. Wrapping a single image, a button or a menu item in a paragraph is a common beginner habit, usually done to get the spacing that comes for free. That spacing is a CSS problem with a CSS answer. Meanwhile you have told every screen reader that a navigation link is a paragraph of text.

Paragraphs are block-level, so each one starts on a new line and fills the width available. You do not need a <br> between them, and adding one gives you a double gap that you will then fight with CSS. If you want more or less space between paragraphs, set margin on p in your stylesheet — one rule, applied everywhere, instead of stray tags scattered through your markup.

<h2>About the Robotics Club</h2>

<p>The club meets every Saturday afternoon in the electronics lab.
Anyone from any branch can join, and no prior experience is needed.</p>

<p>Our current project is a line-following robot for the inter-college
competition in March. New members usually start on the sensor team.</p>

<!-- Do not do this: no <br> is needed between paragraphs -->
<p>First paragraph.</p>
<br>
<p>Second paragraph.</p>

Whitespace Collapses — All of It

Type ten spaces between two words in your HTML file and the browser shows one. Press Enter five times and the browser shows nothing at all. HTML collapses every run of spaces, tabs and newlines into a single space. This surprises everyone once, usually while trying to indent a line or centre something by pressing the space bar.

This behaviour is deliberate and it is the reason you can indent your HTML freely for readability without it affecting the page. The layout of your source file and the layout of the rendered page are two separate things — the first is for you, the second is controlled by CSS.

So when you want space, ask what kind of space you actually mean. Space between paragraphs is margin. Space inside a box, between its border and its content, is padding. Indentation of a first line is text-indent. A gap between items in a row is gap or margin. Every one of those is a CSS property that you set once and that adapts when the screen size changes. None of them is achieved by pressing the space bar in your HTML.

<!-- What you typed -->
<p>Registration        closes


   on      Friday.</p>

<!-- What the browser shows -->
<!-- Registration closes on Friday. -->

<!-- Trying to indent with spaces does nothing -->
<p>     This line is not indented on screen.</p>

/* This is how you actually indent it */
p.intro {
  text-indent: 2rem;
}

The <br> Tag, and When It Is Actually Correct

<br> forces a line break. It is a void element, so there is no closing tag. It is also the most abused tag in HTML, because it is the first tool beginners find for making space and it appears to work.

The reason it is abuse rather than a shortcut is that <br> means "this line ends here", and a screen reader treats it as such. A stack of four <br> tags used to push a heading down the page announces four meaningless line breaks to a listener. It also does not adapt: the gap that looks right on your laptop will be wrong on a phone, and you cannot adjust it without editing every page that uses it.

It does have legitimate uses, and they share one feature — the line break is part of the content's meaning, not part of its layout. A postal address has lines. So does a poem, a song lyric, and a block of dialogue. In those cases the break is genuinely information, and <br> is the correct element. The test to apply is simple: if you removed the break and the text still meant the same thing, you wanted CSS.

<!-- Correct: the line breaks are part of the address -->
<p>
  Department of Computer Science<br>
  Block C, Second Floor<br>
  University Campus<br>
  Pune 411001
</p>

<!-- Wrong: <br> used as a spacing tool -->
<p>Some text</p>
<br><br><br>
<h2>Next Section</h2>

/* Right way to create that space */
h2 {
  margin-top: 3rem;
}

<hr> Is a Thematic Break, Not a Decorative Line

<hr> renders as a horizontal line, which is why almost everyone reaches for it as a divider. In HTML5 its defined meaning is a thematic break — a shift in topic within a section, like the scene change marked by a row of asterisks in a novel. The line is the browser's default way of showing that meaning, not the meaning itself.

That distinction has a practical consequence. If you want a line under your site header purely because it looks good, the honest tool is border-bottom in CSS, applied to the header. It gives you full control over thickness, colour, length and spacing, and it adds nothing meaningless to the document for a screen reader to announce. Use <hr> when the content genuinely changes subject at that point.

Like <br>, <hr> is a void element with no closing tag. The old attributes you may see in ancient examples — size, width, color, noshade — are obsolete. Style it with CSS instead.

<!-- Reasonable: the topic genuinely changes here -->
<h2>Workshop Report</h2>
<p>The morning session covered sensor wiring.</p>

<hr>

<p>Unrelated notice: the lab will be closed next Monday.</p>

/* A purely decorative line belongs in CSS */
header {
  border-bottom: 2px solid #ddd;
  padding-bottom: 1rem;
}

/* And hr itself is styled with CSS, not old attributes */
hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 2rem 0;
}

Escaping Special Characters

Some characters cannot be typed directly into HTML because the browser would read them as markup. The obvious one is the less-than sign. If you write if (a < b) as plain text, the browser sees < b) and starts looking for a tag called b). Your text disappears and the rest of the page may render oddly.

The solution is a character reference — a short code beginning with an ampersand and ending with a semicolon that stands in for the real character. Write < and the browser displays a less-than sign without treating it as markup. The three you must escape are the less-than sign, the greater-than sign and the ampersand itself.

The ampersand is the one people forget. Because & starts every character reference, an unescaped ampersand followed by letters and a semicolon can be swallowed as one. A club named "Arts & Crafts" is usually fine in practice because browsers are forgiving, but inside a URL it genuinely matters: ?a=1&copy=2 can be read as containing ©, the copyright symbol. Escaping it as & removes all doubt.

One more is worth knowing:  , the non-breaking space. It looks like an ordinary space but the browser will never wrap a line at it, which is useful for keeping "Rs 500" or "10 km" together on one line. Do not use it for layout spacing — a row of them to push text across the page is the same mistake as a row of <br> tags.

<!-- Showing code as text on a page -->
<p>The condition <code>if (marks &lt; 40)</code> means the student failed.</p>

<!-- The four you will use most -->
<p>&lt;  is &amp;lt;   and  &gt;  is &amp;gt;</p>
<p>&amp;  is &amp;amp;  and a non-breaking space is &amp;nbsp;</p>

<!-- Ampersands inside URLs -->
<a href="results.html?year=2026&amp;branch=cse">CSE results</a>

<!-- Keeping a value on one line -->
<p>Registration fee: Rs&nbsp;500</p>

• < — less-than sign, required whenever you want to show a literal angle bracket
• > — greater-than sign
• & — ampersand, especially important inside URLs
•   — a space the browser will not break a line at
• © gives the copyright symbol, and many other named references exist; but with charset="UTF-8" set you can usually just type the character itself