# Add Custom Head HTML
## Overview
The **Settings** tab within the builder has an option that allows you to add custom HTML to the `` section of your email or page design. This feature lets you easily inject CSS and metadata into the `` section of your email, without relying on error-prone workarounds like using the HTML block, which is intended for different use cases, or post-processing your design's HTML after you export it. Adding custom `` HTML is ideal if you want to add metadata, a favicon, or a stylesheet—especially if you're part of a large team managing high-volume campaigns. Whether you're a developer, a designer, or a marketing pro, this gives you the flexibility and precision needed for enterprise-level customization.
## Sanitizer Tags and Attributes
Prior to using the **Custom Head HTML** setting, familiarize yourself with the [tags](#table-1-allowed-tags), [attributes](#table-2-allowed-attributes-by-tag), and [protocols](#table-3-allowed-link-protocols) that are available when the [sanitizer](#the-sanitizer-and-adding-custom-html) is on. Each of the following tables in this section list and define the tags, attributes, and protocols you can use when the [sanitizer](#the-sanitizer-and-adding-custom-html) is **on**.
{% hint style="warning" %}
**Important:** If the sanitizer if **off**, you can add any custom HTML in the `` section you'd like. However, it is important to consider using your own code may affect how the design is rendered. This could prevent it from adjusting to the screen size (for example, the responsiveness of the design). Make sure to use HTML that is email-compliant and responsive.
{% endhint %}
### Table 1: **Allowed Tags**
The following table lists and defines tags you can add the `` section of the HTML when the **sanitizer is on**. It also provides examples you can reference.
{% hint style="info" %}
**Note:** If the sanitizer is off, you can add any attribute or tag.
{% endhint %}
| Tag Name | Description | HTML Example |
| -------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| `base` | Specifies the base URL for all relative URLs in the document | `` |
| `link` | Defines relationships between the current document and external resources | `` |
| `meta` | Provides metadata such as page description, keywords, author, etc. | `` |
| `style` | Embeds internal CSS styles | `` |
| `title` | Sets the title of the document shown in browser tabs | `My Website` |
### Table 2: **Allowed Attributes (by tag)**
The following table lists and defines attributes (by tag) you can add the `` section of the HTML when the **sanitizer is on**. It also provides examples you can reference.
{% hint style="info" %}
**Note:** If the sanitizer is off, you can add any attribute or tag.
{% endhint %}
| Tag/Attribute | Description | HTML Example |
| ------------------------ | ----------------------------------------------------- | ---------------------------------------------------------------------- |
| `base`: `href` | Base URL to use for relative URLs | `` |
| `base`: `target` | Default target for all hyperlinks and forms | `` |
| `link`: `href` | URL to the external resource | `` |
| `link`: `rel` | Relationship between current and linked document | `` |
| `link`: `type` | Type of linked resource (usually MIME type) | `` |
| `link`: `sizes` | Sizes of icons for visual representations | `` |
| `link`: `media` | Specifies media/device for which the styles apply | `` |
| `meta`: `name` | Name of metadata (e.g., description, keywords) | `` |
| `meta`: `content` | Value associated with `name` or `property` | `` |
| `meta`: `charset` | Declares the character encoding | `` |
| `meta`: `property` | Used for Open Graph or similar metadata standards | `` |
| `style`: `type` | MIME type of the style content | `` |
| `style`: `media` | Specifies the media/device the style is optimized for | `` |
| `title`: *no attributes* | The `title` tag does not accept any attributes | `My Site` |
### Table 3: **Allowed Link Protocols**
The following table lists and defines link protocols you can add the `` section of the HTML when the **sanitizer is on**. It also provides examples you can reference.
{% hint style="info" %}
**Note:** If the sanitizer is off, you can add any attribute or tag.
{% endhint %}
| Protocol | Description | HTML Example |
| -------- | --------------------------- | ------------------------------------------------------------------ |
| `http` | HyperText Transfer Protocol | `` |
| `https` | Secure version of HTTP | `` |
| `ftp` | File Transfer Protocol | `` |
## How to Add Custom Head HTML
Take the following steps to add custom `` HTML to your email or page design:
1. Enter the email or page builder.
2. Navigate to the sidebar.
3. Click on **SETTINGS.**
4. Scroll down to the **Custom Head HTML** section.
5. Type the \ HTML in the window.
6. Save your changes.
When you export your HTML, the custom `` HTML you added will be visible at the very end of the `` section.
{% hint style="info" %}
I**mportant:** While you can add custom `` HTML that will be appended at the very end of the `` section, you will not be able edit the existing HTML in the `` section.
{% endhint %}
## CSS Classes Overview
Emails, Pages, and Popups use a structured system of CSS classes to support navigation and custom styling. These classes reflect the layout hierarchy and block types, making it easier to apply targeted styles or understand the generated HTML.
### Email Design Classes
The class structure for emails follows a nested pattern:
```
body
└── nl-container
└── row / row-X {mobile_hide / desktop_hide}
└── row-content {stack} {reverse}
└── column / column-X
└── [Y_block] block-X {mobile_hide / desktop_hide}
```
#### **Key conventions:**
* `row-X`, `column-X`, and `block-X` indicate the order within the hierarchy.
* `{stack}` enables column stacking on mobile; `{reverse}` reverses the stacking order.
* `.mobile_hide` and `.desktop_hide` toggle visibility per device.
#### **Content block types** (`[Y_block]`) include:
* `.button_block`, `.divider_block`, `.image_block`, `.social_block`, `.html_block`, `.video_block`, `.icons_block`, `.menu_block`, `.addon_block`, `.heading_block`, `.paragraph_block`, `.list_block`, `.table_block`
* Deprecated: `.text_block`, `.empty_block`
### Pages and Popups
Page and Popup classes are similarly structured, with an `X-` prefix (default: `bee`, customizable per account):
```
X-page-container
└── X-row / X-row-Y {X-mobile_hide / X-desktop_hide}
└── X-row-content {reverse}
└── X-col / X-col-Y X-col-wZ
└── X-block / X-block-Y X-[block name] {X-mobile_hide / X-desktop_hide}
```
#### **Notable patterns:**
* `X-col-wZ` denotes width (1–12 grid units).
* `X-block` identifies the content block type, such as:
* `.X-button`, `.X-divider`, `.X-image`, `.X-social`, `.X-html`, `.X-video`, `.X-icons`, `.X-forms`, `.X-menu`, `.X-addon`, `.X-heading`, `.X-paragraph`, `.X-list`, `.X-table`, `.X-spacer`
* Deprecated: `.X-text`, `.X-empty`
## Example Applications
This section includes three example scenarios of adding custom `` HTML, and their corresponding code snippets. You can use these code snippets to start experimenting with the Custom Head HTML Setting, and start adding custom `` code to your email and page designs.
### Add a Favicon in the Head Code
Paste the following code in the **Custom Head HTML** window and save your changes to apply a favicon. If you'd like to customize this snippet, you can replace the `href` URL with your own image source for the favicon.
{% code overflow="wrap" %}
```html
```
{% endcode %}
### Use a Stylesheet URL
Paste the following code in the **Custom Head HTML** window and save your changes to apply the styles within the stylesheet. If you'd like to customize this snippet, you can replace the `href` URL with your own stylesheet URL.
{% code overflow="wrap" %}
```html
```
{% endcode %}
### Paste CSS Directly in the Window
Paste the following code in the **Custom Head HTML** window and save your changes to apply the CSS styles to your design.
```css
```
## Keyboard Navigation
You can use the keyboard to navigate the builder and add custom `` HTML code. Reference the [Custom Keyboard Navigation article](/end-user-guide/accessibility/custom-keyboard-navigation.md) to learn more about custom keyboard navigation options available within the builder.
{% hint style="info" %}
**Note:** The **Custom Head HTML** window also includes autocompletion options.
{% endhint %}
## The Sanitizer and Adding Custom HTML
When using custom HTML in the email builder, a code sanitizer will validate your code. It will automatically correct some issues such as HTML tags that are left open. It will also strip out code that isn't often supported by email clients. For example, script and iframe tags are removed since they often cause deliverability problems of security risks.
## Additional Considerations
Prior to adding your own custom `` HTML consider the following:
* If the sanitizer is on, you can only use the following tags in the custom `` HTML section . If it is off, there are no restrictions to which tags you can add.
* `base`
* `link`
* `meta`
* `style`
* `title`
* If the sanitizer is on, you can only use the attributes listed in the [attributes by tag table](#table-2-allowed-attributes-by-tag).
* **Note:** If the sanitizer is off, you can use any HTML attribute or tag. Use this option carefully to ensure your designs are still responsive and render correctly.
* You cannot edit existing HTML within the `` tags, you can only add custom HTML to that will be appended at the end of the `` section.
* When the [sanitizer](#the-sanitizer-and-adding-custom-html) is on, the [HTML block](/end-user-guide/content-blocks/custom-html.md) and Custom Head HTML setting have different available tags and attributes that are unique to each feature.
---
# 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://docs.beefree.io/end-user-guide/design-tools/add-custom-head-html.md?ask=
```
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.