<h1 id="%EF%BC%91%EF%BC%8E%3Clegend%3E%E3%82%BF%E3%82%B0%E3%81%A8%E3%81%AF" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%91%EF%BC%8E%3Clegend%3E%E3%82%BF%E3%82%B0%E3%81%A8%E3%81%AF" aria-hidden="true"></a> １．&lt;legend&gt;タグとは</h1>
入力フォームを纏めた<code>&lt;fieldset&gt;</code>タグにタイトルや説明文を表示することができます。 
通常、<code>&lt;fieldset&gt;</code>タグと一緒に使用します。 
メンテナンスやSEO対策に有効です。
<h1 id="%EF%BC%92%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0" data-line="5" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%92%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0" aria-hidden="true"></a> ２．サンプルプログラム</h1>
<div class="code-block-container">
<div class="code-block-filename-container">Sample.html</div>
<pre class="language-html"><code class="language-html code-line" data-line="6">&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;fieldset&gt;
 &lt;legend&gt;性別&lt;/legend&gt;
 &lt;label&gt;&lt;input type="radio" name="sex" value="man"&gt;男&lt;/label&gt;&lt;/br&gt;
 &lt;label&gt;&lt;input type="radio" name="sex" value="woman"&gt;女&lt;/label&gt;
 &lt;/fieldset&gt;
 &lt;/body&gt;
</code></pre>
</div>表示画面 
<img src="https://storage.googleapis.com/zenn-user-upload/f712a7362c9b-20230115.png" loading="lazy" class="md-img">
<h1 id="%EF%BC%93%EF%BC%8E%E5%8F%82%E8%80%83" data-line="24" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%93%EF%BC%8E%E5%8F%82%E8%80%83" aria-hidden="true"></a> ３．参考</h1>
・<a href="https://segakuin.com/html/legend.html" target="_blank" rel="nofollow noopener noreferrer">HTML &lt;legend&gt; element</a> 
・<a href="https://magazine.techacademy.jp/magazine/30689" target="_blank" rel="nofollow noopener noreferrer">HTMLでlegendタグの使い方を現役デザイナーが解説【初心者向け】</a>

【HTML】<legend>タグとは（備忘録）

Discussion