데이터 의미 확인
항목 나열인지, 순서 절차인지, 용어 설명인지, 행렬 데이터인지 먼저 구분한다.
모양은 CSS가 맡고 의미는 HTML이 맡는다목록 선택
순서가 중요하면 ol, 단순 묶음이면 ul, 용어와 설명 쌍이면 dl을 쓴다.
번호가 보인다고 항상 ol은 아니다표 구조화
비교 데이터는 table로 만들고 th, scope, caption으로 헤더 관계를 드러낸다.
레이아웃용 table은 읽기 순서를 망친다폼 연결
label의 for와 input id, name과 value, submit 대상이 맞는지 확인한다.
name이 없으면 제출 데이터에 빠진다실패 흐름 처리
required, pattern, 서버 검증 오류, 에러 메시지 연결을 함께 설계한다.
클라이언트 검증만으로는 보안이 되지 않는다ul/ol
항목 나열
순서가 의미를 바꾸면 ol, 순서가 단순 표시라면 ul을 쓴다.
CSS로 번호를 숨겨도 의미는 남는다
dl
용어와 설명
설정 이름과 값, FAQ 질문과 답처럼 쌍으로 읽힐 때
적합하다.
카드 목록 대용으로 남용하지 않는다
table
행과 열 관계
헤더와 셀의 교차 관계가 핵심일 때 사용한다.
모바일에서는 스크롤과 헤더 유지도 본다
form
사용자 제출
label, name, value, method, action 또는 JS submit 처리를
맞춘다.
키보드 Enter 동작까지 확인한다