Page Structure and Headings
Create a logical reading order by using appropriate headings, <h1> <h2> <h3> <h4> <h5> <h6>.
Build the structure of the page using semantic markup. Markup that has meaning to browsers and screen readers. A web page should be able to stand on its own without the help of a style sheet.
Sighted users often scroll the page quickly and look for headings to get an idea of the structure and content of the page. Screen reader and other assistive technology users also have the ability to navigate web pages by heading structure, assuming true headings are used (as opposed to text that is styled to be big and/or bold). This means that the user can view a list of all of the headings on the page, or can read or jump by headings, or even navigate directly to top level headings (<h1>), next level headings (<h2>), third level headings (<h3>), and so on.
Do not use text formatting, such as font size or bold to give the visual appearance of headings - use actual headings (<h1> - <h6>) for all content headings
There should only be one <h1> heading per page and should be applied to the page title to indicate to the user that this is where the content area begins.
Pages should be structured in a hierarchical manner.
Proper nesting of headings.
...
Lists
HTML lists - <ul>, <ol>, and <dl> - also convey a hierarchical content structure.
Lists should be used to display actual list items. They should not be used for layout purposes.