time address och mark
Märk upp datum, kontaktuppgifter och markerad text semantiskt
time address och mark är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Elementet time
Elementet <time> märker upp datum och tider i ett maskinläsbart format:
<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 för attributet datetime
Attributet datetime måste vara en giltig datum- eller tidssträng:
<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 -->Varför time är viktigt
Fördelar med att använda <time>:
- Sökmotorer förstår datumet för ditt innehåll
- Webbläsare och appar kan lägga till datumet i en kalender
- Skärmläsare kan uttala datum korrekt
- JavaScript kan tolka attributet datetime för att formatera visningen
Dynamisk datumformatering
Använd JavaScript för att formatera datum från attributet 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>Elementet address
Elementet <address> märker upp kontaktinformation för närmaste <article> eller <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 för artikelkontakt
Använd address i en article för att märka upp författarens kontaktuppgifter:
<article>
<h2>HTML Guide</h2>
<address>
Written by
<a href="mailto:jane@example.com" rel="author">Jane Smith</a>
</address>
<p>Content...</p>
</article>Vad address inte är till för
Elementet <address> är endast till för kontaktinformation, inte godtyckliga adresser:
<!-- 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>Elementet mark
Elementet <mark> markerar text som är relevant i sammanhanget:
<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 -->Formatera mark
Anpassa marks standardmarkering med gul bakgrund:
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 kontra strong kontra em
Så väljer du mellan markerings-element:
<mark>— markerat för att det är relevant i det aktuella sammanhanget (sökresultat)<strong>— viktigt innehåll som alltid har betydelse<em>— betonad text där betoningen ändrar betydelsen<span>— rent visuell formatering utan semantik
Sökning och markering
Praktisk implementation: markera söktermer i resultaten:
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);Snabbtest
Vad används det maskinläsbara attributet datetime till?
Sammanfattning: time, address och mark
Semantiska inline-element:
<time datetime="">— maskinläsbara datum och tider<address>— kontaktinformation för närmaste article eller sida<mark>— kontextuellt relevanta markeringar (söktermer)datetimeanvänder formatet ISO 8601:YYYY-MM-DD,HH:MM- Standard för mark: gul bakgrund; anpassa med CSS
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”time address och mark” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”time address och mark”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”time address och mark”?
Märk upp datum, kontaktuppgifter och markerad text semantiskt Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”time address och mark”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- header nav main och footer
- article-elementet och fristående innehåll
- section-elementet jämfört med div
- time address och mark