datetime 속성이란?
HTML의 <time> 요소에서 사용되는 datetime 속성은 화면에 보이는 텍스트와 별개로, 브라우저나 검색 엔진 같은 기계가 해석할 수 있는 형식으로 날짜와 시간을 지정하는 데 사용됩니다. 사용자에게는 자연스러운 문장이 보이지만, 내부적으로는 정확한 날짜·시간 정보가 전달되므로 SEO와 데이터 처리 측면에서 유용합니다.
기본 문법
<time datetime="YYYY-MM-DDThh:mm:ssTZD">
위 형식에서 각 구성 요소는 다음과 같은 의미를 가집니다.
- YYYY – 연도
- MM – 월
- DD – 일(day of month)
- hh – 시간
- mm – 분
- ss – 초
- TZD – 시간대 표시자(Time Zone Designator)
기간(Duration) 표기법 – PTDHMS
특정 날짜가 아닌 '기간'을 나타내고 싶다면 다음 형식을 활용할 수 있습니다.
- P – "Period(기간)"를 나타내는 접두사
- D – 일(Days)
- H – 시간(Hours)
- M – 분(Minutes)
- S – 초(Seconds)
예를 들어 <time datetime="P2DT3H">처럼 작성하면 '2일 3시간'이라는 기간을 기계가 이해할 수 있는 형태로 전달합니다.
예제 코드
이제 <time> 요소의 datetime 속성을 실제로 적용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Exam Results</h2>
<p><s>Result would be announced on 6th June.</s></p>
<p>New date for results is next <time datetime="06-15">Saturday</time>.</p>
</body>
</html>위 예제에서는 시험 결과 발표일이 변경된 상황을 표현했습니다. 기존 안내 문장은 <s> 태그로 취소선을 표시하고, 새로운 발표일인 '토요일'을 <time> 요소로 감싸 datetime 속성에 해당 날짜를 지정했습니다. 이렇게 하면 화면에는 'Saturday'라는 단어만 보이지만, 기계적으로는 정확한 날짜 정보가 전달됩니다.
실행 결과
