HTML5에서 날짜와 시간을 추가하는 방법
HTML5에서 문서에 날짜와 시간을 추가하려면 <time> 태그를 사용하면 됩니다. HTML의 <time> 태그는 사람이 읽기 쉬운(human-readable) 형식으로 날짜와 시간을 화면에 표시하는 역할을 하며, 콘텐츠에 시간 정보라는 의미를 부여하는 시맨틱(semantic) 요소이기도 합니다.
또한 이 태그는 검색 엔진이나 브라우저처럼 기계가 정확한 시간 정보를 해석할 수 있도록 돕는 속성도 함께 제공합니다.
time 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| datetime | datetime | 기계가 읽을 수 있는(machine-readable) 형식의 날짜 및 시간 값을 지정합니다. |
예제
다음 코드를 실행하면 HTML5에서 <time> 태그로 날짜와 시간을 표시하는 방법을 직접 확인할 수 있습니다.
<!Doctype html> <html> <head> <title>HTML time 태그</title> </head> <body> <p>현재 시간은 <time>오후 8시 30분</time>입니다</p> </body> </html>
위 예제를 브라우저에서 실행하면 “현재 시간은 오후 8시 30분입니다”라는 문장이 출력되며, <time> 태그로 감싼 부분이 시간 정보임을 의미론적으로 나타냅니다.
datetime 속성 활용하기
표시되는 텍스트와 별개로 기계가 판독할 수 있는 정확한 값을 전달하고 싶다면 datetime 속성을 함께 사용하는 것이 좋습니다.
<p>현재 시간은 <time datetime="20:30">오후 8시 30분</time>입니다</p>
이렇게 작성하면 사용자에게는 “오후 8시 30분”이라는 자연스러운 문구가 보이고, 검색 엔진과 브라우저에는 20:30이라는 표준화된 시간 값이 전달되어 웹 접근성과 SEO 모두에 유리합니다.