html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?

시맨틱 날짜 및 시간 표현을위한 html5 <time></time> 요소 사용

html5 <time></time> 요소는 웹 페이지에서 날짜와 시간을 나타내는 의미 론적 방법을 제공합니다. <time></time> 요소는 시각적 디스플레이를위한 것이 아니라는 것을 이해하는 것이 중요합니다. 주요 목적은 날짜 또는 시간의 의미를 브라우저와 보조 기술 모두에 전달하는 것입니다. 이 의미 론적 의미는 접근성과 SEO에 중요합니다.

기본 구문은 간단합니다 : <time datetime="YYYY-MM-DDTHH:mm:ssZ">Displayed Time</time> . datetime 속성은 필수적입니다. ISO 8601 표준을 준수하는 기계 읽을 수있는 형식으로 날짜와 시간을 보유합니다. 이 속성을 통해 브라우저와 검색 엔진은 정확한 날짜와 시간을 이해할 수 있습니다. <time></time> 태그 내의 텍스트 내용은 사람이 읽을 수있는 버전을 제공합니다. 예를 들어:

<time datetime="2024-03-08T14:30:00-05:00">March 8, 2024, 2:30 PM EST</time>

이 코드 스 니펫은 브라우저 및 검색 엔진에 이벤트가 2024 년 3 월 8 일 오후 2시 30 분에 동부 표준시에 발생했다고 알려줍니다. 표시된 텍스트는 사용자 친화적 인 형식을 제공하는 반면 datetime 속성은 정확하고 명확하지 않은 데이터를 제공합니다. 시간대 오프셋 (이 경우 -05 : 00)의 포함에 유의하십시오. 시간대를 생략하면 모호성과 해석 문제가 발생할 수 있습니다. 날짜만으로는 시간 구성 요소를 생략 할 수 있습니다 : <time datetime="2024-03-08">March 8, 2024</time> .

<time></time> 의 접근성 및 SEO를위한 모범 사례

<time></time> 요소를 사용하면 웹 사이트 접근성 및 SEO가 크게 향상됩니다. 접근성을 위해 스크린 리더 및 기타 보조 기술은 datetime 속성을 해석하여 사용자에게 시각적 기능에 관계없이 날짜 및 시간에 대한 정확한 정보를 제공 할 수 있습니다. 이것은 장애인의 유용성을 향상시킵니다.

SEO의 경우 검색 엔진은 datetime 속성을 사용하여 콘텐츠의 컨텍스트를 이해합니다. 이를 통해 뉴스 기사, 블로그 게시물 또는 이벤트 목록과 같은 시간에 민감한 콘텐츠의 인덱싱 및 순위가 향상됩니다. 검색 엔진은이 정보를 사용하여 날짜와 시간에 따라 결과를 필터링하여 사용자에게보다 관련성있는 검색 결과를 제공 할 수 있습니다.

또한 <time></time> 요소의 일관되고 정확한 사용은 HTML의 전반적인 구조와 의미를 향상시켜 더 나은 검색 엔진 크롤링 성과 궁극적으로 더 나은 SEO에 기여합니다. <time></time> 요소 내에서 날짜와 시간을 동적으로 생성하기 위해 JavaScript를 사용하지 마십시오. datetime 속성은 항상 실제 날짜와 시간을 정확하게 반영해야합니다.

다른 지역 및 선호도에 대한 날짜와 시간을 형식화합니다

<time></time> 요소 자체는 현지화를 직접 처리하지 않습니다. <time></time> 태그 내부의 인간이 읽을 수있는 텍스트는 대상 고객을 위해 적절하게 포맷해야합니다. 예를 들어 브라우저 설정 또는 사용자 프로파일을 통해 결정된 사용자의 로케일 및 환경 설정에 따라 날짜와 시간을 형식화하기 위해 JavaScript 또는 Server 측 코드를 사용해야합니다.

JavaScript의 Intl.DateTimeFormat API는 로케일에 따라 날짜와 시간을 형식화 할 수있는 강력한 기능을 제공합니다. 이를 통해 다른 지역의 사용자에게 친숙하고 이해할 수있는 방식으로 날짜와 시간을 제시 할 수 있습니다. 예를 들어, "2024-03-08"날짜는 미국 영어로 "2024 년 3 월 8 일", 프랑스어로 8 월 2024 년 "또는 일본어로"2024 年 3 月 8 日 "로 표시 될 수 있으며, 기계식 수리에 대한 일관된 datetime 속성을 유지할 수 있습니다.

<time></time> 과 함께 microdata 또는 schema.org를 사용합니다

예, <time></time> 요소를 Microdata ( itemprop 속성 사용) 또는 Schema.org 어휘를 결합하여 구조화 된 데이터 마크 업을 더욱 향상시킬 수 있습니다. 이는 검색 엔진에 대한 추가 컨텍스트를 제공하여 콘텐츠의 가시성 및 이해를 향상시킵니다.

예를 들어, 이벤트의 schema.org 컨텍스트 내에서 다음을 사용할 수 있습니다.

<meta itemprop="startDate" content="2024-03-08T14:30:00-05:00">

<time itemprop="startDate" datetime="2024-03-08T14:30:00-05:00">March 8, 2024, 2:30 PM EST</time>

이는 startDate 속성을 구조화 된 데이터에 추가하여 검색 엔진에 제공된 정보를 풍부하게하여 검색 결과에 더 풍부한 스 니펫을 표시 할 수 있도록합니다. 이 관행은 검색 결과 페이지에 콘텐츠가 눈에 띄게 표시 될 가능성을 높여 웹 사이트의 가시성을 향상시킵니다. 콘텐츠의 맥락에 따라 적절한 Schema.org 어휘를 사용해야합니다.

위 내용은 html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!