# HtmlDocument guide

When you're using Cherrycake to build a web app, the [HtmlDocument](https://cherrycake.tin.cat/version-0.x/reference/core-modules/htmldocument) module helps you create standard HTML structure headers and footers with some additional useful capabilities.

The two most important methods of the [HtmlDocument](https://cherrycake.tin.cat/version-0.x/reference/core-modules/htmldocument) module are [HtmlDocument::header](https://cherrycake.tin.cat/version-0.x/reference/core-modules/htmldocument/htmldocument-methods#header) and [HtmlDocument::footer](https://cherrycake.tin.cat/version-0.x/reference/core-modules/htmldocument/htmldocument-methods#footer), they both take care of building the usual `<html><body> ...` and `...</body></html>` tags. For example, take this code that outputs a simple HTML response to show a webpage:

```php
$e->Output->setResponse(new \Cherrycake\ResponseTextHtml([
    "code" => \Cherrycake\RESPONSE_OK,
    "payload" =>
        $e->HtmlDocument->header().
        "Hello world!".
        $e->HtmlDocument->footer()
]));
```

This would output the following HTML code:

```markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="/css?set=coreUiComponents:718d83f2e5ae92b539f90f7dc7e3ba24" />
<script type="text/javascript" src="/js?set=coreUiComponents:d41d8cd98f00b204e9800998ecf8427e"></script>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=2" />
</head>
<body>
Hello world!</body>
</html>
```

Take a look at the[ configuration of the HtmlDocument](https://cherrycake.tin.cat/version-0.x/reference/core-modules/htmldocument), where you can configure the title of your page, description, keywords, and many other important aspects of your HTML document structure.

> See how HtmlDocument also took care of including a CSS stylesheet and a JavaScript script automatically. This will come in handy when you start using the [CSS and Javascript modules](https://cherrycake.tin.cat/version-0.x/guide/css-and-javascript-guide).

## Common usage with Patterns

You might find quite helpful to use the [header](https://cherrycake.tin.cat/version-0.x/reference/core-modules/htmldocument/htmldocument-methods#header) and [footer](https://cherrycake.tin.cat/version-0.x/reference/core-modules/htmldocument/htmldocument-methods#footer) [HtmlDocument](https://cherrycake.tin.cat/version-0.x/reference/core-modules/htmldocument) methods in your HTML [patterns](https://cherrycake.tin.cat/version-0.x/guide/patterns-guide). Just call them at the beginning and at the end of your pattern and you'll get a complete HTML document.

For example, take a look at this HTML pattern named `home.html`:

```markup
<?= $e->HtmlDocument->header() ?>
Hello world!
<?= $e->HtmlDocument->footer() ?>
```

Now we parse it and send it to the user's browser with [Patterns::out](https://cherrycake.tin.cat/version-0.x/reference/core-modules/patterns/methods#out):

```php
$e->Patterns->out("home.html");
```

And we get exactly the same "Hello World!" HTML page as above.

Remembers to add the [HtmlDocument](https://cherrycake.tin.cat/version-0.x/reference/core-modules/htmldocument) module to your module's list of dependent core modules so it is available to use, like this:

```php
namespace CherrycakeApp\MyModule;

class MyModule extends \Cherrycake\Module {
    protected $dependentCoreModules = [
        "HtmlDocument"
    ];
    
    ...
}
```


---

# 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://cherrycake.tin.cat/version-0.x/guide/htmldocument-guide.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.
