HTML Paragraphs

HTML Paragraphs


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:

Example Code:

<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.
For Example:

Example Code:

<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

The <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.

The HTML <br> element defines a line break.

Use <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

Example Code:

<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

Method 1
non-breaking space

&nbsp;

Note: Play a little with this code to see how it works. That’s how we learn programming.

Method 2
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

Method 3
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.


Comments are closed.