HTML에서 폼 요소들을 그룹화할 때 사용하는 <fieldset> 태그에 제목(캡션)을 추가하려면 <legend> 태그를 사용하면 됩니다. <legend> 태그는 반드시 <fieldset> 태그 내부의 첫 번째 자식 요소로 작성해야 하며, 이렇게 하면 그룹 테두리 선 위에 제목이 자연스럽게 표시됩니다.
legend 태그의 주요 속성
<legend> 태그는 다음과 같은 속성을 지원합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| align | top bottom left right | 지원 중단(Deprecated) – 콘텐츠의 정렬 위치를 지정합니다. 현재는 CSS를 사용해 정렬하는 것이 권장됩니다. |
사용 예제
아래 코드를 실행하면 <fieldset> 안에 <legend> 태그로 제목이 포함된 폼을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML legend 태그</title> </head> <body> <form> <fieldset> <legend>학생 정보</legend> 학생 이름: <input type = "text"><br /> MBA 과목: <input type = "text"><br /> </fieldset> </form> </body> </html>
참고 사항
<legend> 태그는 단순히 시각적인 제목을 넘어 접근성 측면에서도 중요한 역할을 합니다. 스크린 리더는 <fieldset>과 <legend>를 함께 읽어주기 때문에, 폼 컨트롤들이 어떤 그룹에 속해 있는지 사용자에게 명확한 맥락을 제공할 수 있습니다. 따라서 라디오 버튼이나 체크박스처럼 여러 개의 관련 입력 항목을 묶을 때 <fieldset>과 <legend> 조합을 활용하는 것이 좋습니다.
또한 제목의 정렬이나 스타일을 변경하고 싶다면, 더 이상 지원되지 않는 align 속성 대신 CSS의 float, margin, padding 등을 활용하는 것이 표준적이고 안정적인 방법입니다.