time address i mark
Semantyczne oznaczanie dat, danych kontaktowych i wyróżnionego tekstu
time address i mark to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Element time
Element <time> oznacza daty i godziny w formacie czytelnym dla maszyn:
<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>Formaty atrybutu datetime
Atrybut datetime musi zawierać prawidłowy ciąg daty i czasu:
<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 -->Dlaczego time ma znaczenie
Korzyści z używania <time>:
- Wyszukiwarki rozumieją datę treści
- Przeglądarki i aplikacje mogą dodawać ją do kalendarza
- Czytniki ekranu mogą poprawnie odczytywać daty
- JavaScript może analizować atrybut datetime, aby formatować datę podczas wyświetlania
Dynamiczne formatowanie dat
Używaj JavaScriptu do formatowania dat z atrybutu 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>Element address
Element <address> oznacza dane kontaktowe dotyczące najbliższego elementu <article> lub <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 dla danych kontaktowych artykułu
Elementu address należy używać wewnątrz artykułu do oznaczania danych kontaktowych autora:
<article>
<h2>HTML Guide</h2>
<address>
Written by
<a href="mailto:jane@example.com" rel="author">Jane Smith</a>
</address>
<p>Content...</p>
</article>Do czego nie służy address
Element <address> służy wyłącznie do oznaczania informacji kontaktowych, a nie dowolnych adresów:
<!-- 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>Element mark
Element <mark> wyróżnia tekst, który jest istotny w danym kontekście:
<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 -->Stylizacja mark
Dostosuj domyślne żółte wyróżnienie elementu 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 a strong i em
Wybór między elementami wyróżniającymi:
<mark>— wyróżnienie istotne w bieżącym kontekście (wyniki wyszukiwania)<strong>— ważna treść, która zawsze ma znaczenie<em>— akcent emfazujący, który zmienia znaczenie<span>— wyłącznie wizualna stylizacja bez znaczenia semantycznego
Wyszukiwanie i wyróżnianie
Praktyczne zastosowanie: wyróżnianie wyszukiwanych terminów w wynikach:
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);Szybkie sprawdzenie
Do czego służy czytelny maszynowo atrybut datetime?
Podsumowanie: time, address i mark
Semantyczne elementy śródliniowe:
<time datetime="">— czytelne maszynowo daty i godziny<address>— dane kontaktowe dotyczące najbliższego artykułu lub strony<mark>— wyróżnienia istotne w danym kontekście (wyszukiwane terminy)datetimeużywa formatu ISO 8601:YYYY-MM-DD,HH:MM- Domyślny wygląd mark: żółte tło; można go dostosować za pomocą CSS
Często zadawane pytania
Czy lekcja „time address i mark” jest bezpłatna?
Tak — pełny tekst „time address i mark” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „time address i mark”?
Semantyczne oznaczanie dat, danych kontaktowych i wyróżnionego tekstu Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „time address i mark”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.