Labels in HTML

Labels are great for describing what a input is for. Learn how and why to use labels.

What are labels

The label element represents a description for an input element.

  <label for="email">Email</label>
  <input id="email" type="email" />

Why labels are useful

Associating a <label> with an <input> element is useful because:

How to associate a label with an input

To associate a <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input’s id.

  <label for="email">Email</label>
  <input id="email" type="email" />

Alternatively, you can add the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:

    <input type="email" />


Labels are great for giving the user more information, visually, and programmatically, about what data should be entered in an input.

What is DRY Code

There's a principle in programming called DRY, or Don't Repeat Yourself. It usually means refactoring code by taking something done several times and turning it into a loop or a function

What is Destructuring Assignment?

Destructuring assignment is a special JavaScript syntax that makes it possible to assign multiple variables to elements of an array or properties of an object. It is very useful when you are trying to assign multiple variables or get values of an array and/or object.