1. 14
    Correctly Define Heading Levels of a Web Page
    3m 49s

Correctly Define Heading Levels of a Web Page

Share this video with your friends

Send Tweet

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
  • 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/
Adrian
Adrian
~ 5 years ago

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!

Erin Doyle
Erin Doyle(instructor)
~ 5 years ago

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 .

przytrzask
przytrzask
~ 3 years ago

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!