---
title: "HTML Element Component"
slug: "html-element-component"
tags: ["module-builder"]
updated: 2026-09-15T18:04:06Z
published: 2026-09-15T18:04:06Z
canonical: "docs.unqork.io/html-element-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML Element Component

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 UnqorkAI platform. 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`). |
| Value | `value` | Text input | The value for the attribute. |

## Accessibility Settings

For details on each setting, its options, and when to use it, see [Accessibility Settings Reference](/unqorkai/docs/accessibility-settings-reference).

### Attributes

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Label | `ariaLabelOption` | Drop-down | **None** | 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](/unqorkai/docs/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](/unqorkai/docs/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.

Rendering is the process of loading components and displaying the final result on the front-end screen.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Rendering is the process of loading components and displaying the final result on the front-end screen.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

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.

A place on your operating system that stores recently copied content. The clipboard only stores one item at a time.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Assistive technology that reads digital text aloud for users with visual impairments or reading disabilities.

Semantic HTML uses HTML elements to clearly describe their meaning, rather than just their appearance, to structure web content for better readability and accessibility for both humans and machines.

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.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

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.

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.