HTML5에서 추가된 유용한 태그 <time>

이 포스트는 HTML5에서 추가된 <time> … </time> 태그에 관한 내용입니다.

<time> 태그는 ‘HTML 문서에는 의미적인 기능을 부여한다’는 W3C의 기조를 반영하기 위해 HTML5에서 추가된 태그 중 하나입니다. 이 태그의 용도는 문서 내용 안에 어떤 날짜나 시간을 나타내는 표현이 있을 때 그 부분에 사용하여 알맞은 날짜나 시간을 컴퓨터가 인식할 수 있게 의미적으로 나타내는 데 사용합니다.

이 태그의 사용법은 <time datetime="날짜/시간">날짜/시간 표현</time> 식으로 사용합니다. 예를 들면 다음과 같습니다.

<p>조선총독부 건물은 제50주년 광복절인
	<time datetime="1995-08-15">1995년 8월 15일</time>에 해체되었다.</p>

이는 다음과 같이 표시됩니다.

특별히 CSS를 지정하지 않는다면 눈으로 보기에는 특별한 표시가 되어 있지 않지만 이 예제에서 <time> 태그로 둘러싼 ‘1995년 8월 15일’ 부분은 datetime 속성값이 ‘1995-08-15’로 되어 있어 1995년 8월 15일이라는 정보가 붙게 됩니다.

이 태그는 다음과 같이 쓸 수도 있습니다.

<time datetime="2011">2011년</time>
<time datetime="2011-12">2011년 12월</time>
<time datetime="2011-12-25">2011년 12월 25일</time>
<time datetime="12-25">12월 25일 (성탄절)</time>
<time datetime="2011-W51">2011년 51째 주</time>

위의 예제는 날짜만 표시한 예입니다. 1번 줄은 연도만 표시, 2번 줄은 연도와 월만 표시, 3번 줄은 연월일 모두 표시, 4번 줄은 월일만 표시, 5번 줄은 연도의 n째 주로 표시한 예입니다.

<time datetime="13:00">오후 1시</time>
<time datetime="13:00+09:00">오후 1시 (한국시각)</time>
<time datetime="20:00-08:00">오후 8시 (캘리포니아 현지시각)</time>

위의 예제는 시간만 표시한 예입니다. 1번 줄은 시간대를 표시하지 않고 그냥 시간만 표시, 2번 줄과 3번 줄은 시간대와 함께 표시한 예입니다. 시간대의 경우 + 혹은 – 다음에 표시하며 협정 세계시(UTC)를 기준으로 합니다. 예를 들어 한국시각의 경우 협정 세계시보다 9시간 빠르므로(UTC+9) +09:00으로 지정합니다.

<time datetime="2011-12-25T13:00">2011년 12월 25일 오후 1시</time>
<time datetime="2011-12-25 13:00">2011년 12월 25일 오후 1시</time>
<time datetime="2011-12-25 13:30:30">2011년 12월 25일 오후 1시 30분 30초</time>

위의 예제는 날짜와 시간을 함께 표시한 예입니다. 날짜와 시간 사이에는 ‘T’를 쓰거나 한 칸 띄워서 씁니다.

<time datetime="P7D">일주일간</time>
<time datetime="PT12H">12시간 동안</time>

위의 예제는 P를 앞에 써서 기간을 표시한 예입니다.

이와 같이 HTML5에서는 날짜와 시간을 의미적으로 표시할 수 있습니다.