HTML <time> 태그, 시맨틱 웹을 위한 시간 마크업

현대 웹 개발에서는 시맨틱 마크업이 중요해지고 있습니다. HTML의 <time> 태그는 날짜와 시간을 명확하고 의미 있게 표시하는 데 사용됩니다. 이 글에서는 <time> 태그의 기본 개념부터 다양한 활용 방법까지 다루어 보겠습니다.

<time> 태그란?

<time> 태그는 날짜와 시간을 시맨틱하게 마크업하는 HTML 요소입니다. 이 태그는 기계가 읽을 수 있는 형식으로 날짜와 시간을 제공하여 검색 엔진 최적화(SEO)와 접근성을 높이는 데 도움을 줍니다.

<time> 태그는 datetime 속성을 사용하여 날짜와 시간을 명확히 지정합니다. 예를 들어:

<time datetime="2023-07-04">2023년 7월 4일</time>

위 예제에서는 사람이 읽을 수 있는 형식과 기계가 읽을 수 있는 형식을 동시에 제공합니다.

<time> 태그의 datetime 속성은 다양한 형식을 지원합니다. 예를 들어:

아래 예제는 블로그 게시물의 작성 날짜와 시간을 <time> 태그로 마크업하는 방법을 보여줍니다:

<p>게시일: <time datetime="2023-07-04T14:30">2023년 7월 4일 오후 2:30</time></p>

이렇게 하면 사용자와 검색 엔진 모두 게시 날짜와 시간을 정확히 인식할 수 있습니다.

<time> 태그를 사용하면 검색 엔진이 페이지의 날짜와 시간을 더 잘 이해할 수 있어 SEO에 긍정적인 영향을 미칩니다. 또한, 스크린 리더와 같은 접근성 도구는 datetime 속성을 활용하여 더 나은 사용자 경험을 제공합니다.

<time> 태그는 날짜와 시간을 시맨틱하게 마크업할 수 있는 강력한 도구입니다. 이를 통해 SEO와 접근성을 개선할 수 있으며, 다양한 형식을 지원하여 유연하게 사용할 수 있습니다. 웹 페이지의 품질을 높이기 위해 <time> 태그를 적극 활용해 보세요.