Heading tags should be chosen for their semantic meaning rather than their font size. For example, h1 tags should be used for top level headings, h2 tags for a sub heading of h1, h3 tags for a sub heading of h2 and so on.
If the default font size for a heading tag is too large, rather than selecting a heading tag with a more closely matching font size, the style of the heading should be modified using CSS.
Similarly, heading tags can be used outside of their hierarchical order in the document flow. For example, there’s nothing wrong with using an h3 tag above an h2 tag if it’s describing a lower-level heading in the design. As we discussed earlier, different devices provide different browsing experiences and consequently it may be advantageous to change the order in which headings appear on the page.
Typically, however it’s recommended to keep h1 headings at the top of the page to help establish page context for users and search engine robots.
Selecting heading tags for their purpose rather than their font size not only makes it easy for search engine robots to determine what your page is about but also ensures that the content remains separate from the layout.