How to change default meaning of semantic tag

Hi team,
I faced an issue when I added categories to the menu dynamically. Added this code in function.php:

/**
 * SHS: Mega Menu categories hover + spacing fix (XStore / Elementor)
 * Works both:
 *  - when opening the mega menu template directly
 *  - when the same template is rendered inside the header menu
 */
add_filter('elementor/frontend/the_content', function ($content) {

    // Run only when that specific block exists
    if (stripos($content, 'categories-mask') === false) {
        return $content;
    }

    /**
     * A) Ensure the <a> inside categories-mask has a predictable class
     *    (so we can target it with high-specificity CSS)
     */
    $content = preg_replace_callback(
        '#<div([^>]*class="[^"]*categories-mask[^"]*"[^>]*)>(\s*)<a([^>]*)>#i',
        function ($m) {
            $divOpen = '<div' . $m[1] . '>' . $m[2];
            $aAttrs  = $m[3];

            if (preg_match('/\sclass="([^"]*)"/i', $aAttrs, $cm)) {
                $classes = trim($cm[1]);

                if (stripos($classes, 'shs-mega-link') === false) {
                    $classes .= ' shs-mega-link';
                }

                $aAttrs = preg_replace(
                    '/\sclass="[^"]*"/i',
                    ' class="' . esc_attr($classes) . '"',
                    $aAttrs,
                    1
                );
            } else {
                $aAttrs .= ' class="shs-mega-link"';
            }

            return $divOpen . '<a' . $aAttrs . '>';
        },
        $content
    );

    /**
     * B) Normalize headings inside categories-mask (remove h4 default spacing)
     *    Keep structure, just remove browser/theme margins that break alignment.
     */
    // Add a helper class to h4 if present
    $content = preg_replace(
        '#(<div[^>]*class="[^"]*categories-mask[^"]*"[^>]*>.*?<a[^>]*>)(\s*)<h4\b([^>]*)>#is',
        '$1$2<h4 class="shs-mega-link-text"$3>',
        $content
    );

    /**
     * C) Inject CSS once (critical: strong specificity + !important)
     *    Targets only the mega menu area.
     */
    static $css_done = false;
    if (!$css_done) {
        $css_done = true;

        $css = <<<CSS
/* ========= SHS Mega Menu: Categories hover + spacing fix ========= */

/* Scope to XStore mega menu area (broad but safe) */
.etheme-elementor-nav-menu,
.etheme-elementor-mega-menu,
.header-wrapper,
.et_b-header,
.et-header-wrapper {}

/* 1) Stop any theme/elementor rule from changing hover color inside categories-mask */
.etheme-elementor-nav-menu .categories-mask a,
.etheme-elementor-mega-menu .categories-mask a,
.header-wrapper .categories-mask a,
.et_b-header .categories-mask a {
  color: inherit !important;
  text-decoration: none !important;
}

/* IMPORTANT: underline-only on hover/focus, gray underline, NO color change */
.etheme-elementor-nav-menu .categories-mask a:hover,
.etheme-elementor-nav-menu .categories-mask a:focus,
.etheme-elementor-mega-menu .categories-mask a:hover,
.etheme-elementor-mega-menu .categories-mask a:focus,
.header-wrapper .categories-mask a:hover,
.header-wrapper .categories-mask a:focus,
.et_b-header .categories-mask a:hover,
.et_b-header .categories-mask a:focus {
  color: inherit !important;                 /* <-- prevents primary color hover */
  text-decoration-line: underline !important;
  text-decoration-color: #8a8a8a !important; /* gray underline */
  text-decoration-thickness: 1px !important;
  text-underline-offset: 6px !important;
}

/* 2) Make underline length match text (not full row)
   If theme sets a to flex/block, force inline-block */
.etheme-elementor-nav-menu .categories-mask a,
.etheme-elementor-mega-menu .categories-mask a,
.header-wrapper .categories-mask a,
.et_b-header .categories-mask a {
  display: inline-block !important;
  width: auto !important;
}

/* 3) Fix uneven spacing between columns (h4 default margin + line-height differences) */
.etheme-elementor-nav-menu .categories-mask h4,
.etheme-elementor-mega-menu .categories-mask h4,
.header-wrapper .categories-mask h4,
.et_b-header .categories-mask h4 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  text-transform: none !important;
}

/* 4) Give each item consistent vertical spacing (same in both columns) */
.etheme-elementor-nav-menu .categories-mask,
.etheme-elementor-mega-menu .categories-mask,
.header-wrapper .categories-mask,
.et_b-header .categories-mask {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}
CSS;

        $content .= '<style id="shs-mega-menu-hover-fix">' . $css . '</style>';
    }

    return $content;

}, 20);

It matches styles, but H4 is not switching.
Can you please check and help me? This h4 tag broke the semantic structure of the website.
Thanks