HTMLでテキストに異なる装飾を重ねたいときに困った話

はじめに（困ったこと）

こういうHTMLがあったとして、

<span class="underline">
  undeline
  <span class="bold">bold and underline</span>
  bold
</span>

本当はこのように表示されてほしいのですが、

実際には、下記のようになってしまいます。

末尾の bold は下線なしで太字になってほしいのですが、</span> が <span class="underline"> の終了なのか、<span class="bold"> の終了なのか判断できないせいか、期待どおりに表示されません。

回避策

下記のように、spanタグだけで区別せず、タグを分けます。

<u class="underline">
  undeline
  <b class="bold">bold and underline</u>
  bold
</b>

すると、下記のように期待どおり表示されます。

おわりに

そもそも上記のように開始タグと終了タグがたがい違いになるHTML的にOKなのか？という疑問はありますが、リッチエディタみたいにテキストに装飾を重ねるのは、普通にありえますし、直感的に操作することを考えれば、むしろ自然なことに思えます。
そんなときは、区別したい単位でタグを変えてあげればいいよ、という短い話でした。

ではでは。