diff --git a/code/ui/blocks/src/blocks/Subheading.tsx b/code/ui/blocks/src/blocks/Subheading.tsx
index 02f35bf63fdf..57cf5223be51 100644
--- a/code/ui/blocks/src/blocks/Subheading.tsx
+++ b/code/ui/blocks/src/blocks/Subheading.tsx
@@ -8,7 +8,7 @@ export const Subheading: FC<PropsWithChildren<HeadingProps>> = ({ children, disa
   if (disableAnchor || typeof children !== 'string') {
     return <H3>{children}</H3>;
   }
-  const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
+  const tagID = globalThis.encodeURIComponent(children.toLowerCase());
   return (
     <HeaderMdx as="h3" id={tagID}>
       {children}