create account

HTML 5 Tutorial #7 - HTML Paragraphs by cj23

View this thread on: hive.blogpeakd.comecency.com
· @cj23 ·
$36.09
HTML 5 Tutorial #7 - HTML Paragraphs
# HTML Paragraphs
If there's a paragraph in your content, you should define it by using HTML <p> element.

![example.png](https://steemitimages.com/DQmc9CQ5Gh9Br6YDSw9ARyXpcU3SaP2FxG1PEJbTXQRRR9K/example.png)

If you see the result, browsers automatically add some white space or a margin before and after a paragraph because that's the default style for paragraphs. 

## HTML Display
Your web page has different display results depends on the size of the screen (large, small and resized screens).  Adding extra spaces or extra lines in your HTML code won't have any effect on changing the display because browser will remove or ignore extra spaces or lines. 

![example.png](https://steemitimages.com/DQmVqEGgpcuAMRvK12dwhAt5cZDjioFMvTFVv6Q7KNwiqiC/example.png)

## Don't Forget the End Tag
Below will display correctly even if there's no end tag since that's optional. But I recommend to always close the tags to avoid unexpected results or errors. 

![example.png](https://steemitimages.com/DQmRZKe9Lw2VyhSewb3ALR9NyYj2YJrva8JGe59kJdeuq1j/example.png)

*Dropping the end tag can produce unexpected results or errors.*

## HTML Line Breaks
If you would like to insert a new line or line break, you can by adding HTML <br> element. Use it if you want to start a new line without starting a new paragraph. 

![example.png](https://steemitimages.com/DQmZFn7s2LrWSmBH939Udyxgqfe1TVVJy8uNN3ZZFfuUeDF/example.png)

## The Poem Problem
![example.png](https://steemitimages.com/DQmcgncnRUnX4Grnd4xcWMxYhHJQXY5EcFC149z5hENr7c8/example.png)

If you think above is the correct way of displaying  a poem, you're wrong because browsers will display it in a single line. Remember, HTML ignores extra spaces and lines. You should use the <br> element to insert a new line. 

## The HTML <pre> Element
If you want a preformatted text, use HTML <pre> element. It preserves both spaces and line breaks and the text inside in this element  is displayed in a fixed-width font (usually Courier). 

![example.png](https://steemitimages.com/DQmPQBexeKKx2wVvFYU7mExtBqedyS69p5JzwgShcKHwttd/example.png)

<hr> 

### HTML 5 Tutorials:
[HTML 5 Tutorial #1 - Introduction](https://steemit.com/steemit/@cj23/html-tutorial-1-introduction)
[HTML 5 Tutorial #2 - HTML Editors](https://steemit.com/steemit/@cj23/html-tutorial-2-html-editors)
[HTML 5 Tutorial #3 - HTML Basic](https://steemit.com/steemit/@cj23/html-5-tutorial-3-html-basic)
[HTML 5 Tutorial #4 - HTML Elements](https://steemit.com/steemit/@cj23/html-5-tutorial-4-html-elements)
[HTML 5 Tutorial #5 - HTML Attributes](https://steemit.com/steemit/@cj23/html-5-tutorial-5-html-attributes)
[HTML 5 Tutorial #6 - HTML Headings](https://steemit.com/steemit/@cj23/html-5-tutorial-6-html-headings)
👍  , , , , , , , , , , , , , , , , , ,
properties (23)
authorcj23
permlinkhtml-5-tutorial-7-html-paragraphs
categorysteemit
json_metadata{"tags":["steemit","steem","blog","philippines","steemph"],"image":["https://steemitimages.com/DQmc9CQ5Gh9Br6YDSw9ARyXpcU3SaP2FxG1PEJbTXQRRR9K/example.png","https://steemitimages.com/DQmVqEGgpcuAMRvK12dwhAt5cZDjioFMvTFVv6Q7KNwiqiC/example.png","https://steemitimages.com/DQmRZKe9Lw2VyhSewb3ALR9NyYj2YJrva8JGe59kJdeuq1j/example.png","https://steemitimages.com/DQmZFn7s2LrWSmBH939Udyxgqfe1TVVJy8uNN3ZZFfuUeDF/example.png","https://steemitimages.com/DQmcgncnRUnX4Grnd4xcWMxYhHJQXY5EcFC149z5hENr7c8/example.png","https://steemitimages.com/DQmPQBexeKKx2wVvFYU7mExtBqedyS69p5JzwgShcKHwttd/example.png"],"links":["https://steemit.com/steemit/@cj23/html-tutorial-1-introduction","https://steemit.com/steemit/@cj23/html-tutorial-2-html-editors","https://steemit.com/steemit/@cj23/html-5-tutorial-3-html-basic","https://steemit.com/steemit/@cj23/html-5-tutorial-4-html-elements","https://steemit.com/steemit/@cj23/html-5-tutorial-5-html-attributes","https://steemit.com/steemit/@cj23/html-5-tutorial-6-html-headings"],"app":"steemit/0.1","format":"markdown"}
created2018-01-28 03:07:39
last_update2018-01-28 03:07:39
depth0
children7
last_payout2018-02-04 03:07:39
cashout_time1969-12-31 23:59:59
total_payout_value27.302 HBD
curator_payout_value8.787 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,755
author_reputation1,090,777,745,148
root_title"HTML 5 Tutorial #7 - HTML Paragraphs"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,893,856
net_rshares4,376,659,564,350
author_curate_reward""
vote details (19)
@appreciator ·
<p>This post has received gratitude of 0.78 % from @appreciator thanks to: @cj23.</p>
properties (22)
authorappreciator
permlinkre-cj23-html-5-tutorial-7-html-paragraphs-20180128t064333704z
categorysteemit
json_metadata{"tags":["steemit"],"app":"drotto/0.0.3"}
created2018-01-28 06:43:57
last_update2018-01-28 06:43:57
depth1
children0
last_payout2018-02-04 06:43:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length86
author_reputation55,801,543,512,306
root_title"HTML 5 Tutorial #7 - HTML Paragraphs"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,930,392
net_rshares0
@boomerang ·
This post has received a 1.24 % upvote from @boomerang thanks to: @cj23
properties (22)
authorboomerang
permlinkre-html-5-tutorial-7-html-paragraphs-20180128t051035
categorysteemit
json_metadata"{"app": "pysteem/0.5.6"}"
created2018-01-28 05:10:36
last_update2018-01-28 05:10:36
depth1
children0
last_payout2018-02-04 05:10:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length71
author_reputation1,273,205,827,891
root_title"HTML 5 Tutorial #7 - HTML Paragraphs"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,914,509
net_rshares0
@booster ·
<p>This post has received a 0.76 % upvote from @booster thanks to: @cj23.</p>
properties (22)
authorbooster
permlinkre-cj23-html-5-tutorial-7-html-paragraphs-20180128t063111732z
categorysteemit
json_metadata{"tags":["steemit"],"app":"drotto/0.0.3rc3"}
created2018-01-28 06:31:15
last_update2018-01-28 06:31:15
depth1
children0
last_payout2018-02-04 06:31:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length78
author_reputation68,767,115,776,562
root_title"HTML 5 Tutorial #7 - HTML Paragraphs"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,928,186
net_rshares0
@lovejuice ·
re-cj23-html-5-tutorial-7-html-paragraphs-20180128t060153898z
This post has received a 3.55% upvote from @lovejuice thanks to @cj23. They love you, so does Aggroed. Please be sure to vote for Witnesses at https://steemit.com/~witnesses.
properties (22)
authorlovejuice
permlinkre-cj23-html-5-tutorial-7-html-paragraphs-20180128t060153898z
categorysteemit
json_metadata{"app":"postpromoter/1.7.4"}
created2018-01-28 06:01:54
last_update2018-01-28 06:01:54
depth1
children0
last_payout2018-02-04 06:01:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length174
author_reputation10,538,740,461,622
root_title"HTML 5 Tutorial #7 - HTML Paragraphs"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,923,154
net_rshares0
@postpromoter ·
re-cj23-html-5-tutorial-7-html-paragraphs-20180128t052019769z
You got a 0.92% upvote from @postpromoter courtesy of @cj23! Want to promote your posts too? Check out the [Steem Bot Tracker website](https://steembottracker.com) for more info. If you would like to support development of @postpromoter and the bot tracker please [vote for @yabapmatt for witness!](https://v2.steemconnect.com/sign/account-witness-vote?witness=yabapmatt&approve=1)
properties (22)
authorpostpromoter
permlinkre-cj23-html-5-tutorial-7-html-paragraphs-20180128t052019769z
categorysteemit
json_metadata{"app":"postpromoter/1.7.4"}
created2018-01-28 05:20:18
last_update2018-01-28 05:20:18
depth1
children0
last_payout2018-02-04 05:20:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length381
author_reputation12,722,616,650,811
root_title"HTML 5 Tutorial #7 - HTML Paragraphs"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,916,211
net_rshares0
@treeplanter ·
Thanks for your donation
Good job! Thanks to @anonteamph00001 you have planted 0.05 tree to save Abongphen Highland Forest in Cameroon. Help me to plant 1,000,000 trees and share my Steem Power to the others. Selfvoting is prohibited, but that should be the reason to spread the world to protect our precious environment. Check out profile of our conservation association @kedjom-keku and the founder/coordinator @martin.mikes to get more information about our conservation program. My current SP is 14516.64. Help me to plant more trees with your delegated SP. 

Thanks a lot,
your @treeplanter 
[www.kedjom-keku.com](www.kedjom-keku.com)
properties (22)
authortreeplanter
permlinkre-cj23-html-5-tutorial-7-html-paragraphs-20180128t125324246z
categorysteemit
json_metadata{}
created2018-01-28 12:53:27
last_update2018-01-28 12:53:27
depth1
children0
last_payout2018-02-04 12:53:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length614
author_reputation62,929,728,687,402
root_title"HTML 5 Tutorial #7 - HTML Paragraphs"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,998,094
net_rshares0
@vi3w ·
Thank you for these tips
👍  
properties (23)
authorvi3w
permlinkre-cj23-html-5-tutorial-7-html-paragraphs-20180130t072210556z
categorysteemit
json_metadata{"tags":["steemit"],"app":"steemit/0.1"}
created2018-01-30 07:22:12
last_update2018-01-30 07:22:12
depth1
children0
last_payout2018-02-06 07:22:12
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length24
author_reputation483,494,321
root_title"HTML 5 Tutorial #7 - HTML Paragraphs"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id33,499,744
net_rshares458,118,606
author_curate_reward""
vote details (1)