Computer Science
Grade 6
20 min
Paragraphs and Line Breaks: The `<p>` and `<br>` Tags
Format text using paragraphs and line breaks for readability.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Explain the difference between a paragraph and a line break in HTML.
Correctly write HTML code using the <p> tag to create distinct paragraphs.
Correctly write HTML code using the <br> tag to insert a single line break.
Combine <p> and <br> tags to format text like poems or addresses.
Identify when to use a <p> tag for spacing versus a <br> tag.
Debug simple HTML code where paragraphs and line breaks are used incorrectly.
Have you ever tried to write a story or a poem on a webpage, but all your lines smoosh together into one giant block of text? 📝 Let's learn how to be the boss of our text!
In this lesson, you'll discover two super important HTML tags: the paragraph tag (<p>) and the line break tag (&l...
2
Key Concepts & Vocabulary
TermDefinitionExample
HTML TagA special keyword surrounded by angle brackets (< >) that tells a web browser how to display content. Most tags come in pairs: an opening tag and a closing tag.<h1> is an opening tag and </h1> is a closing tag.
Paragraph Tag (<p>)A tag used to group a block of text together as a single paragraph. Browsers automatically add some space (a margin) before and after each paragraph.<p>This is a complete paragraph of text.</p>
Line Break Tag (<br>)A tag that forces the text following it to start on the very next line. It's like hitting the 'Enter' key once inside your text.Roses are red,<br>Violets are blue.
Container TagA tag that has both an opening and a closing part, and it holds or 'contains�...
3
Core Syntax & Patterns
The Paragraph Pattern
<p>Your text goes here.</p>
Use this for any block of text that should be separated from others, like a paragraph in a story. Always remember the closing </p> tag!
The Line Break Pattern
Some text...<br>...and more text on the next line.
Use this when you need to force a new line without starting a whole new paragraph. It's a single tag with no closing part.
Paragraphs vs. Line Breaks
Use <p> for structure. Use <br> for formatting.
Think of <p> tags as creating the main building blocks of your page. Think of <br> tags as a tool for fine-tuning the look of the text inside one of those blocks.
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You are creating a 'Mad Libs' game where the final story is assembled in a single variable. Why might using `<br>` tags within that variable be a better design choice than wrapping each user-inputted word in its own `<p>` tag?
A.Because `<p>` tags cannot contain text from variables.
B.Using `<br>` maintains the entire story as a single semantic paragraph, which makes more sense for a continuous narrative, while separate `<p>` tags would imply each word is a separate idea.
C.Using `<p>` tags would make the website load much slower.
D.It is impossible to add `<p>` tags to a variable in most programming languages.
Challenging
For a recipe website, what is the most semantically correct combination of tags for an ingredients list (e.g., Flour, Sugar, Eggs) and a single instruction step (e.g., 'Mix all dry ingredients in a large bowl.')?
A.Ingredients: `<p>Flour<br>Sugar<br>Eggs</p>` | Instruction: `<p>Mix all dry ingredients...</p>`
B.Ingredients: `<p>Flour</p><p>Sugar</p><p>Eggs</p>` | Instruction: `<p>Mix all dry ingredients...<br></p>`
C.Use `<br>` for everything to save space.
D.Use `<p>` for every single line on the page for consistency.
Challenging
Imagine a new tag, `<sentence>`, is created. It's a block element like `<p>`, but has zero default margin. How would the meaning and layout of `<code><sentence>A</sentence><sentence>B</sentence></code>` differ from `<code><p>A<br>B</p></code>`?
A.There would be no difference in meaning or layout.
B.The `<p>` version would have more space due to its default margin.
C.The `<sentence>` version would be read as a single block by a screen reader.
D.Semantically, the `<sentence>` version represents two distinct blocks of content, while the `<p>` version is a single block with an internal line break, even if their visual spacing was made identical with CSS.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free