please i need help with the span element , a little confused about it
<!DOCTYPE html>
<html lang="en">
<h1>Checkout</h1>
<section>
<h2>Your Cart</h2>
<img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="rubic cube">
</section>
<section>
<h2>Payment Information</h2>
<form>
<label for="card-name">card-name</label>
<input id="card-name" name="card-name"
type="text" required>
<label for="card-number">card-number</label>
<input id="card-number" name="card-number"
type="text" aria-describedby="card-number-help" required>
<p id="card-number-help" aria-describedby="card-number">card-number help</p>
<span text="card-name" aria-hidden="true"></span>
<span text="card-number" aria-hidden=></span>
</form>
</section>
<head>
<meta charset="UTF-8" />
<title>Checkout Page</title>
</head>
<body>
</body>
</html>
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
Build a Checkout Page - Build a Checkout Pagehttps://www.freecodecamp.org/learn/full-stack-developer/lab-checkout-page/build-a-checkout-page
dhess
November 11, 2025, 3:01pm
2
If you look up “html span element attributes,” you will see that span has no text attribute. Any text would go between the span opening and closing tags. Also, your aria-hidden attribute has no value here.
Checkout
<h2>Your Cart</h2>
<img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="rubic cube">
</section>
<section>
<h2>Payment Information</h2>
<form>
<label for="card-name">card-name</label>
<input id="card-name" name="card-name"
type="text" required>
<label for="card-number">card-number</label>
<input id="card-number" name="card-number"
type="text" aria-describedby="card-number-help" required>
<p id="card-number-help" aria-describedby="card-number">card-number help</p>
<span aria-hidden="true">card-name</span>
<span aria-hidden="true">card-number</span>
</form>
</section>
<meta charset="UTF-8" />
<title>Checkout Page</title>
’’’
dhess
November 11, 2025, 3:52pm
4
Please review the lecture about the importance of using an HTML boilerplate to start your projects. The code above is not in the right place.
please i need help with the span element on this exercise..
<!DOCTYPE html>
<html lang="en">
<h1>Checkout</h1>
<section>
<h2>Your Cart</h2>
<img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="rubic cube">
</section>
<section>
<h2>Payment Information</h2>
<form>
<label for="card-name">card-name</label>
<input id="card-name" name="card-name"
type="text" required>
<label for="card-number">card-number</label>
<input id="card-number" name="card-number"
type="text" aria-describedby="card-number-help" required>
<p id="card-number-help" aria-describedby="card-number">card-number help</p>
<span aria-hidden="true">card-name</span>
<span aria-hidden="true">card-number</span>
</form>
</section>
<head>
<meta charset="UTF-8" />
<title>Checkout Page</title>
</head>
<body>
</body>
</html>
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
Build a Checkout Page - Build a Checkout Pagehttps://www.freecodecamp.org/learn/full-stack-developer/lab-checkout-page/build-a-checkout-page
ILM
November 12, 2025, 10:14am
6
Thank you, i will do that
dhess
November 12, 2025, 3:02pm
8
This is actually a duplicate topic.
ILM
November 12, 2025, 3:19pm
9
I have merged your duplicate topics, please do not create multiple topics for the same challenge
please how i correctly copy my code and paste here for correction so i would not to recreate question
dhess
November 15, 2025, 2:58pm
11
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
And, in the future when you have a question, please click the Get Help > Ask for Help button, which is displayed on the challenge after you have attempted to submit your solution at least three times.
The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.
Thank you.
<meta charset="UTF-8" />
<title>Checkout Page</title>
<h1>Checkout</h1>
<h2>Your Cart</h2>
<img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="Rubic cube">
</section>
<section>
<h2>Payment Information</h2>
<form>
<div>
<label for="card-name">card-name<span="\*" aria-required="true"></label>
card-number<span=“*” aria-required=“true”>
</form>
</section>
…
<meta charset="UTF-8" />
<title>Checkout Page</title>
<h1>Checkout</h1>
<h2>Your Cart</h2>
<img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="Rubic cube">
</section>
<section>
<h2>Payment Information</h2>
<form>
<div>
<label for="card-name">card-name<span="\*" aria-required="true"></label>
card-number<span=“*” aria-required=“true”>
</form>
</section>
’’’
i added back ticks and this is what i got
please i need to know how to paste my code in forum,.. i just saw why you asked me to check boilerplate..that is not what my code was , i didn’t know how to paste.. please which one is the back tick and do i add space before it?
ILM
November 15, 2025, 3:26pm
16
you are pasting correctly, you need to use backticks tho, this is a backtick: `
