Working with Page Structure and HTML Semantics (H1)

Let's take a look at how pages are semantically structured using HTML to be accessible.

Headings (H2)

The first heading is referred to as an "H1" tag and represents the primary heading on our webpage. Headings use a nested structure from H1 - H6 in order from highest level to lowest sub-topic. For example, the second heading is referred to as "H2" and represents a sub-topic related to our main H1 heading.

Here, you can see we have the word "Headings" as our H2.

Often times, users will use headings to quickly navigate a page to find their relevant information as quickly as possible.

Lists (H2)

Lists also help with page structure by defining various items that should be grouped together.

Ordered Lists (H3)

1. Depicts a group of items
2. Easily identifiable by sighted users and screen readers
3. Marked by numbers, indicating there is a required order to the items

Unordered Lists (H3)

• Also depicts of group of items
• Easily identifiable by sighted user and screen readers
• Marked by bullet points, indicating there is no required order to the items