&HTML Entities Encoder

<div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&amp;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&amp;</div> <div style="font-size:18px;color:var(--c-ink);">&</div> <div style="font-size:10px;color:var(--c-mute);">Ampersand</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&lt;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&lt;</div> <div style="font-size:18px;color:var(--c-ink);"><</div> <div style="font-size:10px;color:var(--c-mute);">Less than</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&gt;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&gt;</div> <div style="font-size:18px;color:var(--c-ink);">></div> <div style="font-size:10px;color:var(--c-mute);">Greater than</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&quot;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&quot;</div> <div style="font-size:18px;color:var(--c-ink);">"</div> <div style="font-size:10px;color:var(--c-mute);">Quotation</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&apos;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&apos;</div> <div style="font-size:18px;color:var(--c-ink);">'</div> <div style="font-size:10px;color:var(--c-mute);">Apostrophe</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&nbsp;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&nbsp;</div> <div style="font-size:18px;color:var(--c-ink);"> </div> <div style="font-size:10px;color:var(--c-mute);">Non-breaking space</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&copy;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&copy;</div> <div style="font-size:18px;color:var(--c-ink);">©</div> <div style="font-size:10px;color:var(--c-mute);">Copyright</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&reg;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&reg;</div> <div style="font-size:18px;color:var(--c-ink);">®</div> <div style="font-size:10px;color:var(--c-mute);">Registered</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&trade;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&trade;</div> <div style="font-size:18px;color:var(--c-ink);">™</div> <div style="font-size:10px;color:var(--c-mute);">Trademark</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&euro;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&euro;</div> <div style="font-size:18px;color:var(--c-ink);">€</div> <div style="font-size:10px;color:var(--c-mute);">Euro</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&pound;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&pound;</div> <div style="font-size:18px;color:var(--c-ink);">£</div> <div style="font-size:10px;color:var(--c-mute);">Pound</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&mdash;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&mdash;</div> <div style="font-size:18px;color:var(--c-ink);">—</div> <div style="font-size:10px;color:var(--c-mute);">Em dash</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&ndash;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&ndash;</div> <div style="font-size:18px;color:var(--c-ink);">–</div> <div style="font-size:10px;color:var(--c-mute);">En dash</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&hellip;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&hellip;</div> <div style="font-size:18px;color:var(--c-ink);">…</div> <div style="font-size:10px;color:var(--c-mute);">Ellipsis</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&laquo;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&laquo;</div> <div style="font-size:18px;color:var(--c-ink);">«</div> <div style="font-size:10px;color:var(--c-mute);">Left guillemet</div> </div> <div style="background:var(--c-canvas);border:1px solid var(--c-hairline);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;" class="entity-ref" data-ent="&raquo;" title="Click to copy"> <div style="font-family:var(--f-mono);font-size:11px;color:var(--c-link);">&raquo;</div> <div style="font-size:18px;color:var(--c-ink);">»</div> <div style="font-size:10px;color:var(--c-mute);">Right guillemet</div> </div>