목록과 표는 정보의 관계에 맞게 선택한다
항목을 나열하면 목록, 행과 열로 비교하면 표를 사용한다. 먼저 정보의 관계를 정하면 태그 선택이 단순해진다.
| 정보 관계 | 맞는 태그 | 읽히는 방식 | 실수 신호 |
|---|---|---|---|
| 순서 없는 항목 | ul > li | 같은 수준의 묶음 | 문장마다 div 나열 |
| 순서 있는 절차 | ol > li | 1단계부터 차례로 수행 | 번호를 손으로 입력 |
| 용어와 설명 | dl, dt, dd | 키와 설명의 쌍 | 두 열 표처럼 억지 사용 |
| 행열 비교 | table, th, td | 열 제목과 값의 대응 | 목록을 표처럼 꾸밈 |
| 레이아웃 | CSS grid/flex | 배치만 담당 | table로 화면 배치 |
표는 “보기 좋게 열을 맞추는 도구”가 아니라 행과 열의 의미 관계가 있을 때 쓰는 태그다.