Why should HTML elements (input, textarea, and select) have associated labels?

Can anyone please shed light on why (input, textarea, and select) should have an associated label?

I found a stackoverflow thread (Should I put input elements inside a label element?) that explains all the ways of associating <input> and <label>, but I didn't find any clear explanations of WHY a label must be associated.

Example

WebStorm (IDE) generates a "Missing associated label" warning for the input in this code:

<div>
  <input type="text" id="search" name="search">
  <button id="logout" name="logout">Logout</button>
</div>

Applying auto-correction adds a label for the input:

<div>
  <label>
    <input type="text" id="search" name="search">
  </label>
  <button id="logout" name="logout">Logout</button>
</div>

The HTML works fine without the label, so why should I add it?

Solution

Associated labels are meant for Acessibility. So when you run, for example, a lightouse Chrome check on a website it will point out missing labels in the "Acessibility" part of its report. Reason:

"Labels ensure that form controls are announced properly by assistive technologies, like screen readers".

So It is good to have them when you have a website that could be acessed by someone with a disability who cant properly read or see the content himself and needs a screen reader.