Table of Contents

What is the definition of HTML attribute?

HTML attributes are a concept of providing extra Features to the HTML elements. In an HTML document, All the HTML elements may have attributes. Attributes are additional information or characteristics provided to the HTML elements like providing width and height in an image tag, providing color or font style to the name tag, etc. HTML Attributes are always defined under start tag or Opening Tag. The attribute consists of name/value-like pairs such as name=” value”. some tags like < img > image tag or < a > anchor tag must contain attributes. In < img > tag must contain SRC and alt attributes.

Examples of HTML attributes are given below

< img src=”D:\html\images\nature.png” width=”700″ height=”500″ >

 < a href=example.com>click here to go on link</ a >

< body background=”D:\html\images\nature.png” >

< table width=”50%” border=”1″ bordercolour=”black” cellpacing=”2″ cellpadding=”2″ >

< font size=”3″ color=”white” >

< input type=”text” Value=”example” >

Above Examples Explain here-

In the above example, < img > image tag consists of src attribute with width and height. Where src specifies the location or path of the particular image where your image has been saved in your local computer.

In the second example, < a > anchor tag refers to the hyperlink, which is used to link one web page to another web page. < a > anchor tag must have href attribute. In which href is an attribute which specifies the URL of the web page.

What is the SRC attribute in HTML?

The SRC attribute is an important attribute in the image tag. SRC is a source where SRC specifies the location or path of the particular image where your image has been saved in your local computer.

What is SRC in HTML with example?

If the user wishes to import the image into the HTML document then mention the path where your image has been saved will show by the SRC attribute. This attribute will help the HTML document where exactly your Image file has been located in your computer. Also helps the browser to print your Image. In < img > tag must contain SRC and alt attributes.

Syntax- < img src=” Source or path of you image in local computer ” >

 Example

				
					<!DOCTYPE html>
<html>
<head>
      		<title>image tag</title>
   	</head>
  	 <body data-rsssl=1>
   		<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" loading="lazy" data-src="D:\html\images\black.jpg" width="700" height="500" alt="D:\html\images\black" title="HTML Attributes 1"> <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 : 

img src

What is alt attribute in HTML and what is the use of alt attribute with example?

In an HTML document, the alt attribute is used in an Image tag. If the user wants to insert an image and at the same time alt attribute is used for specifying the alternate text in HTML document. In The image tag, the alt attribute is used for providing extra information regarding the image.

If you wish to insert an image in the HTML document but at the same time if you fail to give the correct src means source or path for the image and then you will get an error and the image will not print on your webpage then With the help of alt attribute you can understand what exactly your image is specifying.

Syntax–   < img alt =” any text you can write here” >

The text which is written in the alt attribute must specify the information about the image. If In the Image tag you are using < a > Tag for the link then at the same time your alt attribute will provide extra information regarding the link.

Example-

				
					<!DOCTYPE html>
<html>
	<head>
		<title>alt attribute </title>
   </head>
   <body data-rsssl=1>
		<h1>geeky4u.com</h1>
		<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" loading="lazy" data-src="D:\html\images\black.jpg" alt="Black and white image of wallpaper" width="700" height="500" title="HTML Attributes 3"> <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 : 

alt attribute

What is the use of height and width attributes in HTML with Example?

In HTML document Height and Width attributes are used when the user wishes to add any video or image respectively. It is very useful for the browser to understand the video size and image size when the height and Width attribute is mentioned in the HTML document. If the height and width attribute is mentioned in the code then it will be easier to understand the browser’s page and how much space is required for the particular video or image.

Syntax- 

  • < img src=”path” width=”#” height=”#” >
  • < video width=”pixels” >

ID attribute with example

Id attribute in an HTML is used for providing a unique id to the HTML document. HTML Id attribute must contain a unique value. Id attribute can be manipulated by both CSS and JavaScript. If you want to add some style declaration into your HTML document then CSS is used and at the same time, JavaScript is used for the manipulation of HTML elements with the Id attribute.

Syntax

				
					Syntax:-
#IdName {
	    	CSS properties
		}
<body data-rsssl=1>
	<h1 id ="Id Name">HTML text</h1>
<body data-rsssl=1>

				
			
				
					<!DOCTYPE html>
<html>
	<head>
      <title>Id attribute</title>
   
   
   </head>
   <body data-rsssl=1>
		<h1 id="mywebsite"> geeky4u.com</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>

				
			

What are title attributes and the use of title attributes for example?

In an HTML document, if you want to give a title for your document then < title > tag is used. This title is shown in the browser’s title or page’s tab. Web Browser then displays your page title on the very top corner of your page tab.

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

				
			

Output : 

title attribute

What is style attribute definition uses with example?

In your HTML document style attribute is used to provide extra features or characteristics to your web page so that the content which you mention in your HTML Document will look more attractive.

Example-

				
					<!DOCTYPE html>
<html>
<head>
      	<title>style tag</title>
</head>
   	<body data-rsssl=1>
   		<p style="color:red;">My paragraph is in red colour</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 : 

style attribute

What is Lang’s attribute definition used for example?

Lang attribute is used for applying different languages to the text of your HTML document. If you wish to add by default language to your HTML document then you need to add the Lang attribute in the HTML start tag. While applying the Lang attribute to your HTML tag it is important to apply language code in the content.

Syntax- < element lang=” language code” >

Example-

				
					<!DOCTYPE html>
<html>
<head>
	<title>Lang tag</title>
</head>
   	<body data-rsssl=1>
    		<p> This is my paragraph </p>
		<p lang="fr">ceci est ma premiere paragraphe</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 : 

Lang attribute