{"id":14129,"date":"2020-04-22T22:36:37","date_gmt":"2020-04-23T05:36:37","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14129"},"modified":"2023-12-01T02:43:50","modified_gmt":"2023-12-01T10:43:50","slug":"html-attributes","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-attributes\/","title":{"rendered":"A Step-by-Step Guide to HTML Attributes"},"content":{"rendered":"\n<p><em>HTML attributes define additional properties for HTML elements. They are specified in the opening tag of an HTML element, and some elements require an attribute to function.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>What are HTML attributes, and how do you use them? When you\u2019re learning HTML, you may encounter the term <code>attributes<\/code>. Attributes are used to provide additional information about a specific element on an HTML page.<\/p>\n\n\n\n<p>Attributes are specified in the opening tag of an HTML document and are usually specified in a name\/value pair. For instance, an attribute called <code>name<\/code> with the value <code>value<\/code> would appear like this: name=<code>value<\/code>.<\/p>\n\n\n\n<p>This tutorial will discuss, with reference to examples, the basics of attributes in HTML and why they are used. We will also discuss a few of the general-purpose attributes which apply to most elements in HTML, and which you are most likely to encounter when you\u2019re coding.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are HTML Attributes?<\/h2>\n\n\n\n<p>Every element in the HTML markup language can have an attribute, which is used to define an additional property held by that element.<\/p>\n\n\n\n<p>For instance, we may want to specify an attribute that defines the height of an image or the value stored by a form element. These attributes are specific to the element, which means that they can be used to customize how a certain element works on a web page.<\/p>\n\n\n\n<p>In some cases, attributes are required for an element. For example, if you are working with an <code>&lt;a&gt;<\/code> HTML tag, you need to define a <code>href<\/code> attribute so that the tag knows which URL to which it should point when clicked.<\/p>\n\n\n\n<p>There are two components to an attribute in HTML:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>name<\/strong> defines the name of the attribute you are creating.<\/li>\n\n\n\n<li><strong>value<\/strong> defines the value held by the attribute.<\/li>\n<\/ul>\n\n\n\n<p>Suppose we wanted to define a link that points to the Career Karma website home page. To do so, we can use an <code>&lt;a&gt;<\/code> tag in HTML. However, if we want the tag to link to the Career Karma homepage, we also need to use a <code>href<\/code> attribute.<\/p>\n\n\n\n<p>Here\u2019s an example of an <code>&lt;a&gt;<\/code> tag which links to the Career Karma homepage:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;a href=\"https:\/\/careerkarma.com\/\"&gt;Career Karma&lt;\/a&gt;<\/pre><\/div>\n\n\n\n<p>This tag uses an attribute called <code>href<\/code> and assigns it the value \u201c<a href=\"https:\/\/careerkarma.com\/\">https:\/\/careerkarma.com\/<\/a>\u201d, which is the URL of the Career Karma homepage.<\/p>\n\n\n\n<p>Attributes in HTML are case insensitive, but attributes are usually written in lower case<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Single and Double Quotes HTML<\/h2>\n\n\n\n<p>When you\u2019re assigning a value to an attribute, you can use both single and double quotes. Using double quotes is the most common approach (and is the one we used in our example earlier). However, the approach you use depends on the contents of your attribute.<\/p>\n\n\n\n<p>Suppose we are creating a form element that has the value <code>John \u2018Rocketman\u2019 Smith<\/code>. In this case, because our value contains single quotes, we should use double quotes for our attribute name. Here\u2019s the code we would use to declare this attribute:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;input type=\"text\" value=\"John 'Rocketman' Smith\"&gt;<\/pre><\/div>\n\n\n\n<p>On the other hand, suppose our value contained double quotes and was instead <code>John \u201cRocketman\u201d Smith<\/code>. In this case, we would want to use single quotes to define our attribute. Here\u2019s the code we would use: <\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;input type=\"text\" value='John \"Rocketman\" Smith'&gt;<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use HTML Boolean Attributes<\/h2>\n\n\n\n<p>Some attributes do not use the name\/value pair structure. We refer to these as boolean attributes. These attributes can only have a true-false value, and their value is set to true if they are specified and false if they are not specified.<\/p>\n\n\n\n<p>Boolean attributes are commonly used in HTML forms. Suppose we are creating a form field that asks a user for their name. We want this form field to be mandatory by default. We could use the <code>required<\/code> boolean attribute to accomplish this task:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;input type=\"text\" value=\"Name\" required&gt;<\/pre><\/div>\n\n\n\n<p>In this example, we have defined an input tag that has three attributes. The first two attributes, <code>type<\/code> and <code>value<\/code>, use the name\/value structure. The third attribute, <code>required<\/code>, is a boolean attribute. Because we have specified the <code>required<\/code> boolean attribute, its value is set to true.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Standard HTML Attributes<\/h2>\n\n\n\n<p>There are a few HTML attributes which apply to every element in HTML. These are called global attributes.<\/p>\n\n\n\n<p>You are likely to encounter these throughout a webpage, so it\u2019s important that you know what they are and how they work. Let\u2019s walk through four of the most common standard HTML attributes applied to elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML id Attribute<\/h3>\n\n\n\n<p>The id attribute gives an element a unique identifier. The id attribute itself does not affect how an HTML element appears, but it allows you to select a specific element to manipulate when you\u2019re working with CSS or JavaScript.<\/p>\n\n\n\n<p>The id you assign any given element should be unique in a document.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s an example of the id attribute used in a <code>&lt;p&gt;<\/code> tag:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;p id=\"secondParagraph\"&gt;Hello, there! Welcome to my site.&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<p>In this example, we have assigned our <code>&lt;p&gt;<\/code> tag an id attribute with the value <code>secondParagraph<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML title Attribute<\/h3>\n\n\n\n<p>The HTML title attribute is often used to explain an element or its content. The value stored within a title attribute is displayed as a tooltip which appears when a user hovers over the element with their cursor.<\/p>\n\n\n\n<p>Suppose we have an input field that collects a user\u2019s name. We want to show <code>This field is required<\/code> when the user hovers over the field. We could accomplish this goal using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;input type=\"text\" title=\"This field is required\"&gt;<\/pre><\/div>\n\n\n\n<p>When we hover over the text field, the following tooltip appears:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/jH0FmGc9VP2j5ifTt72m_iS6CorPhSQd0D6jjTmknbaAvw5HYsPudSMsmZv30DL8Is0HOqaC4DYrRiEd81cdxhDM-009lr9AKEaVqQMy8XxApA5s5sakExZCCzt4jOXit2O6uH9_\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">HTML style Attribute<\/h3>\n\n\n\n<p>The HTML style attribute is used to specify CSS styles for a particular element. This approach of styling an element is referred to as creating an inline style.<\/p>\n\n\n\n<p>Suppose we are creating a paragraph of text that we want to appear in gray. We could use the style attribute to specify the color of our text. Here\u2019s the code we could use to accomplish this task:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;p style=\"color: gray;\"&gt;Hello, there! This is my website.&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<p>Here\u2019s the output of our code:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/rsKuZWNyh6Ymx9n1pRh8upcISh_hhplgSx-V0HsTyJZa6cfVZu8dEfF08STpEbujI18c2mggvQk0taWi6aVPU7tPT9rk1xhVLhDPHah2M2VXNKWAa1x5Swsze5iYgsAO69u5ohCX\" alt=\"\"\/><\/figure>\n\n\n\n<p>As you can see, the color of our text has changed to gray. This is because we specified a style attribute and changed the <code>color<\/code> style to be equal to <code>gray<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Element-Specific HTML Attributes<\/h2>\n\n\n\n<p>There is a wide range of other attributes you may encounter which are specific to an element. Here are a few examples:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">img src<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;img src=\"source.png\"&gt;<\/pre><\/div>\n\n\n\n<p>In this example, we have specified the src attribute. This attribute is used with the <code>img<\/code> tag to point to the file the tag should render on the webpage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">a href<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;a href=\"https:\/\/careerkarma.com\/\"&gt;Career Karma homepage&lt;\/a&gt;<\/pre><\/div>\n\n\n\n<p>The <code>href<\/code> attribute is used in this example to tell the <code>&lt;a&gt;<\/code> tag which site to direct the user to when the link is clicked.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">img alt<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;img src=\"source.png\" alt=\"Image of a book\"&gt;<\/pre><\/div>\n\n\n\n<p>In our code, we have specified the <code>alt<\/code> attribute. This attribute is specific to the img tag and specifies the alternative text which is processed by the webpage if an image cannot be displayed.<\/p>\n\n\n\n<p>The alt attribute in HTML can be read by screen readers, so someone who is visually impaired who depends on screen readers can still understand our webpage.<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/repl.it\/@careerkarma\/HTML-Attributes?lite=true\" width=\"100%\" height=\"400px\" frameborder=\"0\"><\/iframe>\n<br>\n<br>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use HTML Attributes: Conclusion<\/h2>\n\n\n\n<p>Attributes are additional properties applied to a specific element in HTML. Attributes are always specified in an element\u2019s opening tag and usually use name\/value pairs.<\/p>\n\n\n\n<p>This tutorial walked through, with reference to examples, the basics of attributes in HTML, boolean attributes, a few standard HTML attributes, and some element-specific attributes. Now you know how to use attributes in HTML.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML attributes define additional properties for HTML elements. They are specified in the opening tag of an HTML element, and some elements require an attribute to function. What are HTML attributes, and how do you use them? When you\u2019re learning HTML, you may encounter the term attributes. Attributes are used to provide additional information about&hellip;","protected":false},"author":240,"featured_media":14126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-14129","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Step-by-Step Guide to HTML Attributes | Career Karma<\/title>\n<meta name=\"description\" content=\"Attributes are used in HTML to provide additional information about a specific web page element. On Career Karma, learn how to use attributes in your code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/html-attributes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Step-by-Step Guide to HTML Attributes\" \/>\n<meta property=\"og:description\" content=\"Attributes are used in HTML to provide additional information about a specific web page element. On Career Karma, learn how to use attributes in your code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/html-attributes\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-23T05:36:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:43:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/shallow-focus-photo-of-woman-using-a-laptop-3182792.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"681\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"A Step-by-Step Guide to HTML Attributes\",\"datePublished\":\"2020-04-23T05:36:37+00:00\",\"dateModified\":\"2023-12-01T10:43:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/\"},\"wordCount\":1192,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/shallow-focus-photo-of-woman-using-a-laptop-3182792.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/\",\"name\":\"A Step-by-Step Guide to HTML Attributes | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/shallow-focus-photo-of-woman-using-a-laptop-3182792.jpg\",\"datePublished\":\"2020-04-23T05:36:37+00:00\",\"dateModified\":\"2023-12-01T10:43:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Attributes are used in HTML to provide additional information about a specific web page element. On Career Karma, learn how to use attributes in your code.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/shallow-focus-photo-of-woman-using-a-laptop-3182792.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/shallow-focus-photo-of-woman-using-a-laptop-3182792.jpg\",\"width\":1020,\"height\":681},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-attributes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"A Step-by-Step Guide to HTML Attributes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Step-by-Step Guide to HTML Attributes | Career Karma","description":"Attributes are used in HTML to provide additional information about a specific web page element. On Career Karma, learn how to use attributes in your code.","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:\/\/careerkarma.com\/blog\/html-attributes\/","og_locale":"en_US","og_type":"article","og_title":"A Step-by-Step Guide to HTML Attributes","og_description":"Attributes are used in HTML to provide additional information about a specific web page element. On Career Karma, learn how to use attributes in your code.","og_url":"https:\/\/careerkarma.com\/blog\/html-attributes\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-23T05:36:37+00:00","article_modified_time":"2023-12-01T10:43:50+00:00","og_image":[{"width":1020,"height":681,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/shallow-focus-photo-of-woman-using-a-laptop-3182792.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/html-attributes\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/html-attributes\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"A Step-by-Step Guide to HTML Attributes","datePublished":"2020-04-23T05:36:37+00:00","dateModified":"2023-12-01T10:43:50+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-attributes\/"},"wordCount":1192,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-attributes\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/shallow-focus-photo-of-woman-using-a-laptop-3182792.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/html-attributes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/html-attributes\/","url":"https:\/\/careerkarma.com\/blog\/html-attributes\/","name":"A Step-by-Step Guide to HTML Attributes | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-attributes\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-attributes\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/shallow-focus-photo-of-woman-using-a-laptop-3182792.jpg","datePublished":"2020-04-23T05:36:37+00:00","dateModified":"2023-12-01T10:43:50+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Attributes are used in HTML to provide additional information about a specific web page element. On Career Karma, learn how to use attributes in your code.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/html-attributes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/html-attributes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/html-attributes\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/shallow-focus-photo-of-woman-using-a-laptop-3182792.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/shallow-focus-photo-of-woman-using-a-laptop-3182792.jpg","width":1020,"height":681},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/html-attributes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"A Step-by-Step Guide to HTML Attributes"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14129"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14129\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14126"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}