What am I allowed to put in a textPath tag so that it follows the curve?

Question

I've copied the second to last HTML snippet form here below and edited it by adding <p>uffa</p> in the text. As you can see, uffa is show at the bottom of the page instead of on the curve. Why is that? What am I allowed to put in the textPath tag so that it follows the curve?

<svg viewBox="0 0 500 500">
    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
    <text width="500">
      <textPath xlink:href="#curve">
        Dangerous Curves Ahead <p>uffa</p>
      </textPath>
    </text>
</svg>

Adding CSS tag in case there's a CSS trick to do that.

Answer 1

p is not an SVG element and therefore it is placed outside the SVG viewbox. Alternatively you can make use of tspan which is used to define a subtext within <text>

<svg viewBox="0 0 500 500">
    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
    <text width="500">
      <textPath xlink:href="#curve">
        Dangerous Curves Ahead <tspan>uffa</tspan>
      </textPath>
    </text>
</svg>