HTML에서 사람이 읽을 수 있는(human-readable) 날짜와 시간을 화면에 표시하려면 <time> 태그를 사용합니다. 이 태그는 문서 내의 특정 시점(날짜, 시간 또는 둘 다)을 의미론적으로 마크업하여, 사용자에게는 읽기 쉬운 형태로 보여주고 검색 엔진이나 브라우저 같은 기계에는 정확한 데이터를 전달할 수 있습니다.
<time> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| datetime | datetime | 기계가 판독할 수 있는(machine-readable) 날짜 및 시간 값을 지정합니다. 예: 2024-05-01T18:16 |
사용 예시
다음 코드를 실행하면 <time> 태그로 시간을 표시하는 결과를 직접 확인할 수 있습니다.
<!Doctype html> <html> <head> <title>HTML time Tag</title> </head> <body> <p>현재 시간은 <time>오후 6시 16분</time>입니다.</p> </body> </html>
datetime 속성 활용하기
표시되는 텍스트와 실제 데이터가 다를 경우에는 datetime 속성을 함께 사용하는 것이 좋습니다. 아래 예시처럼 화면에는 한국어로 된 날짜를 보여주고, 기계에는 ISO 8601 형식의 값을 전달할 수 있습니다.
<p>게시일: <time datetime="2024-05-01">2024년 5월 1일</time></p>
이렇게 하면 웹 접근성과 SEO(검색 엔진 최적화) 측면에서도 유리하며, 일정 앱이나 검색 엔진이 해당 날짜 정보를 정확하게 인식할 수 있습니다.