HTML attributes provide additional information about HTML elements.

The Html attributes is used for define characteristics of the HTML element. Attributes is placed inside the opening tag of the html elements.

Html attribute's value is always written inside double quote ( = " " ) or single quote ( = ' ' )

All HTML Tags are shown in their default value. Attributes are used only to change this default value.

Attributes are used for advanced configuration. Through Attributes additional commands are given to the interpreter which tells him how to show the content of an element.

• Each html tag or element can have attributes, That are specify the behaviour of an element.
• Attributes are always specified in the start tag.
• The Attribute should always be applied with its name and value pair.
• The Attributes name and values are case sensitive That Means it can Understand Both Capital and Lower Case Sepratly, and it is recommended by W3C that it should be written in Lowercase only.
• We can add multiple attributes in Single HTML element, but need to give space between 2 attributes.

Html Attribute is defined by Name and Value. All html attributes are made up of two piece − first is a name and second is a value.

• Name : The name is the property you want to set. For example, the paragraph
• Value : Value is what you want the property to be valued at and it always kept within the quotation. The following example shows three possible values of valign attribute: top, middle and bottom.

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium recommends lowercase attributes values in their HTML 4 suggestion.

---

Syntax of html attributes

The syntax of an html attributes are as follow -

<element attribute_name="value">content</element>

In above Syntax you have see how to write an html attributes.

---

Why use for Attributes

When we create a web page using html language, then many html tags have to be created and we want to customize the web page accordingly. So for that Attributes have to be used because without Attributes the web page cannot be customized.

---

Core Attributes of html

There are most Important html attributes that are used on most HTML elements.

• Title attribute
• href attribute
• src Attribute
• width and height
• alt Attribute
• style Attribute
• lang Attribute
• Id
• Class
• dir
• align
• valign

---

The title attribute

Title attribute is used as text tooltip in most web browsers. The title attribute display its text value when the user moves the cursor over a text or any link.

You can use it with any text or link to show the description about that link or text.

Example

<h1 title="This is heading tag">Example of title attribute</h1>

we can use title attributes in all html tags and html elements

---

The href Attribute

The href attribute is the main attribute of <a> anchor tag. This attribute gives link address which is specified in that link. In Html the href attribute provides a hyperlink, and if it is empty, it will remain in the present page.

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to

Example

<a href="https://w3codedesigner.com">Visit W3C Designer</a>

---

The src Attribute

The src attribute is one of the important and required attribute of <img> element. It is source for the image which is required to display on browser. This attribute can consist images in same directory or another directory. The image name or source should be correct else browsers will not display image.

Example

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2Moeu7DmgtdqPBXScK57RRrJdMMOHmrgxi3hW2zSzqeMvJjiWvsU36iX036rBITMsL5kQjJV0YAq1j_UyTxO7Ed8wgGSNoyCIx5kQbENdpLw_kcxNJNUX51iTemltdbMsQMR8_evvp05/s0/W3C+html.png" height="400" width="600"/>

---

The width and height Attributes

The <img> tag should also include the width and height attributes, that specifies the width and height of the image in pixels.

Example

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2Moeu7DmgtdqPBXScK57RRrJdMMOHmrgxi3hW2zSzqeMvJjiWvsU36iX036rBITMsL5kQjJV0YAq1j_UyTxO7Ed8wgGSNoyCIx5kQbENdpLw_kcxNJNUX51iTemltdbMsQMR8_evvp05/s0/W3C+html.png" width="500" height="600">

---

The alt Attribute

The required alt attribute for the <img /> tag specifies an alternative text for an image, that are show if the image for some reason can't be displayed in web page. This can be due to slow connection, or an error in src attribute, or if user use a screen reader.

Example

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2Moeu7DmgtdqPBXScK57RRrJdMMOHmrgxi3hW2zSzqeMvJjiWvsU36iX036rBITMsL5kQjJV0YAq1j_UyTxO7Ed8wgGSNoyCIx5kQbENdpLw_kcxNJNUX51iTemltdbMsQMR8_evvp05/s0/W3C+html.png" alt="W3C Designer"/>

---

The style Attribute

The style attribute is used to add styles to an element, such as colors, font-family, size, and more.

Example

<p style="color:red;">This is a red paragraph.</p>

---

The lang Attribute

users should always include the lang attribute inside the <html> tag, to specify the language of the Webpage. This is meant to assist search engine and browsers.

The following example specifies English as the language:

Example

<!DOCTYPE html> <html lang="en"> <body> ... </body> </html>

Country codes can be included to the language code in lang attribute. So, the first two characters specify language of the HTML page, and last two characters defines the country.

The following example defines English as the language and India as the country:

Example

<!DOCTYPE html> <html lang="en-IN"> <body> ... </body> </html>

---

The Id Attribute

The id attribute of HTML tag can be used for uniquely identify any element within an HTML webpage.

There are 2 primary reasons that you might want to use an id attribute on an element −

• If an element has an id attribute as a unique identifier, it is possible to identify that element and its contents..
• If we have twoice elements of same name within a Web page (or style sheet), we can use the id attribute to differ between elements that have the same name.

Example

<p id = "html">This para explains what is HTML</p> <p id = "css">This para explains what is Cascading Style Sheet</p>

---

The class Attribute

The class attribute is used to associate an element with a css style sheets, and defines the class of element. We will Discuss more about the use of the class attribute when We will Describe Cascading Style Sheet (CSS).

The value of html attributes can also be space-separated list of class names. For example −

Example

<h1 class = "className1 className2 className3">W3C Designer</h1>

---

The dir Attribute

The dir attribute allows users to indicate to the web browser the direction in which the text should flow.

The dir attribute can accept 1 of 2 values.

as we can see that in the following table :

Value	Meaning
ltr	Left to right (the default value)
rtl	Right to left (for languages such as Hebrew or Arabic that are read right to left)

Example

<!DOCTYPE html> <html dir = "ltr"> <head> <title>Display Directions</title> </head> <body> This is how IE 5 renders right-to-left directed text. </body> </html>

---

Align Attributes

The align attributes are Horizontally aligns tags. there are three value of align attribute :

• left
• right
• center

Valign attribute

Vertically aligns tags within an HTML element.

• top
• middle
• bottom

---

Suggestion for Write html Attributes

Double quotes around attribute values are most common in HTML, but single quotes can also be used.

In some situations, when the html attribute value itself contains double quotes, it is compulsory to use single quotes.

---