semantic html 목록·표·폼은 데이터 모양으로 고른다 항목 묶음, 좌표형 비교, 제출 가능한 컨트롤은 각각 브라우저와 보조기술이 기대하는 네이티브 의미가 다르다.
구조 언제 쓰나 반드시 붙일 의미 실패 신호
ul · ol · dl항목 묶음 동등 항목은 ul, 순서가 결과를 바꾸면 ol, 용어와 설명 쌍은 dl. li, dt, dd가 CSS 없이도 항목 관계를 보존한다. div만 반복하면 읽는 도구가 항목 개수와 관계를 알기 어렵다.
table좌표형 데이터 행과 열의 교차점으로 값이 해석되는 비교 데이터. caption, thead, tbody, th scope로 헤더 관계를 고정한다. 레이아웃용 table은 셀 의미가 거짓 정보를 만든다.
form제출 계약 서버나 스크립트로 사용자의 입력 값을 보내야 할 때. action, method, name, submit button이 payload 계약을 만든다. name 없는 input은 보이는 값이어도 제출 데이터가 되지 않는다.
label · fieldset입력 범위 필드 설명, 라디오·체크박스 묶음, 질문 범위를 전달할 때. label for와 input id, fieldset과 legend를 맞춘다. placeholder만 있으면 입력 뒤 설명이 사라지고 클릭 대상도 작다.
validation오류 안내 필수값, 형식, 길이, 도움말을 입력과 연결해야 할 때. required, type, minlength, pattern, aria-describedby를 쓴다. 오류 문구가 필드와 연결되지 않으면 원인을 찾기 어렵다.