> For the complete documentation index, see [llms.txt](https://dev.ubidots.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev.ubidots.com/dashboards-and-widgets/html-canvas/code-editor/html-tab.md).

# HTML tab

<figure><img src="/files/Jm87p4rJAaqdfCxHGlij" alt=""><figcaption></figcaption></figure>

HTML (Hypertext Markup Language) is the standard markup language used to structure web pages. By using HTML elements, you tell the browser where and how to display content.

### Examples

* `<title> Page Title </title>`: This element tells the browser to display the "Page Title" text as the title of the web page.
* `<h1> This is a h1 header </h1>`: This element tells the browser to display the "This is a h1 header" message as an H1 header wherever it is placed in the HTML file.
* `<p> My first paragraph </p>`: This element tells the browser to display the "My first paragraph" message as a paragraph wherever it is placed in the HTML file.

### Typical HTML structure

Every HTML file requires the following structure:

```html
<html>
<head>
</head>
<body>
</body>
</html>
```

### HTML structure on the HTML Canvas widget

When you use HTML elements on the HTML Canvas widget, the following tags are optional:

* `<html></html>`
* `<head></head>`
* `<body></body>`

This means that all code placed in the HTML code editor tab is interpreted as if it were inside an HTML `<body>` element on the widget:

<table><thead><tr><th width="355" align="center">Typical HTML file</th><th align="center">Ubidots equivalent HTML inside the widget</th></tr></thead><tbody><tr><td align="center"><code>&#x3C;html></code><br><code>&#x3C;head></code><br><code>&#x3C;/head></code><br><code>&#x3C;body></code><br><code>&#x3C;h1> This is a h1 header &#x3C;/h1></code><br><code>&#x3C;p> This is a paragraph &#x3C;/p></code><br><code>&#x3C;p> This is another paragraph &#x3C;/p></code><br><code>&#x3C;/body></code><br><code>&#x3C;/html></code></td><td align="center"><code>&#x3C;h1> This is a h1 header &#x3C;/h1></code><br><code>&#x3C;p> This is a paragraph &#x3C;/p></code><br><code>&#x3C;p> This is another paragraph &#x3C;/p></code></td></tr></tbody></table>

### Advanced example

Suppose you want to display the following web content:<br>

<figure><img src="/files/Xh94OFoxusi3oZAbmfPa" alt=""><figcaption></figcaption></figure>

This can be achieved with the following HTML code:

```html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Online HTML Editor </h1>
<p> This is a real time online HTML Editor </p>
</body>
</html>
```

To achieve the same result on the HTML Canvas, use the following code in the HTML tab of the code editor:

```html
<h1> Online HTML Editor </h1>
<p> This is a real time online HTML Editor </p>
```

<figure><img src="/files/Jwnrg9YGddCc1vgjFolZ" alt=""><figcaption></figcaption></figure>

The resulting HTML Canvas widget is shown below on a dashboard:

<figure><img src="/files/anHYIFU2bm48kMy5WdDo" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://dev.ubidots.com/dashboards-and-widgets/html-canvas/code-editor/html-tab.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
