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

Correctly Define Heading Levels of a Web Page

Erin Doyle
InstructorErin Doyle

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
~ a year 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 Doyleinstructor
~ a year 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 .