{"id":78503,"date":"2020-06-24T09:00:52","date_gmt":"2020-06-24T03:30:52","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=78503"},"modified":"2024-07-26T15:23:24","modified_gmt":"2024-07-26T09:53:24","slug":"html-attributes","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-attributes\/","title":{"rendered":"HTML Attributes with Examples"},"content":{"rendered":"<p>In order to provide additional and extra bits of information related to an element such as \u2018href\u2019 to specify the URL of a link using &lt;a&gt; element, HTML attributes are used. We are going to learn HTML attributes in detail now. So let&#8217;s start!!!<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-78628\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes.jpg\" alt=\"HTML Attributes\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><\/p>\n<h2>HTML Attributes<\/h2>\n<p>HTML attributes structure the elements and manipulate their behavior as per the user\u2019s jurisdiction and preferences. Attributes are inserted in the opening tags of the elements and have a name-value pair.<\/p>\n<ul>\n<li><strong>name &#8211; <\/strong>It is used to specify the property that needs to be added or manipulated. For example, the height of an image.<\/li>\n<li><strong>value &#8211; <\/strong>This is for defining the value of the property. For example, image height should be 20 px.<br \/>\n&lt;img height=&#8221;20px&#8221;&gt;<\/li>\n<\/ul>\n<p>Here, &lt;img&gt; is a non-container element whose attribute height(name) has been set to 20 px(value).<\/p>\n<p>Let us learn the same with an example. We will set the align property of a paragraph as below:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt; \r\n&lt;html&gt; \r\n&lt;head&gt; \r\n&lt;title&gt;DataFlair-Attributes&lt;\/title&gt; \r\n&lt;\/head&gt;\r\n   &lt;body&gt; \r\n      &lt;p align = \"left\"&gt;DataFlair&lt;\/p&gt; \r\n      &lt;p align = \"center\"&gt;DataFlair&lt;\/p&gt; \r\n      &lt;p align = \"right\"&gt;DataFlair&lt;\/p&gt; \r\n   &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-237.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-78631\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-237.png\" alt=\"HTML Attributes\" width=\"640\" height=\"262\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-237.png 640w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-237-300x123.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-237-150x61.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-237-520x213.png 520w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<h2>Major HTML Attributes<\/h2>\n<p>Some of the major HTML attributes that we frequently use are as follows-<\/p>\n<h3><strong>1. Class in HTML<\/strong><\/h3>\n<p>The class attribute can be accessed by any element and is useful to identify a group of elements in a HTML document together. These elements can be styled using CSS or actions can be performed on them using JavaScript.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt; \r\n&lt;html&gt;   \r\n&lt;head&gt; \r\n    &lt;style&gt; \r\n        .country {  \r\n            background-color: black; \r\n            color: white; \r\n            padding: 8px; \r\n            font-weight: bold;\r\n            font-family: monospace;\r\n        } \r\n    &lt;\/style&gt; \r\n&lt;\/head&gt; \r\n &lt;body&gt; \r\n    &lt;h2 class=\"country\"&gt;DataFlair&lt;\/h2&gt; \r\n    &lt;p&gt;HTML Attributes&lt;\/p&gt;  \r\n    &lt;h2 class=\"country\"&gt;Article on&lt;\/h2&gt;  \r\n    &lt;h2 class=\"country\"&gt;The Class attribute&lt;\/h2&gt;   \r\n&lt;\/body&gt; \r\n&lt;\/html&gt; \r\n<\/pre>\n<p><span style=\"font-weight: 400\">(Here, the class attribute is accessed with CSS using the dot operator i.e. \u2018.\u2019).<\/span><\/p>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-239.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-78630\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-239.png\" alt=\"HTML class attribute\" width=\"495\" height=\"259\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-239.png 495w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-239-300x157.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-239-150x78.png 150w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><\/a><\/p>\n<h3>2. Id<\/h3>\n<p>We use HTML id attribute to uniquely identify a particular element in the HTML document. It can be used with at most one element. It also acts as a distinguisher between two or more elements with the same name.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt; \r\n&lt;html&gt; \r\n&lt;head&gt; \r\n    &lt;title&gt;DataFlair id attribute&lt;\/title&gt; \r\n    &lt;style&gt;  \r\n        #DataFlair { \r\n            font-size:50px; \r\n            font-weight:bold; \r\n            text-align:center; \r\n         } \r\n         #Article { \r\n             text-align:center; \r\n             font-size:50px; \r\n         } \r\n    &lt;\/style&gt; \r\n&lt;\/head&gt; \r\n&lt;body&gt; \r\n    &lt;div id=\"DataFlair\"&gt;DataFlair&lt;\/div&gt; \r\n    &lt;div id=\"Article\"&gt;E-learning&lt;\/div&gt; \r\n&lt;\/body&gt; \r\n&lt;\/html&gt;  \r\n<\/pre>\n<p>(Here, two divisions with id DataFlair and Article have been created and styled with CSS. \u2018#\u2019 is used to access these elements with id).<\/p>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-241.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-78632\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-241.png\" alt=\"HTML Id\" width=\"788\" height=\"339\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-241.png 788w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-241-300x129.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-241-150x65.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-241-768x330.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-241-520x224.png 520w\" sizes=\"auto, (max-width: 788px) 100vw, 788px\" \/><\/a><\/p>\n<h3>3. HTML Style<\/h3>\n<p>The style attribute is for inline styling of HTML elements using CSS.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;\/head&gt;\r\n &lt;body&gt;\r\n      &lt;p style = \"font-family:arial; color:#FF0000; font-weight: bold; font-size: 20px\"&gt;DataFlair E-Learning&lt;\/p&gt;\r\n   &lt;\/body&gt;    \r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-243.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-78634\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-243.png\" alt=\"HTML STyle attribute\" width=\"623\" height=\"197\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-243.png 623w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-243-300x95.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-243-150x47.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-243-520x164.png 520w\" sizes=\"auto, (max-width: 623px) 100vw, 623px\" \/><\/a><\/p>\n<h3>4. HTML Title<\/h3>\n<p>The title attribute is useful to give a title for the element. Everytime you mouse-over that particular element, the value of the title attribute will be displayed on its tooltip.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;\/head&gt;\r\n &lt;body&gt;\r\n&lt;h3 title = \"Hello!\"&gt;Welcome to DataFlair&lt;\/h3&gt;\r\n&lt;p title=\"DataFlair\"&gt;\r\nE-Learning\r\n&lt;\/p&gt; \r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/20200513_223540.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-78633\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/20200513_223540.jpg\" alt=\"HTML Title\" width=\"2133\" height=\"1455\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/20200513_223540.jpg 2133w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/20200513_223540-300x205.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/20200513_223540-1024x699.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/20200513_223540-150x102.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/20200513_223540-768x524.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/20200513_223540-1536x1048.jpg 1536w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/20200513_223540-2048x1397.jpg 2048w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/20200513_223540-520x355.jpg 520w\" sizes=\"auto, (max-width: 2133px) 100vw, 2133px\" \/><\/a><\/p>\n<h3>5. HTML Lang Attribute<\/h3>\n<p>This attribute is used to specify the language of the HTML document and is used with the &lt;html&gt; element.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en-US\"&gt;\r\n&lt;head&gt;\r\n&lt;\/head&gt;\r\n &lt;body&gt;\r\n&lt;h3&gt;Welcome to DataFlair&lt;\/h3&gt;\r\n&lt;p&gt;\r\nE-Learning\r\n&lt;\/p&gt; \r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-246.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-78636\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-246.png\" alt=\"HTML Lang Attribute\" width=\"258\" height=\"110\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-246.png 258w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-246-150x64.png 150w\" sizes=\"auto, (max-width: 258px) 100vw, 258px\" \/><\/a><\/p>\n<h3>6. Href HTML attribute<\/h3>\n<p>HTML href attribute is used to specify the URL of the destination address i.e. link, as defined by the &lt;a&gt;,anchor,element. On using the value of another attribute i.e. \u2018target\u2019 and setting it to \u2018_blank\u2019, the link will be redirected to another window or tab.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en-US\"&gt;\r\n&lt;head&gt;\r\n&lt;\/head&gt;\r\n &lt;body&gt;\r\n&lt;p&gt;&lt;a href=\"https:\/\/data-flair.training\"&gt;DataFlair,E-Learning:Same Tab&lt;\/a&gt;&lt;\/p&gt;\r\n&lt;p&gt;&lt;a href=\"https:\/\/data-flair.training\" target=\"_blank\"&gt;DataFlair,E-Learning:Different Tab&lt;\/a&gt;&lt;\/p&gt;\r\n&lt;\/p&gt; \r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-309.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-78637\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-309.png\" alt=\"HTML Href\" width=\"394\" height=\"152\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-309.png 394w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-309-300x116.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-309-150x58.png 150w\" sizes=\"auto, (max-width: 394px) 100vw, 394px\" \/><\/a><\/p>\n<h3>7. HTML Image Attributes<\/h3>\n<ul>\n<li><strong>src &#8211;<\/strong> The src attribute is used to specify the location or URL of a particular image (defined by the &lt;img&gt; element).<\/li>\n<li><strong>alt &#8211;<\/strong> We use it to specify some alternative text related to the image which is displayed if the user cannot view the image due to some inevitable reasons.<\/li>\n<li><strong>height &#8211;<\/strong> It is for specifing the height of the image in pixels.<\/li>\n<li><strong>width &#8211;<\/strong> It is useful to specify the width of the image in pixels.<\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt; \r\n&lt;head&gt; \r\n    &lt;title&gt;DataFlair&lt;\/title&gt; \r\n&lt;\/head&gt; \r\n&lt;body&gt; \r\n   &lt;h1&gt;Here is an image&lt;\/h1&gt;\r\n   &lt;img src=\"C:\\Users\\shreya\\Desktop\\DATAFLAIR\\DataFlair.png\" alt=\"DataFlair\" height=\"400px\" width=\"400px\"&gt;\r\n&lt;\/body&gt; \r\n&lt;\/html&gt; \r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-216-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-78629\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-216-1.png\" alt=\"HTML Image attribute\" width=\"645\" height=\"469\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-216-1.png 645w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-216-1-300x218.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-216-1-150x109.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-216-1-520x378.png 520w\" sizes=\"auto, (max-width: 645px) 100vw, 645px\" \/><\/a><\/p>\n<p>Besides these typical features, it is also necessary to know how all these attributes work to make Websites more accessible and usable. Globally-used attributes such as \u2018alt\u2019 in images not only writes an alternative text for screen readers, but also enriches SEO by explaining content of the image. Appropriate usage of \u2018lang\u2019 attributes can be used for specifying language of the content and can be useful for engine indexation and accessibility for people by assistive technologies.<\/p>\n<p>Moreover, utilizing such attributes as \u2018data\u2019 for storing the additional information can be rather helpful in web applications. They enable one to add more information about the page to simple and general HTML tags excluding those non-standard attributes, thus enhancing the interchange between HTML and JavaScript while keeping the two valid.<\/p>\n<p>Such practices are important in the development of good interactivity on web pages and these are some of the reasons why PHP is important in the development of good web applications.<\/p>\n<p><strong>Note:<\/strong><\/p>\n<ul>\n<li>For attribute values, we can use both single and double quotes. We can write href attribute\u2019s value without quotes as well.<\/li>\n<li>If the attribute value contains double quotes, it must be within single quotes.<\/li>\n<li>Some attributes of HTML 5 that do not have name-value pairs are boolean attributes. For example &#8211; checked, disable, required, readonly, etc.<\/li>\n<\/ul>\n<p>Following is an example with HTML boolean attributes in a form:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt; \r\n&lt;head&gt; \r\n&lt;title&gt;DataFlair&lt;\/title&gt; \r\n&lt;\/head&gt; \r\n&lt;body&gt; \r\n&lt;form&gt;\r\n&lt;input type=\"email\" required&gt;&lt;br&gt;\r\n&lt;input type=\"submit\" value=\"Submit\" disabled&gt;&lt;br&gt;\r\n&lt;input type=\"checkbox\" checked&gt;&lt;br&gt;\r\n&lt;input type=\"text\" value=\"Read only text\" readonly&gt;&lt;br&gt;\r\n&lt;\/form&gt;\r\n&lt;\/body&gt; \r\n&lt;\/html&gt; \r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-250.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-78635\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-250.png\" alt=\"HTML Image\" width=\"405\" height=\"171\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-250.png 405w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-250-300x127.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-250-150x63.png 150w\" sizes=\"auto, (max-width: 405px) 100vw, 405px\" \/><\/a><\/p>\n<h2>Summary<\/h2>\n<p>HTML Attributes are useful to manipulate HTML elements and in this article, we have discussed some of the major HTML attributes &#8211; class, id, style, href, src, alt, height, width and some boolean attributes. The use of HTML attributes facilitates the creation and development of web-pages. It is important to have a gist of these widely used attributes, we would delve further into their details and more attributes in the preceding articles.<\/p>\n<p><strong>Do not forget to share your feedback in the comment section!!!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In order to provide additional and extra bits of information related to an element such as \u2018href\u2019 to specify the URL of a link using &lt;a&gt; element, HTML attributes are used. We are going&#46;&#46;&#46;<\/p>\n","protected":false},"author":10,"featured_media":78628,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22400],"tags":[32750,22445,22447,22446],"class_list":["post-78503","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-class-in-html","tag-html-attributes","tag-html-table-attributes","tag-html-tags-and-attributes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML Attributes with Examples - DataFlair<\/title>\n<meta name=\"description\" content=\"What are HTML tags and attributes? Learn different attibutes like class, id, style, title, lang, href, image, boolean, src, alt etc with examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/html-attributes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Attributes with Examples - DataFlair\" \/>\n<meta property=\"og:description\" content=\"What are HTML tags and attributes? Learn different attibutes like class, id, style, title, lang, href, image, boolean, src, alt etc with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/html-attributes\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-24T03:30:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-26T09:53:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Attributes with Examples - DataFlair","description":"What are HTML tags and attributes? Learn different attibutes like class, id, style, title, lang, href, image, boolean, src, alt etc with examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/html-attributes\/","og_locale":"en_US","og_type":"article","og_title":"HTML Attributes with Examples - DataFlair","og_description":"What are HTML tags and attributes? Learn different attibutes like class, id, style, title, lang, href, image, boolean, src, alt etc with examples.","og_url":"https:\/\/data-flair.training\/blogs\/html-attributes\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-06-24T03:30:52+00:00","article_modified_time":"2024-07-26T09:53:24+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/html-attributes\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/html-attributes\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"HTML Attributes with Examples","datePublished":"2020-06-24T03:30:52+00:00","dateModified":"2024-07-26T09:53:24+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-attributes\/"},"wordCount":828,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-attributes\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes.jpg","keywords":["class in HTML","html attributes","html table attributes","html tags and attributes"],"articleSection":["HTML Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/html-attributes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/html-attributes\/","url":"https:\/\/data-flair.training\/blogs\/html-attributes\/","name":"HTML Attributes with Examples - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-attributes\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-attributes\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes.jpg","datePublished":"2020-06-24T03:30:52+00:00","dateModified":"2024-07-26T09:53:24+00:00","description":"What are HTML tags and attributes? Learn different attibutes like class, id, style, title, lang, href, image, boolean, src, alt etc with examples.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/html-attributes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/html-attributes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/html-attributes\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Attributes.jpg","width":1200,"height":628,"caption":"HTML Attributes"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/html-attributes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"HTML Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/html\/"},{"@type":"ListItem","position":3,"name":"HTML Attributes with Examples"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.","url":"https:\/\/data-flair.training\/blogs\/author\/dfadteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=78503"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78503\/revisions"}],"predecessor-version":[{"id":142949,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78503\/revisions\/142949"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/78628"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=78503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=78503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=78503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}