[HTML] <dl>, <dt>, <dd> vs <th>, <tr>, <td>

<dl>, <dt>, <dd> vs <th>, <tr>, <td>

제목에 나온 태그 그룹들은 각각 description list와 table을 표현하기 위한 태그들로 서로 성격이 굉장히 유사하여 혼동하기 쉬운 태그들이다.
이 둘을 헷갈리지 않기 위해 항상 염두해 두고 있을 두 가지가 있다.

1. 자료를 table로 만들고 그 위에 header를 얹을 수 있다면 그것은 dl이 아니라 table이다.
2. 반대로 자료를 table로 만들고 그 위에 header를 얹을 수 없다면 그것은 dl이다.

예를 들어,

테이블 형태로 만들고 header를 얹기 위해 고민을 했을 때, 마땅히 얹을 만한 header가 떠오르지 않는다. 즉, header를 얹기에 어색한 자료라는 의미이다. 만약 이것이 dl이었다면

음식

피자

나이

개발하기 좋은 나이

에디터

VS Code

Vim

이런 식으로 각각 연관 있는 요소끼리 묶어두면 따로 놀지 않기 때문에 table에 비하면 더 나은 형태가 갖춰 진다.

다음 예시로,

이러한 테이블에 header를 얹기 위해 고민을 했을 때, 서로의 연관성을 고려했을 때 얹을 만한 header가 바로 떠오른다.

이런 식으로 연관성이 깊은 요소끼리 묶여있다면 table로 표현하기 좋다고 볼 수 있다.