How to add semantic HTML to component

[Eva PLantin]

How do you add semantic HTML to a Card component? When using the Title for <CardHeader> there is only a <div> with the text. I cannot find anything in the documentation regarding semantics. The only way for the Card component is to place semantic tags between the component tags, but this way I lose some built-in theme styling. Are there other downside to placing <p> tag or other semantic tag between component tag?

I have previously used MUI and for semantic purposes, I could add an attribute that informs of the semantic type intended for the component (aside, section, blockquote, p, or h1-h6).

Does anyone know or have experience of this?

[Kokila Poovendran]

Hi Eva PLantin,

Thank you for reaching out to us with your inquiry about adding semantic HTML to the Card component. We understand the importance of semantic structure for accessibility and SEO purposes.

Based on your query, we've prepared a sample code snippet that demonstrates how to incorporate semantic HTML elements within the Card component:

@using Syncfusion.Blazor.Cards

 

 

<SfCard>

    <CardHeader>

         <h2>Card Title</h2>

    </CardHeader>

    <CardContent>

        <article>

            <p>This is the content of the card.</p>

        </article>

    </CardContent>

     <CardFooter>

           <CardFooterContent>

            <button>@("Button")</button>

        </CardFooterContent>

    </CardFooter>

</SfCard>

In this example, we've utilized semantic tags such as <article> and <p> within the Card component to improve the semantic structure of the content.

You can explore the provided sample on our Blazor Playground: https://blazorplayground.syncfusion.com/LNVftrWngnZeidES

For further details and customization options, please refer to our demo site: Syncfusion Blazor Card Demo