정의 및 사용 방법

datetime 속성은
해당 요소에 기계가 읽을 수 있는 표준화된 데이터 형태의 날짜나 시간을 지정합니다.

이 속성은 <del>, <ins>, <time> 등과 같은 태그에서 사용되며,
해당 콘텐츠에 관한 날짜나 시간을 기계가 읽을 수 있는 표준 형식으로 명시함으로써 웹 페이지의 저작자나 스크린 리더, 검색엔진 등이 콘텐츠를 더 잘 이해하고 처리하도록 할 수 있습니다.

기본 예제

HTML 
<p>
  콘서트는 <time datetime="2001-05-15 19:00">어제</time> 열렸습니다.
</p>
브라우저에서 실제 표시된 모습

datetime 속성의 적용 요소와 용도

datetime 속성의 적용 요소와 용도
<del> 삭제된 내용의 날짜나 시간임을 나타냅니다.
<ins> 추가된 내용의 날짜나 시간임을 나타냅니다.
<time> 기계가 읽을 수 있는 표준화된 데이터 형태의 날짜나 시간임을 나타냅니다.

datetime 속성은 반드시 있어야 하는 필수 속성이 아닙니다. 선택적으로 사용하면 됩니다.

사용자가 웹 페이지를 볼 때는 datetime 속성의 값이 표시되지 않습니다. 하지만, datetime 속성을 사용하면 해당 콘텐츠에 관한 날짜나 시간을 기계가 읽을 수 있는 표준 형식으로 명시함으로써 웹페이지의 저작자나 스크린 리더, 검색엔진 등이 콘텐츠를 더 잘 이해하고 처리하도록 할 수 있습니다.

datetime 속성의 값은 기계가 읽을 수 있는 날짜와 시간 값입니다.
아래의 적절한 형식 중 하나여야 합니다.

유효한 datetime 값
유효한 datetime 값 형식예시
유효한 연도 문자열 2011
(연도만을 나타냄)
유효한 연-월 문자열 2011-11
(연도와 월을 나타냄)
유효한 연-월-일 문자열 2011-11-18
(연도, 월, 일을 나타냄)
유효한 월-일 문자열 11-18
(월과 일을 나타냄)
유효한 주(week)차 문자열 2011-W47
(2011년 47주차를 의미)
유효한 시간 문자열 14:54
(시간을 나타냄)
14:54:39
(시간과 분, 초를 나타냄)
14:54:39.929
(시간, 분, 초, 밀리초를 나타냄)
유효한 시간대 오프셋 문자열 Z
(UTC (협정 세계시, Zero offset) – +00:00과 동일)
+0000
(UTC 기준, 시차 없음)
+00:00
(역시 UTC 기준, 시차 없음 (가독성이 더 좋음))
-0800
(UTC보다 8시간 느림 → 미국 태평양 표준시(PST) 등)
-08:00
(위와 같지만 가독성을 위한 콜론 포함 버전)
유효한 현지 날짜 및 시간 문자열 2011-11-18T14:54:39.929
(날짜와 시간을 T로 구분하여 나타냄)
2011-11-18 14:54:39.929
(날짜와 시간을 공백으로 구분하여 나타냄)
유효한 국제 날짜 및 시간 문자열
(UTC(협정 세계시) 시간대를 나타냄)		 2011-11-18T14:54:39.929Z
2011-11-18T14:54:39.929-0400
2011-11-18T14:54:39.929-04:00
2011-11-18 14:54:39.929Z
2011-11-18 14:54:39.929-0400
2011-11-18 14:54:39.929-04:00
유효한 기간 문자열 PT4H18M3S
(시간, 분, 초를 나타내는 기간을 나타냄)

예제

datetime 속성이 <del>, <ins>, <time> 태그에서 어떻게 사용되는지 예제로 확인해 보세요!

<del>에서 datetime 속성 사용 예제

HTML 
<p>
    다음의 기능은 삭제되었습니다.
    <del cite="https://example.com/changelog" datetime="2022-11-14">
        삭제된 기능에 대한 내역.....
    </del>
</p>

이 예제에서는 datetime 속성이 <del> 태그에서 삭제된 내용의 날짜나 시간을 지정합니다.

<ins>에서 datetime 속성 사용 예제

HTML 
<p>
    최신 업데이트에 대한 설명입니다.
    <ins cite="https://example.com/changelog" datetime="2022-11-14">
        최신 업데이트 내역.....
    </ins>
</p>

이 예제에서는 datetime 속성이 <ins> 태그에서 추가된 내용의 날짜나 시간을 지정합니다.

<time>에서 datetime 속성 사용 예제

HTML 
<p>다음 모임은 <time datetime="2023-09-11T14:30:00">내일 오후 2시 30분</time>에 있을 예정입니다.</p>

이 예제에서는 datetime 속성이 <time> 태그의 명시적인 날짜나 시간을 지정합니다.

명세서

datetime 속성의 명세서 사양
명세서 사양
<ins>,<del> datetime HTML Standard
#attributes-common-to-ins-and-del-elements
<time> datetime HTML Standard
#attr-time-datetime

브라우저 호환성

datetime 속성은 각 요소에 대해 다음과 같은 브라우저 호환성이 있습니다.

datetime 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<del> datetime 1 12 1 4
<ins> datetime 1 12 1 4
<time> datetime 62 18 22 7

참고문헌

같이 보기