Time address dan mark
Tandai tanggal, informasi kontak, dan teks yang disorot secara semantik.
Time address dan mark adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Elemen Waktu
Elemen <time> menandai tanggal dan waktu dalam format yang dapat dibaca mesin:
<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>Format Atribut Tanggal-Waktu
Atribut tanggal-waktu harus berupa string tanggal/waktu yang valid:
<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 -->Mengapa Waktu Penting
Manfaat menggunakan <time>:
- Mesin pencari memahami tanggal konten Anda
- Peramban dan aplikasi dapat menambahkannya ke kalender
- Pembaca layar dapat melafalkan tanggal dengan benar
- JavaScript dapat menguraikan atribut tanggal-waktu untuk pemformatan tampilan
Pemformatan Tanggal Dinamis
Gunakan JavaScript untuk memformat tanggal dari atribut tanggal-waktu:
<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>Elemen Alamat
Elemen <address> menandai informasi kontak untuk <article> atau <body> terdekat:
<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>Alamat untuk Kontak Artikel
Gunakan address di dalam artikel untuk menandai informasi kontak penulis:
<article>
<h2>HTML Guide</h2>
<address>
Written by
<a href="mailto:jane@example.com" rel="author">Jane Smith</a>
</address>
<p>Content...</p>
</article>Alamat Bukan untuk Apa
Elemen <address> hanya untuk informasi kontak, bukan alamat sembarang:
<!-- 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>Elemen Penanda
Elemen <mark> menyoroti teks yang relevan dalam konteksnya:
<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 -->Menata Penanda
Sesuaikan sorotan kuning bawaan penanda:
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;
}
}Penanda vs strong vs em
Memilih antara elemen penyorotan:
<mark>—disorot karena relevan dalam konteks saat ini (hasil pencarian)<strong>—konten penting yang selalu bermakna<em>—penekanan yang mengubah makna<span>—penataan gaya visual murni tanpa semantik
Pencarian dan Penyorotan
Implementasi praktis: soroti istilah pencarian dalam hasil:
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);Pemeriksaan Singkat
Untuk apa atribut tanggal-waktu yang dapat dibaca mesin digunakan?
Ringkasan: Waktu, Alamat, dan Penanda
Elemen sebaris semantik:
<time datetime="">—tanggal dan waktu yang dapat dibaca mesin<address>—informasi kontak untuk artikel atau halaman terdekat<mark>—sorotan yang relevan secara kontekstual (istilah pencarian)datetimemenggunakan format ISO 8601:YYYY-MM-DD,HH:MM- Penanda bawaan: latar belakang kuning; sesuaikan dengan CSS
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Time address dan mark” gratis?
Ya — teks lengkap “Time address dan mark” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Time address dan mark”?
Tandai tanggal, informasi kontak, dan teks yang disorot secara semantik. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Time address dan mark” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- header nav main dan footer
- Elemen article untuk Konten Mandiri
- Elemen section vs div
- Time address dan mark