What is an Attribute?

In CSS, an attribute is a characteristic or a property of an HTML element that is used to target and styled the HTML element. Attribute plays an important role to maintain the accessibility of the HTML document.

Attributes are always specified in the starting tag of the element.

There are so many attributes in HTML, but, here we will learn some important and most used attributes.

The name attribute

The name attribute specifies the name of an <input> element. The name attribute is used to reference elements in JavaScript or to reference form data after a form is submitted.

<input name="XYZ" >

The value attribute

A value attribute is a useful tool for setting default values, specifying the text displayed on input elements, and storing data for use in form processing.

note: it cannot be used with type: file.

<input type="text" value="enter your name">

The type attribute

The type attribute identifies the type of the <input> element. It specifies the type of element to display

ex: For <button> elements, the type attribute specifies the button type.

for <input> element it specifies the type of<input> element to display

<input type="radio" name="XYZ" value="female">

The id attribute

The id attribute specifies the unique id for an HTML element. The value of the id attribute must be unique within the document.

<input type="text" id="id-name">

The action attribute

The action attribute specifies where to send the form-data when a form is submitted. <form action="URL">

<form action="URL">
<form>

The for attribute

The 'for' attribute in HTML is used to associate a label with an input element. The 'for' attribute specifies which input element the label is associated with by referencing the id attribute of the input element.

<label for="hello">
<input type="text"id="hello">
</label>

The href attribute

here, the href attribute specifies the URL of the page the link goes to.

you can use the '#top" as a value of href to move to the top of the current page of the website

<a href="https://mishba.hashnode.dev/">

The class attribute

The class attribute is used to point to a class in a style sheet. It is a global attribute and can be used on any element.

<h1 class="background"></h1>
<!--here, with the help of class attribute you can style the h1 in whatever way you want-->

This way you can style the 'h1' element in CSS:

.background{
color: burlywood;
font-family:sans-serif;
}

Thank you for giving the time to reading this article! Follow me on Twitter and Linkedin

The Power of Attributes: How CSS Uses HTML Attributes for Styling.