Organizing Content on Web Pages

Creating Lists

• There are two main types of lists: ordered and unordered lists
• Ordered lists are numerical or alphabetical, and the sequence of list items is important
• Unordered lists are bulleted lists, and the sequence of list items has no importance
• To create a list, specify the type of list as ordered or unordered, and then add each list item using the li tag
• Opening and closing list tags (ol or ul) specify the type of list
• Opening and closing tags (li) are used for each item in the list

Nesting Lists

• Lists can be nested inside other lists
• To nest a list, replace the list item tag with a list type tag (ol or ul)
• Every opening list or list item tag must be followed by a closing list or list item tag

Creating Tables

• Tables are used to organize text and tabular data on a page
• Tables are especially useful for displaying pricing information, comparing features across products, or when columns or rows share a common attribute
• Tables act as containers and can hold any type of content, including text, images, and lists
• Basic table structuring involves:
  • Defining a table with the table element
  • Dividing the table into rows with the tr element
  • Dividing rows into cells using the td element
  • Highlighting cells that are headers using the th element

Stretching Table Columns and Rows

• Stretching a cell across columns or rows is called spanning
• The colspan attribute spans a column over subsequent vertical columns
• The rowspan attribute spans a row over subsequent horizontal rows

Aligning Tables and Cells

• The table element has three deprecated attributes for alignment

Organizing Content on the Page

• Readability is the most important principle for organizing and displaying content on a web page
• Poorly organized content will lead users to leave a website
• Before displaying content, consider the following:
  • Does the content have one attribute with related data, or does it follow sequential steps? (use lists)
  • Does the content have multiple attributes suitable for comparison? (use tables)
  • Do you need to collect input from the visitor? (use forms)
• A/B testing is the process of evaluating one version of a web page against another version