Issue: Introduce Separate <em> Tags for Emphasis

[etiennejcharles]

Hey Team 👋🏿 !
Thank you for creating this headlesS CMS solution it's - such an amazing product 😉

Description

In our current implementation, <i> tags are often used for both emphasis and stylistic purposes. However, these tags serve different purposes, or we would love it to ❤️

• <em> is intended for text that needs to be emphasized, conveying importance or stress.
• <i> is typically used for text that is set off from the normal text for stylistic reasons, such as foreign words, technical terms, or names of ships.

To enhance the semantic meaning of our HTML and improve accessibility, we propose introducing separate <em> tags for emphasis while keeping <i> tags for stylistic purposes.

Proposed Solution

1. Add <em> Tags:

   • Introduce <em> tags where text needs to be emphasized, replacing the misuse of <i> tags for this purpose.
   • Retain existing <i> tags for their intended stylistic purposes.

2. Update CSS Styles:

   • Ensure that styles applied to <i> tags for emphasis are now correctly applied to <em> tags to maintain visual consistency.

3. Accessibility Improvements:

   • Improve the semantic HTML structure, aiding screen readers and other assistive technologies in providing a better user experience.

Rationale

• Semantic HTML: Using tags correctly enhances the semantic meaning of our HTML.
• Accessibility: Screen readers and other assistive technologies rely on the correct use of HTML tags to provide a better user experience.

Additional Information

This issue is a part of our ongoing effort to enhance the accessibility and semantic correctness of our codebase and align with our internal design system needs 😉 we'd love to see an "emphasis" tag there (eventually)