Key value pairs (HTML).- Name and ID attributes

Dear coders,

I am a newbie, one week into learning HTML.I have trouble understanding/grasping few concepts.

1- What is key value pair ?
2- Why do we use name and ID attributes ? what is the purpose of it?
3- Why does it take data only from name attribute not from ID? but in some inputs elements ID and Name are the same.

I understand this is has been explained before in the forum, but still confused about the over all concept of it as i come from a non-IT background.

Any kind soul would be willing to help me, with simple explanation and few examples.
Any visual/video examples with links would be much appreciated.

Thanks in advance.


It’s pretty much exactly what it says it is - a combination of an identifier, the key, and some corresponding data, the value.

A simple example of some key value pairs:

key value
name Bob
fave language python
music :metal:

The id attribute uniquely identifies a fragment of HTML code. By doing so, we can use it as the target for an anchor <a> tag:

<a href="#somefragment">Click here to scroll down</a>
<!-- more HTML would be here -->
<div id="somefragment"><h3>You found me!</h3></div>

The id attribute is a global attribute; any HTML element can have an id. name, on the other hand, is only applicable to a few elements mostly related to forms.

The reason that the form elements - like <input>, <textarea>, etc - have a name parameter is because this is the “key” value when you submit the form. This page of the MDN docs might make it clearer.

1 Like

Thank you for the quick reply. Appreciate it.

1 Like