HTML 5 Tutorial #7 - HTML Paragraphs

in #steemit6 years ago

HTML Paragraphs

If there's a paragraph in your content, you should define it by using HTML <p> element.

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

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

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

The Poem Problem

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


HTML 5 Tutorials:

HTML 5 Tutorial #1 - Introduction
HTML 5 Tutorial #2 - HTML Editors
HTML 5 Tutorial #3 - HTML Basic
HTML 5 Tutorial #4 - HTML Elements
HTML 5 Tutorial #5 - HTML Attributes
HTML 5 Tutorial #6 - HTML Headings

Sort:  

Thank you for these tips

This post has received a 1.24 % upvote from @boomerang thanks to: @cj23

You got a 0.92% upvote from @postpromoter courtesy of @cj23! Want to promote your posts too? Check out the Steem Bot Tracker website for more info. If you would like to support development of @postpromoter and the bot tracker please vote for @yabapmatt for witness!

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.

This post has received a 0.76 % upvote from @booster thanks to: @cj23.

This post has received gratitude of 0.78 % from @appreciator thanks to: @cj23.

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