Using HTML blocks to edit code in articles and content blocks

<body>
<p id="docs-hc-snippet" style="display: none;">You can use HTML blocks to quickly access and edit complex HTML code in your content blocks and articles. HTML blocks let you work with blocks of code that would otherwise not be editable within the editor, and display them in a safe manner within your help center.</p>
<div class="article-banners">
<div id="docs-wmp-link">
<a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a>
</div>

<div class="article-banner" id="suite_ee">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Enterprise or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>

<div class="article-banner" id="support_with_guide_e">
<table>
<tbody>
<tr>
<td>
<strong>Support with</strong>
</td>
<td>Knowledge Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>
<div id="docs-ai-summary">
<p id="docs-ai-summary-toggle">Summary: <span id="up-triangle">◀</span><span id="down-triangle">▼</span></p>
<p id="docs-ai-summary-content">You can use HTML blocks to insert and edit unsupported HTML code in articles and content blocks, allowing you to manage complex elements like tables or scripts. HTML blocks let you focus on specific code sections without navigating the entire source. You can create, edit, move, unlink, or delete these blocks, with changes reflecting across all instances where the block appears.</p>
</div>

<div class="body">

<p class="p">You can use HTML blocks to quickly access and edit complex HTML code in your content blocks and
articles. HTML blocks let you work with blocks of code that would otherwise not be editable
within the editor, and display them in a safe manner within your help center. </p>
<div class="p">This article contains the following sections:<ul class="ul" id="topic_itz_qhj_yy__ul_kzh_1vr_k1c">
<li class="li"><a class="xref" href="#topic_vjc_x1m_3fc">About HTML blocks</a></li>
<li class="li"><a class="xref" href="#topic_p3f_gvr_k1c">Creating HTML blocks</a></li>
<li class="li"><a class="xref" href="#topic_sv2_hvr_k1c">Editing HTML blocks</a></li>
<li class="li"><a class="xref" href="#topic_rzm_3ws_bfc">Unlinking HTML blocks</a></li>
<li class="li"><a class="xref" href="#topic_sv2_hvr_k1c">Deleting HTML blocks</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_vjc_x1m_3fc">
<h2 class="title topictitle2" id="ariaid-title2">About HTML blocks</h2>
<div class="body">
<p class="p">With HTML blocks, you can copy and paste <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/6644509092378-Supported-HTML-for-help-center-articles" target="_blank">unsupported code</a> for HTML elements into the source
code editor. The code is then wrapped in an HTML block and displayed within the article or
content block. You can click the HTML block to open a source code editor that displays only
the code for that block. You can use this focused view to manipulate the HTML for your
selected content without scrolling through the source code for the entire content block or
article. </p>
<p class="p">When you update the content block or article, HTML elements associated with the HTML block
appear in all published articles or content blocks that contain the HTML block. You can use
HTML blocks for any block of unsupported HTML code, including complex HTML scripts or
elements such as tables of contents, accordions, tabs, or steppers. </p>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_p3f_gvr_k1c">
<h2 class="title topictitle2" id="ariaid-title3">Creating HTML blocks</h2>
<div class="body">
<div class="p">You can create an HTML block by either pasting a block of code into the source code editor,
or by using the the keyboard shortcut (cmd + option + h / ctrl + alt + h) to create an empty
HTML block. Once created, you can access HTML block code from within the HTML block editor
or the article source code editor. <div class="note" id="topic_p3f_gvr_k1c__note_gcf_lhh_41c">
<span class="notetitle">Note:</span> For HTML blocks to display in
the browser, you must enable unsafe content. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824584602#topic_uf2_54x_kxb" target="_blank">Editing the source code of help center
articles</a>.</div>
</div>
<div class="p">
<strong class="ph b">To create an HTML block in a content block </strong><ol class="ol" id="topic_p3f_gvr_k1c__ol_e21_p3s_k1c">
<li class="li">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_dzz_4wn_s2c" target="_blank">help center</a> or <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, create or edit a content
block.</li>
<li class="li">In the content block editor, click HTML on the toolbar.</li>
<li class="li">In the source code editor, create or edit the unsupported source code you want to use.
<p class="p"><img class="image img-screenshot" id="topic_p3f_gvr_k1c__image_ixk_lkq_f1c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/HTMLblock-sourcecode.png" width="600"></p>
</li>
<li class="li">Click <strong class="ph b">Apply</strong> to save the code and return to the content block editor. The
unsupported code appears as an HTML block within the editor. You can click the HTML
block to display additional options, or you can click and drag the block around the
editor to move the element to a new location.<p class="p"><img class="image" id="topic_p3f_gvr_k1c__image_qdz_sss_k1c" src="https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/HTMLblock-WYSWIG.png" width="600"></p>
</li>
</ol>
</div>
<div class="p">
<strong class="ph b">To create an HTML block in an article </strong><div class="note" id="topic_p3f_gvr_k1c__note_qlr_n2t_bfc">
<span class="notetitle">Note:</span> This option is
only available in the new article editor.</div>
<ol class="ol" id="topic_p3f_gvr_k1c__ol_blq_ywj_1cc">
<li class="li">In the <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_dzz_4wn_s2c" target="_blank">help center</a> or <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, create or edit an article.</li>
<li class="li">Click the Article components button (<img class="image" id="topic_p3f_gvr_k1c__image_gky_vgy_t2c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/Article-components-button.png" width="35">) on the article editor toolbar, then select
<strong class="ph b">HTML block</strong>.<p class="p"><img class="image img-screenshot" id="topic_p3f_gvr_k1c__image_hky_vgy_t2c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-html-block-insert-0515.png" width="200"></p>
</li>
<li class="li">In the HTML block editor, create or edit the unsupported source code you want to
use.</li>
<li class="li">Click <strong class="ph b">Insert</strong> to save the code and return to the article editor. <p class="p">The
unsupported code appears as an HTML block within the editor.</p>
<p class="p">You can click the
HTML block to display additional options or you can click and drag the block around
the editor to move the element to a new location.<img class="image" id="topic_p3f_gvr_k1c__image_ewm_r4h_4cc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/HTMLblock-WYSWIG.png" width="600"></p>
</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_dgq_gvr_k1c">
<h2 class="title topictitle2" id="ariaid-title4">Editing HTML blocks</h2>
<div class="body">
<p class="p">HTML blocks let you easily locate and work with the source code for that block. Instead of
scrolling through the source code, you can access and edit the source code for the HTML
block directly from the content block or article editor.</p>
<div class="p">
<strong class="ph b">To edit an HTML block</strong><ol class="ol" id="topic_dgq_gvr_k1c__ol_yps_mts_k1c">
<li class="li">Open the article or content block that contains the HTML block you want to edit in
<strong class="ph b">Edit</strong> mode.</li>
<li class="li">Click the HTML block you want to edit to display the option icons, then select the
<strong class="ph b">edit</strong> icon (<img class="image" id="topic_dgq_gvr_k1c__image_hpp_15s_k1c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/edit-cb-icon.png" width="30">).<p class="p">The HTML block editor opens in edit
mode.</p>
<p class="p"><img class="image img-screenshot" id="topic_dgq_gvr_k1c__image_rhq_qbt_mpb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/HTMLblock-source-code-edit.png" width="600"></p>
</li>
<li class="li">Make any necessary changes in the HTML block editor. </li>
<li class="li">Click <strong class="ph b">Apply</strong>.<p class="p">Your updates are saved and visible in all articles and content
blocks that contain the HTML block. You do not need to republish the articles for the
changes in content blocks to appear.</p>
</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested1" id="topic_rzm_3ws_bfc">
<h2 class="title topictitle2" id="ariaid-title5">Unlinking HTML blocks</h2>
<div class="body">
<p class="p">You can unlink HTML blocks to inline the HTML block and remove any unsupported markup from
the content. You can preview the code that will be removed prior to unlinking it.</p>
<div class="p">
<strong class="ph b">To unlink an HTML block</strong><ol class="ol" id="topic_rzm_3ws_bfc__ol_xs1_3jt_bfc">
<li class="li">Open the article or content block that contains the HTML block you want to edit in
Edit mode.</li>
<li class="li">Click the HTML block you want to delete to expose the option icons, then select the
<strong class="ph b">unlink</strong> icon (<img class="image" id="topic_rzm_3ws_bfc__image_kgj_kkh_4cc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/UnlinkHTMLBlock.png" width="20">). </li>
<li class="li">
<p class="p">Review the code that will be unlinked to make sure you understand what will be
removed. To continue, click <strong class="ph b">Unlink</strong>.</p>
<img class="image" id="topic_rzm_3ws_bfc__image_qzm_vjt_bfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-html-block-unlink.png" width="600"><p class="p">The HTML block is unlinked and unsupported code
is removed. </p>
</li>
<li class="li">Click <strong class="ph b">Update</strong> (for content blocks) or <strong class="ph b">Save</strong> (for articles).<p class="p">The HTML
block is unlinked in all content blocks and articles.</p>
</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title6" class="topic nested1" id="topic_sv2_hvr_k1c">
<h2 class="title topictitle2" id="ariaid-title6">Deleting HTML blocks</h2>
<div class="body">
<p class="p">Deleting HTML blocks removes the block, including the text and code within that block, from
the article. When you delete an HTML block, the block is immediately removed, without
confirmation, and can't be undone. </p>
<div class="p">
<strong class="ph b">To delete an HTML block</strong><ol class="ol" id="topic_sv2_hvr_k1c__ol_fpv_1vs_k1c">
<li class="li">Open the article or content block that contains the HTML block you want to edit in
<strong class="ph b">Edit</strong> mode.</li>
<li class="li">Click the HTML block you want to delete to expose the option icons, then select the
<strong class="ph b">delete</strong> icon (<img class="image" id="topic_sv2_hvr_k1c__image_kvp_bvs_k1c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/del-html-block.png" width="20">). <p class="p">The HTML block is removed, without
confirmation.</p>
</li>
<li class="li">Click <strong class="ph b">Update</strong> (for content blocks) or <strong class="ph b">Save</strong> (for articles).<p class="p">The HTML
block is deleted in all articles in which the content block appears.</p>
</li>
</ol>
</div>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/6739380623770",
"url": "https://support.zendesk.com/hc/en-us/articles/6739380623770",
"headline": "Using HTML blocks to edit code in articles and content blocks",
"description": "You can use HTML blocks to insert, edit, unlink, or delete unsupported HTML code within articles and content blocks, allowing focused manipulation of complex code elements in the editor.",
"articleSection": "Using themes and customizing your help center",
"datePublished": "2024-02-13T15:41:11+00:00",
"dateModified": "2026-04-29T14:54:29.057818+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/6739380623770"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com",
"softwareAddOn": {
"@type": "SoftwareApplication",
"name": "Knowledge",
"@id": "https://support.zendesk.com/hc/en-us/sections/4405298860954"
}
}
}</script><script id="ai-summary-script">
//<![CDATA[
const ai_summary_style = document.createElement('style');
ai_summary_style.innerHTML = `#styled-article-body{padding:0 0 0}#article-body #docs-ai-summary{background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 6px;margin-bottom:16px}#article-body #docs-ai-summary #docs-ai-summary-toggle{font-size:.9em;font-weight:700;margin-bottom:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}#article-body #docs-ai-summary #docs-ai-summary-toggle #up-triangle{margin-left:auto;padding-right:10px;display:none}#article-body #docs-ai-summary #docs-ai-summary-toggle #down-triangle{margin-left:auto;padding-right:10px}#article-body #docs-ai-summary #docs-ai-summary-content{font-size:.9em;padding-left:25px;padding-right:25px;margin-bottom:12px}`;
document.head.appendChild(ai_summary_style);

const toggleAISummary = () => {
const summary = document.getElementById("docs-ai-summary-content");
const upTriangle = document.getElementById("up-triangle");
const downTriangle = document.getElementById("down-triangle");
if (summary.style.display === "none") {
summary.style.display = "block";
upTriangle.style.display = "none";
downTriangle.style.display = "inline";
} else {
summary.style.display = "none";
upTriangle.style.display = "inline";
downTriangle.style.display = "none";
}
};

document.getElementById("docs-ai-summary-toggle").addEventListener("click", toggleAISummary);
//]]>
</script>
</body>