정의 및 사용 방법
<time> 태그는
기계가 읽을 수 있는 표준화된 데이터 형태의 날짜나 시간임을 나타냅니다.
이 태그로 날짜나 시간에 관한 콘텐츠를 기계가 읽을 수 있는 표준 형식으로 명시함으로써, 스크린 리더나 검색엔진 등이 콘텐츠를 더 잘 이해하고 처리하도록 할 수 있습니다.
<time> 태그의 콘텐츠에는 다양한 날짜, 시각, 시간대 오프셋, 기간 등 제한된 범위에서만 사용할 수 있습니다.
즉, 날짜나 시간과 관련된 정보만 포함할 수 있습니다.
기본 예제
<time> 태그를 사용할 경우 브라우저에서는 표시될 때 특별히 시각적으로 변화를 주지 않습니다.
기계가 읽을 수 있는 표준화된 데이터 형태의 날짜나 시간
<time> 태그는 기계가 읽을 수 있는 표준화된 데이터 형태의 날짜나 시간으로 작성되어야 합니다.
기계가 읽을 수 있는 표준화된 데이터 형태의 날짜나 시간은 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 값을 사용한 구문입니다.
유효하지 않은 구문
datetime 속성의 사용
<time> 태그는 콘텐츠가 기계가 읽을 수 없는 형식이더라도 datetime 속성을 사용하여 기계가 이해할 수 있는 표준 형식을 지정할 수 있습니다.
datetime 속성의 값으로 유효한 datetime 값 형식을 지정하면 됩니다.
다음의 예제를 통해 살펴보겠습니다.
앞서 살펴본 바와 같이 아래의 구문은 유효하지 않습니다.
하지만, datetime 속성의 값으로 유효한 datetime 값 형식을 지정하면 유효한 구문이 됩니다.
이처럼 datetime 속성으로 기계가 읽을 수 있는 표준화된 데이터 형식의 시간이나 날짜를 지정하면 사람에게 보여주는 텍스트는 자유롭게 쓸 수 있는 유효한 구문이 됩니다.
다양한 예제
브라우저 호환성
| 태그와 속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<time>
|
62 | 18 | 22 | 7 |
datetime
|
62 | 18 | 22 | 7 |
명세서
| 명세서 사양 | |
|---|---|
<time>
|
HTML Standard #the-time-element |