{"id":47146,"date":"2021-08-24T13:14:04","date_gmt":"2021-08-24T11:14:04","guid":{"rendered":"https:\/\/kinsta.com\/?p=99189"},"modified":"2023-02-03T11:08:11","modified_gmt":"2023-02-03T10:08:11","slug":"best-practice-html","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/best-practice-html\/","title":{"rendered":"Le Best Practice HTML per Costruire Siti Web Mantenibili e Scalabili"},"content":{"rendered":"

Le best practice HTML aiutano chi lavora nello sviluppo a offrire siti e applicazioni web innovative e altamente interattive. Queste best practice vi aiutano a sviluppare applicazioni pi\u00f9 ricche di funzionalit\u00e0 e incentrate sul business. Inoltre, le organizzazioni possono sfruttare queste pratiche per fornire un’esperienza utente impeccabile.<\/p>\n

Oggi, quando si parla di HTML, di solito ci si riferisce all\u2019HTML5 (e non ai suoi immediati predecessori)<\/a>. HTML5 \u00e8 un potente linguaggio di markup che permette a chi si occupa di sviluppo web di creare un documento web. \u00c8 facile da usare e da capire e quasi tutti i browser lo supportano. Inoltre, \u00e8 la base di quasi tutti i sistemi di gestione dei contenuti (CMS).<\/p>\n

Se siete sviluppatori web con una minima esperienza, potreste chiedervi “Come posso scrivere meglio in HTML?\u201d. Questo articolo vi aiuter\u00e0 a iniziare con il piede giusto.<\/p>\n

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

Approccio Generale alla Codifica HTML<\/h2>\n

Probabilmente avete gi\u00e0 una buona conoscenza di questo linguaggio di markup, ma qui ci sono alcune buone pratiche HTML5 che vi permetteranno di scrivere meglio.<\/p>\n

Dichiarare Sempre un Doctype<\/h3>\n

Quando create un documento HTML, la dichiarazione DOCTYPE<\/code> \u00e8 necessaria per informare il browser<\/a> su quali standard state usando. Il suo scopo \u00e8 quello di rendere correttamente il vostro markup.<\/p>\n

Per esempio:<\/p>\n

\n\n\n\n\n\n\n\n
Versione<\/th>\nDichiarazione Doctype<\/th>\n<\/tr>\n<\/thead>\n
HTML 4.01<\/td>\n<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/loose.dtd\"><\/code><\/td>\n<\/tr>\n
XHTML 1.1<\/td>\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.1\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd\"><\/code><\/td>\n<\/tr>\n
HTML5<\/td>\n<!DOCTYPE html><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

La dichiarazione <DOCTYPE><\/code> dovrebbe essere nella prima riga del vostro documento HTML. Ecco un confronto tra la sua implementazione corretta e quella non corretta:<\/p>\n

\n\n\n\n\n\n
Buona pratica<\/th>\nCattiva pratica<\/th>\n<\/tr>\n<\/thead>\n
\n
<!DOCTYPE html>\n<html>...<\/html><\/code><\/pre>\n<\/td>\n
\n
<html>...<\/html><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
In alternativa, potete usare il doctype corrispondente alla versione HTML\/XHTML che volete utilizzare. Scoprite la lista raccomandata di dichiarazioni di doctype<\/a> che vi aiuta a scegliere quella giusta.<\/p>\n
Posizionamento dei Tag HTML<\/h3>\n
Sviluppatori e sviluppatrici sanno che lo scopo dei tag \u00e8 quello di aiutare i browser web a distinguere tra contenuto HTML e contenuto ordinario. I tag HTML contengono un tag di apertura, un contenuto e un tag di chiusura. Tuttavia, c\u2019\u00e8 spesso confusione circa il corretto posizionamento dei tag, gli elementi che richiedono i tag di chiusura o quando omettere i tag.<\/p>\n
Per esempio, qual \u00e8 il posto migliore per mettere i tag <script><\/code>?<\/p>\n
I tag script sono di solito posizionati all’interno dell’elemento <head><\/code>. Ma una moderna best practice dell’HTML \u00e8 di metterli invece in fondo al documento, prima di chiudere il tag <body><\/code>, per ritardare il loro download<\/a>. La pagina web caricher\u00e0 prima il Document Object Model (DOM), lo mostrer\u00e0 all’utente e poi richieder\u00e0 gli script in seguito, riducendo il time to first byte (TTFB)<\/a>.<\/p>\n
Il browser interpreta il vostro documento HTML riga per riga dall’alto verso il basso. Quindi, quando legge l\u2019head e incontra un tag di script, inizia una richiesta al server per ottenere il file. Non c’\u00e8 nulla di intrinsecamente sbagliato in questo processo, ma se la pagina sta caricando un file enorme, ci vorr\u00e0 molto tempo e influenzer\u00e0 notevolmente l’esperienza dell’utente.<\/p>\n
L’Elemento Root<\/h3>\n
Sotto l’elemento root c’\u00e8 l’attributo <lang><\/code>, o lingua<\/i>. Questo attributo aiuta a tradurre un documento HTML nella lingua corretta. La pratica migliore \u00e8 quella di mantenere il valore di questo attributo il pi\u00f9 corto possibile.<\/p>\n
Per esempio, la lingua giapponese \u00e8 usata principalmente in Giappone. Pertanto, il codice paese non \u00e8 necessario quando si punta alla lingua giapponese<\/a>.<\/p>\n
\n\n\n\n\n\n
Buona pratica<\/th>\nCattiva pratica<\/th>\n<\/tr>\n<\/thead>\n
<html lang=\"ja\"><\/code><\/td>\n<html lang=\"ja-JP\"><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Cose da Fare e Cose da Non Fare in HTML<\/h3>\n
Una delle buone pratiche HTML pi\u00f9 comuni \u00e8 quella di avere a mente le cose da fare<\/i> e quelle da non<\/i> fare. Ecco alcuni punti da tenere in considerazione<\/i> quando si programma in HTML:<\/p>\n
\n\n\n\n\n\n\n\n\n
Descrizione<\/th>\nCorretto<\/th>\nNon corretto<\/th>\n<\/tr>\n<\/thead>\n
Nel testo, usa l’equivalente del codice HTML dei caratteri Unicode invece del carattere stesso.<\/td>\n<p>Copyright \u00a9 2021 W3C<sup>\u00ae<\/sup><\/p><\/code><\/td>\n<p>Copyright © 2021 W3C<sup>®<\/sup><\/p><\/code><\/td>\n<\/tr>\n
Elimina gli spazi bianchi intorno ai tag e ai valori degli attributi.<\/td>\n<h1 class=\"title\">Buone pratiche HTML5<\/h1><\/code><\/td>\n<h1 class=\" title \" > Buone pratiche HTML5 <\/h1><\/code><\/td>\n<\/tr>\n
Pratica la coerenza ed evita di mischiare maiuscole e minuscole nei caratteri.<\/td>\n<a href=\"#status\">Stato<\/a><\/code><\/td>\n<a HREF=\"#status\">Status<\/a><\/code><\/td>\n<\/tr>\n
Non separare gli attributi con due o pi\u00f9 spazi bianchi.<\/td>\n<input type=\"text\" name=\"LastName\"><\/code><\/td>\n<input type=\"text\" name=\"LastName\"><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Semplifica<\/h3>\n
Come per ogni pratica di programmazione, il principio “keep it simple”, semplifica, \u00e8 applicabile anche all’HTML e all’HTML5. Generalmente, l’HTML5 \u00e8 compatibile con le vecchie versioni di HTML e XHTML. Per questo motivo, raccomandiamo di evitare l’uso di dichiarazioni o attributi<\/a> XML<\/a>.<\/a><\/p>\n
Per esempio:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<!DOCTYPE html>\n<\/code><\/pre>\n
Non avete bisogno di dichiarare il codice come tale a meno che non vogliate scrivere un documento XHTML. Allo stesso modo, non avete bisogno di attributi XML, come:<\/p>\n
<p lang=\"en\" xml:lang=\"en\">...<\/p> <\/code><\/pre>\n
Per un Codice Che Tiene a Mente la SEO<\/h2>\n
Chi lavora nello sviluppo web dovrebbe programmare tenendo a mente anche la SEO<\/a>. I contenuti web che non vengono trovati non vengono nemmeno indicizzati. Per questo motivo, ecco alcune buone pratiche SEO da considerare:<\/p>\n
Aggiungere Metadati Significativi<\/h3>\n
Il tag <base><\/code> \u00e8 un tag comodo, ma il suo uso improprio pu\u00f2 portare ad alcuni comportamenti non intuitivi. Cos\u00ec, se dichiarate un tag base, allora ogni link nel documento sar\u00e0 relativo a meno che non sia esplicitamente specificato:<\/p>\n
<base href=\"http:\/\/www.kinsta.com\/\" \/><\/code><\/pre>\n
Questa sintassi cambia il comportamento predefinito di alcuni link. Per esempio, se inserite un link a una pagina web esterna con solo il nome della pagina e l’estensione:<\/p>\n
href=\"coding.org\"<\/code><\/pre>\n
il browser lo interpreter\u00e0 come:<\/p>\n
href=\"http:\/\/www.kinsta.com\/coding.org<\/a>\"<\/code><\/pre>\n
Questa interpretazione diventa caotica, quindi \u00e8 pi\u00f9 sicuro usare sempre percorsi assoluti per i vostri link.<\/p>\n
Scrivere le descrizioni dei metatag non fa strettamente parte delle best practice HTML, ma \u00e8 comunque altrettanto importante.
\nL’attributo <meta name=\"description\"><\/code> \u00e8 quello a cui i crawler dei motori di ricerca fanno riferimento quando indicizzano la vostra pagina, quindi \u00e8 vitale per la vostra salute SEO<\/a>.<\/p>\n
Impostare Tag Titolo Appropriati<\/h3>\n
Il tag <title><\/code> rende una pagina web adatta ai motori di ricerca. Per prima cosa, il testo all’interno del tag <title><\/code> appare nelle pagine dei risultati dei motori di ricerca di Google (SERP), nella barra del browser web e nelle schede dell’utente.<\/p>\n
Pensate, per esempio, a quando cercate la parola chiave “HTML5”. Il titolo in questo risultato di ricerca indica l’attributo specifico del titolo e l’autore. Questo \u00e8 molto importante nella SEO e nella generazione di traffico del sito<\/a>.<\/p>\n
Le immagini Devono Avere un Attributo Alt<\/h3>\n
Usare un attributo alt significativo<\/a> con gli elementi <img><\/code> \u00e8 un must per scrivere codice valido e semantico.<\/p>\n
Nella tabella qui sotto, la colonna delle cattive pratiche mostra un elemento <img><\/code> senza un attributo alt. Anche se il secondo esempio nella stessa colonna ha un attributo alt, il suo valore \u00e8 privo di significato.<\/p>\n
\n\n\n\n\n\n
Buona pratica<\/th>\nCattiva pratica<\/th>\n<\/tr>\n<\/thead>\n
\n
<img id=\"logo\" src=\"images\/kinsta_logo.png\" alt=\"Logo Kinsta\" \/><\/code><\/pre>\n<\/td>\n
\n
<img id=\"logo\" src=\"images\/kinsta_logo.png\" \/>\n<img id=\"logo\" src=\"images\/kinsta_logo.png\" alt=\"kinsta_logo.png\" \/><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Meta Attributi Descrittivi<\/h3>\n
La meta descrizione<\/a> \u00e8 un elemento HTML che descrive e riassume il contenuto di una pagina web. Il suo scopo \u00e8 che gli utenti trovino il contesto della pagina. Anche se i metadati non aiutano pi\u00f9 con il posizionamento SEO, la meta descrizione gioca ancora un ruolo significativo nella SEO on-page.<\/p>\n
Ecco un esempio di codice che include le parole chiave, la descrizione, il nome dell’autore e il set di caratteri. Il set di caratteri \u00e8 utilizzato per supportare quasi tutti i caratteri e i simboli di diverse lingue. D’altra parte, potete impostare i cookie, aggiungere una data di revisione e permettere il refresh della pagina.<\/p>\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Buone pratiche HTML nella progettazione di siti web<\/title>\n    <meta name = \"keywords\" content = \"HTML, Design siti web, Buone pratiche HTML\" \/>\n    <meta name = \"description\" content = \"Impara le best practice HTML\" \/>\n    <meta name = \"author\" content = \"John Doe\" \/>\n    <meta http-equiv = \"Content-Type\" content = \"text\/html; charset = UTF-8\" \/>\n  <\/head>\n  <body>\n    <p>Impariamo a programmare con HTML5!<\/p>\n  <\/body>\n<\/html><\/code><\/pre>\n
Attributo Title con i Link<\/h3>\n
Negli elementi di ancoraggio, la pratica migliore \u00e8 quella di utilizzare gli attributi title per migliorare l’accessibilit\u00e0. L’attributo title aumenta il significato del tag di ancoraggio. Il tag <a><\/code> (o elemento di ancoraggio) abbinato al suo attributo href<\/code>, crea un collegamento ipertestuale<\/a> a pagine web, indirizzi email e file. Viene usato per collegare posizioni all’interno della stessa pagina o indirizzi esterni.<\/p>\n
Guarda l’esempio sotto la colonna delle cattive pratiche: \u00e8 ridondante. Questo tipo di pratica si fa pi\u00f9 evidente quando un utente usa uno screen reader per leggere il tag di ancoraggio e legge lo stesso testo due volte. Un lettore di schermo \u00e8 una tecnologia assistiva usata da persone ipovedenti o da chi ha disturbi dell\u2019apprendimento. Come buona pratica, se state solo ripetendo il testo dell\u2019anchor, \u00e8 meglio non usare un titolo.<\/p>\n
\n\n\n\n\n\n
Buona pratica<\/th>\nCattiva pratica<\/th>\n<\/tr>\n<\/thead>\n
<a href=\"https:\/\/kinsta.com\/our-pricing\" title=\"Scopri i nostri prodotti.\">Clicca qui<\/a><\/code><\/td>\n<a href=\"https:\/\/kinsta.com\/our-pricing\" title=\"Clicca qui\">Clicca qui<\/a><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Best Practice HTML nel Layout<\/h2>\n
Lo sviluppo di un sito web non \u00e8 solo una questione di creare un blocco di testo, titoli e intestazioni, aggiungere link interni alle pagine<\/a> e il gioco \u00e8 fatto. Ci sono alcune best practice HTML da considerare per ottenere il massimo dal vostro sito web.<\/p>\n
Impostare una Corretta Struttura del Documento<\/h3>\n
I documenti HTML funzionano ancora senza gli elementi primari: <html><\/code>, <head><\/code> e <body><\/code>. Tuttavia, le pagine potrebbero non visualizzarsi correttamente se mancano questi elementi. Per questo \u00e8 importante usare una struttura del documento corretta e coerente.<\/p>\n
Raggruppare le Sezioni Rilevanti<\/h3>\n
Per un raggruppamento tematico del contenuto<\/a>, usate l’elemento sezione. Secondo le specifiche W3C, una <section><\/code> dovrebbe contenere un header (H1, H2, ecc.). Alcuni sviluppatori saltano completamente l’uso dell’elemento di header, ma noi raccomandiamo di includerlo per raggiungere meglio coloro che usano gli screen reader:<\/p>\n
\n\n\n\n\n\n
Buona pratica<\/th>\nCattiva pratica<\/th>\n<\/tr>\n<\/thead>\n
\n
<section>\n<h1>Buone pratiche HTML 2021<\/h1>\n<ul>\n<li><img src=\"img1.jpg\" alt=\"descrizione\"><\/li>\n<li><img src=\"img2.jpg\" alt=\"descrizione\"><\/li>\n<\/ul>\n<\/section><\/code><\/pre>\n<\/td>\n
\n
<section>\n<ul>\n<li><img src=\"img1.jpg\" alt=\"descrizione\"><\/li>\n<li><img src=\"img2.jpg\" alt=\"descrizione\"><\/li>\n<\/ul>\n<\/section><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Best Practice per il Contenuto Incorporato<\/h3>\n
Il tag <embed><\/code> serve come contenitore per una risorsa esterna. Questo include pagine web, immagini, video<\/a> o plugin. Tuttavia, dovete considerare che la maggior parte dei browser non supporta pi\u00f9 le Applet Java e i plugin. Inoltre, i controlli ActiveX non sono pi\u00f9 supportati in nessun browser e anche il supporto per Shockwave Flash \u00e8 stato disattivato nei browser moderni.<\/p>\n
Noi raccomandiamo quanto segue:<\/p>\n