# \<RichText\> htmlSerializer question

**URL:** <https://community.prismic.io/t/richtext-htmlserializer-question/4984>\
**Category:** Developing with Prismic\
**Tags:** reactjs\
**Created:** [April 15, 2021, 10:07am UTC](https://community.prismic.io/t/richtext-htmlserializer-question/4984 "2021-04-15T10:07:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dave1](https://avatars.discourse-cdn.com/v4/letter/d/bc79bd/32.png) [@dave1](https://community.prismic.io/u/dave1)\
**Post date:** [April 15, 2021, 10:07am UTC](https://community.prismic.io/t/richtext-htmlserializer-question/4984/1 "2021-04-15T10:07:01Z")

</div>

Wonder if when using htmlSerializer I can see associated tag (label) information too?

Here in the data obj I can see the tag (label: "rt-list-header"):  
 ![Screenshot 2021-04-15 at 11.01.48](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/9/90fd85fd0e6f914b69320020fa34b4a18915f38a.png)

But when passed into the htmlSerializer tag seems omitted?  
I wonder if this is expected as having that tag information would be useful to me.  
 ![Screenshot 2021-04-15 at 11.02.34](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/d/dfef674198b09416c98843f1d4509d93a124f73b.png)

---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [April 15, 2021, 3:10pm UTC](https://community.prismic.io/t/richtext-htmlserializer-question/4984/3 "2021-04-15T15:10:24Z")

</div>

Hey @dave1,

This should be possible. I've created an HTML Serializer that should log the info that you're looking for:

```auto
const htmlSerializer = (type, element, content, children) => {
  console.log(element?.data?.label)
  return null
}

```

Let me know if that logs the label for you.

If not, I could take a look at your code and repo to see if something unexpected is happening.

Best,  
Sam

---

<div class="post-metadata">

**Author:** ![dave1](https://avatars.discourse-cdn.com/v4/letter/d/bc79bd/32.png) [@dave1](https://community.prismic.io/u/dave1)\
**Post date:** [April 15, 2021, 4:17pm UTC](https://community.prismic.io/t/richtext-htmlserializer-question/4984/4 "2021-04-15T16:17:50Z")

</div>

Hey @samlittlefair

Thanks for your reply.  
Yes. Seems there is some interesting nesting happening.  
Strong \> Label \> Span

I originally filtered on the (type === span) from seeing the rich text data obj output pre serialisation in screenshot 1 from the first post.

Got around this with the following:  
if (type === 'strong' && children[0]?.props?.className === 'rt-list-header') {

However running this again, seeing the nesting (console output below) was unexpected so wonder if this is what you would expect?  
Your example didn't elaborate to which type a label would be attached, but it may be the case that a label is broken into its own type rather than a HTML tag type? I assumed property would just be attached to existing type.

See output from running through the nodes filtering by the 'Liability' title:  
 ![Screenshot 2021-04-15 at 17.04.02](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/b/bc35d23849e992b6516c6ba16f71b097cc66d250.png)

Update, after reviewing span array and the types associated with the [start: 0 - end: 9] items guess it makes sense (first post first screenshot). Only wonder is why/how an additional span tag gets created?

---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [April 15, 2021, 6:27pm UTC](https://community.prismic.io/t/richtext-htmlserializer-question/4984/5 "2021-04-15T18:27:55Z")

</div>

Hey @dave1,

It sounds like you figured this out. For a Custom Label, the `element.type === "label"`. So, in your HTML Serializer, you can do something along the lines of:

```auto
if(element.type === "label") return `<span class="${element.data.label}">${children.join("")}</span> `

```

In the source code for the `prismic-dom` package, which includes a complete HTML Serializer, I can see that the label type renders a `span` tag, while the span type seems to just clean the HTML, without adding HTML tags:

> <https://github.com/prismicio/prismic-dom/blob/c0e9b221749351c32d0e0c9a2366815572bb6ee6/src/richtext.js>

Let me know if you have any more questions!  
Sam

---

<div class="post-metadata">

**Author:** ![dave1](https://avatars.discourse-cdn.com/v4/letter/d/bc79bd/32.png) [@dave1](https://community.prismic.io/u/dave1)\
**Post date:** [April 16, 2021, 1:29pm UTC](https://community.prismic.io/t/richtext-htmlserializer-question/4984/6 "2021-04-16T13:29:16Z")

</div>

Ah yes, makes sense seeing /src/richtext.js code snippet 👍

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [April 17, 2021, 1:29pm UTC](https://community.prismic.io/t/richtext-htmlserializer-question/4984/7 "2021-04-17T13:29:43Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 4:22pm UTC](https://community.prismic.io/t/richtext-htmlserializer-question/4984/8 "2021-12-09T16:22:28Z")

</div>


