Headings play a crucial role in structuring a web page. Headings help the users to skim through the page and find the information they need. Especially in case of large documents headings are highly recommended to enhance the user experience.
While improving user experience, proper heading structure increase search engine optimization (SEO) and accessibility.
Using HTML headings
When we say providing headings, content authors visually make the content look like a heading by increasing the font-size and other styling methods. Though this method brings the intended visual output it is not semantic and will make the page inaccessible for screen readers. HTML headings (h1 to h6) need to be used for structuring the webpage. Content authors are in general worried that using HTML headings change the look and feel of content. <h1> may be very large in size and <h6> maybe very much small. Content authors can get the required font-size and style using appropriate CSS. A hierarchical heading structure helps the screen reader users to jump from one portion of the page to another portion of the page. 
Web AIM user survey4 says headings are very useful (47.4%) and somewhat useful (34.7%) for navigating the webpage. Though finding content on the page using headings is an old technique, even today 65% of screen reader users prefer heading to find the content on the web page says Web AIM survey 5 results.
Best practices in using HTML headings for accessibility
The points listed below are best practices for providing HTML headings on a web page. In few cases it may be difficult to follow these practices though.
- Provide only HTML headings.
- Provide logical heading structure. Eg: H2 should follow h1, H2 or H3 should follow H2, H3 or H4 should follow H3 and so on.
- Page should at least have one H1 and it should represent the title of the webpage.
- The H1 of the page should be at the beginning of the main content.
- Only one level one heading on a webpage is recommended and maximum two level one headings if the website name also needs to be marked in every page of the website.
- If another H1 is placed in the web page it should represent the title of the website.
- It is better to start the page with higher level of heading.
- Never skip any level of heading.
- The primary and secondary navigations also can have headings but should be below the level of main heading. Ideally they should be H2 considering level one for main heading.
- Never use HTML heading for visual appearance.
Sample code for heading structure
<h1>Vitamins in fruits and vegetables</h1>
<h2>Fruits</h2>
<h3>Apple</h3>
<p>Content for apple goes here.</p>
<h3>Orange</h3>
<p>Content for orange goes here.</p>
<h3>Banana</h3>
<p>Content for bananas goes here</p>
<h2>Vegetables</h2>
<h3>Potato</h3>
<p>Content for potato goes here</p>
<h3>Ladies Finger</h3>
<p>Content for ladies finger goes here.</p>
<h3>Tomato</h3>
<p>Content for tomato goes here.</p>
Sample Heading structure
Vitamins in fruits and vegetables
Fruits
Apple
Content for apple goes here.
Orange
Content for orange goes here.
Banana
Content for bananas goes here
Vegetables
Potato
Content for potato goes here
Ladies Finger
Content for ladies finger goes here.
Tomato
Content for tomato goes here.