Correctly Define Heading Levels of a Web Page
Similar to Landmark Regions, Heading Levels are used by web browsers, plug-ins, and assistive technologies to provide in-page navigation.
Rules
- Each page should have at least one
<h1> - Pages should be structured in a hierarchical manner
<h1>: being the most important (usually page titles or main content heading)<h2>: usually major section headings<h3>: sub-sections of the<h2>- and so on
- Do not skip heading levels - always follow consecutive order
- Do not use text formatting, such as font size or bold to give the visual appearance of headings.
- Use actual heading (
<h1>-<h6>) for all content headings
- Use actual heading (
- Do not use heading levels to achieve visual results only
References
- https://webaim.org/techniques/semanticstructure/
- https://www.w3.org/WAI/tutorials/page-structure/headings/
Say you are making a reusable movieCard component and you don't know exactly where it will be used. What is a good way of making sure the heading levels are correct if you don't know if the component will be used after an h2/h3/etc.
Thanks for the great course!
What is a good way of making sure the heading levels are correct if you don't know if the component will be used after an h2/h3/etc.
This is a great question! One approach you could take is to define a prop on your reusable component that takes what the heading level element should be and allow the containing component to pass that in. Here is a codesandbox example: https://codesandbox.io/s/component-with-dynamic-heading-level-f8o8d?fontsize=14&hidenavigation=1&theme=dark .
I wonder whether those movie sections should not be wrapped in <section> ? Since <section> are identified, typically by including a heading
Thanks for the awesome course though!