# Content Embed

<div align="left"><figure><img src="/files/9TbilVuKHi5tp88QC8nC" alt="Content Embed Component"><figcaption></figcaption></figure></div>

## Why Content Embed is needed

When designing most components on the site, you click on them and style them. However, this can’t be the case for HTML code because the HTML component is all that can be clicked on, not any of the headers, paragraphs, or other tags within.

Content Embed enables applying styles to the various tags contained within HTML.

## How to use Content Embed

Content Embed is located in Components > Data.

### 1. Add HTML

Once added to the canvas, the right panel will show a Code field. You can either add HTML directly to it or, more commonly, bind HTML to it from a Resource.

<figure><img src="/files/kLGz9AnkcWHnekywDtPV" alt="HTML bound to Content Embed component"><figcaption><p>CMS data bound to Content Embed Code</p></figcaption></figure>

### 2. Style

In the Navigator, Content Embed has various HTML tags nested. Expand Content Embed, and you’ll see tags such as Heading 1, Link, Image, and much more.

{% hint style="info" %}
Links inside Content Embed are represented by the **Rich Text Link** sub-component, which behaves like the [Link component](/university/core-components/link.md). Select it in the Navigator to style all links within the embedded HTML.
{% endhint %}

<figure><img src="/files/Fb10oAgjSn0J4U5rS6NX" alt="Content Embed H2 styled"><figcaption><p>Heading 2 selected and styled</p></figcaption></figure>

Styles applied to each of these tags will apply to all occurrences of that tag within the Content Embed. For example, if you apply a border on the Image tag, then all images contained within the HTML will have a border.

## Image handling

Webstudio does NOT optimize images contained in the markup.

On the other hand, images bound to the [Image Component](/university/core-components/image.md) are [optimized by default](/university/core-components/image.md#optimize).

The difference is in markup, we are not mapping every element to a Webstudio Component; rather, the element is served as-is with the exception of your custom styles applied to it.

## HTML Embed vs. Content Embed

While very similar, there is one distinct difference: Content Embed enables styling the contained HTML.

If there is no need to apply styles to the contained HTML, then use the [HTML Embed Component](/university/core-components/html-embed.md). However, if you need to style the contents (which is typically the case if fetching HTML from a CMS), then use Content Embed.

## Similar components

{% content-ref url="/pages/rHKKkqfgRmjo89BY2EvK" %}
[HTML Embed](/university/core-components/html-embed.md)
{% endcontent-ref %}

{% content-ref url="/pages/kuK1zd7s0VXAsx4PszQD" %}
[Markdown Embed](/university/core-components/markdown-embed.md)
{% endcontent-ref %}

## Related

* [Markdown Embed](/university/core-components/markdown-embed.md) – Render markdown content
* [Collection](/university/core-components/collection.md) – Loop through CMS data
* [HTML Embed](/university/core-components/html-embed.md) – Embed custom HTML


---

# 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.webstudio.is/university/core-components/content-embed.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.