diff --git a/src/components/Snippet.vue b/src/components/Snippet.vue
index 747c2aac6..085db48c1 100644
--- a/src/components/Snippet.vue
+++ b/src/components/Snippet.vue
@@ -41,12 +41,13 @@ export default {
             'See https://www.algolia.com/doc/api-reference/api-parameters/attributesToSnippet/.'
         );
       }
+
       return attributeValue
         .replace(
-          new RegExp('<em>', 'g'),
+          new RegExp('<mark>', 'g'),
           `<${this.highlightedTagName} class="${this.suit('highlighted')}">`
         )
-        .replace(new RegExp('</em>', 'g'), `</${this.highlightedTagName}>`);
+        .replace(new RegExp('</mark>', 'g'), `</${this.highlightedTagName}>`);
     },
   },
 };
diff --git a/src/components/__tests__/Snippet.js b/src/components/__tests__/Snippet.js
index 8100322c0..83997a042 100644
--- a/src/components/__tests__/Snippet.js
+++ b/src/components/__tests__/Snippet.js
@@ -9,7 +9,7 @@ test('renders proper HTML', () => {
   const hit = {
     _snippetResult: {
       attr: {
-        value: `con<em>ten</em>t`,
+        value: `con<mark>ten</mark>t`,
       },
     },
   };
@@ -28,7 +28,7 @@ test('renders proper HTML with highlightTagName', () => {
   const hit = {
     _snippetResult: {
       attr: {
-        value: `con<em>ten</em>t`,
+        value: `con<mark>ten</mark>t`,
       },
     },
   };
@@ -83,7 +83,7 @@ test('allows usage of dot delimited path to access nested attribute', () => {
     _snippetResult: {
       attr: {
         nested: {
-          value: `nested <em>val</em>`,
+          value: `nested <mark>val</mark>`,
         },
       },
     },