time address mark
日付、連絡先情報、強調するテキストをセマンティックにマークアップします
「time address mark」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
time要素
<time>要素は、日付や時刻を機械可読な形式でマークアップします：
<p>Published on <time datetime="2025-01-15">January 15, 2025</time>.</p>
<p>The meeting is at <time datetime="14:30">2:30 PM</time>.</p>
<p>The event runs from
<time datetime="2025-01-15">Jan 15</time> to
<time datetime="2025-01-20">Jan 20</time>.
</p>datetime属性の形式
datetime属性には、有効な日付または時刻の文字列を指定する必要があります：
<time datetime="2025-01-15">January 15</time> <!-- date -->
<time datetime="14:30">2:30 PM</time> <!-- time -->
<time datetime="2025-01-15T14:30">Meeting time</time> <!-- date+time -->
<time datetime="2025-W03">Week 3, 2025</time> <!-- week -->
<time datetime="2025-01">January 2025</time> <!-- year-month -->
<time datetime="P3D">3 days</time> <!-- duration -->timeが重要な理由
<time>を使用するメリット：
- 検索エンジンがコンテンツの日付を理解できます
- ブラウザーやアプリがカレンダーに追加できます
- スクリーンリーダーが日付を正しく読み上げられます
- JavaScriptでdatetime属性を解析し、表示形式を整えられます
動的な日付の書式設定
JavaScriptを使って、datetime属性の日付を書式設定します：
<time id="event-time" datetime="2025-06-15T10:00">June 15, 2025</time>
<script>
const el = document.getElementById('event-time');
const date = new Date(el.getAttribute('datetime'));
el.textContent = date.toLocaleDateString('en-US', {
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
});
// Output: Sunday, June 15, 2025
</script>address要素
<address>要素は、直近の<article>または<body>に関する連絡先情報をマークアップします：
<address>
<p>Jane Smith</p>
<p><a href="mailto:jane@example.com">jane@example.com</a></p>
<p><a href="tel:+15555550100">(555) 555-0100</a></p>
<p>123 Main Street, New York, NY 10001</p>
</address>記事の連絡先に使用するaddress
article内でaddressを使用して、著者の連絡先情報をマークアップします：
<article>
<h2>HTML Guide</h2>
<address>
Written by
<a href="mailto:jane@example.com" rel="author">Jane Smith</a>
</address>
<p>Content...</p>
</article>addressを使用しない情報
<address>要素は連絡先情報専用です。任意の住所を表すためのものではありません：
<!-- BAD: address for a location with no contact info -->
<address>
Empire State Building, New York
</address>
<!-- Better: use p or a structured element -->
<p>Empire State Building, New York</p>
<!-- GOOD: address for contact information -->
<address>
<a href="mailto:support@example.com">Contact Support</a>
</address>mark要素
<mark>要素は、その文脈で関連性のあるテキストを強調表示します：
<p>
Search results for "HTML5":
The <mark>HTML5</mark> specification was finalized in 2014.
<mark>HTML5</mark> introduced many new semantic elements.
</p>
<!-- Default styling: yellow background -->
<!-- Semantic use: highlighting search terms, annotations -->
<!-- NOT for general styling — use span for that -->markのスタイル設定
markのデフォルトの黄色いハイライトをカスタマイズします：
mark {
background-color: #fef08a;
color: inherit; /* keep text color from parent */
padding: 0.1em 0.2em;
border-radius: 3px;
}
/* High contrast mode: */
@media (forced-colors: active) {
mark {
background-color: Highlight;
color: HighlightText;
}
}markとstrongとemの違い
ハイライト用の要素を使い分けます：
<mark>— 現在の文脈で関連性があるため強調する（検索結果など）<strong>— 常に重要なコンテンツ<em>— 意味を変える強勢による強調<span>— 意味を持たない、純粋に視覚的なスタイル設定
検索とハイライト表示
実践的な実装として、検索結果内の検索語をハイライト表示します：
function highlightText(text, query) {
if (!query) return text;
const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(`(${escaped})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}
// document.getElementById('result').innerHTML =
// highlightText(result.title, searchQuery);確認問題
機械可読なdatetime属性は何に使用しますか？
まとめ：time、address、mark
インラインのセマンティック要素：
<time datetime="">— 機械可読な日付と時刻<address>— 直近のarticleまたはページの連絡先情報<mark>— 文脈上関連性のあるハイライト（検索語など）datetimeはISO 8601形式を使用します：YYYY-MM-DD、HH:MM- markのデフォルトは黄色の背景です。CSSでカスタマイズできます
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「time address mark」レッスンは無料ですか？
はい。「time address mark」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「time address mark」で何を学びますか？
日付、連絡先情報、強調するテキストをセマンティックにマークアップします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「time address mark」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- header nav main footer
- article要素と自己完結型コンテンツ
- section要素とdivの違い
- time address mark