HTML의 <data> 태그는 화면에 표시되는 콘텐츠에 기계가 읽을 수 있는(machine-readable) 값을 연결할 때 사용하는 요소입니다. 사람 눈에는 일반적인 텍스트로 보이지만, 브라우저·검색 엔진·스크립트 등은 내부적으로 지정된 데이터 값을 활용할 수 있습니다.
기본 문법
<data> 태그의 기본 문법은 다음과 같습니다.
<data value="">...</data>
여기서 value 속성은 해당 콘텐츠의 기계 판독 가능 형태(숫자 코드, 날짜 값 등)를 지정하는 역할을 합니다.
사용 예제
다음은 학교 과목 이름에 고유 번호를 연결하여 <data> 태그를 구현한 예제입니다.
<!DOCTYPE html> <html> <body> <h2>학교에서 다루는 과목</h2> <p>과목 이름에 번호 연결하기:</p> <ul> <li><data value="1000">수학</data></li> <li><data value="1003">과학</data></li> <li><data value="1009">영어</data></li> <li><data value="1030">정치학</data></li> <li><data value="1045">프랑스어</data></li> </ul> </body> </html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
위 예제에서는 각 과목명에 번호를 연결했습니다.
<ul> <li><data value="1000">수학</data></li> <li><data value="1003">과학</data></li> <li><data value="1009">영어</data></li> <li><data value="1030">정치학</data></li> <li><data value="1045">프랑스어</data></li> </ul>
<data> 요소를 사용하면 이처럼 화면에 보이는 텍스트와 별개로, 콘텐츠에 기계가 인식할 수 있는 값을 손쉽게 부여할 수 있습니다.