Learn HTML Forms by Building a Registration Form - Step 18

Tell us what’s happening:
what is an id attribute and what is its purpose? thank you.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
        <label>Enter Your First Name: <input /></label>
        <label>Enter Your Last Name: <input /></label>
        <label>Enter Your Email: <input /></label>
        <label>Create a New Password: <input /></label>
/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;

label {
  display: block;
  margin: 0.5rem 0;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Learn HTML Forms by Building a Registration Form - Step 18

Link to the challenge:

1 Like

id attribute is exactly what it sounds like. It’s an attribute within an html tag that has some value, like:

<tag id="attribute_value"></tag>

It’s purpose: I think the lesson you are linking is about accessibility - so people who use screen readers (who are usually blind or limited vision) will be able to navigate and use your website. But id attributes also become very important once you start manipulating your page with JavaScript.

1 Like

The id attribute is also unique to each page, whereas, in comparison, the class attribute can be used multiple times. id is often used as a target for anchor links or unique CSS styling.

Thank you for your time!

I appreciate your help.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.