[HTML] DataSet 속성에 대한 이해

Jay ·2023년 11월 26일

Dataset property?

HTMLElement은 dataset interface의 읽기전용 프로퍼티로 custom data attributes(data-*)을 통해 데이터 접근, 생성을 가능케 한다

HTML5에 Dataset이 등장하기 이전, HTML에 사용자 정의 요소를 집어넣기 위해 id,class,value 등 비표준 속성에 의존해야만 했다.
(value는 특정 태그에서만 사용가능)

이런 문제를 해결하기 위해 Data-* 속성이 등장하였으며, 이를 통해 문서의 의미나 표현에 영향을 끼치지 않고 HTML에 사용자 정의 데이터를 저장할 수 있게 되었다.

Dataset 속성을 통해, HTML 문서의 의미를 훼손하지 않을 뿐만 아니라, 통일된 인터페이스를 사용함으로써 개발자 경험 측면에서도 많은 이점을 가져올 수 있었다.

<div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth>
  Carina Anand
</div>

data-* 형태로 데이터를 정의하면 map 객체와 같이 string entry가 생성되어 접근이 가능해진다.

// O
<time datetime="20:00" aria-valuenow="12:30">12:30</time>
// X
<span data-time="20:00" aria-value="12:30">12:30<span>
  
// <

dataset은 기존에 존재하는 태그 및 aria-* property와 같은 html property의 대체재로 사용하는 것은 권장되지 않는다.

dataset의 value로 string만이 저장가능하다.
물론, string을 JSON 형태로 저장하고 파싱하여 사용 가능하기도 하다.

dataset 속성의 데이터는 검색엔진이 인덱싱 하지 않으므로, 검색 엔진에 노출해야할 내용은 dataset으로 표시하면 안된다.

Jay입니다.