HTML <time> 태그란?
HTML의 <time> 요소는 웹페이지에서 특정 날짜나 시간을 의미 있게 표시할 때 사용하는 태그입니다. 이 태그는 HTML5에서 새롭게 도입되었으며, 사람이 읽을 수 있는 형태로 시간을 보여주면서도 기계(검색 엔진, 브라우저)가 정확한 날짜·시간 값을 해석할 수 있도록 도와줍니다.
<time> 태그를 활용하면 일정 안내, 게시글 작성일, 이벤트 시작 시간 등을 구조화된 데이터로 마크업할 수 있어 SEO 측면에서도 유리합니다.
주요 속성
- datetime: 실제로 전달할 날짜 및 시간 값을 지정합니다. 화면에는 다른 텍스트가 표시되더라도, 이 속성값은 기계가 인식하는 표준 형식으로 사용됩니다.
사용 예제
다음은 HTML에서 <time> 태그를 구현하는 예제입니다.
<!DOCTYPE html> <html> <body> <h2>Schedule</h2> <p>Exams begins from next <time datetime="06-15">Saturday</time>.</p> <p>Exam begins at <time>09:00</time> in the morning.</p> </body> </html>
실행 결과
코드 설명
위 예제에서는 <time> 요소를 활용해 날짜와 시간을 각각 설정했습니다.
먼저, datetime 속성을 사용해 날짜 정보를 지정하는 방법입니다. 화면에는 'Saturday'라는 텍스트가 보이지만, 내부적으로는 '06-15'라는 날짜 값이 전달됩니다.
<p>Exams begins from next <time datetime="06-15">Saturday</time>.</p>
다음은 시간만 표시하는 경우입니다. 이처럼 datetime 속성 없이 <time> 태그만 사용해도 유효한 시간 형식이라면 정상적으로 동작합니다.
<p>Exam begins at <time>09:00</time> in the morning.</p>
정리
<time> 태그는 단순히 텍스트를 감싸는 것을 넘어, 날짜와 시간에 의미를 부여하는 시맨틱(Semantic) 요소입니다. datetime 속성과 함께 사용하면 검색 엔진과 브라우저가 시간 정보를 더 정확하게 이해할 수 있습니다.