HTML 시맨틱 태그, 시간 데이터를 표준화하는 time 태그와 datetime 속성

HTML 시맨틱 태그 시리즈, 일단은 이번이 마지막 포스트다.

모든 시맨틱 태그를 다 다룬 것은 아니지만, 일단 중요한 것들은 대충 정리한 것 같다.

또 정리할 필요가 있는 시맨틱 태그가 있으면 추가로 글을 쓰겠지만 일단은 마지막 포스트인 것으로..

마지막인 오늘은 시간 데이터를 제공하는 time 태그에 대해 알아보자.

이전 포스트

HTML 시맨틱 태그, 부가 정보의 aside와 하단 영역의 footer 태그

HTML 시맨틱 태그 중 부가 정보를 담당하는 aside 태그와 사이트 하단을 정의하는 footer 태그의 사용법을 알아봅니다. 실제 블로그 스킨을 분석하며 사이드바에 왜 aside를 사용해야 하는지, footer 내부에 들어갈 핵심 정보는 무엇인지 정리했습니다.

time 태그

<time> 태그는 날짜와 시간 정보를 정의할 때 사용된다.

주로 포스트의 발행일이나 댓글이 작성된 시각 등, 시간과 관련된 모든 데이터를 의미 있게 감싸는 역할을 한다.

이 블로그에 사용되고 있는 time 태그를 살펴보자.

포스트를 작성한 시각에 <time>을 사용하고 있는 것이 보인다.

time 태그는 단순히 날짜나 시간을 화면에 보여주는 것을 넘어, 기계(검색 엔진, 캘린더 앱 등)가 이해할 수 있는 표준 형식으로 시간 데이터를 제공하는 역할을 한다.

화면에 "2026년 1월 23일", "3일 전", "어제"라고 적으면 사람은 이해하지만, 컴퓨터는 이것이 정확히 언제인지 계산하기 어렵다.

time 태그는 이 모호함을 해결해 준다.

1. datetime 속성

<time datetime="2025-09-07T17:16:00+09:00">
    9월 07, 2025
</time>

위의 캡처한 이미지에서 사용되고 있던 time 태그다.

<time> 태그에서 가장 중요한 것은 datetime 속성이다.

datetime 속성은 화면에 보이는 글자와 상관없이 컴퓨터가 읽을 표준 데이터를 담는다.

이 속성에는 아무렇게나 날짜를 적으면 안 되고, ISO 8601이라는 국제 표준 형식을 따라야 한다.

<a> 태그에 href 속성이 없으면 어디로도 연결되지 않는 것처럼, 표준 일시(datetime 속성)가 없는 <time> 태그는 기계에게 아무런 정보도 주지 못하는 '빈 껍데기'와 같다.

우리가 시맨틱 태그를 쓰는 핵심 이유가 '컴퓨터와의 소통'인 만큼 time 태그를 쓸 때는 반드시 datetime 속성을 챙겨주는 습관을 가져야 한다.

2. 2025-09-07T17:16:00+09:00 의 의미

• 2025-09-17: 날짜 (연-월-일)
• T: 시간(Time)이 시작됨을 알리는 구분자다.
• 15:25:00: 시:분:초 (오후 3시 25분 0초)
• +09:00: 이 부분의 핵심은 '타임존(시간대) 차이'다.

+09:00에 대해서는 조금 더 설명이 필요할 것 같다.

3. +09:00 의 의미

전 세계는 지역마다 시간이 다르다.

+09:00은 기준점인 UTC(협정 세계시, 영국 기준)보다 9시간이 빠르다는 뜻이다.

대한민국 표준시(KST)가 바로 UTC보다 9시간 빠르기 때문에, 이 값은 "대한민국 시간으로 오후 3시 25분"임을 나타낸다.

사이드바에 내가 이전에 직접 만들었었던 랜덤 포스트에도 <time>이 제대로 적용되어 있고, datetime 속성도 완벽하게 사용하고 있다.

겉모습뿐만 아니라 이렇게 시맨틱 태그까지 신경 쓰느라 시간이 좀 걸렸던 기억이 있다.

관련 포스트

구글 블로그 랜덤 추천 포스트 기능 직접 만들기

랜덤 포스트 기능이 없는 구글 블로그에 직접 위젯을 추가하는 방법을 소개합니다. 디자인과 SEO 등이 최적화된 코드를 통해 랜덤 포스트 위젯을 구현하고, 썸네일 문제에 대한 팁까지 함께 얻어가세요.

이렇게 datetime 속성에 들어가는 값은 사람이 일일이 입력해서 넣는 게 아니라 프로그래밍 언어를 사용해서 동적으로 값이 들어가게 된다.

내가 랜덤 포스트 기능을 구현할 때는 구글 블로그의 서버에 있는 코드를 수정할 수는 없기 때문에 자바스크립트^JavaScript를 이용해서 구현했지만, 어떤 프로그래밍 언어로든 가능하다.

서버에서 페이지를 만들 때 넣느냐(php, Python, Node.js 등), 브라우저에 표시된 후 바꾸느냐(JavaScript)의 차이다.

보통은 서버에서 값을 내려주는 것이 정석이고 권장되는 방식이다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.