HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？

セマンティックの日付と時刻表現にHTML5 <time></time>要素を使用する

HTML5 <time></time>要素は、Webページで日付と時間を表す意味的な方法を提供します。 <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>省略できます。

アクセシビリティとSEOのベストプラクティス<time></time>

<time></time>要素を正しく使用すると、WebサイトのアクセシビリティとSEOが大幅に向上します。アクセシビリティのために、 datetimeリーダーやその他の支援技術は、視覚的能力に関係なく、日付と時間に関する正確な情報をユーザーに提供することができます。これにより、障害のある人の使いやすさが向上します。

SEOの場合、検索エンジンはdatetime属性を使用して、コンテンツのコンテキストを理解します。これにより、ニュース記事、ブログ投稿、イベントリストなど、時間に敏感なコンテンツのインデックス作成とランキングを改善できます。検索エンジンは、この情報を使用して日付と時刻に基づいて結果をフィルタリングし、ユーザーにより関連する検索結果を提供できます。

さらに、 <time></time>要素の一貫した正確な使用により、HTMLの全体的な構造とセマンティクスが改善され、検索エンジンのcrawl性と最終的にはSEOが改善されます。 JavaScriptを使用して、 <time></time>要素内で日付と時間を動的に生成しないでください。 datetime属性は常に存在し、実際の日付と時刻を正確に反映する必要があります。

さまざまな場所と好みの日付と時間をフォーマットします

<time></time>要素自体は、ローカリゼーションを直接処理しません。 <time></time>タグ内の人間の読み取り可能なテキストは、ターゲットオーディエンスに適切にフォーマットする必要があります。これには、多くの場合、JavaScriptまたはサーバー側のコードを使用して、ユーザーのロケールと設定に従って日付と時刻をフォーマットし、たとえばブラウザー設定やユーザープロファイルを介して決定されます。

JavaScriptのIntl.DateTimeFormat APIは、Localeに従って日付と時間をフォーマットするための堅牢な機能を提供します。これにより、さまざまな地域のユーザーに馴染みのある方法で日付と時刻を提示することができます。たとえば、日付「2024-03-08」は、米国英語で「2024年3月8日」、フランス語の8 Mars 2024」、または日本語では「2024年の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 中国語 Web サイトの他の関連記事を参照してください。