{"id":63,"date":"2022-03-19T10:03:05","date_gmt":"2022-03-19T10:03:05","guid":{"rendered":"https:\/\/staging.brightwhiz.com\/?post_type=topic&p=63"},"modified":"2022-03-19T10:03:06","modified_gmt":"2022-03-19T10:03:06","slug":"html-paragraphs","status":"publish","type":"topic","link":"http:\/\/local.tutorials\/topic\/html-paragraphs\/","title":{"rendered":"HTML – Paragraphs"},"content":{"rendered":"\n

HTML paragraphs are what text is primarily formatted in. The HTML <p><\/code> element is what you can use to define a paragraph. A paragraph will always start on a new line, and web browsers automatically add a white space margin before and after the paragraph.<\/p>\n\n\n\n

Example<\/p>\n\n\n\n

<p>This is a paragraph.<\/p>\n<p>This is another paragraph.<\/p><\/code><\/pre>\n\n\n\n
White Space in HTML<\/h2>\n\n\n\n
HTML displays have a fluid display based on the numerous display sizes and aspect ratios. Unlike Word Processors, in HTML you cannot format text or content in general simply by adding any form of extra white space on your keyboard. The web browser will automatically remove any extra white spaces such as spaces and new-line characters when the page is displayed:<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
<p>\nThis paragraph\nuses many lines\nin the source,\nbut looks\nokay in the \nweb browser since\nthe browser\nignores extra \nnew lines.\n<\/p>\n\n<p>\nThis paragraph contains\nquite         a lot of \nextra    spaces\nin the source         code,\nbut the        web browser\ndisplays    ok since the \nbrowser     ignores it.\n<\/p><\/code><\/pre>\n\n\n\n
The above paragraphs will display exactly the same in a web browser.<\/p>\n\n\n\n
So how do we preserve formatting?<\/p>\n\n\n\n
Solution – The HTML <pre><\/code> Tags<\/h2>\n\n\n\n
The HTML <pre><\/code> element can be used to define preformatted text. The text inside a <pre><\/code> element is displayed in a fixed-width font (usually Courier) and also preserves spaces and line breaks.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
<pre>\nThis paragraph with pre\nuses many lines         and spaces\nin the           source,\nand will not look\nokay in the \nweb        browser since\nthe browser\nnow preserves extra \nnew lines.\n<\/pre><\/code><\/pre>\n\n\n\n
The above code displays the same way in the browser as it does in the source code.<\/p>\n\n\n\n
HTML Line Breaks<\/h2>\n\n\n\n
The HTML <br><\/code> element is used to define a line break.<\/p>\n\n\n\n
You should use <br><\/code> if you want to add a line break or new line without starting a new paragraph:<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
<p>This is a paragraph with a <br>line breaks.<\/p><\/code><\/pre>\n\n\n\n
HTML Horizontal Rules<\/h2>\n\n\n\n
The <hr><\/code> tag defines a thematic break in an HTML document and is typically displayed as a horizontal rule. It is an empty element therefore it has no closing tag. The <hr><\/code> element is used to separate content in a web page:<\/p>\n\n\n\n
<h1>This is a heading<\/h1>\n<p>This is a paragraph.<\/p>\n<hr>\n<h2>This is another heading<\/h2>\n<p>This is another paragraph.<\/p>\n<hr><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
HTML paragraphs are what text is primarily formatted in. The HTML <p> element is what you can use to define a paragraph. A paragraph will always start on a new line, and web browsers automatically add a white space margin before and after the paragraph. Example White Space in HTML HTML displays have a fluid […]<\/p>\n","protected":false},"featured_media":43,"comment_status":"open","ping_status":"closed","template":"","meta":[],"categories":[2],"tags":[],"subject":[7,8],"yoast_head":"\nLearn HTML - Paragraphs<\/title>\n<meta name=\"description\" content=\"HTML paragraphs use the tag to format pieces of text in an HTML document or a web page in addition to line breaks and horizontal rules\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.tutorials\/topic\/html-paragraphs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn HTML - Paragraphs\" \/>\n<meta property=\"og:description\" content=\"HTML paragraphs use the tag to format pieces of text in an HTML document or a web page in addition to line breaks and horizontal rules\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.tutorials\/topic\/html-paragraphs\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com Tutorials and Courses\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-19T10:03:06+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-paragraphs\/\",\"url\":\"http:\/\/local.tutorials\/topic\/html-paragraphs\/\",\"name\":\"Learn HTML - Paragraphs\",\"isPartOf\":{\"@id\":\"http:\/\/local.tutorials\/#website\"},\"datePublished\":\"2022-03-19T10:03:05+00:00\",\"dateModified\":\"2022-03-19T10:03:06+00:00\",\"description\":\"HTML paragraphs use the tag to format pieces of text in an HTML document or a web page in addition to line breaks and horizontal rules\",\"breadcrumb\":{\"@id\":\"http:\/\/local.tutorials\/topic\/html-paragraphs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.tutorials\/topic\/html-paragraphs\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-paragraphs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"http:\/\/local.tutorials\/topic\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML – Paragraphs\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.tutorials\/#website\",\"url\":\"http:\/\/local.tutorials\/\",\"name\":\"Brightwhiz.com Tutorials and Courses\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\/\/local.tutorials\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.tutorials\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.tutorials\/#organization\",\"name\":\"Brightwhiz.com\",\"url\":\"http:\/\/local.tutorials\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz.com\"},\"image\":{\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/www.instagram.com\/glamorglaze\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/c\/Sobbayi\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Learn HTML - Paragraphs","description":"HTML paragraphs use the tag to format pieces of text in an HTML document or a web page in addition to line breaks and horizontal rules","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.tutorials\/topic\/html-paragraphs\/","og_locale":"en_US","og_type":"article","og_title":"Learn HTML - Paragraphs","og_description":"HTML paragraphs use the tag to format pieces of text in an HTML document or a web page in addition to line breaks and horizontal rules","og_url":"http:\/\/local.tutorials\/topic\/html-paragraphs\/","og_site_name":"Brightwhiz.com Tutorials and Courses","article_publisher":"https:\/\/www.facebook.com\/brightwhiz","article_modified_time":"2022-03-19T10:03:06+00:00","og_image":[{"width":640,"height":360,"url":"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@brightwhizmag","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/local.tutorials\/topic\/html-paragraphs\/","url":"http:\/\/local.tutorials\/topic\/html-paragraphs\/","name":"Learn HTML - Paragraphs","isPartOf":{"@id":"http:\/\/local.tutorials\/#website"},"datePublished":"2022-03-19T10:03:05+00:00","dateModified":"2022-03-19T10:03:06+00:00","description":"HTML paragraphs use the tag to format pieces of text in an HTML document or a web page in addition to line breaks and horizontal rules","breadcrumb":{"@id":"http:\/\/local.tutorials\/topic\/html-paragraphs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.tutorials\/topic\/html-paragraphs\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/local.tutorials\/topic\/html-paragraphs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.tutorials\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"http:\/\/local.tutorials\/topic\/"},{"@type":"ListItem","position":3,"name":"HTML – Paragraphs"}]},{"@type":"WebSite","@id":"http:\/\/local.tutorials\/#website","url":"http:\/\/local.tutorials\/","name":"Brightwhiz.com Tutorials and Courses","description":"","publisher":{"@id":"http:\/\/local.tutorials\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.tutorials\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.tutorials\/#organization","name":"Brightwhiz.com","url":"http:\/\/local.tutorials\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/","url":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","contentUrl":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz.com"},"image":{"@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz","https:\/\/twitter.com\/brightwhizmag","https:\/\/www.instagram.com\/glamorglaze\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/c\/Sobbayi"]}]}},"_links":{"self":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic\/63"}],"collection":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/types\/topic"}],"replies":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/comments?post=63"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media?parent=63"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/categories?post=63"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/tags?post=63"},{"taxonomy":"subject","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/subject?post=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}