Looking to hire developers?
I'd love to hear your feedback on semantic HTML, accessibility, and general CSS advice. Thanks for your time!
@Eileenpk
Posted
@Ohuttar,
Every page should have some content that tells the viewer what it's about or at least some kind of context for the rest of the information on the page. After all, the purpose of a website is to relay information about something. I would pick the piece of content that best describes the page or gives the most context.
Marked as helpful
@ohuttar
Posted
@Eileenpk Thanks for the reply, have a nice day!
@Eileenpk
Posted
Hi Ohuttar, your project looks great, and this might be a helpful tip.
You have
<h1 class="visually-hidden">AI-Powered Project Manager</h1>
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
Search engines use complex algorithms to evaluate web pages and determine their relevance and quality based on a variety of factors, including the content on the page, the page structure, and the links to and from the page. Using hidden text could be seen as a black-hat SEO technique and is likely to result in penalties or even a ban from search engines, which can have a significant negative impact on your website's visibility and traffic.
I recommend removing this hidden text and replacing the first <p> tag with an <h1>, you can then add these tags inside the <head> tag
<title>
Four Card Feature
</title>
<meta
name="description"
content="AI-Powered Project Manager"
/>
// This is for social media
<meta
property="og:title"
content="what you want the title of the page to be on social media when
someone posts/shares"
/>
<meta
property="og:description"
content="what you want the description to be on social media when
someone posts/shares"
/>
Hope you found this helpful!
Marked as helpful
@ohuttar
Posted
@Eileenpk Thank you for taking the time to comment!
I had no idea that a penalty was possible for hiding an h1. I'm going to make the changes that you recommended.
Out of curiosity, do you have any recommendations on what to do if there is no semantic h1? Would you omit it, or give whatever content there is an h1 tag, even if it doesn't make sense as a heading?
Thanks again for your time!
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
