• Previous

HTML-Attributes

What is HTML attribute?

In the previous lesson we knew what is an element such as <h1> , <p> etc. Now we’ll know what is an attribute and how and where can we use it in html document.

HTML attributes usually appear as name-value pairs, separated by =, are written within the start tag of an element, after the tag’s name.

Syntax of HTML attribute-

In the above picture it displays the syntax of html attribute. Attributes are always expressed inside the element's start tag. You can see that attributes have name and value.

Attribute's Name-

In the place of attribute ( what is shown in the above picture) you have to write the name of an attribute what you would like to assign for an element.

Attribute's value-

In the place of value ( what is shown in the above picture) you have to set the value of that attribute.

value can be written within single or double quotes.

Example of HTML attribute-

<p title="i am a tooltip" > I'm a paragraph  </p>  

Here we use title attribute for <p> element and the value of the title element is "i am a tooltip". when users move the cursor over the text ( I'm a paragraph ) it shows the value of that title.

Every attribute have its own functionality.

Four different syntax of HTML attributes

• Empty attribute syntax
• Unquoted attribute-value syntax
• Single-quoted attribute-value syntax
• Double-quoted attribute syntax

Empty attribute syntax

The Empty attributes can be specified with a name and an empty-string value or you can just write the attribute name where the value is implicitly the empty string.

Example of Empty attribute syntax-

<input disabled>

or

<input disabled="">

Unquoted attribute-value syntax

An attribute value can be specified without the quotes.These are called Unquoted attribute-value.

Example of Unquoted attribute syntax-

<input value=yes>  

Single-quoted attribute-value syntax

An single-quoted attribute value is one where the specified value is surrounded by single quotation marks (').

Example of Single-quoted attribute value syntax-

<p title='i am a tooltip' > I'm a paragraph  </p>  

In the above example we used single quote for title attribute.

Double-quoted attribute value syntax

A double-quoted attribute value is one where the specified value is surrounded by double quotation marks (").

Example of Double-quoted attribute value syntax-

<p title="i am a tooltip" > I'm a paragraph  </p>  

In the above example we used double quote for title attribute.

Boolean attributes

There are some attributes in HTML called Boolean attributes.The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

<input type="checkbox" checked> 

or

<input type="submit" value="Submit" disabled> 

What Can i Do With HTML attribute?

There are lots of reasons for using an attribute -

• It provides more information to an element.
• You can use attributes to change the default functionality of an element.
• You can change the view of an element by using an attribute.

Some elements must have certain attributes. For example src attribute for <img> element and href attribute for <a> element.

 <img src="https://www.codeinbook.com/images/cartoon_image.gif" >  

Result

You have to provide the location of that image by using src attribute. You can’t display that image without using src attribute.

 <a href="https://www.google.com/"> Google </a>  

Result

 Google  

The href attribute is used to provide a link to any address. It turns a normal text to a link called hypertext. When user click on that text it goes to that address.

Multiple attributes within one element

you can have one or more attributes within one element. For example-

 <a href="https://www.google.com/" target="_blank" > Google </a>  

Result

 Google   

Here we use href and target two attributes for <a> element. The target attribute helps to open the link within a new tab instead of this one.

• Previous
• Next