정의 및 사용 방법

<data> 태그는
기계가 읽을 수 있는 형식의 value 속성 값이 있는 콘텐츠를 나타냅니다.

이 태그는 콘텐츠가 기계가 읽을 수 있는 형식의 데이터가 포함되어 있다는 것을 명시적인 의미로 제공하기 위해 사용됩니다.

특징

  • value 속성이 반드시 존재해야 합니다.
  • value 속성 값은 기계가 읽을 수 있는 형식으로 요소의 콘텐츠를 표현한 것이어야 합니다.
  • value 속성 값이 날짜 또는 시간과 관련된 경우, 의미론적 측면에서 부합하는 <time> 태그를 대신 사용할 수 있습니다.

기본 예제

HTML 
<table>
    <caption>상품 재고 상태</caption>
    <thead>
        <tr>
            <th>상품명</th>
            <th>재고 상태</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>고급 블렌딩 커피</td>
            <td><data value="250">매우 많음</data></td> 
        </tr>
        <tr>
            <td>콜롬비아 싱글 오리진</td>
            <td><data value="6">부족</data></td> 
        </tr>
        <tr>
            <td>브라질 세하도</td>
            <td><data value="52">보통</data></td> 
        </tr>
    </tbody>
</table>
브라우저에서 실제 표시된 모습

<data> 태그를 사용할 경우 브라우저에서는 표시될 때 특별히 시각적으로 변화를 주지 않습니다.

관련 속성

<data> 태그는 모든 글로벌 속성을 사용할 수 있습니다.
또한 이 태그를 위한 value 속성이 있습니다.

value

필수 속성입니다. 반드시 이 속성에 기계가 읽을 수 있는 형식의 값이 지정되어 있어야 합니다.

기계가 읽을 수 있는 형식

<data> 태그의 value 속성은 화면에 표시되는 콘텐츠와 같은 의미를 갖는 객관적이면서 정형화된 값을 제공해야 합니다.
즉, 사람이 보는 텍스트와 동일한 정보를 프로그램(예: 검색 엔진이나 스크린 리더 등)이나 스크립트가 바로 식별할 수 있는 형태로 나타냅니다.

  • 주관적(예: 작음, 보통)이지 않고 객관적인(예: 99, SKU-12345) 문자열이나 수치를 사용해야 합니다.
  • 예들 들면, 상품 재고 관리 단위(SKU), 내부 데이터베이스 ID, 회원 등급 코드 등 사람이 읽는 이름(예: "작은 마요네즈") 대신 사용되는 고유하고 불변적인 코드가 해당됩니다.
스크립트와 함께 사용할 경우

<data> 태그는 페이지의 스크립트와 함께 사용할 수도 있습니다.
스크립트에 사람이 읽을 수 있는 값과 함께 저장할 데이터 값이 있는 경우입니다. 이 경우, value 속성에 사용할 형식은 스크립트의 필요에 따라 달라집니다. data-* 속성을 사용하는 것도 유용할 수 있습니다.

구조화된 데이터(structured data)와의 결합 시

Google, Microsoft(Bing), Yahoo, Yandex 등 주요 검색 엔진은 웹 콘텐츠를 명확하게 이해하고 리치 스니펫(Rich Snippets) 같은 향상된 검색 결과를 제공하기 위해 Schema.org라는 공통된 어휘집을 사용합니다. 여기에는 명세서에서도 이미 표준화(정의)한 microformats 또는 microdata 속성을 사용하기 때문에 HTML에 마크업하면 검색 엔진은 페이지의 콘텐츠를 파악하기가 쉬워집니다. 이렇게 HTML에 추가하는 데이터를 '구조화된 데이터'라고 말합니다.

<data> 태그에 구조화된 데이터와의 결합하는 경우 value 속성에 사용되는 형식은 사용하는 구조화된 데이터(단, 명세서에서 정의된 데이터로만)에 따라 결정됩니다.

활용 예제

다음 예제는 <data> 태그를 사용하여 표의 각 데이터에 기계가 읽을 수 있는 값을 제공하고, 각각의 <data>에 지정한 value 속성의 값을 활용해 페이지의 스크립트가 각 열을 정렬할 수 있는 메커니즘을 구현하는 방법을 보여줍니다.

HTML 
<script src="sortable.js"></script>
<table class="sortable">
    <caption>상품 재고 상태</caption>
    <thead>
        <tr>
            <th>상품명</th>
            <th>재고 상태</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>고급 블렌딩 커피</td>
            <td><data value="250">매우 많음</data></td> 
        </tr>
        <tr>
            <td>콜롬비아 싱글 오리진</td>
            <td><data value="6">부족</data></td> 
        </tr>
        <tr>
            <td>브라질 세하도</td>
            <td><data value="52">보통</data></td> 
        </tr>
    </tbody>
</table>

기술적인 문법 요약

hgroup 태그의 기술적인 문법 요약
허용되는 부모 요소 구문 콘텐츠를 허용하는 모든 요소
허용되는 콘텐츠 구문 콘텐츠
암시적인 role 속성 값 generic
허용된 role 속성 값 모두(Any)

브라우저 호환성

data 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<data> 62 14 22 10

명세서

data 태그의 명세서 사양
명세서 사양
<data> HTML
#the-data-element

같이 보기