2장 구조화 요소

목록·표·폼 구조 의미 분기표

항목 묶음, 좌표형 데이터, 제출 가능한 컨트롤은 각각 ul/ol/dl, table, form의 네이티브 의미와 브라우저 동작을 요구합니다.

01

ul · ol · dl

동등 항목은 ul, 순서가 결과를 바꾸면 ol, 용어와 설명 쌍은 dl로 묶습니다.

02

caption · th scope

행·열 교차로 값이 해석될 때 caption, thead, tbody, th scope로 셀 관계를 고정합니다.

03

form action · method

서버나 스크립트로 보낼 값은 form, name, type, button submit 관계로 계약을 만듭니다.

04

constraint validation

required, type, minlength, pattern, aria-describedby로 오류 메시지와 입력 설명을 연결합니다.

ul ol dl

li는 항목 단위, dt/dd는 이름-값 단위라 CSS가 꺼져도 관계가 남습니다.

thead tbody

복잡한 표는 caption, scope="col|row", 필요 시 headers/id로 셀 헤더를 추적하게 합니다.

label input

label for와 input id를 맞추고 name을 붙여 클릭 대상과 제출 payload를 동시에 확보합니다.

fieldset legend

radio/checkbox 묶음은 fieldset과 legend로 질문 범위를 스크린리더에 전달합니다.

content shape

단순 나열은 list, 좌표형 비교는 table, 서버로 가는 successful controls는 form으로 구분합니다.

failure modes

레이아웃용 table, name 없는 input, label 없는 필드, placeholder만 있는 설명을 피합니다.

submit contract

회원가입 폼은 action/method, name, label, required, error message 위치가 한 세트입니다.