{"id":56917,"date":"2022-07-01T11:33:04","date_gmt":"2022-07-01T10:33:04","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=56917&post_type=knowledgebase&preview_id=56917"},"modified":"2025-10-01T20:46:47","modified_gmt":"2025-10-01T19:46:47","slug":"html","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/html\/","title":{"rendered":"Cos’\u00c8 l’HTML? Guida per Principianti"},"content":{"rendered":"

Volete creare il sito web dei vostri sogni, ma senza che sembri fatto con uno stampino. Chiunque abbia esperienza di web design<\/a> vi dir\u00e0 che prima di tutto dovete conoscere l’HTML. Ma cos’\u00e8 l’HTML e come si impara?<\/p>\n

Volete che il sito web che gestite<\/a> si distingua e sia originale. Volete elementi e design che nessun altro nel vostro settore utilizza. Dopo tutto, il vostro sito web \u00e8 la prima impressione che molti potenziali clienti hanno della vostra attivit\u00e0.<\/p>\n

Ma prima di poterlo fare, dovete imparare un linguaggio informatico chiamato HTML<\/a>. In sostanza, \u00e8 il linguaggio che stabilisce cosa un browser web deve mostrare a un visitatore quando arriva sul vostro sito.<\/p>\n

In questo articolo vi spiegheremo cos’\u00e8 l’HTML, come \u00e8 nato, come si usa, come funziona e vi offriremo una formazione di base sull’HTML<\/a> con consigli su come saperne di pi\u00f9.<\/p>\n

Non vedete l\u2019ora di imparare a programmare il vostro sito web senza incappare in pagine non funzionanti? Iniziamo subito.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Cos’\u00c8 l’HTML?<\/h2>\n

HTML \u00e8 l’acronimo di “hypertext markup language” ed \u00e8 un linguaggio relativamente semplice utilizzato per creare pagine web. Poich\u00e9 non ammette variabili o funzioni, non \u00e8 considerato un “linguaggio di programmazione”, ma piuttosto un “linguaggio di markup”, un linguaggio che si serve dei tag per definire gli elementi di un documento.<\/p>\n

Se chiedete a qualcuno nel mondo del web design<\/a> che cos’\u00e8 l’HTML, \u00e8 probabile che riceverete una lunga spiegazione che vi far\u00e0 girare la testa, soprattutto se, come la maggior parte del mondo, non avete la pi\u00f9 pallida idea di come programmare e creare un sito web da zero<\/a>.<\/p>\n

\"Una
Quattro punti che definiscono l’html (Fonte:<\/b> Studypool<\/a>)<\/figcaption><\/figure>\n

Cosa significa l\u2019acronimo che in italiano possiamo tradurre come “linguaggio di markup per ipertesti”? Vediamo di analizzarlo.<\/p>\n

L’ipertesto \u00e8 un testo ordinato che collega elementi correlati, di solito tramite link (chiamati anche collegamenti ipertestuali). Il linguaggio di markup descrive lo stile e la struttura di una pagina ai browser web.<\/p>\n

Quindi l’HTML \u00e8 ci\u00f2 che assicura che il testo e le immagini vengano visualizzati al posto giusto e che gli utenti possano navigare nel vostro sito web<\/a> senza problemi. I browser web caricano queste informazioni dal vostro server web per generare i siti web che vedete ogni giorno.<\/p>\n

Se doveste osservare l’HTML nella sua forma grezza, vedreste molti simboli e parentesi che apparentemente non hanno senso. Tuttavia, tutto contribuisce al prodotto finale rivolto al cliente.<\/p>\n

La struttura stessa dei siti web viene creata attraverso l’HTML. Questo linguaggio lavora insieme a CSS (Cascading Style Sheets) e JavaScript<\/a> per creare siti web visivamente accattivanti e interattivi per gli utenti.<\/p>\n

Il punto fondamentale \u00e8 che l’HTML \u00e8 la base di una buona pagina web. Senza di esso, non sareste in grado di condividere il testo con chi visita un sito web, tanto meno di aggiungere il vostro tocco personale al sito dei vostri sogni.<\/p>\n\n

La Storia dell’HTML<\/h3>\n

Sir Tim Berners-Lee ha creato l’HTML alla fine del 1991, ma il linguaggio di programmazione<\/a> \u00e8 stato rilasciato alle masse solo nel 1993.<\/p>\n

Fu allora che usc\u00ec l’HTML1. Fin dall’inizio \u00e8 stato concepito come un mezzo per condividere i dati attraverso i browser web.<\/p>\n

La crescita dell’HTML si arrest\u00f2 poco dopo il suo rilascio perch\u00e9 all’epoca non erano molte le persone che sviluppavano siti web.<\/p>\n

Nel 1995 fu rilasciato l’HTML2 con ulteriori caratteristiche, che lo resero il linguaggio di markup standard per il web design fino al 1997.<\/p>\n

A quel punto Dave Raggett svilupp\u00f2 l’HTML3. Offriva ai webmaster caratteristiche pi\u00f9 potenti da usare nella progettazione delle pagine. Purtroppo era in anticipo sui tempi. Le caratteristiche dell’HTML3 rallentavano i browser, che non erano ancora in grado di applicarle.<\/p>\n

L’HTML4.01 \u00e8 stato sviluppato nel 1999 ed \u00e8 stato dotato del supporto per le opzioni multimediali. Questo aggiornamento includeva anche fogli di stile, funzioni di stampa e linguaggi di scripting aggiuntivi.<\/p>\n

\"Le
Le differenze tra la struttura di HTML4 e quella di HTML5 (Fonte:<\/b> JavatPoint<\/a>)<\/figcaption><\/figure>\n

Pi\u00f9 di recente, l\u2019HTML5<\/a> \u00e8 stato rilasciato nel 2015. Il lancio di HTML5 ha aggiunto un maggiore supporto per l’archiviazione multimediale ed elementi di contenuto specifici. Anche il doctype inline, l’incorporamento di audio e video sono stati semplificati.<\/p>\n

Nel 2022 il mondo lavorer\u00e0 con HTML5.2, che migliora la politica di sicurezza dei contenuti proprio nel momento in cui ne abbiamo pi\u00f9 bisogno.<\/p>\n

Inoltre, si concentra sull’eCommerce, aggiungendo un’API per le richieste di pagamento. Questo aggiornamento ha anche aggiunto applicazioni internet accessibili e ricche di contenuti per le persone disabili.<\/p>\n

A Cosa Serve l’HTML?<\/h2>\n

La risposta semplice a questa domanda \u00e8 che l’HTML viene utilizzato per creare siti web per uso personale e aziendale in tutto il mondo.<\/p>\n

La risposta vera e propria \u00e8 molto pi\u00f9 dettagliata.<\/p>\n

L’HTML \u00e8 stato il linguaggio predefinito utilizzato per i documenti e i siti web a partire dagli anni ’90. Funziona con i browser<\/a> per aiutarli a comprendere la struttura di un sito web e lo stile a esso associato.<\/p>\n

In sostanza, l’HTML \u00e8 un progetto che indica al browser web come comporre il vostro sito per le persone che lo visitano. Quando un utente digita il vostro URL, il browser assembla la pagina sulla base dei blocchi stabiliti nel codice HTML.<\/p>\n

\"Grafico
Un grafico che mostra tutto ci\u00f2 che l\u2019HTML5 pu\u00f2 fare (Fonte:<\/b> SCF<\/a>)<\/figcaption><\/figure>\n

Questo, a sua volta, aiuta la pagina ad avere l’aspetto desiderato quando viene visualizzata da un utente, se combinato con un foglio di stile CSS<\/a> che stilizza gli elementi disposti nel documento HTML.<\/p>\n

La versione attuale dell’HTML consente anche di eseguire video, audio, fogli di calcolo e altre applicazioni direttamente sui siti web. Se vi \u00e8 capitato di ammirare questi elementi su un sito web, dovete ringraziare l’HTML5.<\/p>\n

Questo linguaggio di markup garantisce anche una navigazione interna fluida di un sito web, grazie ai collegamenti ipertestuali.<\/p>\n

I designer di siti web possono anche usare l’HTML per creare moduli di lead generation<\/a> per raccogliere email e nomi (a patto che l’azione sia alimentata da un file codificato in un’altra lingua).<\/p>\n

Se usate dei plugin esterni, potete usare l’HTML anche per creare sistemi di prenotazione o moduli di ricerca all’interno di un sito, per facilitare la prenotazione e la navigazione.<\/p>\n

L’HTML \u00e8 il modo in cui si inseriscono i contenuti non dinamici in un sito web: quelli che volete che ogni persona veda allo stesso modo. Se volete contenuti dinamici, dovete usare JavaScript<\/a>, PHP<\/a> o altri linguaggi di programmazione.<\/p>\n

Come Funziona l’HTML?<\/h2>\n

A maggio 2022, esistono pi\u00f9 di 3,56 miliardi<\/a> di pagine web su Internet. Molte di queste pagine sono semplici file HTML. (Nota bene: non stiamo parlando di siti web, ma di pagine web)<\/p>\n

Tradizionalmente, se il vostro sito era composto da 150 pagine, probabilmente avevate 150 file HTML separati. Ma oggi le cose sono cambiate. Se usate un sistema di gestione dei contenuti (CMS)<\/a> (e la maggior parte delle persone lo fa), non avrete a che fare con file separati perch\u00e9 di solito il CMS genera dinamicamente le pagine in base ai dati memorizzati in un database.<\/p>\n

\"Istogramma
Un grafico che mostra quante pagine esistono su internet<\/figcaption><\/figure>\n

Questi file sono chiamati anche documenti HTML e sono gli elementi costitutivi del vostro sito web. Ogni pagina ha diversi elementi on-page e off-page che trovano posto nei documenti HTML. Tra questi ci sono elementi di back-end<\/a> come meta tag, tag title e alt tag, ma anche elementi fisici come video, immagini, blocchi di testo e altri elementi rivolti all’utente.<\/p>\n

Quali Elementi Compongono un Documento HTML?<\/h3>\n

Tutti i documenti HTML terminano con l’estensione .html o .htm. Questi documenti contengono tutto il testo e i tag che forniscono informazioni statiche a un browser web.<\/p>\n

Il documento HTML \u00e8 il manuale di istruzioni usato dal browser web dell’utente per costruire il sito. Tutti i file a cui fa riferimento (fogli di stile CSS, file JavaScript che alimentano gli elementi dinamici, ecc.) vengono letti dal browser, che poi esegue il rendering della pagina di conseguenza, consentendo alle persone di vederla nel modo previsto. Il rendering \u00e8 la costruzione vera e propria e avviene ogni volta che qualcuno naviga verso una pagina specifica del vostro sito.<\/p>\n

Se ci sono problemi con il vostro documento HTML o con uno dei file che include, il sito non verr\u00e0 renderizzato correttamente. Sarebbe come cercare di assemblare una scrivania IKEA senza un pezzo o uno strumento fondamentale.<\/p>\n

I siti web moderni contengono diversi elementi HTML composti da tag e attributi. Questi elementi creano la struttura di una pagina. I tag associati a ciascun elemento indicano dove inizia e dove finisce. Senza un tag che chiude un elemento, il browser inserir\u00e0 tutti i contenuti successivi all’interno di quella colonna o riga, anche se non \u00e8 quello che intendevate.<\/p>\n

Gli attributi associati a ciascun elemento di una pagina illustrano le varie caratteristiche che li compongono.<\/p>\n

Tutti i documenti HTML iniziano con una dichiarazione <!DOCTYPE>. Questa definizione di tipo di documento, nota anche come DTD, determina la struttura e gli elementi di un documento XML<\/a>.<\/p>\n

Se in passato <div> era la scelta principale per creare blocchi di contenuto, in HTML5<\/a> esistono anche blocchi specifici come <main> che indicano ai crawler il tipo di contenuto che sar\u00e0 presente in un blocco – in questo caso, il contenuto principale del blog\/articolo.<\/p>\n

Nozioni di Base di HTML<\/h2>\n

Se volete diventare web designer o almeno partecipare alla creazione del sito web della vostra azienda, dovete imparare l’HTML<\/a>. Come per tutte le cose da imparare in questo mondo, dovete iniziare con le basi per avere una solida comprensione degli elementi pi\u00f9 avanzati che verranno.<\/p>\n

Naturalmente potete usare un editor HTML gratuito<\/a> o Sublime Text<\/a>, ma una conoscenza approfondita del funzionamento dell’HTML vi aiuter\u00e0 a migliorare la personalizzazione dei siti web che realizzerete.<\/p>\n

Nelle sezioni che seguono vi spiegheremo alcune nozioni di base dell’HTML per iniziare il vostro percorso di familiarizzazione con l’HTML.<\/p>\n

Elementi dell’HTML<\/h3>\n

Tutti gli elementi HTML, a prescindere dalla loro creazione, hanno gli stessi tre componenti. Ci sono un tag di apertura, il contenuto stesso e un tag di chiusura.<\/p>\n

\"Grafico
I tre componenti di un elemento HTML<\/figcaption><\/figure>\n

Il tag di apertura mostra al browser web dove iniziano gli elementi della pagina. Per esempio, possono indicare dove inizia un lettore video o un paragrafo di testo nella pagina. Tutti i tag di apertura usano parentesi angolari di apertura e di chiusura per contrassegnarsi. Per esempio, il tag di apertura <em> d\u00e0 enfasi al contenuto, come il corsivo. Dovreste posizionare questo tag prima del testo che volete enfatizzare.<\/p>\n

Il contenuto vero e proprio \u00e8 l’informazione che l’utente vede. Pu\u00f2 essere un testo scritto, come un articolo di un blog. Pu\u00f2 anche essere un’immagine o un codice embed di un video. Se posizionato dopo il tag di apertura, il contenuto inizier\u00e0 nel punto indicato.<\/p>\n

Il tag di chiusura \u00e8 uguale al tag di apertura, ma aggiunge una barra in avanti prima del nome dell’elemento. Per tornare al nostro esempio di tag di enfasi di prima, dovreste posizionare il tag <\/em> alla fine del testo che state cercando di enfatizzare.<\/p>\n

Quindi, per esempio, se volete mettere in corsivo la parola “esattamente”, dovete codificare in questo modo:<\/p>\n

<em>esattamente.<\/em><\/p>\n

Nella pagina reale rivolta all’utente, il codice sar\u00e0 cos\u00ec:<\/p>\n

Esattamente.<\/em><\/p>\n

Gli elementi HTML includono anche gli attributi, che contengono un nome e un valore. Il nome dell’attributo indica ci\u00f2 che l’utente sta aggiungendo, mentre il valore fornisce informazioni aggiuntive.<\/p>\n

Per quanto riguarda i tag immagine, dovete ovviamente specificare quale immagine volete mostrare, quindi il risultato \u00e8 questo:<\/p>\n

<img src=”img_girl.jpg”><\/strong><\/p>\n

Se volete rendere rosso un paragrafo della vostra pagina usando il font Arial, potete usare l’attributo style:<\/p>\n

<p style=”color:red;font-family:arial”>.
\n<\/strong>
\nIn questo esempio, stiamo usando il tag di apertura <p> per un nuovo paragrafo. Con questi attributi, tutto ci\u00f2 che \u00e8 contenuto nel paragrafo sar\u00e0 rosso con il font Arial, fino al tag di chiusura <\/p>.<\/p>\n

Tuttavia, nello sviluppo web moderno, \u00e8 prassi comune non usare l’attributo di stile HTML per regolare il design dei singoli elementi, ma piuttosto stilizzare l’intera pagina con un foglio di stile CSS separato.<\/p>\n

La classe HTML e l’ID sono due attributi di un elemento HTML che gli danno un “nome” e vi aiutano a indirizzare questi elementi con CSS o JavaScript in un secondo momento. Questo aiuta lo sviluppo<\/a> e lo rende pi\u00f9 efficace. Utilizzando l’ID o la classe di un elemento, potete inserire informazioni di stile in elementi come il colore di sfondo, i bordi, il colore dei caratteri<\/a> e altro ancora.<\/p>\n

Per esempio, invece di stilizzare il testo in rosso all’interno del documento HTML, potete fare cos\u00ec:<\/p>\n

<p class<\/span>=\u201dredtext\u201d>\n\nAnd in the CSS stylesheet<\/span>, target the class<\/span> like this:\n\n.redtext {\n\ncolor:red<\/span>;\n\nfont-family:arial;\n\n}>\/code><\/code><\/pre>\n
Tag ed Elementi HTML Pi\u00f9 Usati<\/h3>\n
Esistono 142 diversi tag HTML che vi permettono di creare elementi. Questi sono composti da elementi a livello di blocco e in linea.<\/p>\n
Gli elementi a livello di blocco coprono l’intera larghezza della pagina, iniziando una nuova riga all’interno del documento.<\/p>\n
Ecco alcuni tag comuni a livello di blocco che potreste usare nel vostro sito web:<\/p>\n