HTML Paragraph Element
Paragraph is marked by <p> element.
To create a new line in a paragraph, you can’t use the ‘enter key’. The new line will be shown in the code but it won’t be rendered by the browser.
contains a lot of spaces
in the source code,
but the browser
As shown in the above code, any extra-spaces or a new line (using enter key) are ignored by the browser. However, the code remains as shown above.
When you put the content inside <p> element then the browser automatically renders the content of another tag in a new line (because <p> element is a block level element). Never breakdown your paragraph into many parts just to create a new line.
<p>Never break down your single paragraph</p>
<p>using many paragraph tags just to</p>
<p>create a new line. Like this code</p>
In the above code, the browser thinks that there are three paragraphs instead of one. Never write code like this.
Line break tag
- To create a proper new line you need to use the line break tag inside the paragraph.
- The HTML <br> element defines a line break. It does not have a closing tag.
Remember,some elements in html do not have a closing tag. These type of tags are called empty tags.
<p>This is<br>a paragraph<br>with line breaks.</p>
The above line of code shows the proper way to break the line without breaking the paragraph into many.
In responsive web-page, The line will automatically break when it reaches the other end of the screen. But if you want to break the line somewhere before it touches the other end then you must include line-break tag.
Q: What is a responsive web-page?
A: When the content of a web page adjusts itself according to the screen size of the device then the web-page is called as a responsive web-page.
HTML <pre> Element
If you want to preserve your white spaces and new lines (using enter key, but not <br> tag) as you have written in code then you can use <pre> element.<pre> element defines the preformatted text.
- If you don’t want to use the <br> tag. Another way is to use <pre> element.
- Remember the content inside <pre> element always renders in courier fonts.
- White spaces and newlines are preserved in <pre> element.
<pre>There is no line break elements
inside this piece of code. Still, all the
extra space and new lines are preserved
by the browser.</pre>