Attributes in HTML - Web Development for Toddlers

Last we talked about HTML elements and their syntax!
We came across an odd looking piece of code, that went like this

<img src="https://picsum.photos/200/300" />

The syntax for an attribute goes like this:

<tag-name attribute-name="attribute-value"></tag-name>

And if you compare the syntax with that image example, we find an attribute, with attribute-name "src", and attribute-value as an URL to the image that's stored on the internet.

There can be multiple attributes associated with an element

Tons of them actually, and that's pretty common to see.
So how do you go about making that happen?
Here's a syntax breakdown

<tag-name attribute-name1="attribute-value1" attribute-name2="attribute-value2"></tag-name>

A real life example would look something like this:

<input type="password" name="userPassword" class="standard-input" />

And if none of these make sense, don't worry, we'll get there.
But you get my point, don't you?

From a surface level classification, we can categorise attributes on two sets of bases

Attributes which have some value

Like the ones we saw, there are some attributes that might contain some data, for example:

<button class="btn btn-primary">
 Click Me!
</button>

Now what does this class attribute do? We'll discuss that in the next chapter.

Attributes which don't have any value

There are some attributes that don't need any value, for example this bit of code with make the render the button as unclickable (try running it in JSBin)

<button disabled>
 You can't click me
</button>

---

Now the second way we can categorize attributes would be

Common attributes

These attributes can be applied on pretty much every element there is, some of them might be: "id", "class", "name" etc.

<button class="btn">Click Me</button>
<hr class="make-me-red" />
<div class="is-should-be-a-box">
I am not a box yet, we'll need to learn CSS to do so!
</div>

Although those class attributes and their values seems to do nothing in this example, we'll get to them when we start CSS in a few chapters.

Element specific attributes

There are some attributes which if applied with a combination of possible values, will direct the browser to function a bit differently.
For example the "type" attribute for "input" elements.
Run this code in the browser and see for yourself!

<input type="text" placeholder="This is a text input" />
<input type="password" placeholder="This is a password input" />

Try writing something in those inputs which just popped up! Did you see that?
The second input (password one) hides whatever you type, that's because we instructed the browser to do so (with the attribute type).
Also the attribute "placeholder" is "input" element specific. That means if you try to use this attribute on any other element, the browser wouldn't know what to do with it and won't make any difference.

Consider this

<div placeholder="Some value that makes no difference">
    See! "placeholder" is uselss here
</div>

Custom Attributes

The standards says if we ever want to store some of our values in the form of an attribute with an element, we do so with attributes prepended with "data-".
Now this won't make any difference, but it just helps us differentiate between native attributes (or the common + element specific ones) vs custom ones (the ones we create).

Now for example

<div custom-attribute="custom-value"></div>

<div data-custom-attribute="custom-value"></div>

Both of these are acceptable! But let's follow the standards (remember that animal analogy!).

That being said, why would we use custom attributes or to be more precise any attribute at all that does nothing in the browser output!?

Well, that's because element specific attributes only work because the browser's render engine is programmed to do something with it. Similarly we can use JavaScript to make use of these custom attributes or any attribute we'd like to do something that we want.
And we'll do so! in a couple of chapters, after a bit of CSS.