ColorCode

Attributes allow us to specify the behavior or the functionality of our elements. Sometimes the element itself is not enough for the browser to know what you want.

There are a lot of different kinds of attributes, let’s look at a practical one such as "href"

...Wait, what???

If you have an <a> tag, which is a link to another page, how do you know where to link to? A link is not enough information, you also need to say where you want your link to go to? So that the browser can direct the user to that link. To do that, you use an attribute called href, which is short of hypertext reference. The name makes no sense anymore but now you know what it does.

Some of the other popular attributes are:

class : It's an identifier, used heavily in CSS for styling your elements. id : Also used as a unique identifier, I’ll tell you why that’s important later.

So how do you use attributes?

In the opening tag you put a space after the name of the tag and write your attribute name and then in "" you put in the value of your attribute. Let’s do an href.

<a href="http://www.google.com">A link to my favorite website</a>

Side note: if you don't know what http means we explain it here in 90 seconds.

Anyway back to Attributes. Some attributes needs a value like 'href', some don’t. Like when you want to disable a button.

<button disabled>My poor Disabled Button</button>

Disabled is disabled, you don’t need any more information, so as soon as you add it to a button, it can’t be clicked anymore. Can’t click it yo!

Disabled is an optional attribute, your button doesn’t need it in order to survive. But href is a required attribute, your <a> tag will be incomplete without it.

So there are Required attributes, Optional attributes, there are also Event attributes, which respond to certain user generated events, like when the user clicks, or moves the mouse around, or hover.

We’ll learn more about attributes once we start using them in our app. Just remember that attributes are a way of specifying the behavior and functionality of your element, use them wisely, they are powerful, and don’t forget some are required and some are optional.