HTML datetime 속성 – 올바른 이해와 사용 방법

`datetime` 속성의 정의 및 사용법

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` (시간, 분, 초, 밀리초를 나타냄)
유효한 현지 날짜 및 시간 문자열	`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 (시간, 분, 초를 나타내는 기간을 나타냄)

HTML - <del> 요소

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

위의 예제에서는 datetime 속성이 <del> 요소에서 삭제된 내용의 시간 및 날짜를 나타냅니다.

HTML - <ins> 요소

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

위의 예제에서는 datetime 속성이 <ins> 요소에서 추가된 내용의 시간 및 날짜를 나타냅니다.

위의 예제에서는 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	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<del>`	1	12	1	4
`<ins>`	1	12	1	4
`<time>`	62	18	22	7