HTML Attributes

Attributes are used to define additional features of HTML elements. They are employed inside the opening tag of a particular tag.

⦁ All HTML elements can have attributes, providing additional information about the specific element.

⦁ All attributes consist of two parts - name and value, where they work in a pair, such as name=“value”. The parameter ‘name’ specifies the property you want to assign to an element and the parameter ‘value’ specifies the value of the property you want to align over the element.

⦁ Each name has some value put within quotations.

⦁ Both the name and value of an attribute are case-insensitive. But, W3C recommends lowercase attributes values in their specification.

Below are some of the common HTML Attributes

1).The href Attribute

This attribute is used to define HTML links to any address. It is defined with the <a> tag. The link placed inside the <href> attribute is linked to the text exhibited inside the <a>tag.

Example

<a href="https://en.wikipedia.org/wiki/HTML_attribute">A text will link to given address </a>

2).The src Attribute

This attribute is used to insert an image into a webpage. <img> tag defines HTML images, where filename of an image source is specified within this attribute. Here, src is an abbreviation of ‘source’. The image source can be from the internet or from the computer. The address of the image is specified inside the double quote.

Example

<img src= "good_morning.jpg>

3).The width and height Attributes

The attribute is used to define or to adjust the width and height of an image. It helps to control the size of the particular image.

Example

<img src= "good_morning.jpg" width="700" height="600" >

Here, both src attribute and width and height attribute work together to specify the size of the image. The digits, like 700 and 600 define the pixels.

4).The alt Attribute

This attribute is used to define the alternate text which will be displayed in place of the image. The text is shown if the primary attribute, <img> tag, does not display the value assigned to it. This attribute is also used for screen readers to read the value of the attribute, like a brief of the image.

Example:

<img src="good_morning.jpg" alt="Have a positive and wonderful day">

This attribute is also used if the image does not exist

Example:

<img src="good_morning.jpg" alt="Have a positive and wonderful day">

5).The style Attribute

This attribute is used to define the specific styling to the particular element. It can be color, font, size etc., where special effects are provided to the HTML elements.

Example:

<h2 style="color:red" > Hello world <h2>

<p style="font-size:20px;"> We all are equal. </p>

6).The lang Attribute

This attribute is used to declare the language. It means, the main language used in the document can be specified using lang attribute. It is declare inside the lang attribute. It is declare inside the <html> tag. The language is declared for accessibility screen readers and search engines.

Example:
<html lang="en-UK">

Here, first two alphabets specify the language i.e. English.

7).The title Attribute
This attribute is used to explain a particular element when a mouse hovers over it. It is actually a text which is displayed as a tooltip when a mouse pointer is loaded over the element. The title attribute can be used with various elements.
Example:

<p title="Hello world" > We all are equal. </p>

<h3 title="Hello world" > We all are equal. </h3>

When to use Double or Single Quotes?

To define the attribute value of the element, double quotes are used.

Syntax:

<element attribute name= "attribute_value" >

In HTML, Double quotes around the attribute value are used commonly. On the other hand, single quotes can also be used in certain cases. Like, when the attribute value itself has double quotes, the single quotes are used to define the title.

Example:

<p title= "Hello "Go Green" World" >

Here, it is Hello “Go Green” World, where “Go Green” already has double quotes; therefore single quotes are applied for the title attribute.

<p title= "Hello "Go Green" World" >

Here, it is Hello “Go Green” World, where “Go Green” already has double quotes; therefore single quotes are applied for the title attribute.

Summary

⦁ All HTML elements can have attributes to add additional information about the elements.

⦁ The href Attribute provides address information of a link to the text.

⦁ The src Attribute provides a source of the image to be inserted.

⦁ The width and height Attributes provides size information of the image.

⦁ The alt Attribute provides text to be displayed on the image.

⦁ The style Attribute provides special effects on the element.

⦁ The lang Attribute provides language for the document.

⦁ The title Attribute provides additional information for the element.