Fer• 3,970
@fernandolapaz
Posted
Hi, a couple of things that may interest you:
- When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a
<a>or<button>to wrap the image (depending on what happened when clicking on it). Also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the<a>tag.
- You shouldn't wrap each element with the
<section>tag, use elements like<img>,<h1>or<p>directly.
I hope it’s useful : )
Regards,
Marked as helpful
1
YoungZV• 260
@YoungZV
Posted
Hi @fernandolapaz
Yes, it is very very helpful thank.
-
For some reasons I totally forgot the interactive elements such as <a> or <button>. Just concentrated on the look.
-
It would have been better to use simple divs when i want to wrap things like this in this kind of projects?
-
What would be the semantic tags for projects like this?
Will update my solution.
Thank you.
1
Fer• 3,970
@fernandolapaz
Posted
@YoungZV
I'll tell you what I think about the semantics for a simple project like this (just a component):
- <main> to wrap the card, as you did. 👍
- then directly elements like <img>, <h1> or <p>.
- and we could use some <div> (not semantic) if we need to wrap several elements for layout purposes for example.
Marked as helpful
1
YoungZV• 260
@YoungZV
Posted
Thank you @fernandolapaz I have updated my html and css files.
1
