Design comparison
Solution retrospective
Any feedback would be appreciated.
Community feedback
- @Sdann26Posted over 2 years ago
Hi Nonsense!
It seems to me that your project is fine but I would give you a recommendation to keep in mind, you can not have more than 3 h1 on a website because it will be penalized in SEO. There should only be one h1 per web page.
What I would recommend is to change all h1's to h2's and add inside the main tag with the title you want and you will add to the h1 the
sr-only
class with the following attributes:.sr-only { position:absolute ; left: -10000px; width: 1px; height:px ; top: auto; overflow: hidden; }
The idea behind this is that the h1 is still in the project flow but is not displayed so it will not alter your layout, and the screen reader will detect it.
Good luck!
Marked as helpful0@kyla42Posted over 2 years ago@Sdann26 Thank you for the tip! :D I haven't really thought about SEO so far but I'll definitely keep that in mind from now on! How about if I add h1 somewhere in the main tag then set display: none in css? Does it still work?
0@Sdann26Posted over 2 years ago@kyla42 It would not work, I quote what the freeCodeCamp page mentions about that:
Note: The following CSS approaches will NOT do the same thing: display: none; or visibility: hidden; hides content for everyone, including screen reader users Zero values for pixel sizes, such as width: 0px; height: 0px; removes that element from the flow of your document, meaning screen readers will ignore it.
That's why I recommend using the sr-only class.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord