@dliferova
Posted
Hello,
Great job! I would suggest providing more detailed naming for classes. For example, if you have
h1 class="name"
try to choose names that reflect the entity. In this case, since you're assigning the class to a heading, using class="heading" would be more appropriate than "name".
Similarly, for <ul class="links",
a name like "social-links" would be more fitting (since these links are related in meaning).
Also, just because text on the page is the largest doesn't mean it should be h1. I recommend checking out this article
Marked as helpful
@stefan-holmgren
Posted
@dliferova
Thank you for your helpful comments!
Regarding the h1, I figured it's not about the size of the heading but rather the "semantic" property of it. A h1 should only exist once on a page, and that one would be what describes the content of the page, like they say in the article:
While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single <h1> element that describes the content of the page (similar to the document's <title> element).
@dliferova
Posted
@stefan-holmgren
H1 tags are an important part of SEO. Right now, you're kind of telling the browser that your site is "Jessica Randall", but on such a site, there can be anything - a portfolio, a creative blog, videos, etc. So, I would specialize that the site is Jessica Randall's personal page or something similar.
However, in the card, Jessica Randall it's just stylized text. It can be simple <p>Jessica Randall</p>
In such cases when h1 doesn't match the layout's largest text, I use a class for visually hiding h1, without breaking the logic and meaning (for SEO) of the headline
<h1 class="visually-hidden"> Jessica Randall frontend developer portfolio</>
.visually-hidden { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; }
I hope I explained it clearly =)
Marked as helpful
@stefan-holmgren
Posted
@dliferova
Superclear :) - and interesting solution regarding the visually-hidden class.
Thank you again
