Organizing Content on Web Pages

Created by

@UnfetteredWichita

Study Notes

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

Description

Learn about the importance of readability in organizing and displaying content on a web page. Discover how to make your content easily accessible and engaging for visitors, encouraging them to take desired actions such as reading additional content, sharing, or making purchases.