datetime
속성의 정의 및 사용법
datetime
속성은
해당 요소와 관련된 시간 및 날짜를 나타냅니다.
<p>
콘서트는 <time datetime="2001-05-15 19:00">5월 15일</time>에 열렸습니다.
</p>
콘서트는 에 열렸습니다.
datetime
속성의 적용 요소와 용도
datetime
속성은 반드시 있어야 하는 필수 속성이 아닙니다. 선택적으로 사용하면 됩니다.
사용자가 웹 페이지를 볼 때는 datetime
속성의 값이 표시되지 않습니다. 하지만, datetime
속성을 사용하면 브라우저나 검색 엔진은 날짜와 시간 데이터를 이해하고, 더 유용한 기능을 제공할 수 있습니다.
예를 들어, 시각 장애인을 위한 스크린 리더와 같은 웹 접근성 향상을 위한 보조 기술에 활용될 수 있으며, 검색 엔진은 이 날짜와 시간에 대한 문서를 더 잘 이해할 수 있습니다.
datetime
속성의 유효한 값
datetime
속성의 값은 기계가 읽을 수 있는 날짜와 시간 값입니다.
아래의 적절한 형식 중 하나여야 합니다.
다음은 MDN에서 제공하고 있는 유효한 datetime 값을 표로 정리한 것입니다.
유효한 datetime 값 형식 | 예시 |
---|---|
유효한 연도 문자열 | 2011
(연도만을 나타냄) |
유효한 연-월 문자열 | 2011-11
(연도와 월을 나타냄) |
유효한 연-월-일 문자열 | 2011-11-18
(연도, 월, 일을 나타냄) |
유효한 월-일 문자열 | 11-18
(월과 일을 나타냄) |
유효한 주(week)차 문자열 | 2011-W47
(2011년 47주차를 의미) |
유효한 시간 문자열 | 14:54
(시간을 나타냄) 14:54:39
(시간과 분, 초를 나타냄) 14:54:39.929
(시간, 분, 초, 밀리초를 나타냄) |
유효한 현지 날짜 및 시간 문자열 | 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
속성의 사용 예시
<p>
다음의 기능은 삭제되었습니다.
<del cite="https://example.com/changelog" datetime="2022-11-14">
삭제된 기능에 대한 내역.....
</del>
</p>
위의 예제에서는 datetime
속성이 <del>
요소에서 삭제된 내용의 시간 및 날짜를 나타냅니다.
<p>
최신 업데이트에 대한 설명입니다.
<ins cite="https://example.com/changelog" datetime="2022-11-14">
최신 업데이트 내역.....
</ins>
</p>
위의 예제에서는 datetime
속성이 <ins>
요소에서 추가된 내용의 시간 및 날짜를 나타냅니다.
<p>다음 모임은 <time datetime="2023-09-11T14:30:00">2023년 9월 11일 오후 2시 30분</time>에 있을 예정입니다.</p>
위의 예제에서는 datetime
속성이 <time>
요소에서 날짜와 시간 데이터를 기계가 읽을 수 있는 형태로 명시합니다.
명세서
명세서 사양 | |
---|---|
<ins>,<del> datetime
|
HTML Standard #attributes-common-to-ins-and-del-elements |
<time> datetime
|
HTML Standard #attr-time-datetime |
브라우저 호환성
datetime
속성은 각 요소에 대해 다음과 같은 브라우저 지원을 제공합니다.
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<del>
|
1 | 12 | 1 | 4 |
<ins>
|
1 | 12 | 1 | 4 |
<time>
|
62 | 18 | 22 | 7 |