HTML Attributes

HTML attributes make the HTML elements more usable. An attribute consists of the name-value pair.

We will take an example of a paragraph throughout our topic to understand the attribute.

See the syntax below:

<p attribute-name="attribute-value"> some text </p>
<p title="This is a paragraph"> some text </p>

The attributes must be added to the opening tag only.

Boolean Attribute

Some attributes are boolean attributes. Boolean attributes have only two states (true or false).

Example

<p contenteditable> Here the content is editable. </p>
<p contenteditable=true> Here the content is editable. </p>
Try </>

In the above example, both ways of writting attributes give the same results i.e. you can skip the values of boolean attribute i.e. only contenteditable.

Unquoted Attribute

In unquoted attributes, the attribute values can be written without quotes.

Example

<p title=paragraph>paragraph is the the value of title. And the title is unquoted string.</p>

Try </>

The title appears when we move the cursor over this paragraph.


The above method is useful when the attribute value consists of only one word. But it does not work well when value consists of two words separated by space.For example,

Example

<p title=new paragraph>new paragraph is the value of the title but it does not work well. It is also unquoted string.</p>

Try </>

It will show 'new' title instead of 'new paragraph'. In this case, single quoted or double quoted method is useful.

Double-quoted Attribute

In this method, the attribute value is written in the double quotes.Now, you can write attribute value that consists of two words separated by space.

Example

<p title="new paragraph">new paragraph is the value of title attribute. It is a double quoted string.</p>

Try </>

Single-quoted Attribute

In this method, the attribute value is written in the single quotes. This method is an alternate of double-quoted method.

Example

<p title='new paragraph'>It is single quoted string value of attribute.</p>

Try </>

CSS Properties

You can also specify many CSS properties for elements. There is another syntax for applying CSS properties. Here is the syntax of CSS

Example

<p style="property-name:property-vaue;" > Some text </p>
<p style="background-color:green; color:white;">CSS properties are applied on the paragraph.</p>

Try </>

Summary Example

Example

<!DOCTYPE html>
<html>
 <body>
 <p contenteditable>some text</p>
 <p title=paragraph>The value of title attribute is unquoted string.</p>
 <p title=new paragraph>The value of title attribute is unquoted string.</p> 
 <p title="new paragraph">The value of title attribute is double quoted string.</p>
 <p title='new paragraph'>It is single quoted string.</p>
 <p contenteditable> It is editable text. </p>
 <p style="background-color:green; color:white;">CSS properties are applied on the paragraph.</p>
 </body>
</html>
Try </>

You can see that the background color is green and the color of the text is white.

Summary

Boolean attribute

This attribute is boolean attribute that gives only true or false value e.g. contenteditable.

Unquoted attribute

The unquoted attribute is that attribute whose value can be written without quotes e.g. name=value

Quoted attribute

The quoted attribute is that attribute whose values is under double or single quotes e.g. name="some value"

Double quoted attribute

The value of attribute is under double quotes e.g. name="some value "

Single quoted attribute

The value of attribute is under single quote e.g. name='some value'



Was this article helpful?

 

Email:

Message:

Get the newsletter