+++ title = "htmx Head Tag Support Extension" +++ The `head-support` extension adds support for [head tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) in responses to htmx requests. htmx began as a library focused on _partial replacement_ of HTML within the `body` tag. As such, merging additional information such as the head tag was not a focus of the library. (This is in contrast with, for example, TurboLinks, which was focused on merging entire web pages retrieved via AJAX into the browser.) The [`hx-boost`](@/attributes/hx-boost.md) attribute moved htmx closer to this world of full HTML-document support & support for extracting the `title` tag out of head elements was eventually added, but full head tag support has never been a feature of the library. This extension addresses that shortcoming. ## Installing The fastest way to install `head-support` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage). ```HTML ... ``` An unminified version is also available at https://unpkg.com/htmx-ext-head-support/dist/head-support.js. While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `head-support` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-head-support`, add it to the appropriate directory in your project and include it where necessary with a ` ``` If htmx receives a request containing this new head tag: ```html ``` Then the following operations will occur: * `` will be left alone * `` will be removed from the head * `` will be added to the head * `` will be removed from the head * `` will be left alone * `` will be added to the head The final head element will look like this: ```html ``` ## Events This extension triggers the following events: * `htmx:removingHeadElement` - triggered when a head element is about to be removed, with the element being removed available in `event.detail.headElement`. If `preventDefault()` is invoked on the event, the element will not be removed. * `htmx:addingHeadElement` - triggered when a head element is about to be added, with the element being added available in `event.detail.headElement`. If `preventDefault()` is invoked on the event, the element will not be added. * `htmx:afterHeadMerge` - triggered after a head tag merge has occurred, with the following values available in the event `detail`: * `added` - added head elements * `kept` - kept head elements * `removed` - removed head elements * `htmx:beforeHeadMerge` - triggered before a head merge occurs