Czy poprawnie użyłem znaczników semantycznych

Question

Cześć! Proszę o code review ze zwróceniem uwagi na to czy poprawnie użyłem znaczników semantycznych. Link: https://codier.io/creation/H1CVYgRiv

Comments

Czy kontener div.card jest głównym elementem strony i występuje na niej tylko raz?

Answer 1

Zacznijmy od tego, że znaczniki semantyczne to pleonazm.

• Czy ten element reprezentuje całą stronę, czy to jest jedynie fragment strony? Jeśli to jest fragment, to praktycznie całość jest do przepisania.
  • main służy do oznaczania głównej treści strony i może wystąpić na stronie tylko raz.
  • h1 jest głównym nagłówkiem strony i nie powinien być w tego typu małych fragmentach strony.
  • Natomiast samo .card pasuje bardziej do article, względnie section.
  • Z kolei .footer mógłby być footerem.
• Obrazkowi brakuje [alt].
• Nie krzycz w kodzie, od tego jest text-transform: uppercase; w CSS-ie.
• Na mniejszym ekranie karta się nawet nie mieści w podglądzie, z powodu stosowania pozycjonowania absolutnego.
• Należy unikać @import w CSS-ie.

 

Comments

h1 jest głównym nagłówkiem strony i nie powinien być w tego typu małych fragmentach strony

Hmm, jak to się ma do trzeciego przykładu ze specki z kilkukrotnym użyciem <h1> w jednym dokumencie (chyba, że użycie <section> to usprawiedliwia)? Czy to się nie kłóci z regułą, żeby <h1> było na stronie tylko raz? Natomiast w pierwszym przykładzie nagłówki są ułożone w losowej kolejności, co z kolei (tak rozumiem) kłóci się z tym, że nagłówki powinny być w kolejności od 1 do 6.

---

Te trzy przykłady reprezentują w teorii ten sam dokument, ale pierwszy i ostatni przykład są z punktu dostępności po prostu błędne. Wszystko rozbija się o algorytm outline'u, który nie działa, a którego WHATWG uparcie nie chce usunąć ze specyfikacji.

Answer 2

Ogółem to dobrze tylko  Footer ma (moim zdaniem) za dużo styli daj tam po prostu diva i jemu daj przynajmniej połowę tego co ma teraz footer