Paragraphs With <p>
Paragraphs With <p>
~6 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026
Now let's fill our headings with real text. For this you use the <p> element (short for "paragraph").
The <p> element
<p>Hi! I'm Finn and I love football more than anything.</p>Every <p> paragraph is automatically displayed with some spacing above and below by the browser, so paragraphs are clearly told apart. Now add a paragraph under your "About Me" heading:
<h2>About Me</h2>
<p>Hi! I'm Finn and I love football more than anything. I've been playing for three
years in my club's youth team, and my favourite position is striker.</p>Tipp: You can write the text inside <p> across multiple lines in your file (as in the example above) - the browser still displays it as one continuous paragraph. Line breaks in the code have no effect on how the text wraps in the browser - the browser automatically wraps text wherever it fits on the screen.
Multiple paragraphs
For multiple paragraphs, you simply use multiple <p> elements in a row:
<p>First paragraph with the first thought.</p>
<p>Second paragraph with a new thought.</p>Achtung: A common mistake: using lots of empty lines in the code in a row to create spacing between text, instead of real <p> elements. That doesn't work - the browser completely ignores repeated spaces and blank lines in HTML. If you want spacing between two blocks of text, you need two separate <p> elements.
Filling in the rest of Finn's website
Now add matching text under the other headings too:
<h2>My Favourite Players</h2>
<p>I have a lot of favourite players, but what I admire most are players who
never give up, even when a game gets tough.</p>
<h2>My Team</h2>
<h3>Training Times</h3>
<p>We train every Tuesday and Thursday at 5pm.</p>
<h3>Our Achievements</h3>
<p>Last year we came second in our league.</p>Save and look at the result in your browser. Your website now has real, readable content under every heading!