HTML의 <legend> 태그는 <fieldset> 요소에 캡션(제목)을 지정하는 데 사용됩니다. <fieldset>은 버튼(button), 입력 필드(input), 라디오 버튼(radio) 등 관련된 폼 요소들을 하나의 그룹으로 묶어주는 역할을 하며, 이 그룹의 제목을 화면에 표시해 주는 것이 바로 <legend>입니다.
기본 문법
<legend> 태그의 기본 문법은 다음과 같습니다 −
<fieldset> <legend> 캡션으로 표시할 텍스트 </legend> </fieldset>
참고: <legend> 태그는 반드시 <fieldset> 요소의 첫 번째 자식으로 위치해야 합니다.
예제
이제 <legend> 태그를 실제로 구현한 예제를 살펴보겠습니다 −
<!DOCTYPE html> <html> <body> <h2>Subject-wise rank</h2> <form> <fieldset> <legend>Ranking (caption)</legend> <label for="stinfo">Student:</label> <input type="text" id ="stinfo" value="Steve"><br> <label for="sub">Subject:</label> <input type="text" value="Science"><br> <label for="rank">Rank:</label> <input type="number" value="1"><br> <label for="marks">Marks:</label> <input type="number" value="98"><br> </fieldset> </form> </body> </html>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
위 예제에서는 <fieldset> 내부에 <legend> 요소를 배치하여 그룹의 캡션을 설정했습니다 −
<fieldset> <legend>Ranking (caption)</legend> …폼 요소들… </fieldset>
또한 <fieldset>은 <form> 내부에서 여러 폼 요소들을 하나의 그룹으로 묶어주는 역할을 합니다 −
<form> <fieldset> <legend>Ranking (caption)</legend> …폼 요소들… </fieldset> </form>
정리
<legend> 태그는 단순히 시각적인 제목만 제공하는 것이 아니라, 스크린 리더 사용자에게도 그룹의 의미를 전달하는 접근성 측면에서 중요한 역할을 합니다. 따라서 복잡한 폼을 설계할 때 관련 입력 요소들을 <fieldset>으로 묶고 각 그룹에 적절한 <legend> 제목을 붙이는 습관을 들이면 사용자 경험과 웹 접근성을 모두 향상시킬 수 있습니다.