time address และ mark

องค์ประกอบเวลา

<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>

รูปแบบแอตทริบิวต์วันที่และเวลา

<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 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>
  <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>

ข้อมูลติดต่อสำหรับบทความ

<article>
  <h2>HTML Guide</h2>
  <address>
    Written by
    <a href="mailto:jane@example.com" rel="author">Jane Smith</a>
  </address>
  <p>Content...</p>
</article>

สิ่งที่องค์ประกอบข้อมูลติดต่อไม่ได้ใช้สำหรับ

<!-- 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>

องค์ประกอบการเน้นข้อความ

<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 {
  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;
  }
}

การเน้นข้อความแบบต่าง ๆ

การค้นหาและการเน้นข้อความ

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);

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน: เวลา ข้อมูลติดต่อ และการเน้นข้อความ