Similar to Landmark Regions, Heading Levels are used by web browsers, plug-ins, and assistive technologies to provide in-page navigation.
<h1>: being the most important (usually page titles or main content heading)
<h2>: usually major section headings
<h3>: sub-sections of the
<h6>) for all content 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 .