仕様

LEGEND要素は、
legend要素の
親 fieldset要素の
残りのコンテンツ
（存在する場合）の
キャプションを
表します。

legendキャプション (fieldset Legend)
カテゴリなし
種類通常要素
この要素を
使用できる
状態		fieldset要素の最初の子要素として。
許可されて
いる内容		フレージングコンテンツ、オプションで見出しコンテンツと混合。
属性グローバル属性のみ
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		対応する役割なし
DOM
インター
フェイス
HTMLLegendElement
  1. [Exposed=Window]
  2. interface HTMLMeterElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. readonly attribute HTMLFormElement? form;
  6. };
レンダリング
フィールドセットと凡例の要素
  1. legend {
  2. padding-inline-start: 2px;
  3. padding-inline-end: 2px;
  4. }
  5. legend[align=left i] {
  6. justify-self: left;
  7. }
  8. legend[align=center i] {
  9. justify-self: center;
  10. }
  11. legend[align=right i] {
  12. justify-self: right;
  13. }

CSS を大雑把に読むと、 フローレイアウトに配置されたときにブロックレベルのボックスを生成します。 要素の前後(左右)の余白を 2px に空けます。 などになります。

参加
コンテキスト		インラインフォーマットコンテキスト
確立
コンテキスト		インラインフォーマットコンテキスト
legend要素は、凡例(キャプション)を表します。

legend要素の親 fieldset要素の残りのコンテンツ(存在する場合)の凡例(キャプション)を表します。

  1. <div>
  2. <fieldset>
  3. <legend>
  4. <h3>Heading</h3>
  5. </legend>
  6. <div>text</div>
  7. </fieldset>
  8. </div>

Heading
text
参照元
  1. HTML Living Standard. 4.10.16 The legend element
  2. HTML Living Standard. 15 Rendering 15.3.12 The fieldset and legend elements
  3. HTML 5.2 W3C 勧告. 4.10.16 The legend element
  4. HTML 4.01 Specification W3C 勧告. 17.10 Adding structure to forms: the FIELDSET and LEGEND elements
  5. MDN Web Docs. HTML <legend>:

使用可能な箇所

fieldset要素に
配置できます。

legend要素は、fieldset要素の最初の子要素として配置できます。

  1. <fieldset>
  2. <legend>legend</legend>
  3. <div>text</div>
  4. </fieldset>

fieldset要素の最初の子要素として legend要素を配置できます。

legend
text

配置できるコンテンツ

フレージングコンテンツを
配置できます。

legend要素は、フレージングコンテンツ、オプションで見出しコンテンツと混合して配置できます。

  1. <fieldset>
  2. <legend>
  3. <span>legend</span>
  4. </legend>
  5. <div>text</div>
  6. </fieldset>

legend要素のコンテンツの一部として、フレージングコンテンツである span要素を配置できます。

legend
text
  1. <fieldset>
  2. <legend>
  3. <h3>Heading</h3>
  4. </legend>
  5. <div>text</div>
  6. </fieldset>

legend要素のコンテンツの一部として、見出しコンテンツである h3要素を配置できます。
fieldset要素が区分化起源なので、見出しのレベルは祖先のアウトラインには影響しないのでレベル１(h1 element)から使えます。

Heading
text

属性

グローバル属性のみ、設定できます。

気を付ける点

キャプション

fieldset要素の余白に注意が必要だと思います。表示する幅により legend要素も折り返しが行われ、表示する高さが変わり必要とする領域も変わります。

CSSリセット

  1. legend {
  2. box-sizing: border-box;
  3. color: inherit;
  4. display: table;
  5. max-width: 100%;
  6. padding: 0;
  7. white-space: normal;
  8. }

normalize.css というリセットCSS の一部で、すべてのブラウザでフォントスタイルを変更します。 EdgeおよびIEでのテキストの折り返しを修正します。 IEの fieldset要素からの色の継承を修正します。 パディングを削除して、開発者がすべてのブラウザーで fieldset要素をゼロにしたときに引っ掛からないようにします。。
詳細は理解していないのですが、いろいろとバグ等の対応も含んでいる様なので、利用する事をお勧めします。