HTML Attributes

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

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

Attribute types

1. Boolean Attribute

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

<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.

2. Unquoted Attribute

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

<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,

<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.

3. 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.

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

Try </>

4. Single-quoted Attribute

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

<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

<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

<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>

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