HTML Tutorial
HTML Paragraphs
The p tag is the default block of text. Browsers add space around it so lines are readable.
The p element
Wrap each paragraph in <p>...</p>. The browser displays it as a block: it starts on a new line, and there is margin above and below. That space is what makes a page of text readable without extra empty tags.
Example
<p>The ferry leaves on the hour.</p>
<p>Buy a ticket at the kiosk on the pier.</p>Use a new p for a new thought. Do not put the whole article in one paragraph, and do not insert empty paragraphs only to create gaps. CSS margin is the right tool for extra space later.
Line breaks with br
<br> forces a new line inside the same paragraph. Use it when the break is part of the content: a poem, an address, or a short line of verse. Do not use a stack of br tags to separate sections. That is what headings and paragraphs are for.
Example
<p>
14 Harbor Road<br>
Port Ellen<br>
Isle of Islay
</p>Two or three br tags in a row to “make space” is a habit to drop. The extra lines collapse oddly in some layouts and mean nothing to assistive technology.
Browsers collapse whitespace
In normal HTML, extra spaces and line breaks in the source become a single space on the page. You can indent your file for reading. The visitor still sees one space between words.
Example
<p>
This paragraph
has odd spacing
in the source.
</p>The preview shows one tidy sentence. If you need the spaces and line breaks to stay as you typed them, use pre, not extra spaces inside p.
Click Try it in HTML under an example. That opens /html/try — a live page preview. Paste the spaced paragraph and confirm it collapses.
pre for preformatted text
<pre> keeps spaces, tabs, and line breaks. Browsers typically use a monospace font. It is the usual wrapper for code samples and for any block where alignment in the source is the point.
Example
<pre>
* *
* *
****
</pre>Inside pre, characters such as < still need to be written carefully so the browser does not treat them as tags. You will cover entities in a later chapter.
hr, a horizontal rule
<hr> is an empty element that marks a thematic break: a shift in topic inside a section, not just a decorative line. Browsers draw a horizontal rule by default. You can restyle it with CSS later, but the meaning stays “a break in the narrative.”
Example
<p>The first half of the letter is practical.</p>
<hr>
<p>The rest is only news from home.</p>Which tag for which job
| Tag | Use it for | Avoid using it for |
|---|---|---|
| p | A block of prose | Page layout or empty spacers |
| br | A needed line break inside one thought | Separating sections |
| pre | Code, ASCII, aligned columns of text | Ordinary paragraphs |
| hr | A change of topic | A substitute for a heading |
A readable block
Put the pieces together: headings for structure, paragraphs for prose, a break only where the content needs it.
Example
<h1>Notice</h1>
<p>The path is closed until Friday.</p>
<p>
Ranger station<br>
North gate
</p>
<hr>
<p>Detour maps are at the visitor center.</p>Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Biology
Advice in readable blocks
p is the default block of running text. Browsers add margin so one thought is not glued to the next. Do not use br to fake paragraphs.
White space in the source collapses to a single space. New lines in the file do not become new paragraphs. That is why you need the p tag.
Example
<p>Resting heart rate is often counted for 15 s, then multiplied by 4.</p>
<p>Eighteen beats in 15 s is 72 bpm — a typical adult resting value.</p>Engineering
An address with line breaks
br is a break inside one paragraph: a postal address, a poem line, a two-line label on a crate. It is not a substitute for p.
Example
<p>Workshop 4<br>Harbor Street 12<br>Lisbon</p>