Accessible Page Structure
Headings, tables, and definition lists are useful when creating a page, but they should only be used in certain ways. Visual appeal alone is not enough. In general, these elements are used to describe the structure of the page, not for their style properties. If you are using a table or definition list to make page elements align in a certain way, consider using other page layout options instead.
On this page:
Headings
Headings are used to organize your content into related parts. Headings convey the structure of your information to readers using assistive technologies, and should follow some best practices.
Headings should
- be concise (< 60 characters best)
- be relevant to the content that follows
- follow a logical, outline structure
- have 'title' attributes for in-page linking or table of contents
Headings should not
- be used only for their style properties.
- contain links. Links can go under the heading.
- skip out of order. A level 3 heading should not be used without a level 2 preceding it.
Use HTML / Markdown supports six sizes of headings. The CMS sets the page title to be the level 1 heading, so only the levels 2 - 5 headings are available from the dropdown button.
Headings consist of a number of hashtags ## - ###### and a space preceding your heading (corresponding to the level). Using the button in the CMS page editor will insert the corect number of hashtags in front of the selected text.
If you do not like the appearance of a heading, it can have a style appeneded to it using the '{' and '}' brackets. The curly braces do not show when the page is published. A heading can have both a style '.myStyle' and an '#in-page-anchor ' definition attached.
Example:
## Heading (plain style) {.plain}
### Subheading (alternate style) {.plain}
#### Sub-subheading (alternate style, linked) {#in-page-anchor.alt}
In-Page Links
Headings can be the target of links. These links will specify the name of a page, followed by a section of the page. So, constructing a full URL
- i.e.
https://hilo.hawaii.edu/+help/cms/structure+.php+#+anchor - becomes https://hilo.hawaii.edu/help/cms/structure.php#anchor
To make a heading linkable, use a trailing {# + keyword + }. This will make that title linkable within the current page using a [Link](# + keyword + ) format. This is commonly used fpr in-page links in tables of contents sections of pages.
Tables
Tables offer a simple way to display structured data. Tables can include links and some formatting. Paragraphs, line breaks and lists are not supported. For those situations, use a grid for layout instead.
Each table consists of at least three rows. Each row contains several | characters, marking the columns. The first line contains the column headings. Column headings are automatically bolded. Do not bold the table headings.
| Col 1 Heading | Column 2 | Cost |
Following the column header row, an alignment row consists of vertical lines (|) and dashes (-). By default, each column is left-aligned, like a regular paragraph. To center a column, surround the dashes in between the vertical lines with a colon (:) on each side of it. For a right-aligned column, only include the colon on the right side.
| ------------- |:-------------:| -----:|
After the structure is defined by the first two rows, provide the table data - one row per line, separated with the vertical line (|) character. Each row will be zebra-striped in an alternating background color. Links and directory tooltips are supported within a table cell.
| [Links are Great](/help/cms/links.php) | col 3 is right-aligned | $1600 |
Inserting a Table
The CMS editor can't know exactly what your table looks like, but it can insert a placeholder table for you to modify. That table looks like the code below, and is meant to be modified to suit the page.
To insert a table, use the toolbar button with a the , and select Table. This is the same button that can be used to insert a grid.
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
Tables can contain links and formatting such as bold and italic emphasis. Lists, line breaks and paragraphs cannot be used in a table. Contact the web office if you need searching / filtering for your table.
