<time> 태그 – 날짜와 시간을 의미 있게 표현하는 방법

 

 

안녕하세요 😊
HTML5에서는 날짜와 시간을 시맨틱하게 표현할 수 있도록 <time> 태그를 제공합니다.
이 태그는 브라우저, 검색 엔진, 보조기기(Screen Reader) 등이 날짜/시간 정보를 정확히 인식할 수 있게 합니다.

---

📍 1. 기본 문법

<time datetime="2025-09-03">2025년 9월 03일</time>

• datetime 속성: ISO 8601 형식으로 날짜·시간을 지정 (YYYY-MM-DD, HH:MM:SS)
• 태그 안의 내용: 사용자가 읽기 쉬운 형식으로 표시

---

📍 2. datetime 속성 값 형식

유형	예시	설명
날짜	2025-09-03	연-월-일
시간	05:30	시:분 (24시간제)
날짜+시간	2025-09-03T05:30	연-월-일 + 'T' + 시:분
주	2025-W33	연-주차
월	2025-09	연-월

---

📍 3. 실제 예제

A. 블로그 게시일

 

<p>게시일: <time datetime="2025-09-03">2025년 9월 3일</time></p>

 

검색 엔진이 게시 날짜를 인식하여 검색 결과에 노출 가능

B. 이벤트 일정

<p>이벤트 시작: <time datetime="2025-09-01T10:00">9월 1일 오전 10시</time></p>

C. 시간만 표시

 

<p>점심시간: <time datetime="12:30">오후 12시 30분</time></p>

---

📍 4. <time> 태그의 장점

• 검색 엔진 최적화(SEO): Google, Bing 등이 날짜/시간 정보를 구조화 데이터로 인식
• 접근성 향상: 시각 장애인용 리더기가 날짜·시간을 명확히 읽어줌
• 데이터 처리: JavaScript에서 날짜 데이터를 쉽게 파싱 가능

---

📍 5. JavaScript와 함께 사용

 

<time id="post-date" datetime="2025-09-03"></time>

<script>
  const timeTag = document.getElementById("post-date");
  const date = new Date(timeTag.dateTime);
  timeTag.textContent = date.toLocaleDateString("ko-KR", {
    year: "numeric", month: "long", day: "numeric"
  });
</script>

 

📌 timeTag.dateTime 속성으로 datetime 값을 직접 가져올 수 있음

---

📍 6. 주의사항

• datetime 속성은 표준 형식을 사용해야 함 (ISO 8601)
• 태그 안의 표시 텍스트는 사용자가 읽기 쉽게, datetime 값은 기계가 이해하게 작성

---

✅ 마무리

<time> 태그는 단순한 날짜·시간 표시가 아니라,
검색엔진·보조기기·스크립트가 인식 가능한 의미 있는 데이터를 제공합니다.
특히 블로그, 뉴스, 이벤트 페이지에서는 꼭 활용해보세요.