@danielmrz-dev
Posted
Hello @cintiavic!
Your solution looks great!
📌 Instead of using <div>
as a container and <button>
as list items, it's recommended to use semantic HTML elements like <ul>
and <li>
for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.
Here's how you can refactor your code:
Before Refactoring
<div class="card__linkbuttons">
<button>Github</button>
<button>Frontend Mentor</button>
<button>LinkedIn</button>
</div>
After Refactoring
<ul class="card__linkbuttons">
<li><a href="#">Github</a></li>
<li><a href="#">Frontend Mentor</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
By using <ul>
and <li>
, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.
I hope you find this helpful!
Keep up the excellent work!
Marked as helpful
@cintiavic
Posted
@danielmrz-dev I really appreciate your feedback! It's really helpful, I've never taken notice of / learnt about taking screen readers into account. Thanks for your time!