0Pricing
HTML Academy · Ders

time address ve mark

Tarihleri, iletişim bilgilerini ve vurgulanmış metinleri anlamsal olarak işaretleyin

time address ve mark, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

time Öğesi

<time> öğesi, tarihleri ve saatleri makine tarafından okunabilir bir biçimde işaretler:

<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 Özniteliği Biçimleri

datetime özniteliği, geçerli bir tarih/saat dizesi olmalıdır:

<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 Öğesi Neden Önemlidir

<time> kullanmanın yararları:

  • Arama motorları içeriğinizin tarihini anlar
  • Tarayıcılar ve uygulamalar tarihi takvime ekleyebilir
  • Ekran okuyucular tarihleri doğru telaffuz edebilir
  • JavaScript, görüntüleme biçimlendirmesi için datetime özniteliğini ayrıştırabilir

Dinamik Tarih Biçimlendirme

datetime özniteliğindeki tarihleri biçimlendirmek için JavaScript kullanınız:

<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 Öğesi

<address> öğesi, kendisine en yakın <article> veya <body> öğesine ait iletişim bilgilerini işaretler:

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

Makale İletişimi İçin address

Yazarın iletişim bilgilerini işaretlemek için makale içinde address kullanınız:

<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 Ne İçin Kullanılmaz

<address> öğesi yalnızca iletişim bilgileri içindir; rastgele adresler için kullanılmaz:

<!-- 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 Öğesi

<mark> öğesi, bağlam içinde ilgili olan metni vurgular:

<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 Öğesini Biçimlendirme

mark öğesinin varsayılan sarı vurgusunu özelleştiriniz:

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 ve em Karşılaştırması

Vurgu öğeleri arasında seçim yapma:

  • <mark> — mevcut bağlamda ilgili olduğu için vurgulanır (arama sonuçları)
  • <strong> — her zaman önemli olan içerik
  • <em> — anlamı değiştiren sözcük vurgusu
  • <span> — anlamsal anlamı olmayan, yalnızca görsel biçimlendirme

Arama ve Vurgulama

Uygulamalı kullanım: Sonuçlardaki arama terimlerini vurgulayınız:

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

Hızlı Kontrol

Makine tarafından okunabilir datetime özniteliği ne için kullanılır?

Özet: time, address ve mark

Anlamsal satır içi öğeler:

  • <time datetime=""> — makine tarafından okunabilir tarihler ve saatler
  • <address> — en yakın makalenin veya sayfanın iletişim bilgileri
  • <mark> — bağlamla ilgili vurgular (arama terimleri)
  • datetime, ISO 8601 biçimini kullanır: YYYY-MM-DD, HH:MM
  • mark öğesinin varsayılanı sarı arka plandır; CSS ile özelleştiriniz

Sıkça Sorulan Sorular

“time address ve mark” dersi ücretsiz mi?

Evet — “time address ve mark” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“time address ve mark” dersinde ne öğreneceğim?

Tarihleri, iletişim bilgilerini ve vurgulanmış metinleri anlamsal olarak işaretleyin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“time address ve mark” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. header nav main ve footer
  2. article Öğesi: Kendi Başına Yeterli İçerik
  3. section Öğesi ve div Karşılaştırması
  4. time address ve mark
← HTML Academy Sayfasına Dön