HTML, CSS

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

jonbeo 2025. 9. 3. 10:06
반응형

 

 

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

반응형