# Return HTML

Generate a complete HTML page from a string and return it directly from a function. Use this pattern for lightweight pages, landing screens, or maintenance notices that do not need to be rendered on an origin server.

```js
  const html = `<!DOCTYPE html>
  <body>
    <h1>Hello World</h1>
    <p>This markup was generated by Azion - Functions.</p>
  </body>`
  
  async function handleRequest(request) {
    return new Response(html, {
      headers: {
        "content-type": "text/html;charset=UTF-8",
      },
    })
  }
  
  addEventListener("fetch", event => {
    return event.respondWith(handleRequest(event.request))
  })
```

## How it works

The markup is stored in a template literal assigned to the `html` constant, so the whole page lives inside the function. When the `fetch` event fires, `handleRequest` builds a new `Response` with that string as the body and sets the `content-type` header to `text/html;charset=UTF-8`, which tells the browser to render the payload as a web page instead of plain text. `event.respondWith()` then returns the page to the client, with no request to an origin.

The `content-type` header is the part that matters most here. Without it, the browser has no instruction to render the body as a page, so keep it set whenever a function returns HTML.

## Related resources

- [JavaScript examples](/en/documentation/platform/functions/javascript-examples.md): Browse the rest of the snippets in this collection.
- [FetchEvent](/en/documentation/devtools/runtime/api-reference/fetch-event.md): Read the reference for the event this handler listens to, including `respondWith()`.
- [Response](/en/documentation/devtools/runtime/api-reference/response.md): Check the status, headers, and body options the constructor accepts.
- [How Functions works](/en/documentation/platform/functions/how-it-works.md): See what has to exist before a function runs on a request.
- [Functions limits](/en/documentation/platform/functions/limits.md): The ceilings a single invocation of this function runs inside, and the ones that vary by plan.
- [Query usage data from Functions](/en/documentation/guides/platform/observability/query-functions-usage-data-with-graphql.md): Read back the compute time and the invocations this function has consumed.