# Retornar HTML

Gere uma página HTML completa a partir de uma string e retorne-a diretamente de uma função. Use esse padrão para páginas leves, telas de entrada ou avisos de manutenção que não precisam ser renderizados em um servidor de origem.

```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))
  })
```

## Como funciona

A marcação é armazenada em um template literal atribuído à constante `html`, de modo que toda a página fica dentro da função. Quando o evento `fetch` é disparado, `handleRequest` constrói um novo `Response` com essa string como corpo e define o header `content-type` como `text/html;charset=UTF-8`, o que faz o navegador renderizar o conteúdo como página web em vez de texto puro. Em seguida, `event.respondWith()` retorna a página ao cliente, sem nenhuma requisição a uma origem.

O header `content-type` é o ponto que mais importa aqui. Sem ele, o navegador não recebe instrução para renderizar o corpo como uma página, então mantenha-o definido sempre que uma função retornar HTML.

## Recursos relacionados

- [Exemplos em JavaScript](/pt-br/documentacao/plataforma/functions/javascript-exemplos.md): Consulte os demais trechos de código desta coleção.
- [FetchEvent](/pt-br/documentacao/devtools/runtime/api-reference/fetch-event.md): Leia a referência do evento que este handler escuta, incluindo `respondWith()`.
- [Response](/pt-br/documentacao/devtools/runtime/api-reference/response.md): Verifique as opções de status, headers e corpo que o construtor aceita.
- [Como funciona](/pt-br/documentacao/plataforma/functions/como-funciona.md): Veja o que precisa existir antes de uma função ser executada em uma requisição.
- [Limites de Functions](/pt-br/documentacao/plataforma/functions/limites.md): Os tetos dentro dos quais uma única invocação desta função roda, e os que variam conforme o plano.
- [Consulte dados de uso de Functions](/pt-br/documentacao/guias/plataforma/observabilidade/consultar-dados-de-uso-edge-functions-com-graphql.md): Leia de volta o tempo de compute e as invocações que esta função consumiu.