freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 3.2 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Paragraphs and line breaks

What we will go through

  • The <p> element
  • Why extra spaces and Enter keys disappear
  • When <br> is the right choice
  • The <hr> thematic break

Short answer

Wrap each paragraph in <p> and </p>. Browsers collapse extra spaces and line breaks in your code into a single space, so pressing Enter does nothing on the page. Use <br> only when a line break is part of the content, like in an address or a poem. Use <hr> for a change of topic.

The paragraph element

<p>Our resort is 20 minutes from Tabaco port.</p>
<p>We have six rooms, a pool, and a view of Mayon.</p>

Each <p> becomes its own block with space above and below. Keep paragraphs short. On phones, two to four sentences reads best.

Whitespace collapse

<p>Hello

      world</p>

This shows as Hello world with one space. HTML treats all runs of spaces, tabs, and line breaks as one space. This is called whitespace collapsing. It lets you indent code freely without changing the page.

Line breaks with <br>

<p>Mayon Bakeshop<br>
Rizal Street, Albay District<br>
Legazpi City, 4500</p>

Addresses, poems, and song lines need breaks inside one block. That is what <br> is for. Do not stack <br><br> to make space between paragraphs. Use separate <p> elements and CSS spacing.

Thematic break with <hr>

<hr> marks a shift in topic, like a scene change. Browsers draw it as a horizontal line. It is a void element, so it has no closing tag. For <pre>, which keeps spaces exactly as typed, see the code examples in this course.

Try it: format an address

The address below runs onto one line. Add br tags so each part sits on its own line, and split the description into two paragraphs.

Live preview

Quick quiz

1. What happens to five spaces in a row in HTML?
2. When should you use br?
3. What does hr mean?
4. How should you add space between paragraphs?

Common mistakes

  • Stacking br tags for spacing. It creates messy, inaccessible spacing. Use CSS margin.
  • One huge paragraph. Long blocks are hard to read on phones.
  • Expecting Enter to work. Line breaks in code do not appear on the page.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

<p>
The paragraph element.
Whitespace collapsing
Browsers merging runs of spaces into one.
<br>
A line break inside a block of text.
<hr>
A thematic break between topics.
<pre>
Preformatted text that keeps spaces as typed.

Questions beginners ask

Is <br> bad?

No, it is fine for real line breaks. It is only bad when used for layout.

Can I put a heading inside a p?

No. Headings and paragraphs are separate blocks.

How do I add a non-breaking space?

Use &nbsp; to keep two words together, like ₱&nbsp;500.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.