HTML Attributes

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.

HTML Attribute with value picture

Description:

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

Attribute Description Example
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>
─ Result
Title attribute value without single quote image

Description:

You see in the result, "Organization" text is not being appeared because the title attribute itself contained double quotes.

Note: When you move the mouse over the element, the title will be displayed as a tooltip.

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>
─ Result
Title attribute value with single quote image
Tip: HTML5 standard does not require to use lowercase for attribute names but the W3C recommends lowercase in HTML4 and demands lowercase for stricter document types like XHTML. Remember, lowercase is always easier to type.