The HTML Element component renders a raw HTML tag with configurable content and attributes. Use it to add headings, paragraphs, dividers, or any custom HTML structure to a module.
How to read settings tables
The tables below describe each configurable option as it displays in the Unqork IDE. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked
General Settings
Setting
Field
Type
Default
Description
Property ID
key
Text input
html
A unique ID for this component instance.
Display Settings
Formatting
Setting
Field
Type
Default
Description
Tag
tag
Text input
p
The HTML tag to render (for example, h1, h2, p, div, span, and so on).
Content
content
Code editor
—
The content to display inside the element. Supports plain text and HTML markup.
Default State Options
Setting
Field
Type
Default
Description
Hide Field
hidden
Toggle
OFF
Hides the component from end-users but always displays in the Module Builder.
Advanced Settings
Additional Styling
Setting
Field
Type
Default
Description
custom CSS class
className
Text input
—
A CSS class applied directly to the HTML element for custom styling.
Custom CSS Class for Container
customClass
Text input
—
A CSS class applied to the element's parent container in the DOM.
Attributes
Adds arbitrary HTML attributes to the rendered element. Use only safe attributes like src, href, and title. The style attribute is not supported — use the Custom CSS Class setting to apply custom styles instead.
Action
Description
Copy Table
Copies the current Attributes configuration to the clipboard.
Replace Table
Replaces the current Attributes configuration with a copied one.
Filter
Filters the rows displayed in the table.
Add Attribute
Adds a new attribute row to the table.
Column
Field
Type
Description
Label
attr
Text input
The HTML attribute name (for example, href, src, title).
Sets how to label this element for screen readers. Options include: None, Custom label, or Reference label(s).
Description
ariaDescriptionOption
Drop-down
None
Sets how to provide additional context for screen readers. Options include: None, Custom description, or Reference description(s).
Role
ariaRole
Drop-down
—
Defines the role or semantic meaning of the element for assistive technologies. See Accessibility Settings Reference for the full list of available roles.
Announce Live Changes
ariaLive
Drop-down
Off
Controls how screen readers announce dynamic content updates. Options include: Off, Polite, or Assertive.
Hide From Screen Readers
ariaHidden
Toggle
OFF
Hides the element from assistive technologies without removing it from the DOM.
Custom ARIA Attributes
Adds additional custom ARIA attributes to the element as key-value pairs.
Column
Field
Type
Description
ARIA Attribute
attr
Drop-down
The ARIA attribute name selected from a list of valid ARIA attributes.
Value
value
Text input
The value for the attribute.
Operations Builder
This component supports the Operations Builder in Vega modules. When the module or panel runtime is set to Vega (2.0), an Event Handlers section displays in the settings panel for configuring event-driven operations.
Changelog
Date
Change
—
Initial publication.
HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages.
Attributes are pieces of information about a user that are included in an SSO claim. Typically key/value pairs, attributes are used to make decisions about a user's access.
The browser-based workspace where Creators build, edit, review, and manage Unqork applications. Also referred to as the Unqork platform. The IDE replaces what was previously referred to as UDesigner and Classic Designer, which are considered legacy.
A Property ID is the unique field ID used by Unqork to track and link components in your module.
The Unqork tool used to build individual modules by placing and configuring components on a canvas.
Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings.
Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.
The Document Object Model (DOM) is the data representation of objects that form the structure and content of a document on the web. The DOM represents the page.
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.
ARIA (Accessible Rich Internet Applications) is a set of attributes used in HTML to enhance the accessibility of web content, particularly dynamic or interactive web pages, for users who rely on assistive technologies like screen readers.
The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.
DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.
