Last reviewed: January 12, 2022
By default, this component displays the page's actual Title, as set in Properties, and is automatically updated if that is changed.
As a best practice, and to meet accessibility guidelines, a Heading 1 titles is required on every page.
In general, Titles must be used hierarchically; e.g.,
The pencil icon provides in-place access to change the heading title. When done, click anywhere off the component to save your changes, or push the Escape key to cancel.
The wrench icon provides access to change all settings.
By default, the Title starts as a Heading 1 and is blank.
Title - Edit this field to change the text displayed in the heading.
Type/Size - Select from these options. Font color and size is pre-set (see examples at right).
When the Flex Module or a carousel do not quite meet your needs, the Heading 5 option allows authors to create the look of a module using other components with the combination still matching other modules on the page.
Link - Enter a URL here to turn the title into a clickable hyperlink. Use the magnifying glass to browse for a target page within the UBCMS.
Open in new window - This optional setting forces the clicked link to open in a new browser tab or window.
Exclude from "on this page" lists - This optional setting prevents this title from being included in the On This Page component (see the live example in the right sidebar).
ID - Enter a character string to identify this title as a link anchor so another page can link here.
To meet accessibility requirements, every page must have an H1 heading (e.g. using the Title component).
Sometimes it is preferable for stylistic reasons not to show the main heading, especially on a home page. In such cases, a Properties setting allows the Header container to instead supply the 'Heading 1' title, and be visible to assistive technology such as screen readers.
Headings, provided by the UBCMS Title component, provide structure to the content on your Web pages. They break up your content into meaningful sections, define its hierarchical structure and provide handy anchors for deep linking or the On This Page component. WebAIM.org calls this semantic structure. Done effectively, this structure allows humans, screen readers and automated search engines to easily digest your page.
Best practice: To facilitate navigation and understanding of the overall document structure by both users and search engines, headings should be nested; e.g., one H1 followed by one or more H2's, each H2 followed by one or more H3's, each H3 followed by one or more H4's, and no jumps of more than one step (e.g. an H2 should not be followed by an H4).
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions:
Accents, emojis and other 'smart characters' can be pasted from Word or another website, or can be created using Alt code shortcuts.
Please be thoughtful in your use of special characters. Some may be correct but display awkwardly on the page, while emoji meanings vary markedly from culture to culture and a poor but well-intentioned choice may confuse or even upset your audience.