HTML attributes provide additional information about HTML elements are always specified in the start tag after a tag name. Let’s have a look at the image below how an attribute is specified inside an HTML tag.
Most Attributes have two parts ─ Name and Value. A value is surrounded with double or single quotes like name=”value”.
In the image above, class is an attribute name and article is its value.
Some Attributes are often Used in HTML
|lang||Specifies the language of an element’s content.||<html lang=”en”>|
|id||Specifies a unique id for an element.||<div id=”content”>|
|class||Specifies one or more classnames for an element.||<div class=”content main”>|
|style||Specifies an inline CSS style for an element.||<p style=”color: red”>|
|href||Specifies the URL for a link.||<a href=”http://egtutorial.com”>|
|target||Specifies where to open a linked document.||<a href=”#” target=”_blank”>|
|title||Specifies extra information about an element.||<a href=”#” title=”this is a title”>|
|src||Specifies the URL for an image.||<img src=”/images/demo.jpg”>|
|alt||Specifies an alternative text for an image||<img src=”#” alt=”Alternative text”>|
Single or Double Quotes?
Double quotes are the most common in HTML but in some situations you have to specify the quotes (Single or Double).
If the attribute value itself contains double quotes then you must have to use single quotes.
In the example below, I used “Organization” text with double quotes inside the
title attribute. And the attribute itself contains double quotes.
<abbr title="World Health "Organization"">WHO</abbr>
You see in the result, "Organization" text is not being appeared because the
title attribute itself contained double quotes.
Fix the Quote Problem in Title Attribute
As the "Organization" text contained double quotes itself, so this time you have to use single quotes for this
title attribute. Otherwise the title will not appear.
I used same attribute name and value like before one, but this time with single quotes. And now the "Organization" text, in the result, appeared.
<abbr title='World Health "Organization"'>WHO</abbr>