{"id":56,"date":"2022-03-19T09:30:21","date_gmt":"2022-03-19T09:30:21","guid":{"rendered":"https:\/\/staging.brightwhiz.com\/?post_type=topic&#038;p=56"},"modified":"2024-02-26T10:59:20","modified_gmt":"2024-02-26T10:59:20","slug":"html-attributes","status":"publish","type":"topic","link":"http:\/\/local.tutorials\/topic\/html-attributes\/","title":{"rendered":"HTML &#8211; Attributes"},"content":{"rendered":"\n<p>So far we have mentioned HTML attributes quite a bit. This is the appropriate time to discuss these elements.<\/p>\n\n\n\n<p>HTML attributes can be used to provide additional characteristics or information about HTML elements.<\/p>\n\n\n\n<p>This is what you need to know about HTML attributes.<\/p>\n\n\n\n<ul><li>Attributes must be specified inside the elements start tag<\/li><li>Attributes usually come in name\/value pairs in this format; name=&#8221;value&#8221;<\/li><li>Attribute names are not case sensitive. The World Wide Web Consortium (W3C) recommends lowercase attribute anames and values in their HTML 4 recommendation and that is what we follow in this tutorial series.<\/li><li>Wrap all attribute values in double-quotes even though single quotes is supported.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Usage<\/h2>\n\n\n\n<p>In the HTML Basics chapter, we saw an example of a link that uses the <code>href<\/code> attribute of the <code>&lt;a&gt;<\/code> element tag. Just to refresh your memory here it is again:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href=&quot;https:\/\/brightwhiz.com&quot;&gt;This is a link&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>The above element defines a hyperlink. The <code>href<\/code> attribute specifies the URL of the page the link jumps to which is specified as a value wrapped in quotes.<\/p>\n\n\n\n<p>We will discuss more about links in our <a href=\"http:\/\/local.tutorials\/topic\/html-links\/\">HTML Links chapter<\/a>.<\/p>\n\n\n\n<p>The other example in the HTML basics used the <code>&lt;img&gt;<\/code> tag example see below.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;img src=&quot;brightwhiz.jpg&quot; alt=&quot;brightwhiz.com&quot; width=&quot;320&quot; height=&quot;270&quot;&gt;<\/code><\/pre>\n\n\n\n<p>The above example has four attributes explained below.<\/p>\n\n\n\n<ul><li><strong>src <\/strong>\u2013 The source file (path to the image, base64 representation of the image, vector code such as SVG, etc)<\/li><li><strong>alt <\/strong>\u2013 The text to display if the src above can not retrieve the image<\/li><li><strong>width <\/strong>\u2013 The width of the image<\/li><li><strong>height <\/strong>\u2013 The display height of the image<\/li><\/ul>\n\n\n\n<p>As always, we will discuss more about the <code>&lt;img&gt;<\/code> tag in the <a href=\"http:\/\/local.tutorials\/topic\/html-images\/\">HTML images chapter<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The lang Attribute<\/h2>\n\n\n\n<p>Typically, you should always include the lang attribute inside the <code>&lt;html&gt;<\/code> tag. This tells the web browser and search engines what language the web page uses.<\/p>\n\n\n\n<p>The example here specifies English as the web page language:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt; \t\n   &lt;body&gt;\n      ...\n   &lt;\/body&gt;\t\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>HTML supports country codes in the lang attribute where the first two characters define the language of the web page, and the last two characters define the country.<\/p>\n\n\n\n<p>This example specifies English as the language and United States as the country:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en-US&quot;&gt; \t\n   &lt;body&gt;\n      ...\n   &lt;\/body&gt;\t\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>For a list of ISO country codes check out our <a href=\"http:\/\/local.tutorials\/topic\/language-iso-codes\/\">HTML Language ISO Code Reference<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Common Attributes<\/h2>\n\n\n\n<p>The most common attributes that you will use when you get deeper into working on web projects are these.<\/p>\n\n\n\n<p><strong>Id Attribute:<\/strong> used to uniquely identify any element within an HTML page.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href=&quot;https:\/\/brightwhiz.com&quot; id=&quot;uniqueLink&quot;&gt;This is a link with a unique id&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p><strong>Title Attribute: <\/strong>used to supply a text label as a title for the element. In most cases, the title value is displayed as a tooltip when the cursor is hovered over the element or while the element is loading.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;p title=&quot;I&#039;m a tooltip&quot;&gt;This is a paragraph.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p><strong>Class Attribute:<\/strong> Used to associate an element with a style sheet, and classifies the element into a named group.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;p title=&quot;I&#039;m a tooltip&quot; class=&quot;specialText&quot;&gt;This is a special paragraph.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p><strong>Style Attribute: <\/strong>Used to specify inline Cascading Style Sheet (CSS) rules within the element. We will dive deeper into style sheets when we get to the HTML Style Sheet chapter.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;p title=&quot;I&#039;m a tooltip&quot; style=&quot;color:red;&quot;&gt;This is a red paragraph.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>Check out the ful<a href=\"http:\/\/local.tutorials\/topic\/html-attributes-reference\/\">l HTML attributes reference<\/a> for more details about each of the HTML attributes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So far we have mentioned HTML attributes quite a bit. This is the appropriate time to discuss these elements. HTML attributes can be used to provide additional characteristics or information about HTML elements. This is what you need to know about HTML attributes. Attributes must be specified inside the elements start tag Attributes usually come [&hellip;]<\/p>\n","protected":false},"featured_media":43,"comment_status":"open","ping_status":"closed","template":"","meta":[],"categories":[2],"tags":[],"subject":[7,8],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Learn HTML Attributes<\/title>\n<meta name=\"description\" content=\"HTML attributes are used to provide additional characteristics and information about HTML elements and tags in a HTML document\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.tutorials\/topic\/html-attributes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn HTML Attributes\" \/>\n<meta property=\"og:description\" content=\"HTML attributes are used to provide additional characteristics and information about HTML elements and tags in a HTML document\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.tutorials\/topic\/html-attributes\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com Tutorials and Courses\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-26T10:59:20+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-attributes\/\",\"url\":\"http:\/\/local.tutorials\/topic\/html-attributes\/\",\"name\":\"Learn HTML Attributes\",\"isPartOf\":{\"@id\":\"http:\/\/local.tutorials\/#website\"},\"datePublished\":\"2022-03-19T09:30:21+00:00\",\"dateModified\":\"2024-02-26T10:59:20+00:00\",\"description\":\"HTML attributes are used to provide additional characteristics and information about HTML elements and tags in a HTML document\",\"breadcrumb\":{\"@id\":\"http:\/\/local.tutorials\/topic\/html-attributes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.tutorials\/topic\/html-attributes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-attributes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"http:\/\/local.tutorials\/topic\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML &#8211; Attributes\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.tutorials\/#website\",\"url\":\"http:\/\/local.tutorials\/\",\"name\":\"Brightwhiz.com Tutorials and Courses\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\/\/local.tutorials\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.tutorials\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.tutorials\/#organization\",\"name\":\"Brightwhiz.com\",\"url\":\"http:\/\/local.tutorials\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz.com\"},\"image\":{\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/www.instagram.com\/glamorglaze\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/c\/Sobbayi\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Learn HTML Attributes","description":"HTML attributes are used to provide additional characteristics and information about HTML elements and tags in a HTML document","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":"http:\/\/local.tutorials\/topic\/html-attributes\/","og_locale":"en_US","og_type":"article","og_title":"Learn HTML Attributes","og_description":"HTML attributes are used to provide additional characteristics and information about HTML elements and tags in a HTML document","og_url":"http:\/\/local.tutorials\/topic\/html-attributes\/","og_site_name":"Brightwhiz.com Tutorials and Courses","article_publisher":"https:\/\/www.facebook.com\/brightwhiz","article_modified_time":"2024-02-26T10:59:20+00:00","og_image":[{"width":640,"height":360,"url":"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@brightwhizmag","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/local.tutorials\/topic\/html-attributes\/","url":"http:\/\/local.tutorials\/topic\/html-attributes\/","name":"Learn HTML Attributes","isPartOf":{"@id":"http:\/\/local.tutorials\/#website"},"datePublished":"2022-03-19T09:30:21+00:00","dateModified":"2024-02-26T10:59:20+00:00","description":"HTML attributes are used to provide additional characteristics and information about HTML elements and tags in a HTML document","breadcrumb":{"@id":"http:\/\/local.tutorials\/topic\/html-attributes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.tutorials\/topic\/html-attributes\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/local.tutorials\/topic\/html-attributes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.tutorials\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"http:\/\/local.tutorials\/topic\/"},{"@type":"ListItem","position":3,"name":"HTML &#8211; Attributes"}]},{"@type":"WebSite","@id":"http:\/\/local.tutorials\/#website","url":"http:\/\/local.tutorials\/","name":"Brightwhiz.com Tutorials and Courses","description":"","publisher":{"@id":"http:\/\/local.tutorials\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.tutorials\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.tutorials\/#organization","name":"Brightwhiz.com","url":"http:\/\/local.tutorials\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/","url":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","contentUrl":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz.com"},"image":{"@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz","https:\/\/twitter.com\/brightwhizmag","https:\/\/www.instagram.com\/glamorglaze\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/c\/Sobbayi"]}]}},"_links":{"self":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic\/56"}],"collection":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/types\/topic"}],"replies":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/comments?post=56"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/tags?post=56"},{"taxonomy":"subject","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/subject?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}