In this tutorial you will learn how to create paragraphs in HTML.
Creating HTML Paragraphs
Paragraph element is used to publish text on the web pages .
The HTML <p> element defines a paragraph.
You can create a paragraph element like this:
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
Note: Browsers automatically add some white space (a margin) before and after a paragraph. but you can change it using CSS .
Link to CSS Tutorial: https://nevci.com/category/css/
Don’t Forget the End Tag
HTML p element isn’t a self-closing tag.
Most browsers will display HTML correctly even if you forget the end tag.
<p>This is a paragraph. <p>This is a paragraph.
In HTML 4 and earlier versions, it was enough to initiate a new paragraph using the opening tag. The HTML code in the example above will work in most of the web browsers, but don’t rely on it. Forgetting the end tag can produce unexpected results or errors.
Creating HTML Line Breaks br
<br> tag is a self-closing tag (or an empty element). Since it’s an empty tag it means that it doesn’t have content in it. So it doesn’t need a closing tag.
<br> element defines a line break.
<br> if you want a line break (a new line) without starting a new paragraph:
You can create a line break like so:
<p>This is a paragraph <br> with line break.</p> <p>This is another paragraph without line break. </p>
Notice: İn the first paragraph we have a br tag between text but in the second one we don’t. Run the Example code and see how they look in browser
The Poem Problem
This poem will show on a single line
<p> Twinkle, twinkle, little star, How I wonder what you are! Up above the world so high, Like a diamond in the sky. </p>
HTML ignores white space that people create for readability . That’s why HTML was designed in a way that it was easier for human developers to read their codes. But for machines (or computers) white space doesn’t really matter. That means if you put all codes side by side without any white space in between them. Computers still can read and understand. But for us humans it’ll be really hard to read and understand them.
But what if you want ( white space )
- between your words ?
- sometimes in line of your (paragraph text)
- or if you have poems (to share online )
Well, in that case follow / read the next step below .
Managing white space in HTML
As we mentioned above for computers white space doesn’t matter.
But we still need or want to have some white space anyway.
There are 3 ways of doing it with HTML
- White space (without a line break ) between 2 words.
- Break line ( or using br tag)
- Using pre tag
Note: Play a little with this code to see how it works. That’s how we learn programming.
Using br tag (line break) without creating a new paragraph
<p> Twinkle, twinkle, little star, <br> How I wonder what you are! <br> Up above the world so high, <br> Like a diamond in the sky. </p>
The pre tag
Using the pre tags ( element ).
Great way to write poems
<pre> Twinkle, twinkle, little star, How I wonder what you are! Up above the world so high, Like a diamond in the sky. </pre>
Tip: Play with the example codes to see how they look in browser when you run your code. İf you don’t grasp yet, it’s okay. When you start learning CSS. All of these will be more clear. At first it might be confusing but give yourself time and code everyday.