Separator Block

The separator block adds a horizontal rule (<hr>) to your page. This is a semantic HTML element that represents a thematic break between paragraph-level elements in a section.

Proper Use (Accessibility Requirement – WCAG 2.1 Level AA)

Think of your page headings (Heading 2, Heading 3, etc.) as defining sections or “chapters.” A separator indicates a scene change within the same section — not the start of a new section.

• Use a Separator when you need a subtle break inside a section (e.g., switching from one sub-topic to another under the same heading).
• Use a Heading instead when you are starting an entirely new section or major topic. Always maintain proper heading hierarchy (see Headings).

Important accessibility rules:

• The <hr> element is announced by screen readers (e.g., “separator” or “horizontal rule”) and conveys meaning to assistive technology.
• It meets WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships – Level A) when used semantically.
• Never use separators for purely decorative or visual purposes — this creates unnecessary announcements for screen-reader users.
• Do not place a separator immediately before or after a heading (there is no content to separate).

A horizontal rule is a semantic element, meaning screen readers and other software that reads your website’s code (e.g. search engines) will attach meaning to that element, so it should not be used to simply provide visual flair.

Misuse of separators can reduce accessibility scores and will need remediation before the April 24, 2026 WCAG 2.1 Level AA deadline.