` element. You can do that with the `<svelte:head>` tag: ```html  <svelte:head> <title>{post.title} • My blog

--- title: Special elements --- Svelte includes a handful of built-in elements with special behaviour. ### `` Sometimes, a component needs to embed itself recursively — for example if you have a tree-like data structure. In Svelte, that's accomplished with the `` tag: ```html {#if countdown > 0}

{countdown}

{:else}

liftoff!

{/if} ``` ```json /* { hidden: true } */ { countdown: 5 } ``` ### `` If you don't know what kind of component to render until the app runs — in other words, it's driven by state (aka a dynamic component) — you can use ``: ```html foo ``` ```html

Red {name}

``` ```html

Blue {name}

``` The expression inside the `this="{...}"` can be any valid JavaScript expression. ### `` The `` tag gives you a convenient way to declaratively add event listeners to `window`. Event listeners are automatically removed when the component is destroyed. ```html {#if key}

{key === ' ' ? 'Space' : key} (code {keyCode})

{:else}

click in this window and press any key

{/if} ``` You can also bind to certain values — so far `innerWidth`, `outerWidth`, `innerHeight`, `outerHeight`, `scrollX`, `scrollY` and `online`: ```html

user has scrolled {y} pixels

``` ### `` TODO REPLACE THIS WITH svelte:body The `` tag, just like ``, gives you a convenient way to declaratively add event listeners to the `document` object. This is useful for listening to events that don't fire on `window`, such as `mouseenter` and `mouseleave`. ### `` If you're building an application with Svelte — particularly if you're using [Sapper](https://sapper.svelte.technology) — then it's likely you'll need to add some content to the `` of your page, such as adding a `` element. You can do that with the `<svelte:head>` tag: ```html  <svelte:head> <title>{post.title} • My blog ``` When [server rendering](guide#server-side-rendering), the `` contents can be extracted separately to the rest of the markup.