Table of Contents

What is HTML Paragraph?

HTML < p > tag is use for representing paragraph. If you want to write a paragraph in your HTML document then a paragraph tag is used.

Syntax- < p >Write your paragraph here. </ p >

 Example-

				
					<!DOCTYPE html>
<html>
<head>
    <title>Paragraph tag</title>
</head>

<body data-rsssl=1>
    <h2>Geeky4u.com (Learn with Passion)</h2>
    <p>
      Geeky4u.com (Learn with Passion). This is a best platform where we are
      providing best study material, best content so that it is easy for you to
      learn everything and no one will stop you to become a master in
      programming language
    </p> <script data-no-optimize="1" defer>var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,o=arguments[e];for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";function r(t,e){return t.getAttribute(o+e)}function s(t,e,n){e=o+e,null!==n?t.setAttribute(e,n):t.removeAttribute(e)}function i(t){return r(t,u)===f}function l(t,e){return s(t,d,e),0}function c(t){return r(t,d)}function a(t,e){var n,o="LazyLoad::Initialized",s=new t(e);try{n=new CustomEvent(o,{detail:{instance:s}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(o,!1,!1,{instance:s})}window.dispatchEvent(n)}var n={elements_selector:"img",container:document,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",load_delay:0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,callback_finish:null,to_webp:!1},o="data-",u="was-processed",d="ll-timeout",f="true";function _(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t}function h(t,e,n,o){for(var s,i,a=0;s=t.children[a];a+=1)"SOURCE"===s.tagName&&(i=r(s,n),A(s,e,i,o))}function b(t,e){var n,o,s=e._settings,i=t.tagName;if(i=C[i])return i(t,s),e._updateLoadingCount(1),e._elements=(o=e._elements,n=t,o.filter(function(t){return t!==n})),0;e=t,o=s,t=z&&o.to_webp,s=r(e,o.data_src),o=r(e,o.data_bg),s&&(s=_(s,t),e.style.backgroundImage='url("'+s+'")'),o&&(t=_(o,t),e.style.backgroundImage=t)}function g(t,e){k?t.classList.add(e):t.className+=(t.className?" ":"")+e}function m(t,e){t&&t(e)}function v(t,e,n){t.addEventListener(e,n)}function p(t,e,n){t.removeEventListener(e,n)}function y(t,e,n){p(t,N,e),p(t,S,e),p(t,x,n)}function w(t,e,n){var o=n._settings,s=e?o.class_loaded:o.class_error,i=e?o.callback_load:o.callback_error,e=t.target;t=e,o=o.class_loading,k?t.classList.remove(o):t.className=t.className.replace(new RegExp("(^|\\s+)"+o+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""),g(e,s),m(i,e),n._updateLoadingCount(-1)}function E(n,o){function s(t){w(t,!0,o),y(n,s,a)}var t,e,i,a=function t(e){w(e,!1,o),y(n,s,t)};i=a,v(t=n,N,e=s),v(t,S,e),v(t,x,i)}function L(t,e,n){R(t,n),e.unobserve(t)}function I(t){var e=c(t);e&&(clearTimeout(e),l(t,null))}var t="undefined"!=typeof window,O=t&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),e=t&&"IntersectionObserver"in window,k=t&&"classList"in document.createElement("p"),z=t&&!1,A=function(t,e,n,o){n&&t.setAttribute(e,_(n,o))},C={IMG:function(t,e){var n=z&&e.to_webp,o=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&h(s,"srcset",o,n);s=r(t,e.data_sizes);A(t,"sizes",s);o=r(t,o);A(t,"srcset",o,n);e=r(t,e.data_src);A(t,"src",e,n)},IFRAME:function(t,e){e=r(t,e.data_src);A(t,"src",e)},VIDEO:function(t,e){var n=e.data_src,e=r(t,n);h(t,"src",n),A(t,"src",e),t.load()}},N="load",S="loadeddata",x="error",M=["IMG","IFRAME","VIDEO"];function R(t,e,n){var o=e._settings;!n&&i(t)||(m(o.callback_enter,t),-1<M.indexOf(t.tagName)&&(E(t,e),g(t,o.class_loading)),b(t,e),s(t,u,f),m(o.callback_set,t))}function j(t){return t.isIntersecting||0<t.intersectionRatio}function T(t,e){this._settings=_extends({},n,t),this._setObserver(),this._loadingCount=0,this.update(e)}return T.prototype={_manageIntersection:function(t){var e,n,o,s,i=this._observer,a=this._settings.load_delay,r=t.target;a?j(t)?(e=r,n=i,s=(o=this)._settings.load_delay,(a=c(e))||(a=setTimeout(function(){L(e,n,o),I(e)},s),l(e,a))):I(r):j(t)&&L(r,i,this)},_onIntersection:function(t){t.forEach(this._manageIntersection.bind(this))},_setObserver:function(){var t;e&&(this._observer=new IntersectionObserver(this._onIntersection.bind(this),{root:(t=this._settings).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))},_updateLoadingCount:function(t){this._loadingCount+=t,0===this._elements.length&&0===this._loadingCount&&m(this._settings.callback_finish)},update:function(t){var e=this,n=this._settings,n=t||n.container.querySelectorAll(n.elements_selector);this._elements=Array.prototype.slice.call(n).filter(function(t){return!i(t)}),!O&&this._observer?this._elements.forEach(function(t){e._observer.observe(t)}):this.loadAll()},destroy:function(){var e=this;this._observer&&(this._elements.forEach(function(t){e._observer.unobserve(t)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,e){R(t,this,e)},loadAll:function(){var e=this;this._elements.forEach(function(t){e.load(t)})}},t&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)a(t,n);else a(t,e)}(T,window.lazyLoadOptions),T}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function o(){console.log("[LiteSpeed] Start Lazyload image"),s=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:n}),i=function(){s.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var s,i;t.addEventListener?t.addEventListener("load",o,!1):t.attachEvent("onload",o)}(window,document);</script></body>
</html>

				
			

Output:

7.1

Example Explain-

In the above example, whatever the content or text is written in between < p > </ p > are consider as a paragraph and it will display on your browser in the format like a paragraph.

What is the use of br tag in HTML Paragraph?

In HTML Paragraph br tag is used for a line break. If you wish to write a song, address or poem them the format for the poem or song must need a line break. For the line break, br tag is used. Br tag does not consist of the closing tag. Br tag is used at the end of the line where you want to break the particular line with no closing tag. It is very easy to use br tag in HTML paragraph and make your paragraph so attractive and user efficient.

Syntax-  Line or text < br >

Example-

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>br tag</title>
</head>
<body data-rsssl=1>
    <p>
    GEEKY4U.com (learn with passion) <br>
    GEEKY4U.com (learn with passion) <br>
    GEEKY4U.com (learn with passion) <br>
    GEEKY4U.com (learn with passion) <br>
    </p> <script data-no-optimize="1" defer>var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,o=arguments[e];for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";function r(t,e){return t.getAttribute(o+e)}function s(t,e,n){e=o+e,null!==n?t.setAttribute(e,n):t.removeAttribute(e)}function i(t){return r(t,u)===f}function l(t,e){return s(t,d,e),0}function c(t){return r(t,d)}function a(t,e){var n,o="LazyLoad::Initialized",s=new t(e);try{n=new CustomEvent(o,{detail:{instance:s}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(o,!1,!1,{instance:s})}window.dispatchEvent(n)}var n={elements_selector:"img",container:document,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",load_delay:0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,callback_finish:null,to_webp:!1},o="data-",u="was-processed",d="ll-timeout",f="true";function _(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t}function h(t,e,n,o){for(var s,i,a=0;s=t.children[a];a+=1)"SOURCE"===s.tagName&&(i=r(s,n),A(s,e,i,o))}function b(t,e){var n,o,s=e._settings,i=t.tagName;if(i=C[i])return i(t,s),e._updateLoadingCount(1),e._elements=(o=e._elements,n=t,o.filter(function(t){return t!==n})),0;e=t,o=s,t=z&&o.to_webp,s=r(e,o.data_src),o=r(e,o.data_bg),s&&(s=_(s,t),e.style.backgroundImage='url("'+s+'")'),o&&(t=_(o,t),e.style.backgroundImage=t)}function g(t,e){k?t.classList.add(e):t.className+=(t.className?" ":"")+e}function m(t,e){t&&t(e)}function v(t,e,n){t.addEventListener(e,n)}function p(t,e,n){t.removeEventListener(e,n)}function y(t,e,n){p(t,N,e),p(t,S,e),p(t,x,n)}function w(t,e,n){var o=n._settings,s=e?o.class_loaded:o.class_error,i=e?o.callback_load:o.callback_error,e=t.target;t=e,o=o.class_loading,k?t.classList.remove(o):t.className=t.className.replace(new RegExp("(^|\\s+)"+o+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""),g(e,s),m(i,e),n._updateLoadingCount(-1)}function E(n,o){function s(t){w(t,!0,o),y(n,s,a)}var t,e,i,a=function t(e){w(e,!1,o),y(n,s,t)};i=a,v(t=n,N,e=s),v(t,S,e),v(t,x,i)}function L(t,e,n){R(t,n),e.unobserve(t)}function I(t){var e=c(t);e&&(clearTimeout(e),l(t,null))}var t="undefined"!=typeof window,O=t&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),e=t&&"IntersectionObserver"in window,k=t&&"classList"in document.createElement("p"),z=t&&!1,A=function(t,e,n,o){n&&t.setAttribute(e,_(n,o))},C={IMG:function(t,e){var n=z&&e.to_webp,o=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&h(s,"srcset",o,n);s=r(t,e.data_sizes);A(t,"sizes",s);o=r(t,o);A(t,"srcset",o,n);e=r(t,e.data_src);A(t,"src",e,n)},IFRAME:function(t,e){e=r(t,e.data_src);A(t,"src",e)},VIDEO:function(t,e){var n=e.data_src,e=r(t,n);h(t,"src",n),A(t,"src",e),t.load()}},N="load",S="loadeddata",x="error",M=["IMG","IFRAME","VIDEO"];function R(t,e,n){var o=e._settings;!n&&i(t)||(m(o.callback_enter,t),-1<M.indexOf(t.tagName)&&(E(t,e),g(t,o.class_loading)),b(t,e),s(t,u,f),m(o.callback_set,t))}function j(t){return t.isIntersecting||0<t.intersectionRatio}function T(t,e){this._settings=_extends({},n,t),this._setObserver(),this._loadingCount=0,this.update(e)}return T.prototype={_manageIntersection:function(t){var e,n,o,s,i=this._observer,a=this._settings.load_delay,r=t.target;a?j(t)?(e=r,n=i,s=(o=this)._settings.load_delay,(a=c(e))||(a=setTimeout(function(){L(e,n,o),I(e)},s),l(e,a))):I(r):j(t)&&L(r,i,this)},_onIntersection:function(t){t.forEach(this._manageIntersection.bind(this))},_setObserver:function(){var t;e&&(this._observer=new IntersectionObserver(this._onIntersection.bind(this),{root:(t=this._settings).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))},_updateLoadingCount:function(t){this._loadingCount+=t,0===this._elements.length&&0===this._loadingCount&&m(this._settings.callback_finish)},update:function(t){var e=this,n=this._settings,n=t||n.container.querySelectorAll(n.elements_selector);this._elements=Array.prototype.slice.call(n).filter(function(t){return!i(t)}),!O&&this._observer?this._elements.forEach(function(t){e._observer.observe(t)}):this.loadAll()},destroy:function(){var e=this;this._observer&&(this._elements.forEach(function(t){e._observer.unobserve(t)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,e){R(t,this,e)},loadAll:function(){var e=this;this._elements.forEach(function(t){e.load(t)})}},t&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)a(t,n);else a(t,e)}(T,window.lazyLoadOptions),T}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function o(){console.log("[LiteSpeed] Start Lazyload image"),s=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:n}),i=function(){s.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var s,i;t.addEventListener?t.addEventListener("load",o,!1):t.attachEvent("onload",o)}(window,document);</script></body>
</html>

				
			

Output:

7.2

What is the concept of hr tag in HTML Paragraph?

The horizontal rule in HTML is used in a paragraph, if the user wishes to add some line spacing between the paragraph like shift spacing or thematic break then the concept of the horizontal rule is used. In HTML < hr > tag represents horizontal rule in your HTML document. < hr > tag use in between the paragraph tag for providing line spacing between the paragraph. < hr > tag does not have an end tag.

Example-

				
					<!DOCTYPE html>
<html>
<head>
            <title>hr tag</title>
</head>
    <body data-rsssl=1>
        <h1>My main heading</h1>
        
        <p>
        Horizontal rule in html is use in paragraph, 
        if user wish to add some line spacing between the paragraph 
        like shift spacing or thematic break then the concept of horizontal rule is used.
        </p>
        <hr>
        
        In HTML <hr> tag represents horizontal rule in your html document. 
        <hr> tag use in between the paragraph tag for providing line spacing between the paragraph.
        <hr> tag does not have end tag. <script data-no-optimize="1" defer>var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,o=arguments[e];for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";function r(t,e){return t.getAttribute(o+e)}function s(t,e,n){e=o+e,null!==n?t.setAttribute(e,n):t.removeAttribute(e)}function i(t){return r(t,u)===f}function l(t,e){return s(t,d,e),0}function c(t){return r(t,d)}function a(t,e){var n,o="LazyLoad::Initialized",s=new t(e);try{n=new CustomEvent(o,{detail:{instance:s}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(o,!1,!1,{instance:s})}window.dispatchEvent(n)}var n={elements_selector:"img",container:document,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",load_delay:0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,callback_finish:null,to_webp:!1},o="data-",u="was-processed",d="ll-timeout",f="true";function _(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t}function h(t,e,n,o){for(var s,i,a=0;s=t.children[a];a+=1)"SOURCE"===s.tagName&&(i=r(s,n),A(s,e,i,o))}function b(t,e){var n,o,s=e._settings,i=t.tagName;if(i=C[i])return i(t,s),e._updateLoadingCount(1),e._elements=(o=e._elements,n=t,o.filter(function(t){return t!==n})),0;e=t,o=s,t=z&&o.to_webp,s=r(e,o.data_src),o=r(e,o.data_bg),s&&(s=_(s,t),e.style.backgroundImage='url("'+s+'")'),o&&(t=_(o,t),e.style.backgroundImage=t)}function g(t,e){k?t.classList.add(e):t.className+=(t.className?" ":"")+e}function m(t,e){t&&t(e)}function v(t,e,n){t.addEventListener(e,n)}function p(t,e,n){t.removeEventListener(e,n)}function y(t,e,n){p(t,N,e),p(t,S,e),p(t,x,n)}function w(t,e,n){var o=n._settings,s=e?o.class_loaded:o.class_error,i=e?o.callback_load:o.callback_error,e=t.target;t=e,o=o.class_loading,k?t.classList.remove(o):t.className=t.className.replace(new RegExp("(^|\\s+)"+o+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""),g(e,s),m(i,e),n._updateLoadingCount(-1)}function E(n,o){function s(t){w(t,!0,o),y(n,s,a)}var t,e,i,a=function t(e){w(e,!1,o),y(n,s,t)};i=a,v(t=n,N,e=s),v(t,S,e),v(t,x,i)}function L(t,e,n){R(t,n),e.unobserve(t)}function I(t){var e=c(t);e&&(clearTimeout(e),l(t,null))}var t="undefined"!=typeof window,O=t&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),e=t&&"IntersectionObserver"in window,k=t&&"classList"in document.createElement("p"),z=t&&!1,A=function(t,e,n,o){n&&t.setAttribute(e,_(n,o))},C={IMG:function(t,e){var n=z&&e.to_webp,o=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&h(s,"srcset",o,n);s=r(t,e.data_sizes);A(t,"sizes",s);o=r(t,o);A(t,"srcset",o,n);e=r(t,e.data_src);A(t,"src",e,n)},IFRAME:function(t,e){e=r(t,e.data_src);A(t,"src",e)},VIDEO:function(t,e){var n=e.data_src,e=r(t,n);h(t,"src",n),A(t,"src",e),t.load()}},N="load",S="loadeddata",x="error",M=["IMG","IFRAME","VIDEO"];function R(t,e,n){var o=e._settings;!n&&i(t)||(m(o.callback_enter,t),-1<M.indexOf(t.tagName)&&(E(t,e),g(t,o.class_loading)),b(t,e),s(t,u,f),m(o.callback_set,t))}function j(t){return t.isIntersecting||0<t.intersectionRatio}function T(t,e){this._settings=_extends({},n,t),this._setObserver(),this._loadingCount=0,this.update(e)}return T.prototype={_manageIntersection:function(t){var e,n,o,s,i=this._observer,a=this._settings.load_delay,r=t.target;a?j(t)?(e=r,n=i,s=(o=this)._settings.load_delay,(a=c(e))||(a=setTimeout(function(){L(e,n,o),I(e)},s),l(e,a))):I(r):j(t)&&L(r,i,this)},_onIntersection:function(t){t.forEach(this._manageIntersection.bind(this))},_setObserver:function(){var t;e&&(this._observer=new IntersectionObserver(this._onIntersection.bind(this),{root:(t=this._settings).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))},_updateLoadingCount:function(t){this._loadingCount+=t,0===this._elements.length&&0===this._loadingCount&&m(this._settings.callback_finish)},update:function(t){var e=this,n=this._settings,n=t||n.container.querySelectorAll(n.elements_selector);this._elements=Array.prototype.slice.call(n).filter(function(t){return!i(t)}),!O&&this._observer?this._elements.forEach(function(t){e._observer.observe(t)}):this.loadAll()},destroy:function(){var e=this;this._observer&&(this._elements.forEach(function(t){e._observer.unobserve(t)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,e){R(t,this,e)},loadAll:function(){var e=this;this._elements.forEach(function(t){e.load(t)})}},t&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)a(t,n);else a(t,e)}(T,window.lazyLoadOptions),T}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function o(){console.log("[LiteSpeed] Start Lazyload image"),s=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:n}),i=function(){s.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var s,i;t.addEventListener?t.addEventListener("load",o,!1):t.attachEvent("onload",o)}(window,document);</script></body>
</html>


				
			

Output:

7.3

What is the use of align attribute in HTML Paragraphs?

In HTML Paragraph, align is a special attribute that is given to the text of your HTML Paragraph for making your text document Right align, Left align, or center align or justify respectively.

There are 4 types of align attributes in HTML paragraph-

Right align– Right align attribute is used to set your HTML paragraph into right align. Whatever the text you will write under the right align it will display at the right corner of your HTML page.

Left align- Left align attribute is used to set your HTML paragraph into left align. Whatever the text you will write under the left align it will display at the very left corner of your HTML page.

Center align- Center align attribute is used to set your HTML paragraph into center align. Whatever the text you will write under the center align it will display at the center of your HTML page.

Justify- It will help your HTML paragraph to extend your paragraph text for making the width of all the lines equal.

Syntax-

< p align=”left” > </ p >

< p align=”right” > </ p >

< p align=”center”> </ p >

Example-

				
					<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>align attribute</title>
</head>
<body data-rsssl=1>
    <h1> GEEKY4U.com (learn with passion) </h1>
    <h3>
    <p align="left"> 
     GEEKY4U.com (learn with passion)
    </p>
    <p align="center"> 
     GEEKY4U.com (learn with passion)
    </p>
    <p align="right"> 
    GEEKY4U.com (learn with passion)
    </p>
    </h3> <script data-no-optimize="1" defer>var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,o=arguments[e];for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";function r(t,e){return t.getAttribute(o+e)}function s(t,e,n){e=o+e,null!==n?t.setAttribute(e,n):t.removeAttribute(e)}function i(t){return r(t,u)===f}function l(t,e){return s(t,d,e),0}function c(t){return r(t,d)}function a(t,e){var n,o="LazyLoad::Initialized",s=new t(e);try{n=new CustomEvent(o,{detail:{instance:s}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(o,!1,!1,{instance:s})}window.dispatchEvent(n)}var n={elements_selector:"img",container:document,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",load_delay:0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,callback_finish:null,to_webp:!1},o="data-",u="was-processed",d="ll-timeout",f="true";function _(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t}function h(t,e,n,o){for(var s,i,a=0;s=t.children[a];a+=1)"SOURCE"===s.tagName&&(i=r(s,n),A(s,e,i,o))}function b(t,e){var n,o,s=e._settings,i=t.tagName;if(i=C[i])return i(t,s),e._updateLoadingCount(1),e._elements=(o=e._elements,n=t,o.filter(function(t){return t!==n})),0;e=t,o=s,t=z&&o.to_webp,s=r(e,o.data_src),o=r(e,o.data_bg),s&&(s=_(s,t),e.style.backgroundImage='url("'+s+'")'),o&&(t=_(o,t),e.style.backgroundImage=t)}function g(t,e){k?t.classList.add(e):t.className+=(t.className?" ":"")+e}function m(t,e){t&&t(e)}function v(t,e,n){t.addEventListener(e,n)}function p(t,e,n){t.removeEventListener(e,n)}function y(t,e,n){p(t,N,e),p(t,S,e),p(t,x,n)}function w(t,e,n){var o=n._settings,s=e?o.class_loaded:o.class_error,i=e?o.callback_load:o.callback_error,e=t.target;t=e,o=o.class_loading,k?t.classList.remove(o):t.className=t.className.replace(new RegExp("(^|\\s+)"+o+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""),g(e,s),m(i,e),n._updateLoadingCount(-1)}function E(n,o){function s(t){w(t,!0,o),y(n,s,a)}var t,e,i,a=function t(e){w(e,!1,o),y(n,s,t)};i=a,v(t=n,N,e=s),v(t,S,e),v(t,x,i)}function L(t,e,n){R(t,n),e.unobserve(t)}function I(t){var e=c(t);e&&(clearTimeout(e),l(t,null))}var t="undefined"!=typeof window,O=t&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),e=t&&"IntersectionObserver"in window,k=t&&"classList"in document.createElement("p"),z=t&&!1,A=function(t,e,n,o){n&&t.setAttribute(e,_(n,o))},C={IMG:function(t,e){var n=z&&e.to_webp,o=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&h(s,"srcset",o,n);s=r(t,e.data_sizes);A(t,"sizes",s);o=r(t,o);A(t,"srcset",o,n);e=r(t,e.data_src);A(t,"src",e,n)},IFRAME:function(t,e){e=r(t,e.data_src);A(t,"src",e)},VIDEO:function(t,e){var n=e.data_src,e=r(t,n);h(t,"src",n),A(t,"src",e),t.load()}},N="load",S="loadeddata",x="error",M=["IMG","IFRAME","VIDEO"];function R(t,e,n){var o=e._settings;!n&&i(t)||(m(o.callback_enter,t),-1<M.indexOf(t.tagName)&&(E(t,e),g(t,o.class_loading)),b(t,e),s(t,u,f),m(o.callback_set,t))}function j(t){return t.isIntersecting||0<t.intersectionRatio}function T(t,e){this._settings=_extends({},n,t),this._setObserver(),this._loadingCount=0,this.update(e)}return T.prototype={_manageIntersection:function(t){var e,n,o,s,i=this._observer,a=this._settings.load_delay,r=t.target;a?j(t)?(e=r,n=i,s=(o=this)._settings.load_delay,(a=c(e))||(a=setTimeout(function(){L(e,n,o),I(e)},s),l(e,a))):I(r):j(t)&&L(r,i,this)},_onIntersection:function(t){t.forEach(this._manageIntersection.bind(this))},_setObserver:function(){var t;e&&(this._observer=new IntersectionObserver(this._onIntersection.bind(this),{root:(t=this._settings).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))},_updateLoadingCount:function(t){this._loadingCount+=t,0===this._elements.length&&0===this._loadingCount&&m(this._settings.callback_finish)},update:function(t){var e=this,n=this._settings,n=t||n.container.querySelectorAll(n.elements_selector);this._elements=Array.prototype.slice.call(n).filter(function(t){return!i(t)}),!O&&this._observer?this._elements.forEach(function(t){e._observer.observe(t)}):this.loadAll()},destroy:function(){var e=this;this._observer&&(this._elements.forEach(function(t){e._observer.unobserve(t)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,e){R(t,this,e)},loadAll:function(){var e=this;this._elements.forEach(function(t){e.load(t)})}},t&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)a(t,n);else a(t,e)}(T,window.lazyLoadOptions),T}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function o(){console.log("[LiteSpeed] Start Lazyload image"),s=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:n}),i=function(){s.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var s,i;t.addEventListener?t.addEventListener("load",o,!1):t.attachEvent("onload",o)}(window,document);</script></body>
</html>

				
			

Output:

7.4

What is the concept of pre-element in HTML Paragraph?

HTML paragraph does not allow the line spacing or formatted text, whatever you write in the paragraph including spaces, line break, etc. the browser will display the output without any spacing or line break. The browser will discard all the formatting and display only the plain text. If you wish to write a text in poem format or in song format then pre-element is used.

Syntax-  < pre > Your text </ pre >

Example-

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pre element</title>
</head>
<body data-rsssl=1>
    <pre>
    GEEKY4U.com (learn with passion)                     GEEKY4U.com (learn with passion) 

    GEEKY4U.com (learn with passion)                     GEEKY4U.com (learn with passion)
    </pre> <script data-no-optimize="1" defer>var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,o=arguments[e];for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";function r(t,e){return t.getAttribute(o+e)}function s(t,e,n){e=o+e,null!==n?t.setAttribute(e,n):t.removeAttribute(e)}function i(t){return r(t,u)===f}function l(t,e){return s(t,d,e),0}function c(t){return r(t,d)}function a(t,e){var n,o="LazyLoad::Initialized",s=new t(e);try{n=new CustomEvent(o,{detail:{instance:s}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(o,!1,!1,{instance:s})}window.dispatchEvent(n)}var n={elements_selector:"img",container:document,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",load_delay:0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,callback_finish:null,to_webp:!1},o="data-",u="was-processed",d="ll-timeout",f="true";function _(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t}function h(t,e,n,o){for(var s,i,a=0;s=t.children[a];a+=1)"SOURCE"===s.tagName&&(i=r(s,n),A(s,e,i,o))}function b(t,e){var n,o,s=e._settings,i=t.tagName;if(i=C[i])return i(t,s),e._updateLoadingCount(1),e._elements=(o=e._elements,n=t,o.filter(function(t){return t!==n})),0;e=t,o=s,t=z&&o.to_webp,s=r(e,o.data_src),o=r(e,o.data_bg),s&&(s=_(s,t),e.style.backgroundImage='url("'+s+'")'),o&&(t=_(o,t),e.style.backgroundImage=t)}function g(t,e){k?t.classList.add(e):t.className+=(t.className?" ":"")+e}function m(t,e){t&&t(e)}function v(t,e,n){t.addEventListener(e,n)}function p(t,e,n){t.removeEventListener(e,n)}function y(t,e,n){p(t,N,e),p(t,S,e),p(t,x,n)}function w(t,e,n){var o=n._settings,s=e?o.class_loaded:o.class_error,i=e?o.callback_load:o.callback_error,e=t.target;t=e,o=o.class_loading,k?t.classList.remove(o):t.className=t.className.replace(new RegExp("(^|\\s+)"+o+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""),g(e,s),m(i,e),n._updateLoadingCount(-1)}function E(n,o){function s(t){w(t,!0,o),y(n,s,a)}var t,e,i,a=function t(e){w(e,!1,o),y(n,s,t)};i=a,v(t=n,N,e=s),v(t,S,e),v(t,x,i)}function L(t,e,n){R(t,n),e.unobserve(t)}function I(t){var e=c(t);e&&(clearTimeout(e),l(t,null))}var t="undefined"!=typeof window,O=t&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),e=t&&"IntersectionObserver"in window,k=t&&"classList"in document.createElement("p"),z=t&&!1,A=function(t,e,n,o){n&&t.setAttribute(e,_(n,o))},C={IMG:function(t,e){var n=z&&e.to_webp,o=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&h(s,"srcset",o,n);s=r(t,e.data_sizes);A(t,"sizes",s);o=r(t,o);A(t,"srcset",o,n);e=r(t,e.data_src);A(t,"src",e,n)},IFRAME:function(t,e){e=r(t,e.data_src);A(t,"src",e)},VIDEO:function(t,e){var n=e.data_src,e=r(t,n);h(t,"src",n),A(t,"src",e),t.load()}},N="load",S="loadeddata",x="error",M=["IMG","IFRAME","VIDEO"];function R(t,e,n){var o=e._settings;!n&&i(t)||(m(o.callback_enter,t),-1<M.indexOf(t.tagName)&&(E(t,e),g(t,o.class_loading)),b(t,e),s(t,u,f),m(o.callback_set,t))}function j(t){return t.isIntersecting||0<t.intersectionRatio}function T(t,e){this._settings=_extends({},n,t),this._setObserver(),this._loadingCount=0,this.update(e)}return T.prototype={_manageIntersection:function(t){var e,n,o,s,i=this._observer,a=this._settings.load_delay,r=t.target;a?j(t)?(e=r,n=i,s=(o=this)._settings.load_delay,(a=c(e))||(a=setTimeout(function(){L(e,n,o),I(e)},s),l(e,a))):I(r):j(t)&&L(r,i,this)},_onIntersection:function(t){t.forEach(this._manageIntersection.bind(this))},_setObserver:function(){var t;e&&(this._observer=new IntersectionObserver(this._onIntersection.bind(this),{root:(t=this._settings).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))},_updateLoadingCount:function(t){this._loadingCount+=t,0===this._elements.length&&0===this._loadingCount&&m(this._settings.callback_finish)},update:function(t){var e=this,n=this._settings,n=t||n.container.querySelectorAll(n.elements_selector);this._elements=Array.prototype.slice.call(n).filter(function(t){return!i(t)}),!O&&this._observer?this._elements.forEach(function(t){e._observer.observe(t)}):this.loadAll()},destroy:function(){var e=this;this._observer&&(this._elements.forEach(function(t){e._observer.unobserve(t)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,e){R(t,this,e)},loadAll:function(){var e=this;this._elements.forEach(function(t){e.load(t)})}},t&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)a(t,n);else a(t,e)}(T,window.lazyLoadOptions),T}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function o(){console.log("[LiteSpeed] Start Lazyload image"),s=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:n}),i=function(){s.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var s,i;t.addEventListener?t.addEventListener("load",o,!1):t.attachEvent("onload",o)}(window,document);</script></body></html>


Output:

7.5