Używanie nagłówków (h1,h2.....)

pytanie zadane 9 listopada 2020 w HTML i CSS przez Bartek12 Mądrala (5,510 p.)
edycja 9 listopada 2020 przez Bartek12

Mam stronę w react wykorzystująca react-router-dom i zastanawiam się nad używaniem nagłówków.

Jak ich użyłem:

Mam stronę główną z h1 na której są różne sekcje z nagłówkami h3.
Podstrony zaczynają się od nagłówka h2.
Navbar zawiera nagłówek h3

Czy ten układ jest poprawny?

3 odpowiedzi

odpowiedź 10 listopada 2020 przez Comandeer Guru (601,110 p.)
wybrane 16 listopada 2020 przez Bartek12

Najlepsza

h1 określa tytuł danej podstrony i zawsze powinien być jeden na podstronę. Czyli zarówno na stronie głównej, jak i podstronach powinna się hierarchia zaczynać od h1.

Co więcej, hierarchia powinna być po kolei, zatem po h1 powinno następować h2 a nie h3.

Navbar wgl nie potrzebuje nagłówka, bo sam w sobie jest landmarkiem.

Swego czasu napisałem artykuł o nagłówkach.

komentarz 10 listopada 2020 przez Bartek12 Mądrala (5,510 p.)

Tylko czy używając react-router ta sytuacja się nie zmienia?

<Switch>
          <Route path="/" exact component={Start} />
          <Route path="/galeria" component={Galeria} />
          <Route path="/logowanie" component={Logowanie} />
 </Switch>

2	komentarz 10 listopada 2020 przez Comandeer Guru (601,110 p.) A co to zmienia? Strona przecież dalej jest renderowana do podobnej struktury co "normalna".

odpowiedź 9 listopada 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

odpowiedź 10 listopada 2020 przez Wiciorny Ekspert (270,110 p.)

Polecam korzystać z narzędzia WAVE dla przeglądarki
WAVE - np jako EXTE

WAVE is a web accessibility evaluation tool developed by WebAIM.org. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. No automated tool can tell you if your page is accessible, but WAVE facilitates human evaluation and educates about accessibility issues. All analysis is done entirely within the Chrome browser allowing secure valuation of intranet, local, password protected, and other sensitive web pages.

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=pl