Use and Organize Headers
Headers are the organizational titles within the content section of web pages that act as non-interactive navigational tools for users. These visual headers are especially important to summarize the content below them and organize them in a way that makes it easier for readers to find the information that they are looking for.
Accessible headers are those that are marked up in both size and font-weight to ensure that readers of any visual range can tell the difference between headers and the content paragraphs. These headers should also be organized in order to give a meaningful hierarchy to the flow of content for the users. Header tags are also to be used above marked-up paragraph text or links since screen readers and those who choose to turn off CSS will otherwise be unable to tell the difference between headers and content paragraphs.
Make Headings Meaningful
By default, header tags are bolder and larger than regular paragraph text. Within CSS, a designer can edit these headers to completely change their weight, color, font, and spacing.
When editing header designs, it is important to remember to keep them larger or more pronounced than the content text, and that higher-level header tags are also more pronounced than the lower-level headers. Remember as well to rely on more than just colors to show the difference between the headers and content text.
Keep to the Hierarchy
Header tags, marked as <h1> to <h6>, are placed within the content section of pages.
A rather common usage mistake in web design is headers being used sporadically in different orders, which can make it very confusing for readers to figure out the order and importance of content. For example, a designer or developer may start a page’s heading with <h2> markers instead of <h1> at the top of their page due to the default browser size of <h1> and find it easier to start with a ‘smaller’ header for aesthetic purposes.
An example of header hierarchy: