HTML Academy · Lezione

time address e mark

Contrassegnare semanticamente date, informazioni di contatto e testo evidenziato

time address e mark è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

L'elemento time

L'elemento <time> contrassegna date e orari in un formato leggibile dalle macchine:

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

Formati dell'attributo datetime

L'attributo datetime deve essere una stringa valida per data e ora:

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

Perché time è importante

Vantaggi dell'utilizzo di <time>:

I motori di ricerca comprendono la data del contenuto
Browser e app possono aggiungere l'evento al calendario
Gli screen reader possono pronunciare correttamente le date
JavaScript può analizzare l'attributo datetime per formattare la visualizzazione

Formattazione dinamica delle date

Utilizzi JavaScript per formattare le date ricavate dall'attributo 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>

L'elemento address

L'elemento <address> contrassegna le informazioni di contatto dell'elemento <article> o <body> più vicino:

<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 per i contatti dell'article

Utilizzi address all'interno di article per contrassegnare le informazioni di contatto dell'autore:

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

A cosa non serve address

L'elemento <address> è destinato esclusivamente alle informazioni di contatto, non agli indirizzi generici:

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

L'elemento mark

L'elemento  evidenzia il testo rilevante nel contesto:

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

Stile di mark

Personalizzi l'evidenziazione gialla predefinita di 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 vs strong vs em

Come scegliere tra gli elementi di evidenziazione:

 — evidenziato perché rilevante nel contesto attuale (risultati di ricerca)
 — contenuto importante in ogni contesto
 — enfasi espressiva che modifica il significato
 — stile puramente visivo, senza semantica

Ricerca ed evidenziazione

Implementazione pratica: evidenzi i termini di ricerca nei risultati:

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

Verifica rapida

A cosa serve l'attributo datetime leggibile dalle macchine?

Riepilogo: time, address e mark

Elementi inline semantici:

<time datetime=""> — date e orari leggibili dalle macchine
<address> — informazioni di contatto dell'article o della pagina più vicino
 — evidenziazioni rilevanti nel contesto (termini di ricerca)
datetime utilizza il formato ISO 8601: YYYY-MM-DD, HH:MM
mark usa uno sfondo giallo per impostazione predefinita; lo personalizzi con CSS

Domande Frequenti

La lezione «time address e mark» è gratuita?

Sì — il testo completo di «time address e mark» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «time address e mark»?

Contrassegnare semanticamente date, informazioni di contatto e testo evidenziato Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «time address e mark»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML Academy