Table of Contents

What is HTML formatting?

HTML formatting provides the ability to edit and format your text document with the help of formatting tags without using CSS (cascading style sheet). HTML formatting is used for making your text bold, italic, superscript, and subscript, and many more within the paragraph tag or heading tag respectively. HTML formatting is used for making your webpage and website more attractive.

Syntax-    < html start tag > < formatting tag > your text </ formatting end tag ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Formatting tag</title>
  </head>
  <body data-rsssl=1>
    <h1><b>GEEKY4U.com (learn with passion) </b></h1>
    <h2><i>GEEKY4U.com (learn with passion) </i></h2> <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:

9.1

What are the different types of formatting used in HTML?

1) Use of Bold tag-

In an HTML document if you wish to highlight some content and make it bold then a bold tag is used.

Syntax-    < html start tag > < b > your text </ b ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>bold tag</title>
  </head>
  <body data-rsssl=1>
    <h1><b>GEEKY4U.com (learn with passion) </b></h1> <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:

9.2

2) Strong / Important-

The strong tag is used when we need to highlight some important content within the HTML document. In HTML Formatting, a strong tag also works as a bold tag.

Syntax-  < html start tag > < strong > your text </ strong ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>strong tag</title>
  </head>
  <body data-rsssl=1>
    <p>GEEKY4U.com (learn with passion) -----------without using strong tag</p>
    <p>
      <strong>GEEKY4U.com (learn with passion)---------with strong tag</strong>
    </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:

9.3

3) Italic tag in HTML formatting-

An Italic tag in HTML formatting is used for making the text italic. Same as a bold tag italic tag is used inside the paragraph or heading tag.

Syntax-   < html start tag > < I > your text </ I ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Italic tag</title>
  </head>
  <body data-rsssl=1>
    <h1><i>GEEKY4U.com (learn with passion) </i></h1> <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:

9.5

4) Emphasized tag in HTML Style formatting-

Emphasized tag is used for making text italic. Emphasis tag represented by < em > which is used within a paragraph or heading tag.

Syntax-  < html start tag > < em > your text </ em ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>em tag</title>
  </head>
  <body data-rsssl=1>
    <h1><i>GEEKY4U.com (learn with passion) </i></h1> <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:

9.5

5) Marked tag in HTML Formatting-

Mark tag is used for marking the very important text within the HTML document.

Syntax-  < html start tag > your text < mark tag > mark your imp text </ mark tag > your text</ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>mark tag</title>
  </head>
  <body data-rsssl=1>
    <h2><mark>GEEKY4U.com </mark> (learn with passion) </h2> <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:

9.7

6) Smaller tag in HTML Formatting-

A smaller tag is used for making the HTML text small.

Syntax-  < html start tag > your text< small > your text </ small >your text</ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>small tag</title>
  </head>
  <body data-rsssl=1>
    <p>GEEKY4U.com (learn with passion) </p>
    <p><small>GEEKY4U.com (learn with passion) </small></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:

9.8

7) Delete tag in HTML formatting-

This tag is used to represent the deleted element from your HTML text document. For representing the deleted element, the browser will show a strike line over the deleted text. Delete tag is represented by < del >

Syntax-  < html start tag > your text< del > your text </ del >your text</ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>del tag</title>
  </head>
  <body data-rsssl=1>
    <h1>GEEKY4U.com (learn with passion) <del> (learn with passion) </del></h1> <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:

9.9

8) Inserted Tag in HTML Formatting-

Inserted tag in HTML formatting will help to display an inserted text. If you use delete tag then it will display strike and at the same time if you use insert tag then the browser will automatically create one underline to the inserted element.

Syntax –   < html start tag > your text< del > your text </ del >your text< ins > your inserted text</ ins ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ins tag</title>
  </head>
  <body data-rsssl=1>
    <h1>
      GEEKY4U.com <del> (learn with passion) </del><ins> (learn with passion) </ins>
    </h1> <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:

9.10

9) Subscript tag in HTML formatting-

HTML formatting supports the subscript tag. This tag will make the text in subscript means the come text is in the normal line and some will be below the normal line. The tag used to represent the subscript tag is < sub >.

Syntax – < html start tag > your text< sub > your text </ sub >your text</ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>subscript tag</title>
  </head>
  <body data-rsssl=1>
    <h1>GEEKY4U.com <sub> (learn with passion) </sub></h1> <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:

9.11

10) Superscript tag –

HTML formatting also supports the superscript tag. This tag will make the text superscript means they come text is in the normal line and some well above the normal line. The tag used to represent the superscript tag is < sup >.

Syntax – < html start tag > your text< sup > your text </ sup >your text</ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>superscript tag</title>
  </head>
  <body data-rsssl=1>
    <h1>GEEKY4U.com <sup> (learn with passion) </sup></h1> <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:

9.12

How to change text format in HTML?

We can change the text format of the HTML text document by using the Inline text element. The inline element in the tag will support the paragraph as well as the heading tag with the help of some CSS properties like font-family, font size, or font color.

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <title>inline style</title>
  </head>
  <body data-rsssl=1>
    <h1 style="background-color: rgba (94, 243, 243, 0.356)">
      GEEKY4U.com(learn with passion)
    </h1>
    <h2 style="background-color: rgb (88, 236, 175)">
      GEEKY4U.com(learn with passion)
    </h2>
    <p style="background-color: rgb (193, 226, 46)">
      GEEKY4U.com(learn with passion)
    </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:

9.13