Hierarchy & Structure
The editor
provides features such as headings, paragraphs, lists, and tables to help
structure your content. These elements are not only useful for design but also
play a key role in accessibility.
This guide shows how to organize content visually and logically, making it
easier for everyone to read and navigate.
What do hierarchy and structure mean?
- Visual vs. Semantic Structure
-
Visual hierarchy describes:
1. how content looks, for example, big bold headings versus body text
2. the logical order of content, e.g. bigger headings indicating more important sections
2. Semantic structure defines what content means, for example, “this is a heading,” “this is a paragraph,” or “this is a list item.”
Screen reader users don’t rely on visual design but on the semantic structure of a page. If a heading is only formatted in bold instead of being defined as a heading, screen readers won’t detect it, which makes navigation more difficult. A clear heading hierarchy not only supports accessibility but also improves readability for everyone.
2. Why Structure Matters (Technically)
HTML pages use semantic elements like <h1>, <p>, <ul>, and <table>. These tell browsers and assistive tools what each part means, creating a logical flow. This structure is necessary for accessible content and better readability.
3. Overview of Editor Elements
Here’s what you can use in the editor and how to use it right:
Headings:
- Make sure headings are easy to spot visually
- Give each heading a clear purpose
- Use the built-in heading levels (Heading 1, 2, 3)
- Keep the order consistent (1 → 2 → 3)
Tip: Don’t skip heading levels, for example, avoid jumping directly from level 1 to level 3. Screen readers identify headings and use them to guide users through the text, so following the correct order is essential for smooth navigation.
Paragraphs:
- Use paragraphs for body text or to add details to a heading
- Always include at least one paragraph under a heading to give additional explanation
Note: Screen readers read paragraphs as normal text. Without a heading, context can be lost.
Links:
- Use links to point directly to
relevant content:
Bad example: “More info here”
Good example: “More info about the event schedule”
Why? This way, screen reader users get
meaningful context when they jump through links. Hearing only “here” doesn’t
provide useful information a clear link text does.
Lists (ordered and unordered):
- Unordered lists (bullets) are for equal items like features or checklists
- Ordered lists (numbered) are for step-by-step guides or sequences
Note: Screen readers announce the number of items in a list (“List with
5 items”).
Tables:
- Tables are great for comparisons or structured data
- They have columns and rows
- Good tables clearly label their headers, usually in the first row and/or first column
- Always define a header row for column titles and a header column if the first column describes categories
Important: This helps screen readers match data to its category
Summary:
The editor’s tools aren’t just for visual styling, they make your content
accessible. With proper use of headings, well-structured paragraphs, clear
links, organized lists, and semantic tables, you create content that everyone
can navigate, including users who rely on assistive technologies.
If you have questions, our support team is ready to help you build accessible content.