Collegamenti ipertestuali
Il tag <a> (anchor) crea i link, alla base della navigazione sul web:
<a href="https://www.example.com">Vai al sito di esempio</a>
href è l’attributo obbligatorio con l’URL di destinazione.
Link interni (verso altre pagine dello stesso sito, con percorso relativo):
<a href="chi-siamo.html">Chi siamo</a>
Link esterni (verso altri siti, con URL assoluto): aprili in una nuova scheda con target="_blank", così l’utente non perde la tua pagina.
<a href="https://www.example.com" target="_blank">Vai al sito esterno</a>
Link ad ancore interne alla stessa pagina, utili per pagine lunghe:
<a href="#contatti">Vai ai contatti</a>
...
<h2 id="contatti">Contatti</h2>
Immagini
Il tag <img> inserisce un’immagine — è void, senza tag di chiusura:
<img src="foto.jpg" alt="Descrizione dell'immagine">
src(obbligatorio): il percorso del file.alt(obbligatorio): il testo alternativo. Compare se l’immagine non si carica, è letto dagli screen reader per l’accessibilità, ed è anche un fattore che i motori di ricerca considerano per capire il contenuto dell’immagine — non lasciarlo mai vuoto senza motivo.
Altri attributi utili: width e height (dimensioni in pixel — impostarle aiuta il browser a riservare lo spazio giusto, evitando “salti” della pagina durante il caricamento), title (tooltip al passaggio del mouse).
Audio e video (cenno)
HTML5 permette di incorporare media nativamente, senza plugin esterni:
<video src="video.mp4" controls width="600"></video>
<audio src="audio.mp3" controls></audio>
L’attributo controls mostra i controlli di riproduzione. Non ci addentriamo oltre in questo corso base, ma sapere che esistono questi tag ti sarà utile in futuro.
Esercitazione pratica
Crea una pagina con un menu di 3 link (di cui uno esterno, aperto in nuova scheda) e almeno due immagini con testo alternativo descrittivo.