1. Titoli
L'HTML fornisce molti tag per formattare e strutturare contenuti testuali, immagini, link e liste. I principali tag HTML ti permettono di creare una pagina organizzata e leggibile, che appare attraente e facile da capire. Vediamo i tag di base più usati e il loro scopo.
I titoli (o header) sono usati per distinguere diversi livelli di titoli in una pagina. L'HTML offre sei livelli di titoli — da <h1> a <h6>, dove <h1> è il titolo principale più grande e importante, e <h6> il più piccolo.
<h1>Titolo principale della pagina</h1>
<h2>Sottotitolo di primo livello</h2>
<h3>Sottotitolo di secondo livello</h3>
...
<h6>Titolo più piccolo</h6>
Usare i titoli aiuta a strutturare le informazioni testuali, oltre a migliorare la SEO (ottimizzazione per i motori di ricerca), dato che i motori di ricerca considerano i titoli durante l'analisi del contenuto della pagina.
2. Formattazione del testo
Per la formattazione del testo, l'HTML offre diversi tag semplici ma potenti.
Paragrafi
Ora che conosciamo i titoli, è il momento di concentrarci sul testo. I paragrafi in HTML si creano usando il tag <p>. È come nei tuoi editor di testo preferiti, dove premi "Invio" per iniziare un nuovo paragrafo. Ecco un esempio:
<p>Questo è il primo paragrafo della nostra pagina, e ti racconterà un po' di più sull'argomento.</p>
<p>E questo è già il secondo paragrafo, perché a volte il primo non basta per dire tutto!</p>
Blocchi di testo
Non dimentichiamo <span> e <div>. <span> è il tuo fedele aiutante per stilizzare piccole parti di testo direttamente nel codice HTML, mentre <div> è il re per creare blocchi e contenitori.
<div>Questo blocco può contenere un sacco di cose interessanti!</div>
<span>E questo testo può essere evidenziato in colore o font.</span>
Testo in grassetto
Testo in grassetto — <b>: Il tag <b> evidenzia il testo in grassetto. Questo tag si usa spesso per sottolineare l'importanza di alcune parole o frasi.
<p>Questo è <b>testo importante</b> che attira attenzione.</p>
Testo corsivo
Corsivo — <i>: Il tag <i> rende il testo corsivo. È perfetto per evidenziare citazioni, parole straniere o altri elementi che richiedono enfasi.
<p>Questo è un testo in corsivo: <i>esempio di testo in corsivo</i>.</p>
3. Immagini
Per aggiungere immagini alla pagina si usa il tag <img>. Questo tag è singolo, e per funzionare bisogna specificare il percorso dell'immagine con l'attributo src. È importante aggiungere anche una descrizione con l'attributo alt (testo alternativo), affinché gli utenti con difficoltà o in caso di problemi di caricamento possano capire cosa dovrebbe essere visualizzato.
<img src="image.jpg" alt="Descrizione immagine">
Altri attributi utili per <img>:
-
width— larghezza dell'immagine (es.width="200"). -
height— altezza dell'immagine (es.height="150").
4. Collegamenti Ipertestuali
I link sono una parte essenziale dell'HTML, permettendo agli utenti di navigare su altre pagine o risorse. I link si creano con il tag <a>, dove l'attributo principale è href, che indica l'URL di destinazione. 'A' qui sta per 'anchor' (ancora), dato che il link deve essere ancorato in un punto preciso nella gerarchia del documento:
<a href="https://example.com">Vai al sito di esempio</a>
5. Liste
Le liste aiutano a organizzare le informazioni in blocchi facili da capire. L'HTML supporta due tipi di liste:
Lista a punti
Lista puntata (non ordinata) — <ul>: Gli elementi in questa lista sono marcati con punti.
<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
Lista numerata
Lista numerata (ordinata) — <ol>: Gli elementi di questa lista sono numerati automaticamente.
<ol>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
Conclusione
Ora che hai una panoramica di come usare i principali tag HTML, puoi iniziare ad sperimentare combinandoli per creare pagine più complesse. Prova a creare una tua pagina HTML personale con un titolo, qualche paragrafo e un'immagine che funge da collegamento a un'altra risorsa.
GO TO FULL VERSION