@Sdann26
Posted
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 helpful
@kyla42
Posted
@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?
@Sdann26
Posted
@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 helpful
@kyla42
Posted
@Sdann26 Got it👍 Thank you for your advice!
