{"id":1942,"date":"2015-10-29T18:41:01","date_gmt":"2015-10-29T18:41:01","guid":{"rendered":"http:\/\/tutorialsclass.com\/?p=1942"},"modified":"2020-04-30T05:48:02","modified_gmt":"2020-04-30T05:48:02","slug":"html-attributes","status":"publish","type":"post","link":"https:\/\/tutorialsclass.com\/html-attributes\/","title":{"rendered":"HTML Attributes"},"content":{"rendered":"\n<p>HTML Attributes are part of the HTML Tags &amp; elements. These attributes specify some additional style or special information about the HTML tags.<\/p>\n\n\n\n<p>Most of the time attributes are specified as pairs. For example:&nbsp;<code>attribute=\"value\"<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntax of HTML Attributes<\/h3>\n\n\n\n<p>Attributes are always specified within a start tag. First, we need to specify the name of the attribute and then, we assign a value to it (name=\u201dvalue\u201d)<\/p>\n\n\n\n<p>Example:&nbsp;<code>&lt;h1&nbsp;title=\"My Title\"&gt;&nbsp;My Heading&nbsp;&lt;\/h1&gt;<\/code>&nbsp;tag.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">The title Attribute<\/h3>\n\n\n\n<p>Each HTML Tag allows some specific attributes. Some HTML Attributes are used by many different elements. For example, Title attribute can be used in almost every HTML element.<\/p>\n\n\n\n<p>HTML Title attribute is used to display some titles to users when they mouse over that element. For example: Example: <code>&lt;h1\u00a0title=\"My Title\">\u00a0My Heading\u00a0&lt;\/h1><\/code>\u00a0tag. <\/p>\n\n\n\n<p>In above example, when user will take his mouse to <code>\"My Heading\"<\/code> text a Title (like tooltip) <code>\"My Title\"<\/code> will be visible to user.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">The lang Attribute<\/h3>\n\n\n\n<p>HTML lang attribute is used to declare the language of html page content. This attribute is very helpful for screen readers and search engines.<\/p>\n\n\n\n<p> Example:&nbsp;<code>&lt;html&nbsp;lang=\"en-US\"&gt;&lt;\/h1&gt;<\/code>&nbsp;tag. <\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">The align Attributes<\/h3>\n\n\n\n<p>HTML align attribute can be used in paragraphs, images and few other tags for horizontal alignment. This align attribute can have 3 main values (left, right and centre). By using those values you can align a paragraph content into left, right or centre in the browser window.<\/p>\n\n\n\n<pre class=\"wp-block-code language-markup\"><code>&lt;p align=\"left\">This content is left aligned&lt;\/p>\n&lt;p align=\"center\">This content is aligned center&lt;\/p>\n&lt;p align=\"right\">This text is right aligned&lt;\/p><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">HTML width &amp; height Attributes<\/h3>\n\n\n\n<p>You can set HTML images height &amp; width using these HTML attributes. Images are defined using HTML images are defined with the<\/p>\n\n\n\n<p>tag. There is another attribute called &#8220;src&#8221; in this tag. It is used to specify the path of the image.<\/p>\n\n\n\n<p>Example:  <code>&lt;img&nbsp;src=\"tutorialsclass-logo.jpg\"&nbsp;width=\"200\"&nbsp;height=\"300\"&gt; <\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">The style Attribute<\/h3>\n\n\n\n<p>HTML style attribute is one of the most used attributes to specify the style rules for different HTML elements. Using style attribute, we can set border, color, font size, background color, and many other styles.<\/p>\n\n\n\n<p>Example:  <code>&lt;p&nbsp;style=\"color:red;\"&gt;&nbsp;<\/code>This is Tutorials<code> Class&lt;\/p&gt; <\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Example with various Attributes<\/h3>\n\n\n\n<pre class=\"wp-block-code language-markup\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;body>\n \n&lt;h1 title=\"My Title\"> My Heading &lt;\/h1>\n&lt;p align=\"center\">This content is aligned center&lt;\/p>\n&lt;p style=\"color:red;\"> This is Tutorials Class's red content&lt;\/p>\n&lt;img src=\"tutorialsclass.jpg\" width=\"300\" height=\"200\" alt=\"Alternate Text\" title=\"Tutorials\" \/>\n&lt;a href=\"http:\/\/tutorialsclass.com\"> Go to Tutorials Class Website &lt;\/a>\n \n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>You can read about more HTML attributes for various HTML Elements in each chapter. For example, anchor tag use <code>\"href\"<\/code> attribute for links. Image tag use <code>\"alt\"<\/code> attribute for alternate text.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML Attributes are part of the HTML Tags &amp; elements. These attributes specify some additional style or special information about the HTML tags. Most of the time attributes are specified as pairs&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"keywords":[],"class_list":["post-1942","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML Attributes - Learn with examples | Tutorials Class<\/title>\n<meta name=\"description\" content=\"HTML Attributes are used to specify some additional information about the HTML tags. Attributes are specified using attribute names &amp; value. See 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:\/\/tutorialsclass.com\/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 - Learn with examples | Tutorials Class\" \/>\n<meta property=\"og:description\" content=\"HTML Attributes are used to specify some additional information about the HTML tags. Attributes are specified using attribute names &amp; value. See examples -\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tutorialsclass.com\/html-attributes\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorials Class\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/tutorialsclass\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-29T18:41:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-30T05:48:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tutorialsclass.com\/wp-content\/uploads\/2020\/07\/tutorials-class-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tutorials Class\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TutorialsClass\" \/>\n<meta name=\"twitter:site\" content=\"@TutorialsClass\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tutorials Class\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/tutorialsclass.com\/html-attributes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/tutorialsclass.com\/html-attributes\/\"},\"author\":{\"name\":\"Tutorials Class\",\"@id\":\"https:\/\/tutorialsclass.com\/#\/schema\/person\/f7d4f67fc9721ef3ea91cb21aaf89e3e\"},\"headline\":\"HTML Attributes\",\"datePublished\":\"2015-10-29T18:41:01+00:00\",\"dateModified\":\"2020-04-30T05:48:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/tutorialsclass.com\/html-attributes\/\"},\"wordCount\":349,\"publisher\":{\"@id\":\"https:\/\/tutorialsclass.com\/#organization\"},\"articleSection\":[\"HTML Tutorial\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tutorialsclass.com\/html-attributes\/\",\"url\":\"https:\/\/tutorialsclass.com\/html-attributes\/\",\"name\":\"HTML Attributes - Learn with examples | Tutorials Class\",\"isPartOf\":{\"@id\":\"https:\/\/tutorialsclass.com\/#website\"},\"datePublished\":\"2015-10-29T18:41:01+00:00\",\"dateModified\":\"2020-04-30T05:48:02+00:00\",\"description\":\"HTML Attributes are used to specify some additional information about the HTML tags. Attributes are specified using attribute names & value. See examples -\",\"breadcrumb\":{\"@id\":\"https:\/\/tutorialsclass.com\/html-attributes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tutorialsclass.com\/html-attributes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tutorialsclass.com\/html-attributes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tutorialsclass.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Learn\",\"item\":\"https:\/\/tutorialsclass.com\/learn\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML Tutorial\",\"item\":\"https:\/\/tutorialsclass.com\/learn\/html\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"HTML5\",\"item\":\"https:\/\/tutorialsclass.com\/learn\/html\/html5\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"HTML Attributes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tutorialsclass.com\/#website\",\"url\":\"https:\/\/tutorialsclass.com\/\",\"name\":\"Tutorials Class\",\"description\":\"Online Tutorials for Beginners\",\"publisher\":{\"@id\":\"https:\/\/tutorialsclass.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tutorialsclass.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/tutorialsclass.com\/#organization\",\"name\":\"Tutorials Class\",\"url\":\"https:\/\/tutorialsclass.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tutorialsclass.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/tutorialsclass.com\/wp-content\/uploads\/2020\/05\/tutorials-class-logo.png\",\"contentUrl\":\"https:\/\/tutorialsclass.com\/wp-content\/uploads\/2020\/05\/tutorials-class-logo.png\",\"width\":442,\"height\":94,\"caption\":\"Tutorials Class\"},\"image\":{\"@id\":\"https:\/\/tutorialsclass.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/tutorialsclass\",\"https:\/\/x.com\/TutorialsClass\",\"https:\/\/in.pinterest.com\/merientinfotech\/boards\/\",\"https:\/\/www.youtube.com\/channel\/UCzbpQXlqec-bQf1_kwrTuoA\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/tutorialsclass.com\/#\/schema\/person\/f7d4f67fc9721ef3ea91cb21aaf89e3e\",\"name\":\"Tutorials Class\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tutorialsclass.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/346276d8e1600eec36df1bf9adcf78bf1eabb87fc0a79250e0565a88809b8f14?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/346276d8e1600eec36df1bf9adcf78bf1eabb87fc0a79250e0565a88809b8f14?s=96&d=mm&r=g\",\"caption\":\"Tutorials Class\"},\"sameAs\":[\"tcadmin\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Attributes - Learn with examples | Tutorials Class","description":"HTML Attributes are used to specify some additional information about the HTML tags. Attributes are specified using attribute names & value. See 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:\/\/tutorialsclass.com\/html-attributes\/","og_locale":"en_US","og_type":"article","og_title":"HTML Attributes - Learn with examples | Tutorials Class","og_description":"HTML Attributes are used to specify some additional information about the HTML tags. Attributes are specified using attribute names & value. See examples -","og_url":"https:\/\/tutorialsclass.com\/html-attributes\/","og_site_name":"Tutorials Class","article_publisher":"https:\/\/www.facebook.com\/tutorialsclass","article_published_time":"2015-10-29T18:41:01+00:00","article_modified_time":"2020-04-30T05:48:02+00:00","og_image":[{"width":600,"height":600,"url":"https:\/\/tutorialsclass.com\/wp-content\/uploads\/2020\/07\/tutorials-class-logo.png","type":"image\/png"}],"author":"Tutorials Class","twitter_card":"summary_large_image","twitter_creator":"@TutorialsClass","twitter_site":"@TutorialsClass","twitter_misc":{"Written by":"Tutorials Class","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/tutorialsclass.com\/html-attributes\/#article","isPartOf":{"@id":"https:\/\/tutorialsclass.com\/html-attributes\/"},"author":{"name":"Tutorials Class","@id":"https:\/\/tutorialsclass.com\/#\/schema\/person\/f7d4f67fc9721ef3ea91cb21aaf89e3e"},"headline":"HTML Attributes","datePublished":"2015-10-29T18:41:01+00:00","dateModified":"2020-04-30T05:48:02+00:00","mainEntityOfPage":{"@id":"https:\/\/tutorialsclass.com\/html-attributes\/"},"wordCount":349,"publisher":{"@id":"https:\/\/tutorialsclass.com\/#organization"},"articleSection":["HTML Tutorial"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/tutorialsclass.com\/html-attributes\/","url":"https:\/\/tutorialsclass.com\/html-attributes\/","name":"HTML Attributes - Learn with examples | Tutorials Class","isPartOf":{"@id":"https:\/\/tutorialsclass.com\/#website"},"datePublished":"2015-10-29T18:41:01+00:00","dateModified":"2020-04-30T05:48:02+00:00","description":"HTML Attributes are used to specify some additional information about the HTML tags. Attributes are specified using attribute names & value. See examples -","breadcrumb":{"@id":"https:\/\/tutorialsclass.com\/html-attributes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tutorialsclass.com\/html-attributes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tutorialsclass.com\/html-attributes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tutorialsclass.com\/"},{"@type":"ListItem","position":2,"name":"Learn","item":"https:\/\/tutorialsclass.com\/learn\/"},{"@type":"ListItem","position":3,"name":"HTML Tutorial","item":"https:\/\/tutorialsclass.com\/learn\/html\/"},{"@type":"ListItem","position":4,"name":"HTML5","item":"https:\/\/tutorialsclass.com\/learn\/html\/html5\/"},{"@type":"ListItem","position":5,"name":"HTML Attributes"}]},{"@type":"WebSite","@id":"https:\/\/tutorialsclass.com\/#website","url":"https:\/\/tutorialsclass.com\/","name":"Tutorials Class","description":"Online Tutorials for Beginners","publisher":{"@id":"https:\/\/tutorialsclass.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tutorialsclass.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/tutorialsclass.com\/#organization","name":"Tutorials Class","url":"https:\/\/tutorialsclass.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tutorialsclass.com\/#\/schema\/logo\/image\/","url":"https:\/\/tutorialsclass.com\/wp-content\/uploads\/2020\/05\/tutorials-class-logo.png","contentUrl":"https:\/\/tutorialsclass.com\/wp-content\/uploads\/2020\/05\/tutorials-class-logo.png","width":442,"height":94,"caption":"Tutorials Class"},"image":{"@id":"https:\/\/tutorialsclass.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/tutorialsclass","https:\/\/x.com\/TutorialsClass","https:\/\/in.pinterest.com\/merientinfotech\/boards\/","https:\/\/www.youtube.com\/channel\/UCzbpQXlqec-bQf1_kwrTuoA"]},{"@type":"Person","@id":"https:\/\/tutorialsclass.com\/#\/schema\/person\/f7d4f67fc9721ef3ea91cb21aaf89e3e","name":"Tutorials Class","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tutorialsclass.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/346276d8e1600eec36df1bf9adcf78bf1eabb87fc0a79250e0565a88809b8f14?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/346276d8e1600eec36df1bf9adcf78bf1eabb87fc0a79250e0565a88809b8f14?s=96&d=mm&r=g","caption":"Tutorials Class"},"sameAs":["tcadmin"]}]}},"_links":{"self":[{"href":"https:\/\/tutorialsclass.com\/wp-json\/wp\/v2\/posts\/1942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tutorialsclass.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tutorialsclass.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tutorialsclass.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tutorialsclass.com\/wp-json\/wp\/v2\/comments?post=1942"}],"version-history":[{"count":4,"href":"https:\/\/tutorialsclass.com\/wp-json\/wp\/v2\/posts\/1942\/revisions"}],"predecessor-version":[{"id":5823,"href":"https:\/\/tutorialsclass.com\/wp-json\/wp\/v2\/posts\/1942\/revisions\/5823"}],"wp:attachment":[{"href":"https:\/\/tutorialsclass.com\/wp-json\/wp\/v2\/media?parent=1942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tutorialsclass.com\/wp-json\/wp\/v2\/categories?post=1942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tutorialsclass.com\/wp-json\/wp\/v2\/tags?post=1942"},{"taxonomy":"keywords","embeddable":true,"href":"https:\/\/tutorialsclass.com\/wp-json\/wp\/v2\/keywords?post=1942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}