---
title: "Tag Factory"
version: "5.12"
---

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

# Tag Factory

## Overview
[Phalcon\Html\TagFactory][html-tagfactory] is a component that generates HTML tags. This component creates a new class locator with predefined HTML tag classes attached to it. Each tag class is lazy-loaded for maximum performance. To instantiate the factory and retrieve a tag helper, you need to call `newInstance()` by passing a `Phalcon\Html\Escaper` object to it.

If you are using the [Phalcon\Di\FactoryDefault][di-factorydefault] container for your application, the [Phalcon\Html\TagFactory][html-tagfactory] is already registered for you with the name `tag`.

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\TagFactory;

$escaper = new Escaper();
$factory = new TagFactory($escaper);
$helper  = $factory->newInstance('a');
```

```php
<?php

use Phalcon\Di\FactoryDefault;

$container = new FactoryDefault();

$helper = $container->tag->newInstance('a');
```

The registered names for respective helpers are:

| Name                 | Class                                                       |
|----------------------|-------------------------------------------------------------|
| `a`                  | `Phalcon\Html\Helper\Anchor`                                |
| `aRaw`               | `Phalcon\Html\Helper\Anchor` (raw)                          |
| `base`               | `Phalcon\Html\Helper\Base`                                  |
| `breadcrumbs`        | `Phalcon\Html\Helper\Breadcrumbs`                           |
| `body`               | `Phalcon\Html\Helper\Body`                                  |
| `button`             | `Phalcon\Html\Helper\Button`                                |
| `buttonRaw`          | `Phalcon\Html\Helper\Button` (raw)                          |
| `close`              | `Phalcon\Html\Helper\Close`                                 |
| `doctype`            | `Phalcon\Html\Helper\Doctype`                               |
| `element`            | `Phalcon\Html\Helper\Element`                               |
| `elementRaw`         | `Phalcon\Html\Helper\Element` (raw)                         |
| `form`               | `Phalcon\Html\Helper\Form`                                  |
| `friendlyTitle`      | `Phalcon\Html\Helper\FriendlyTitle`                         |
| `img`                | `Phalcon\Html\Helper\Img`                                   |
| `inputCheckbox`      | `Phalcon\Html\Helper\Input\Checkbox`                        |
| `inputColor`         | `Phalcon\Html\Helper\Input\Generic` (`type=color`)          |
| `inputDate`          | `Phalcon\Html\Helper\Input\Generic` (`type=date`)           |
| `inputDateTime`      | `Phalcon\Html\Helper\Input\Generic` (`type=datetime`)       |
| `inputDateTimeLocal` | `Phalcon\Html\Helper\Input\Generic` (`type=datetime-local`) |
| `inputEmail`         | `Phalcon\Html\Helper\Input\Generic` (`type=email`)          |
| `inputFile`          | `Phalcon\Html\Helper\Input\Generic` (`type=file`)           |
| `inputHidden`        | `Phalcon\Html\Helper\Input\Generic` (`type=hidden`)         |
| `inputImage`         | `Phalcon\Html\Helper\Input\Generic` (`type=image`)          |
| `inputInput`         | `Phalcon\Html\Helper\Input\Generic` (`type=text`)           |
| `inputMonth`         | `Phalcon\Html\Helper\Input\Generic` (`type=month`)          |
| `inputNumeric`       | `Phalcon\Html\Helper\Input\Generic` (`type=number`)         |
| `inputPassword`      | `Phalcon\Html\Helper\Input\Generic` (`type=password`)       |
| `inputRadio`         | `Phalcon\Html\Helper\Input\Radio`                           |
| `inputRange`         | `Phalcon\Html\Helper\Input\Generic` (`type=range`)          |
| `inputSearch`        | `Phalcon\Html\Helper\Input\Generic` (`type=search`)         |
| `inputSelect`        | `Phalcon\Html\Helper\Input\Select`                          |
| `inputSubmit`        | `Phalcon\Html\Helper\Input\Generic` (`type=submit`)         |
| `inputTel`           | `Phalcon\Html\Helper\Input\Generic` (`type=tel`)            |
| `inputText`          | `Phalcon\Html\Helper\Input\Generic` (`type=text`)           |
| `inputTextarea`      | `Phalcon\Html\Helper\Input\Textarea`                        |
| `inputTime`          | `Phalcon\Html\Helper\Input\Generic` (`type=time`)           |
| `inputUrl`           | `Phalcon\Html\Helper\Input\Generic` (`type=url`)            |
| `inputWeek`          | `Phalcon\Html\Helper\Input\Generic` (`type=week`)           |
| `label`              | `Phalcon\Html\Helper\Label`                                 |
| `labelRaw`           | `Phalcon\Html\Helper\Label` (raw)                           |
| `link`               | `Phalcon\Html\Helper\Link`                                  |
| `meta`               | `Phalcon\Html\Helper\Meta`                                  |
| `ol`                 | `Phalcon\Html\Helper\Ol`                                    |
| `olRaw`              | `Phalcon\Html\Helper\Ol` (raw)                              |
| `preload`            | `Phalcon\Html\Helper\Preload`                               |
| `script`             | `Phalcon\Html\Helper\Script`                                |
| `style`              | `Phalcon\Html\Helper\Style`                                 |
| `tag`                | `Phalcon\Html\Helper\Tag`                                   |
| `title`              | `Phalcon\Html\Helper\Title`                                 |
| `ul`                 | `Phalcon\Html\Helper\Ul`                                    |
| `ulRaw`              | `Phalcon\Html\Helper\Ul` (raw)                              |
| `voidTag`            | `Phalcon\Html\Helper\VoidTag`                               |

:::info[NOTE]
As of v5.12.2 the per-type input helpers (`Color`, `Date`, `DateTime`, `DateTimeLocal`, `Email`, `File`, `Hidden`, `Image`, `Input`, `Month`, `Numeric`, `Password`, `Range`, `Search`, `Submit`, `Tel`, `Text`, `Time`, `Url`, `Week`) have been removed and replaced with a single `Phalcon\Html\Helper\Input\Generic` helper that takes the `type` through its constructor (or `setType()`). Code that uses the `TagFactory` factory method names (`inputColor`, `inputDate`, ...) keeps working unchanged. See [Generic input](#generic-input) below.
:::

### Registration Pipeline
Starting with v5.12.2, [Phalcon\Html\TagFactory][html-tagfactory] no longer extends `Phalcon\Factory\AbstractFactory`. The internal recipe map accepts three forms when registering or overriding helpers via `set()`:

- A class-string: `'a' => Phalcon\Html\Helper\Anchor::class`
- A closure or callable: `'a' => fn($escaper) => new Anchor($escaper)`
- A tuple `[className, [depKey, ...]]` or `[className, [depKey, ...], [extraArg, ...]]`. Dependency keys are resolved from the factory's internal services (`escaper`, `escaperAttribute`, `response`, `url`, ...) and `extraArg`s are appended verbatim.

Resolved instances are cached lazily per name in a separate `instances` map. Calling `set()` with a new recipe invalidates the previously cached instance, so the next resolution returns a fresh helper. `has()` reports against the recipe map (registered names) instead of the resolved-instance map.

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Anchor;
use Phalcon\Html\TagFactory;

$factory = new TagFactory(new Escaper());

// Class-string recipe
$factory->set('a', Anchor::class);

// Closure recipe
$factory->set('a', function ($escaper) {
return new Anchor($escaper);
});

// Tuple recipe with extra constructor args
// (this is how `inputColor` is registered: Generic with type='color')
$factory->set(
'inputColor',
[
    \Phalcon\Html\Helper\Input\Generic::class,
    ['escaper'],
    ['color'],
]
);

// Override invalidates the previously cached instance
$factory->set('a', MyAnchor::class);
```

### Raw Factory Variants
Several helpers accept a final `bool $raw = false` argument to skip escaping (useful, for example, when the inner content is itself markup such as an `<img>` inside an `<a>`). To avoid having to remember the parameter position, the factory exposes `Raw` variants that pin `raw = true` for you:

| Raw variant   | Equivalent of                                  |
|---------------|------------------------------------------------|
| `aRaw`        | `a($href, $text, $attributes, true)`           |
| `buttonRaw`   | `button($text, $attributes, true)`             |
| `elementRaw`  | `element($tag, $text, $attributes, true)`      |
| `labelRaw`    | `label($label, $attributes, true)`             |
| `olRaw`       | `ol($text, $attributes, true)`                 |
| `ulRaw`       | `ul($text, $attributes, true)`                 |

```php
<?php

use Phalcon\Di\FactoryDefault;

$container = new FactoryDefault();
$image     = $container->tag->img('https://phalcon.io/img/phalcon.png');

// Without Raw (passing true as 4th arg)
echo $container->tag->a('https://phalcon.io', $image, [], true);

// Same result with the Raw variant — no need for the trailing true
echo $container->tag->aRaw('https://phalcon.io', $image);
```

### Method call
If you do not wish to call `newInstance()`, you can always use the method call that corresponds to the name of the helper. Some helpers accept a `bool` `$raw` parameter, which defines whether the input will be escaped or not. This is useful when creating anchor links with images.

```php
public function a(
string $href, 
string $text, 
array $attributes = [], 
bool $raw = false
): string

public function base(
string $href, 
array $attributes = []
): string

public function body(
array $attributes = []
): string

public function breadcrumbs(
string $indent = '    ',
string $delimiter = "\n"
): Breadcrumbs

public function button(
string $text, 
array $attributes = [], 
bool $raw = false
): string

public function close(
string $tag, 
bool $raw = false
): string

public function doctype(
int $flag, 
string $delimiter
): Doctype

public function element(
string $tag, 
string $text, 
array $attributes = [], 
bool $raw = false
): string

public function form(
array $attributes = []
): string

public function img(
string $src, 
array $attributes = []
): string

public function inputCheckbox(
string $name, 
string $value = null, 
array $attributes = []
): Checkbox

public function inputColor(
string $name, 
string $value = null, 
array $attributes = []
): Color

public function inputDate(
string $name, 
string $value = null, 
array $attributes = []
): Date

public function inputDateTime(
string $name, 
string $value = null, 
array $attributes = []
): DateTime

public function inputDateTimeLocal(
string $name, 
string $value = null, 
array $attributes = []
): DateTimeLocal

public function inputEmail(
string $name, 
string $value = null, 
array $attributes = []
): Email

public function inputFile(
string $name, 
string $value = null, 
array $attributes = []
): File

public function inputHidden(
string $name, 
string $value = null, 
array $attributes = []
): Hidden

public function inputImage(
string $name, 
string $value = null, 
array $attributes = []
): Image

public function inputInput(
string $name, 
string $value = null, 
array $attributes = []
): Input

public function inputMonth(
string $name, 
string $value = null, 
array $attributes = []
): Month

public function inputNumeric(
string $name, 
string $value = null, 
array $attributes = []
): Numeric

public function inputPassword(
string $name, 
string $value = null, 
array $attributes = []
): Password

public function inputRadio(
string $name, 
string $value = null, 
array $attributes = []
): Radio

public function inputRange(
string $name, 
string $value = null, 
array $attributes = []
): Range

public function inputSearch(
string $name, 
string $value = null, 
array $attributes = []
): Search

public function inputSelect(
string $name, 
string $value = null, 
array $attributes = []
): Select

public function inputSubmit(
string $name, 
string $value = null, 
array $attributes = []
): Submit

public function inputTel(
string $name, 
string $value = null, 
array $attributes = []
): Tel

public function inputText(
string $name, 
string $value = null, 
array $attributes = []
): Text

public function inputTextarea(
string $name, 
string $value = null, 
array $attributes = []
): Textarea

public function inputTime(
string $name, 
string $value = null, 
array $attributes = []
): Time

public function inputUrl(
string $name, 
string $value = null, 
array $attributes = []
): Url

public function inputWeek(
string $name, 
string $value = null, 
array $attributes = []
): Week

public function label(
string $label, 
array $attributes = [], 
bool $raw = false
): string

public function link(
string $indent = '    ', 
string $delimiter = PHP_EOL
): Link

public function meta(
string $indent = '    ', 
string $delimiter = PHP_EOL
): Meta

public function ol(
string $text, 
array $attributes = [], 
bool $raw = false
): Ol

public function script(
string $indent = '    ', 
string $delimiter = PHP_EOL
): Script

public function style(
string $indent = '    ', 
string $delimiter = PHP_EOL
): Style

public function title(
string $indent = '    ', 
string $delimiter = PHP_EOL
): Title

public function ul(
string $text, 
array $attributes = [], 
bool $raw = false
): Ul

public function tag(
string $tag, 
array $attributes = []
): string

public function voidTag(
string $tag, 
array $attributes = []
): string

public function aRaw(
string $href, 
string $text, 
array $attributes = []
): string

public function buttonRaw(
string $text, 
array $attributes = []
): string

public function elementRaw(
string $tag, 
string $text, 
array $attributes = []
): string

public function labelRaw(
string $label, 
array $attributes = []
): string

public function olRaw(
string $text, 
array $attributes = []
): Ol

public function ulRaw(
string $text, 
array $attributes = []
): Ul
```

```php
<?php

use Phalcon\Di\FactoryDefault;

$container = new FactoryDefault();

$result = $container->tag->a('https://phalcon.io', 'Phalcon Website');

$image  = $container
->tag
->img('https://phalcon.io/img/phalcon.png')
;

$result = $container
->tag
->a(
    'https://phalcon.io', 
    $image,
    true
)
;
```

### Helpers
All helpers that are used by the [Phalcon\Html\TagFactory][html-tagfactory] are located under the `Phalcon\Html\Helper` namespace. You can create each of these classes individually if you wish to, or you can use the tag factory as shown above.

:::info[NOTE]
The code and output below have been formatted for readability
:::

**Boolean HTML5 attributes**

When an attribute value is set to `true`, the helper renders it as a standalone attribute name (e.g. `async`, `defer`) instead of `async="1"`. This follows the [HTML5 boolean attribute][html5-boolean] specification.

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Script;

$escaper = new Escaper();
$helper  = new Script($escaper);

echo $helper('/app.js', ['type' => 'text/javascript', 'async' => true]);
// <script type="text/javascript" async src="/app.js"></script>
```

### `a`
[Phalcon\Html\Helper\Anchor][html-helper-anchor] creates a `<a>` (anchor) tag.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $href`           | The href                          |
| `string $text`           | The text to display               |
| `array $attributes = []` | Additional attributes (key/value) |
| `bool $raw = false`      | Whether to escape or not the text |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Anchor;

$escaper = new Escaper();
$helper  = new Anchor($escaper);
$options = [
'class' => 'my-class',
'name'  => 'my-name',
'id'    => 'my-id',
];

echo $helper('/myurl', 'click<>me', $options);
// <a href="/myurl" 
//    id="my-id" 
//    name="my-name" 
//    class="my-class">
//     click&lt;&gt;me
// </a>
```

### `base`
[Phalcon\Html\Helper\Base][html-helper-base] creates a `<base>` tag.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $href`           | The href                          |
| `array $attributes = []` | Additional attributes (key/value) |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Base;

$escaper = new Escaper();
$helper  = new Base($escaper);
$options = [
'target' => '_blank',
];

echo $helper('/myurl', $options);
// <base href="/myurl" 
//    target="_blank">
```

### `breadcrumbs`
[Phalcon\Html\Helper\Breadcrumbs][html-helper-breadcrumbs] creates HTML for breadcrumbs based on the existing or passed template.

| Parameter           | Description   |
|---------------------|---------------|
| `string $indent`    | The indent    |
| `string $delimiter` | The delimiter |

A common piece of HTML that is present in many web applications is the breadcrumbs. These are links separated by a space or by the `/` character usually, that represents the tree structure of an application. The purpose is to give users another easy visual way to navigate throughout the application.

An example is an application that has an `admin` module, an `invoices` area, and a `view invoice` page. Usually, you would select the `admin` module, then from the links you will choose `invoices` (list), and then clicking on one of the invoices in the list, you can view it. To represent this tree-like structure, the breadcrumbs displayed could be:

```php
Home / Admin / Invoices / Viewing Invoice [1234]
``` 
Each of the words above (apart from the last one) are links to the respective pages. This way the user can quickly navigate back to a different area without having to click the back button or use another menu.

[Phalcon\Html\Helper\Breadcrumbs][html-helper-breadcrumbs] offers functionality to add text, URL, icon and attributes to each element. The resulting HTML when calling `render()` will have each breadcrumb formatted and enclosed in the HTML structure defined by the template. Each element will be separated from another using the default separator `<li>/</li>`.

### Methods
```php
public function __invoke(
string $indent = '    ',
string $delimiter = PHP_EOL
): static 
```

Sets the indent and delimiter and returns the object back

```php
public function add(
string $text,
string $link = '',
string $icon = '',
array $attributes = []
): static 
```
Adds a new crumb.

```php
// Adding a crumb with a link
$breadcrumbs->add("Home", "/");

// Adding a crumb with added attributes
$breadcrumbs->add("Home", "/", ["class" => "main"]);

// Adding a crumb without a link (normally the last one)
$breadcrumbs->add("Users");
```

```php
public function clear(): void
```

Clears the crumbs

```php
$breadcrumbs->clear()
```

```php
public function clearAttributes(): static
```

Clears the attributes of the parent element

```php
public function getAttributes(): array
```

Returns the attributes of the parent element

```php
public function getPrefix(): string
```

Returns the link prefix that is prepended to every non-empty link during rendering.

```php
public function getSeparator(): string
```

```php
public function getTemplate(): array
```

Returns the current template

```php
public function remove(int $index): void
```

Removes a crumb by index.

```php
$breadcrumbs->remove(2);
```

```php
public function render(): string
```

Renders and outputs breadcrumbs based on previously set template.

```php
echo $breadcrumbs->render();
```

```php
public function setAttributes(array $attributes): static
```

Sets the attributes for the parent element

```php
public function setPrefix(string $prefix): static
```

Sets a string prefix that is prepended to every non-empty link during rendering. When called, any previously injected `UrlInterface` is replaced by the static prefix string.

```php
public function setSeparator(string $separator): static
```

Sets the separator

```php
public function setTemplate(
string $main,
string $line,
string $last
): static 
```

Sets the HTML template

```php
public function toArray(): array
```

Returns the internal breadcrumbs array

### Subdirectory / Prefix Support

When a Phalcon application is installed in a subdirectory (e.g. `https://example.com/myapp/`), links added with `add()` need the subdirectory prepended so they resolve correctly.

**Using `setPrefix()`** — a static string is prepended to every non-empty link:

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\TagFactory;

$escaper    = new Escaper();
$tagFactory = new TagFactory($escaper);

$breadcrumbs = $tagFactory->breadcrumbs();
$breadcrumbs->setPrefix('/myapp');

$breadcrumbs
->add('Home', '/')
->add('Admin', '/admin')
->add('Invoices')
;

// Links rendered as /myapp/, /myapp/admin
echo $breadcrumbs->render();
```

**Using `TagFactory` with a `UrlInterface`** — when a URL service is passed to `TagFactory`, it is forwarded to `Breadcrumbs` automatically. Every link is then resolved through `$url->get()`, which handles the base URI and double-slash normalisation:

```php
<?php

use Phalcon\Di\FactoryDefault;
use Phalcon\Html\TagFactory;

$container  = new FactoryDefault();
$url        = $container->get('url');
$tagFactory = new TagFactory($container->get('escaper'), [], null, $url);

$breadcrumbs = $tagFactory->breadcrumbs();

$breadcrumbs
->add('Home', '/')
->add('Invoices', '/invoices')
->add('View')
;

echo $breadcrumbs->render();
```

### Templates

The default templates are:

*Main*

```html
<nav%attributes%>
<ol>
%items%
</ol>
</nav>
```

*Line*

```html
<li%attributes%><a href="%link%">%icon%%text%</a></li>
```

*Last Element*

```html
<li><span%attributes%>%text%</span></li>
```

A different template can be supplied to match the needs of the application. The template can be set using the `setTemplate()` method. The template is a string that can contain placeholders that will be replaced by the actual values when rendering the breadcrumbs.

The available placeholders are:

| Placeholder    | Description                          | Applies to |
|----------------|--------------------------------------|:----------:|
| `%attributes%` | The attributes of the parent element |   Parent   |
| `%items%`      | The list of items                    |   Parent   |
| `%link%`       | The link of the element              |  Element   |
| `%text%`       | The text of the element              |  Element   |
| `%icon%`       | The icon of the element              |  Element   |
| `%attributes%` | The attributes of the element        |  Element   |

### Separator
The separator is what is printed between each of the breadcrumbs. By default, the separator is `<li>/</li>`. You can change the separator by calling `setSeparator()`.

### Example

Our application needs to display breadcrumbs in the following format:

```html
Home > Admin > Invoices > Viewing Invoice [1234]
```

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\TagFactory;

$escaper = new Escaper();
$tagFactory = new TagFactory($escaper);

$separator = '
<span class="mx-5 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
<svg xmlns="http://www.w3.org/2000/svg" 
     class="w-5 h-5" 
     viewBox="0 0 20 20" 
     fill="currentColor">
    <path fill-rule="evenodd" 
          d="M7.293 14.707a1 1 0 010-1.414L10.586 
            10 7.293 6.707a1 1 0 011.414-1.414l4 
            4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" 
          clip-rule="evenodd" />
</svg>
</span>
';

$homeIcon = '
<svg xmlns="http://www.w3.org/2000/svg" 
 class="w-5 h-5" viewBox="0 0 20 20" 
 fill="currentColor">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 
        0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 
        0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 
        0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 
        0 001.414-1.414l-7-7z" />
</svg>
';

$mainTemplate = '
<div%attributes%>
%items%
</div>
';
$lineTemplate = '
<a href="%link%"%attributes%>
%icon%%text%
</a>
';
$lastTemplate = '
<a href="%link%"%attributes%>
%icon%%text%
</a>
';

$homeAttributes = [
'class' => 'text-gray-600 dark:text-gray-200',
];
$lineAttributes = [
'class' => 'text-gray-600 dark:text-gray-200 hover:underline',
];
$lastAttributes = [
'class' => 'text-blue-600 dark:text-blue-400 hover:underline',
];

$breadcrumbs
->setTemplate($mainTemplate, $lineTemplate, $lastTemplate)
->setSeparator($separator)
->add('', '#', $homeIcon, $homeAttributes)
->add('Admin', '#', '', $lineAttributes)
->add('Invoices', '#', '', $lineAttributes)
->add('Viewing Invoice [1234]', '#', '', $lastAttributes)
;

echo $breadcrumbs->render();    
```

Output HTML:
```html
<div class="flex items-center py-4 overflow-x-auto whitespace-nowrap">
<a href="#" class="text-gray-600 dark:text-gray-200">
    <svg xmlns="http://www.w3.org/2000/svg" 
         class="w-5 h-5" 
         viewBox="0 0 20 20" 
         fill="currentColor">
        <path d="M10.707 2.293a1 1 
            0 00-1.414 0l-7 7a1 1 
            0 001.414 1.414L4 10.414V17a1 1 
            0 001 1h2a1 1 0 001-1v-2a1 1 
            0 011-1h2a1 1 0 011 1v2a1 1 
            0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 
            0 001.414-1.414l-7-7z" />
    </svg>
</a>

<span class="mx-5 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
    <svg xmlns="http://www.w3.org/2000/svg" 
         class="w-5 h-5" 
         viewBox="0 0 20 20" 
         fill="currentColor">
        <path fill-rule="evenodd" 
              d="M7.293 14.707a1 1 
                0 010-1.414L10.586 10 7.293 6.707a1 1 
                0 011.414-1.414l4 4a1 1 
                0 010 1.414l-4 4a1 1 
                0 01-1.414 0z" 
              clip-rule="evenodd" />
    </svg>
</span>

<a href="#" class="text-gray-600 dark:text-gray-200 hover:underline">
    Admin
</a>

<span class="mx-5 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
    <svg xmlns="http://www.w3.org/2000/svg" 
         class="w-5 h-5" 
         viewBox="0 0 20 20" 
         fill="currentColor">
        <path fill-rule="evenodd" 
              d="M7.293 14.707a1 1 
                0 010-1.414L10.586 10 7.293 6.707a1 1 
                0 011.414-1.414l4 4a1 1 
                0 010 1.414l-4 4a1 1 
                0 01-1.414 0z" 
              clip-rule="evenodd" />
    </svg>
</span>

<a href="#" class="text-gray-600 dark:text-gray-200 hover:underline">
    Invoices
</a>

<span class="mx-5 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
    <svg xmlns="http://www.w3.org/2000/svg" 
         class="w-5 h-5" 
         viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" 
              d="M7.293 14.707a1 1 
                0 010-1.414L10.586 10 7.293 6.707a1 1 
                0 011.414-1.414l4 4a1 1 
                0 010 1.414l-4 4a1 1 
                0 01-1.414 0z" 
              clip-rule="evenodd" />
    </svg>
</span>

<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">
    Viewing Invoice [1234]
</a>
</div>
```

### `body`
[Phalcon\Html\Helper\Body][html-helper-body] creates a `<body>` tag.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `array $attributes = []` | Additional attributes (key/value) |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Body;

$escaper = new Escaper();
$helper  = new Body($escaper);
$options = [
'class' => 'my-class',
'id'    => 'my-id',
];

echo $helper($options);
// <body id="my-id" class="my-class">
```

:::info[NOTE]
This helper creates only the opening `<body>` tag. You will need to use the `Close` helper to generate the closing `</body>` tag.
:::

### `button`
[Phalcon\Html\Helper\Button][html-helper-button] creates a `<button>` tag.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $text`           | The text to display               |
| `array $attributes = []` | Additional attributes (key/value) |
| `bool $raw = false`      | Whether to escape or not the text |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Button;

$escaper = new Escaper();
$helper  = new Button($escaper);
$options = [
'class' => 'my-class',
'name'  => 'my-name',
'id'    => 'my-id',
];

echo $helper('click<>me', $options);
// <button 
//    id="my-id" 
//    name="my-name" 
//    class="my-class">
//     click&lt;&gt;me
// </button>
```

### `close`
[Phalcon\Html\Helper\Close][html-helper-close] creates a closing tag.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $text`           | The text to display               |
| `bool $raw = false`      | Whether to escape or not the text |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Close;

$escaper = new Escaper();
$helper  = new Close($escaper);

echo $helper('form');
// </form>
```

### `doctype`
[Phalcon\Html\Helper\Doctype][html-helper-doctype] creates a `<doctype>` tag.

| Parameter           | Description                       |
|---------------------|-----------------------------------|
| `int $flag`         | The text to display               |
| `string $delimiter` | Whether to escape or not the text |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Doctype;

$escaper = new Escaper();
$helper  = new Doctype($escaper);

echo $helper(Doctype::XHTML11, '-:-');
// <!DOCTYPE html
//     PUBLIC "-//W3C//DTD XHTML 1.1//EN"-:-
//     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">-:-
```

### `element`
[Phalcon\Html\Helper\Element][html-helper-element] creates a tag based on the passed `name`.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $tag`            | The href                          |
| `string $text`           | The text to display               |
| `array $attributes = []` | Additional attributes (key/value) |
| `bool $raw = false`      | Whether to escape or not the text |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Element;

$escaper = new Escaper();
$helper  = new Element($escaper);
$options = [
'class' => 'my-class',
'name'  => 'my-name',
'id'    => 'my-id',
];

echo $helper('address', 'click<>me', $options);
// <address 
//    id="my-id" 
//    name="my-name" 
//    class="my-class">
//     click&lt;&gt;me
// </address>
```

### `form`
[Phalcon\Html\Helper\Form][html-helper-form] creates a `<form>` tag.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `array $attributes = []` | Additional attributes (key/value) |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Form;

$escaper = new Escaper();
$helper  = new Form($escaper);
$options = [
'class'   => 'my-class',
'name'    => 'my-name',
'id'      => 'my-id',
'method'  => 'post',
'enctype' => 'multipart/form-data'
];

echo $helper($options);
// <form 
//    id="my-id" 
//    name="my-name" 
//    class="my-class"
//    method="post"
//    enctype="multipart/form-data">
```

:::info[NOTE]
This helper creates only the opening `<form>` tag. You will need to use the `Close` helper to generate the closing `</form>` tag.
:::

### `friendlyTitle`
[Phalcon\Html\Helper\FriendlyTitle][html-helper-friendlytitle] converts text to a URL-friendly slug.

| Parameter                        | Description                                |
|----------------------------------|--------------------------------------------|
| `string $text`                   | The text to convert                        |
| `string $separator = '-'`        | The separator character                    |
| `bool $lowercase = true`         | Convert the result to lowercase            |
| `array\|string $replace = []`    | Characters/strings to replace with a space |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\FriendlyTitle;

$escaper = new Escaper();
$helper  = new FriendlyTitle($escaper);

echo $helper('Hello World');
// hello-world

echo $helper('Hello World', '_');
// hello_world

echo $helper('Hello World', '-', false);
// Hello-World

echo $helper('Hello & World');
// hello-and-world

echo $helper('Héllo Wörld');
// hello-world

echo $helper('Hello/World', '-', true, ['/']);
// hello-world
```

### `img`
[Phalcon\Html\Helper\Img][html-helper-img] creates a `<img>` tag.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $src`            | The image source                  |
| `array $attributes = []` | Additional attributes (key/value) |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Img;

$escaper = new Escaper();
$helper  = new Img($escaper);
$options = [
'class' => 'my-class',
'name'  => 'my-name',
'id'    => 'my-id',
];

echo $helper('/my-url', $options);
// <img 
//    src="/my-url" 
//    id="my-id" 
//    name="my-name" 
//    class="my-class">
```

### `inputCheckbox`
[Phalcon\Html\Helper\Checkbox][html-helper-input-checkbox] creates a `<input type="checkbox">` tag.

`Checkbox` and `Radio` both extend the shared [Phalcon\Html\Helper\Input\AbstractChecked][html-helper-input-abstractchecked] base. The `checked` attribute matches the `value` using a loose comparison (`==`) by default, so mixed `int`/`string` form input still round-trips correctly. Call `strict(true)` to opt back into strict (`===`) matching.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $name`           | The name                          |
| `string $value`          | The value                         |
| `array $attributes = []` | Additional attributes (key/value) |

**Methods**

```php
public function label(array $attributes)
```
Sets the label for the checkbox

```php
public function strict(bool $flag = true): Checkbox
```
Switches between strict (`===`) and loose (`==`) comparison of `value` against the `checked` attribute. Loose is the default.

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Input\Checkbox;

$escaper = new Escaper();
$helper  = new Checkbox($escaper);
$options = [
'id'        => 'my-id',
'unchecked' => 'no',
'checked'   => 'yes',
];

$result = $helper('my-name', 'yes', $options);

echo $result;
// <hidden name="my_name" value="no">
// <label for="my_id">
//     <input type="checkbox"
//         id="my_id"
//         name="x_name"
//         value="yes"
//         checked="checked" />
//     some text
// </label>
```

### Generic input
[Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] backs every type-only `<input>` (color, date, email, file, etc.). Pass the HTML5 `type` either as the second constructor argument, or after construction via `setType()`.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $name`           | The name                          |
| `string $value`          | The value                         |
| `array $attributes = []` | Additional attributes (key/value) |

**Methods**

```php
public function setType(string $type): Generic
```
Changes the rendered `type=` attribute.

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Input\Generic;

$escaper = new Escaper();
$helper  = new Generic($escaper, 'color');
$options = [
'class' => 'my-class',
'name'  => 'my-name',
'id'    => 'my-id',
];

echo $helper('test-name', 'test-value', $options);
// <input type="color"
//    value="test-value"
//    id="my-id"
//    name="my-name"
//    class="my-class">

// Switch the rendered type at runtime
$helper->setType('email');
echo $helper('email-name', 'me@phalcon.io');
// <input type="email" value="me@phalcon.io" name="email-name">
```

When called via the factory, the `type` is baked into the recipe so you do not need to pass it yourself:

```php
<?php

use Phalcon\Di\FactoryDefault;

$container = new FactoryDefault();

echo $container->tag->inputColor('test-name', 'test-value');
// <input type="color" value="test-value" name="test-name">

echo $container->tag->inputDate('start', '2026-01-01');
// <input type="date" value="2026-01-01" name="start">
```

### `inputColor`
The `inputColor` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=color` baked in. See [Generic input](#generic-input).

```php
<?php

use Phalcon\Di\FactoryDefault;

$container = new FactoryDefault();
$options   = [
'class' => 'my-class',
'name'  => 'my-name',
'id'    => 'my-id',
];

echo $container->tag->inputColor('test-name', 'test-value', $options);
// <input type="color"
//    value="test-value"
//    id="my-id"
//    name="my-name"
//    class="my-class">
```

### `inputDate`
The `inputDate` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=date` baked in. See [Generic input](#generic-input).

### `inputDatetime`
The `inputDateTime` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=datetime` baked in. See [Generic input](#generic-input).

### `inputDatetimeLocal`
The `inputDateTimeLocal` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=datetime-local` baked in. See [Generic input](#generic-input).

### `inputEmail`
The `inputEmail` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=email` baked in. See [Generic input](#generic-input).

### `inputFile`
The `inputFile` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=file` baked in. See [Generic input](#generic-input).

### `inputHidden`
The `inputHidden` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=hidden` baked in. See [Generic input](#generic-input).

### `inputImage`
The `inputImage` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=image` baked in. See [Generic input](#generic-input).

### `inputMonth`
The `inputMonth` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=month` baked in. See [Generic input](#generic-input).

### `input`
The `inputInput` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with the default `type=text`. Call `setType()` on the returned helper to render any other HTML5 type. See [Generic input](#generic-input).

### `inputNumeric`
The `inputNumeric` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=number` baked in. See [Generic input](#generic-input).

### `inputPassword`
The `inputPassword` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=password` baked in. See [Generic input](#generic-input).

### `inputRadio`
[Phalcon\Html\Helper\Radio][html-helper-input-radio] creates a `<input type="radio">` tag. As of v5.12.2, `Radio` no longer extends `Checkbox`; both share the new [Phalcon\Html\Helper\Input\AbstractChecked][html-helper-input-abstractchecked] base. The `checked` attribute matches `value` loosely (`==`) by default — call `strict(true)` to opt into strict (`===`) matching.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $name`           | The name                          |
| `string $value`          | The value                         |
| `array $attributes = []` | Additional attributes (key/value) |

**Methods**

```php
public function label(array $attributes)
```
Sets the label for the radio

```php
public function strict(bool $flag = true): Radio
```
Switches between strict (`===`) and loose (`==`) comparison of `value` against the `checked` attribute. Loose is the default.

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Input\Radio;

$escaper = new Escaper();
$helper  = new Radio($escaper);
$options = [
'id'        => 'my-id',
'unchecked' => 'no',
'checked'   => 'yes',
];

$result = $helper('my-name', 'yes', $options);

echo $result;
// <hidden name="my_name" value="no">
// <label for="my_id">
//     <input type="radio"
//         id="my_id"
//         name="x_name"
//         value="yes"
//         checked="checked" />
//     some text
// </label>
```

### `inputRange`
The `inputRange` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=range` baked in. See [Generic input](#generic-input).

### `inputSearch`
The `inputSearch` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=search` baked in. See [Generic input](#generic-input).

### `inputSelect`
[Phalcon\Html\Helper\Select][html-helper-input-select] creates a `<select>` tag.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $name`           | The name                          |
| `string $value`          | The value                         |
| `array $attributes = []` | Additional attributes (key/value) |

**Methods**

```php
public function add(
string $text,
string $value = null,
array $attributes = [],
bool $raw = false
): Select
```
Add an element to the list

```php
public function addPlaceholder(
string $text,
mixed $value = null,
array $attributes = [],
bool $raw = false
): Select
```
Add a placeholder to the element

```php
public function optGroup(
string $label = null,
array $attributes = []
): Select
```
Create an option group

```php
public function fromData(SelectDataInterface $data): Select
```
Populates the select options from a `SelectDataInterface` provider. Flat entries use `value => label` format; nested arrays produce `<optgroup>` sections.

```php
public function placeholder(string $text): Select
```
Injects `<option value="" disabled selected>$text</option>` as the first entry. Useful as a non-selectable hint in the dropdown.

```php
public function selected(string $selected): Select
```
Set the selected option

```php
public function strict(bool $flag = true): Select
```
Switches between strict (`===`) and loose (`==`) comparison of an option's `value` against the `selected` value. Loose is the default in v5.12.2 so mixed `int`/`string` form input round-trips correctly.

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Input\Select;

$escaper = new Escaper();
$helper  = new Select($escaper);

$options = [
'id' => 'carsList',
];

$result = $helper('    ', PHP_EOL, $options);
$result
->add("Ferrari", "1", ["class" => "active"])
->add("Ford", "2")
->add("Dodge", "3")
->add("Toyota", "4")
->optGroup(
    'oneLabel',
    [
        'class' => 'form-input',
    ]
)
->addPlaceholder(
    'Choose & Car...',
    "0",
    [],
    true,
)
->selected("3")
;

echo $result;
//
//    <select id="carsList">
//        <optgroup class="form-input" label="oneLabel">
//            <option value="0">Choose & Car...</option>
//            <option value="1" class="active">Ferrari</option>
//            <option value="2">Ford</option>
//            <option value="3" selected="selected">Dodge</option>
//            <option value="4">Toyota</option>
//        </optgroup>
//    </select>"
```

**Data providers**

`fromData()` accepts any class implementing `Phalcon\Html\Helper\Input\Select\SelectDataInterface`. Two built-in providers are available.

`Phalcon\Html\Helper\Input\Select\ArrayData` wraps a plain PHP array. Flat entries (`value => label`) produce plain options; nested arrays (`groupLabel => [value => label, ...]`) produce `<optgroup>` sections.

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Input\Select;
use Phalcon\Html\Helper\Input\Select\ArrayData;

$escaper = new Escaper();
$helper  = new Select($escaper);
$result  = $helper('    ', PHP_EOL);

// Flat list
$data = new ArrayData([
'1' => 'Ferrari',
'2' => 'Ford',
'3' => 'Dodge',
]);

$result->fromData($data)->selected('2');

echo $result;

// With optgroups
$grouped = new ArrayData([
'European' => ['1' => 'Ferrari', '5' => 'BMW'],
'American' => ['2' => 'Ford',    '3' => 'Dodge'],
]);

$result = $helper('    ', PHP_EOL);
$result->fromData(new ArrayData($grouped->getOptions()));
echo $result;
```

You can implement `SelectDataInterface` yourself to pull options from any data source (database resultset, configuration, etc.):

```php
<?php

use Phalcon\Html\Helper\Input\Select\SelectDataInterface;

class StatusData implements SelectDataInterface
{
public function getOptions(): array
{
    return [
        'active'   => 'Active',
        'inactive' => 'Inactive',
        'pending'  => 'Pending',
    ];
}
}
```

### `inputSubmit`
The `inputSubmit` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=submit` baked in. See [Generic input](#generic-input).

### `inputTel`
The `inputTel` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=tel` baked in. See [Generic input](#generic-input).

### `inputText`
The `inputText` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=text` baked in. See [Generic input](#generic-input).

### `inputTextarea`
[Phalcon\Html\Helper\TextArea][html-helper-input-textarea] creates a `<textarea>` tags

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $name`           | The name                          |
| `string $value`          | The value                         |
| `array $attributes = []` | Additional attributes (key/value) |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Input\TextArea;

$escaper = new Escaper();
$helper  = new TextArea($escaper);
$options = [
'class' => 'my-class',
'name'  => 'my-name',
'id'    => 'my-id',
];

echo $helper('click<>me', $options);
// <textarea 
//    id="my-id" 
//    name="my-name" 
//    class="my-class">
//     click&lt;&gt;me
// </textarea>
```

### `inputTime`
The `inputTime` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=time` baked in. See [Generic input](#generic-input).

### `inputUrl`
The `inputUrl` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=url` baked in. See [Generic input](#generic-input).

### `inputWeek`
The `inputWeek` factory name resolves to [Phalcon\Html\Helper\Input\Generic][html-helper-input-generic] with `type=week` baked in. See [Generic input](#generic-input).

### `label`
[Phalcon\Html\Helper\Label][html-helper-label] creates a `<label>` tag.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $label`          | The label                         |
| `array $attributes = []` | Additional attributes (key/value) |
| `bool $raw = false`      | Whether to escape or not the text |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Label;

$escaper = new Escaper();
$helper  = new Label($escaper);
$options = [
'class' => 'my-class',
'name'  => 'my-name',
'id'    => 'my-id',
];

echo $helper($options);
// <label 
//    id="my-id" 
//    name="my-name" 
//    class="my-class">
```

:::info[NOTE]
This helper creates only the opening `<label>` tag. You will need to use the `Close` helper to generate the closing `</label>` tag.
:::

### `link`
[Phalcon\Html\Helper\Link][html-helper-link] creates a `<link>` tag.

| Parameter           | Description   |
|---------------------|---------------|
| `string $indent`    | The indent    |
| `string $delimiter` | The delimiter |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Link;

$escaper = new Escaper();
$helper  = new Link($escaper);

$result = $helper();
$result
->add('https://phalcon.io/page/1', ['rel' => 'prev'])
->add('https://phalcon.io/page/2', ['rel' => 'next'])
;

echo $result;
// <link rel="prev" href="https://phalcon.io/page/1" />
// <link rel="next" href="https://phalcon.io/page/2" />
```

### `meta`
[Phalcon\Html\Helper\Meta][html-helper-meta] creates a `<meta>` tag.

| Parameter           | Description   |
|---------------------|---------------|
| `string $indent`    | The indent    |
| `string $delimiter` | The delimiter |

**Methods**
```php
public function add(array $attributes = []): Meta
```
Add an element to the list

```php
public function addHttp(string $httpEquiv, string $content): Meta
```
Adds an HTTP meta tag

```php
public function addName(string name, string content) -> <Meta>
```
Adds a name meta tag

```php
public function addProperty(string name, string content) -> <Meta>
```
Adds a property meta tag

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Meta;

$escaper = new Escaper();
$helper  = new Meta($escaper);

$result = $helper();

$result
->add(
    [
        "charset" => 'utf-8',
    ]
)
->addHttp("X-UA-Compatible", "IE=edge")
->addName("generator", "Phalcon")
->addProperty("org:url", "https://phalcon.io")
;

echo $result;
//    <meta charset="utf-8">
//    <meta http-equiv="X-UA-Compatible" content="IE=edge">
//    <meta name="generator" content="Phalcon">
//    <meta property="org:url" content="https://phalcon.io">
```

### `ol`
[Phalcon\Html\Helper\Ol][html-helper-ol] creates a `<ol>` tag.

| Parameter           | Description   |
|---------------------|---------------|
| `string $indent`    | The indent    |
| `string $delimiter` | The delimiter |

**Methods**

```php
public function add(
string $text,
array $attributes = [],
bool $raw = false
): Ol
```
Add an element to the list

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Ol;

$escaper = new Escaper();
$helper  = new Ol($escaper);
$options = [
'id' => 'carsList',
]

$result = $helper('    ', PHP_EOL, $options);

$result
->add("Ferrari", "1", ["class" => "active"])
->add("Ford", "2")
->add("Dodge", "3")
->add("Toyota", "4")
;

echo $result;
// <ol id="carsList">
//     <li class="active">Ferrari</li>
//     <li>> Ford</li>
//     <li>> Dodge</li>
//     <li>> Toyota</li>
// </ol>
```

### `preload`
[Phalcon\Html\Helper\Preload][html-helper-preload] creates a `<link rel="preload">` tag for resource hinting. If a `ResponseInterface` is injected into `TagFactory`, it also sets the HTTP `Link:` header.

| Parameter                | Description                                                          |
|--------------------------|----------------------------------------------------------------------|
| `string $href`           | The resource URL                                                     |
| `string $type = 'style'` | The `as` attribute value (`style`, `script`, `font`, `image`, etc.) |
| `array $attributes = []` | Additional attributes (key/value)                                    |

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Preload;

$escaper = new Escaper();
$helper  = new Preload($escaper);

echo $helper('/my-style.css');
// <link rel="preload" href="/my-style.css" as="style" />

echo $helper('/my-script.js', 'script');
// <link rel="preload" href="/my-script.js" as="script" />

echo $helper('/my-font.woff2', 'font', ['crossorigin' => 'anonymous']);
// <link rel="preload" href="/my-font.woff2" as="font" crossorigin="anonymous" />
```

To also set the HTTP `Link:` response header (for HTTP/2 server push), pass a `ResponseInterface` as the third argument to `TagFactory`:

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\TagFactory;

$escaper  = new Escaper();
$response = $container->get('response');
$factory  = new TagFactory($escaper, [], $response);

echo $factory->preload('/my-font.woff2', 'font');
// <link rel="preload" href="/my-font.woff2" as="font" />
// Also sets header: Link: </my-font.woff2>; rel="preload"; as="font"
```

### `script`
[Phalcon\Html\Helper\Script][html-helper-script] creates a `<script>` tag.

| Parameter           | Description   |
|---------------------|---------------|
| `string $indent`    | The indent    |
| `string $delimiter` | The delimiter |

**Methods**

```php
public function add(
string $url,
array $attributes = [],
int $pos = -1
): Script
```
Add a URL to the list. The optional `$pos` argument controls the slot in the internal store: a negative value (the default) pushes onto the next auto-increment slot; a non-negative value places the entry at that key, advancing past occupied slots if necessary. Entries are emitted in numerical key order regardless of registration order.

```php
public function beginInternal(): void
```
Starts an output buffer to capture inline JavaScript.

```php
public function endInternal(
array $attributes = [],
int $pos = -1
): Script
```
Stops the buffer started by `beginInternal()`, wraps the captured contents in a `<script>` block (with the supplied attributes), and appends it to the asset stack at the optional `$pos`.

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Script;

$escaper = new Escaper();
$helper  = new Script($escaper);

$result = $helper();

$result
->add('/js/custom.js')
->add('/js/print.js', ['ie' => 'active'])
;

echo $result;
//    <script type="application/javascript" 
//            src="/js/custom.js"></script>
//    <script type="application/javascript" 
//            src="/js/print.js" ie="active"></script>
```

**Positional inserts**

`add()` accepts a third argument that controls where the entry lands in the internal store. Because `__toString()` `ksort()`s the store before rendering, you can interleave entries deterministically:

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Script;

$helper = new Script(new Escaper());
$result = $helper();

$result
->add('/js/a.js')                          // slot 0
->add('/js/c.js', [], 5)                   // slot 5
->add('/js/b.js')                          // slot 1 (next auto-increment)
;

echo $result;
//    <script type="application/javascript" src="/js/a.js"></script>
//    <script type="application/javascript" src="/js/b.js"></script>
//    <script type="application/javascript" src="/js/c.js"></script>
```

**Inline scripts via output buffering**

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Script;

$helper = new Script(new Escaper());
$result = $helper();

$result->beginInternal();
?>
console.log('hello from phalcon');
<?php
$result->endInternal(['type' => 'application/javascript']);

echo $result;
// <script type="application/javascript">
// console.log('hello from phalcon');
// </script>
```

### `style`
[Phalcon\Html\Helper\Style][html-helper-style] creates a `<link>` tag.

| Parameter           | Description   |
|---------------------|---------------|
| `string $indent`    | The indent    |
| `string $delimiter` | The delimiter |

**Methods**

```php
public function add(
string $url,
array $attributes = [],
int $pos = -1
): Style
```
Add a URL to the list. The optional `$pos` argument controls placement in the internal store the same way it does for `Script::add()`: negative pushes onto the next auto-increment slot; a non-negative value places the entry at that key, advancing past occupied slots. Output is `ksort()`ed by key before rendering.

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Style;

$escaper = new Escaper();
$helper  = new Style($escaper);

$result = $helper();

$result
->add('custom.css')
->add('print.css', ['media' => 'print'])
;

echo $result;
//    <link rel="stylesheet" type="text/css"
//        href="custom.css" media="screen" />
//    <link rel="stylesheet" type="text/css"
//        href="print.css" media="print" />
```

**Positional inserts**

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Style;

$helper = new Style(new Escaper());
$result = $helper();

$result
->add('reset.css')                       // slot 0
->add('theme.css', [], 10)               // slot 10
->add('layout.css')                      // slot 1
;

echo $result;
//    <link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
//    <link rel="stylesheet" type="text/css" href="layout.css" media="screen" />
//    <link rel="stylesheet" type="text/css" href="theme.css" media="screen" />
```

### `tag`
[Phalcon\Html\Helper\Tag][html-helper-tag] is an escape hatch for opening any arbitrary tag without a dedicated helper. It renders only the opening `<name ...>` tag — pair it with the [`close`](#close) helper for the closing tag.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $tag`            | The tag name                      |
| `array $attributes = []` | Additional attributes (key/value) |

```php
<?php

use Phalcon\Di\FactoryDefault;

$container = new FactoryDefault();

echo $container->tag->tag('section', ['class' => 'hero', 'id' => 'top']);
// <section id="top" class="hero">

echo $container->tag->close('section');
// </section>
```

### `voidTag`
[Phalcon\Html\Helper\VoidTag][html-helper-voidtag] is an escape hatch for self-closing (void) tags such as `<hr>` or any custom element that does not need a closing tag.

| Parameter                | Description                       |
|--------------------------|-----------------------------------|
| `string $tag`            | The tag name                      |
| `array $attributes = []` | Additional attributes (key/value) |

```php
<?php

use Phalcon\Di\FactoryDefault;

$container = new FactoryDefault();

echo $container->tag->voidTag('hr', ['class' => 'divider']);
// <hr class="divider" />

echo $container->tag->voidTag('my-custom-element', ['data-id' => '42']);
// <my-custom-element data-id="42" />
```

### `title`
[Phalcon\Html\Helper\Title][html-helper-title] creates a `<title>` tag.

| Parameter           | Description   |
|---------------------|---------------|
| `string $indent`    | The indent    |
| `string $delimiter` | The delimiter |

**Methods**

```php
public function append(
string $text, 
bool $raw = false
): Title
```
Appends text to the current document title

```php
public function get(): string
```
Returns the title

```php
public function set(
string $text, 
bool $raw = false
)): Title
```
Sets the title

```php
public function setSeparator(
string $separator, 
bool $raw = false
)): Title
```
Sets the separator

```php
public function prepend(
string $text, 
bool $raw = false
): Title
```
Prepends text to the current document title

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Ul;

$escaper = new Escaper();
$helper  = new Ul($escaper);
$options = [
'id' => 'carsList',
]

$result = $helper();

$result
->setSeparator(' | ')
->set('<Dodge>')
->append('< Ferrari', true)
->prepend('Ford <')
;

echo $result->get();
// &lt; Dodge &gt;

echo $result;
// <title>Ford > | &lt; Dodge &gt; | < Ferrari</title>
```

### `ul`
[Phalcon\Html\Helper\Ul][html-helper-ol] creates a `<ul>` tag.

| Parameter           | Description   |
|---------------------|---------------|
| `string $indent`    | The indent    |
| `string $delimiter` | The delimiter |

**Methods**

```php
public function add(
string $text,
array $attributes = [],
bool $raw = false
): Ol
```
Add an element to the list

```php
<?php

use Phalcon\Html\Escaper;
use Phalcon\Html\Helper\Ul;

$escaper = new Escaper();
$helper  = new Ul($escaper);
$options = [
'id' => 'carsList',
]

$result = $helper('    ', PHP_EOL, $options);

$result
->add("Ferrari", "1", ["class" => "active"])
->add("Ford", "2")
->add("Dodge", "3")
->add("Toyota", "4")
;

echo $result;
// <ul id="carsList">
//     <li class="active">Ferrari</li>
//     <li>> Ford</li>
//     <li>> Dodge</li>
//     <li>> Toyota</li>
// </ul>
```

[di-factorydefault]: /5.12/api/phalcon_di/#difactorydefault
[html-attributes]: /5.12/api/phalcon_html/#htmlattributes
[html-attributes-attributesinterface]: /5.12/api/phalcon_html/#htmlattributesattributesinterface
[html-attributes-renderinterface]: /5.12/api/phalcon_html/#htmlattributesrenderinterface
[html-breadcrumbs]: /5.12/api/phalcon_html/#htmlbreadcrumbs
[html-exception]: /5.12/api/phalcon_html/#htmlexception
[html-helper-abstracthelper]: /5.12/api/phalcon_html/#htmlhelperabstracthelper
[html-helper-abstractlist]: /5.12/api/phalcon_html/#htmlhelperabstractlist
[html-helper-abstractseries]: /5.12/api/phalcon_html/#htmlhelperabstractseries
[html-helper-anchor]: /5.12/api/phalcon_html/#htmlhelperanchor
[html-helper-base]: /5.12/api/phalcon_html/#htmlhelperbase
[html-helper-breadcrumbs]: /5.12/api/phalcon_html/#htmlhelperbreadcrumbs
[html-helper-body]: /5.12/api/phalcon_html/#htmlhelperbody
[html-helper-button]: /5.12/api/phalcon_html/#htmlhelperbutton
[html-helper-close]: /5.12/api/phalcon_html/#htmlhelperclose
[html-helper-doctype]: /5.12/api/phalcon_html/#htmlhelperdoctype
[html-helper-element]: /5.12/api/phalcon_html/#htmlhelperelement
[html-helper-form]: /5.12/api/phalcon_html/#htmlhelperform
[html-helper-friendlytitle]: /5.12/api/phalcon_html/#htmlhelperfriendlytitle
[html-helper-img]: /5.12/api/phalcon_html/#htmlhelperimg
[html-helper-input-abstractchecked]: /5.12/api/phalcon_html/#htmlhelperinputabstractchecked
[html-helper-input-abstractinput]: /5.12/api/phalcon_html/#htmlhelperinputabstractinput
[html-helper-input-checkbox]: /5.12/api/phalcon_html/#htmlhelperinputcheckbox
[html-helper-input-generic]: /5.12/api/phalcon_html/#htmlhelperinputgeneric
[html-helper-input-radio]: /5.12/api/phalcon_html/#htmlhelperinputradio
[html-helper-input-select]: /5.12/api/phalcon_html/#htmlhelperinputselect
[html-helper-input-textarea]: /5.12/api/phalcon_html/#htmlhelperinputtextarea
[html-helper-label]: /5.12/api/phalcon_html/#htmlhelperlabel
[html-helper-link]: /5.12/api/phalcon_html/#htmlhelperlink
[html-helper-meta]: /5.12/api/phalcon_html/#htmlhelpermeta
[html-helper-ol]: /5.12/api/phalcon_html/#htmlhelperol
[html-helper-preload]: /5.12/api/phalcon_html/#htmlhelperpreload
[html-helper-script]: /5.12/api/phalcon_html/#htmlhelperscript
[html-helper-style]: /5.12/api/phalcon_html/#htmlhelperstyle
[html-helper-tag]: /5.12/api/phalcon_html/#htmlhelpertag
[html-helper-title]: /5.12/api/phalcon_html/#htmlhelpertitle
[html-helper-ul]: /5.12/api/phalcon_html/#htmlhelperul
[html-helper-voidtag]: /5.12/api/phalcon_html/#htmlhelpervoidtag
[html-tagfactory]: /5.12/api/phalcon_html/#htmltagfactory
[html5-boolean]: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes

Source: https://docs.phalcon.io/5.12/html-tagfactory/index.mdx