# Fields - HTML Support

You need to add an "\*" in front of your field name The final syntax should be: **{\*fieldName}**

```
{description} - Regular Field that supports only text and newline character
{*description} - Special field that supports HTML as input
```

#### Supported HTML Tags

There is a limited number of HTML tags that you can use for HTML to Document conversion here is the list:

```
<a>
<b>
<blockquote>
<br>
<code>
<del>
<div> is treated as paragraph
<em>
<h1-h6> tags, they translate to paragraphs with different font-size
<hr>
<i>
<img>
<ins>
<p>
<pre>
<s>
<span>
<strike>
<strong>
<sub> and <sup>
<table>, <tr>, <td>, <tbody>, <thead>, <tfoot>, <colgroup>, <col>, <th> tags
<ul>, <ol> and <li> for ordered (bullet list) and unordered lists
```

#### Inline styles

**Experimental:** Documentero can also parse styling properties. Keep in mind that specific styles work only on specific elements, and if a value is unrecognized or cannot be converted into the document format, the styling will be omitted.

```
'background'
'background-color'
'border'
'border-bottom'
'border-collapse'
'border-color'
'border-left'
'border-right'
'border-style'
'border-top'
'border-width'
'color'
'column-span'
'display'
'font'
'font-size'
'font-weight'
'height' - img only
'line-height'
'margin'
'margin-left'
'margin-right'
'margin-top'
'margin-bottom'
'max-width' - img only
'min-width' - img only
'page-break-after'
'text-align'
'text-decoration'
'vertical-align'
'width' - img only
```

#### **Links**

If you pass link elements they will be added as clickable hyperlinks to your document. We support also linked images

```
<a href="https://documentero.com">Linktext</a> - Hyperlink with Text

<a href="https://documentero.com">
<img src="https://documentero.com/custom/DocumenteroNormal.png">
</a> - Clickable image
```

#### **Page Breaks**

Pass div element with class 'page-break' or style property 'page-break-after'

```
<p class="break-break"></p> - Creates page-break in output document
```

#### **Mermaid Diagrams**

You can pass mermaid charts, and diagrams using the syntax below. . Read more about mermaid syntax: <https://mermaid.js.org/intro/>

```
<pre class="mermaid">
  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
</pre>
```

#### Hints

* Font settings for text in HTML content will be inherited from your template's Regular Text Styling Settings. You can change them in your document template styling unless they are explicitly defined with styling properties.
* Unknown tags in HTML will be omitted in the output document.
* HTML tags cannot be used inline with other text or bindings. Use them in a separate paragraph:

```
Some text {*description} rest of text ====> INCORRECT

{#section}  {*description} {/section} ====> INCORRECT

Some text:
{*description} 
rest of text ====> CORRECT

{#section}
{*description}
{/section} ====> CORRECT
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.documentero.com/documentation/templates/fields-html-support.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.