Add semantic HTML tags in the builder
Important note on accessibility
As a best practice, your goal should be to nest headings by their rank with h1 being the most important and h6 being the least. Headings with a lower rank indicate a subsection, whereas equal or higher rank headings indicate a new section.
Pre-requisites
Steps
- Add a new Paper block or click into an existing one to modify the content.
-
In the Paper block’s toolbar, select the Heading menu
- As an alternative, see the keyboard shortcuts below.
- Select the desired heading rank (H1 is the most important, H6 is the least important) that you would like to use.
- Type the heading.
- Press Enter to end the heading and start a new line as a paragraph.
In addition to headings, Allele also supports <strong> as the bold tag, in addition to <em> to represent emphasized, italic text. Some screen readers will interpret these tags accordingly.
Keyboard shortcuts
Instead of selecting your desired heading rank via the menu, you can also use the following keyboard shortcuts.
- ctrl/cmd + alt + 1 (heading 1)
- ctrl/cmd + alt + 2 (heading 2)
- ctrl/cmd + alt + 3 (heading 3)
- ctrl/cmd + alt + 4 (heading 4)
- ctrl/cmd + alt + 5 (heading 5)
- ctrl/cmd + alt + 6 (heading 6)