12.3 Divide large blocks of information into more manageable groups

Grouping elements and providing contextual information about the relationships between them can be useful for all users. Also, divide large blocks of information into smaller chunks.

• Use section headings (<h1> to <h6>) to create structured documents and break up long stretches of text
• Break up text into paragraphs with the <p> tag
• Use <ul>, <ol>, and <dl> tags to nest lists correctly
• Use tables for tabular data and describe the table with <caption> tag. A caption provides a short description of the table's contents, usually in a couple of sentences. Put the <caption> tag immediately after the <table> tag. You can specify only one caption per table
• Group table rows and columns with <thead>, <tbody>, <tfoot>, and <colgroup> tags. These tags group rows and columns in a table to make it easier for screen readers to navigate and understand the page
• Group form controls into logical groups. Use the <fieldset> tag to define the relationship between a set of input fields. This lets browsers group the content together. Use the <legend> tag to give a brief description of the relationship between the fields or of the purpose of the fields. For example:
  
  <form>
  <fieldset>
  <legend>Personal information</legend>
  <label for="firstname">First name:</label>
  <input type="text" id="firstname" tabindex="1">
  <label for="surname">Surname:</label>
  <input type="text" id="surname" tabindex="2">
  </fieldset>
  <fieldset>
  <legend>Address</legend>
  <label for="street">Street address:</label>
  <input type="text" id="street" tabindex="3">
  <label for="city">City:</label>
  <input type="text" id="city" tabindex="4">
  </fieldset>
  </form>
• Group related links. A navigation bar at the top of a web page is an example of grouping related links. Another example is a site map containing lists of links organised under site section headings. Use the <optgroup> tag to organise long lists of menu options into smaller groups