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ù ricche di funzionalità e incentrate sul business. Inoltre, le organizzazioni possono sfruttare queste pratiche per fornire un’esperienza utente impeccabile.
Oggi, quando si parla di HTML, di solito ci si riferisce all’HTML5 (e non ai suoi immediati predecessori). HTML5 è un potente linguaggio di markup che permette a chi si occupa di sviluppo web di creare un documento web. È facile da usare e da capire e quasi tutti i browser lo supportano. Inoltre, è la base di quasi tutti i sistemi di gestione dei contenuti (CMS).
Se siete sviluppatori web con una minima esperienza, potreste chiedervi “Come posso scrivere meglio in HTML?”. Questo articolo vi aiuterà a iniziare con il piede giusto.
Approccio Generale alla Codifica HTML
Probabilmente avete già una buona conoscenza di questo linguaggio di markup, ma qui ci sono alcune buone pratiche HTML5 che vi permetteranno di scrivere meglio.
Dichiarare Sempre un Doctype
Quando create un documento HTML, la dichiarazione DOCTYPE è necessaria per informare il browser su quali standard state usando. Il suo scopo è quello di rendere correttamente il vostro markup.
Per esempio:
| Versione | Dichiarazione Doctype |
|---|---|
| HTML 4.01 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| XHTML 1.1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| HTML5 | <!DOCTYPE html> |
La dichiarazione <DOCTYPE> dovrebbe essere nella prima riga del vostro documento HTML. Ecco un confronto tra la sua implementazione corretta e quella non corretta:
| Buona pratica | Cattiva pratica |
|---|---|
|
|
In alternativa, potete usare il doctype corrispondente alla versione HTML/XHTML che volete utilizzare. Scoprite la lista raccomandata di dichiarazioni di doctype che vi aiuta a scegliere quella giusta.
Posizionamento dei Tag HTML
Sviluppatori e sviluppatrici sanno che lo scopo dei tag è 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’è spesso confusione circa il corretto posizionamento dei tag, gli elementi che richiedono i tag di chiusura o quando omettere i tag.
Per esempio, qual è il posto migliore per mettere i tag <script>?
I tag script sono di solito posizionati all’interno dell’elemento <head>. Ma una moderna best practice dell’HTML è di metterli invece in fondo al documento, prima di chiudere il tag <body>, per ritardare il loro download. La pagina web caricherà prima il Document Object Model (DOM), lo mostrerà all’utente e poi richiederà gli script in seguito, riducendo il time to first byte (TTFB).
Il browser interpreta il vostro documento HTML riga per riga dall’alto verso il basso. Quindi, quando legge l’head e incontra un tag di script, inizia una richiesta al server per ottenere il file. Non c’è nulla di intrinsecamente sbagliato in questo processo, ma se la pagina sta caricando un file enorme, ci vorrà molto tempo e influenzerà notevolmente l’esperienza dell’utente.
L’Elemento Root
Sotto l’elemento root c’è l’attributo <lang>, o lingua. Questo attributo aiuta a tradurre un documento HTML nella lingua corretta. La pratica migliore è quella di mantenere il valore di questo attributo il più corto possibile.
Per esempio, la lingua giapponese è usata principalmente in Giappone. Pertanto, il codice paese non è necessario quando si punta alla lingua giapponese.
| Buona pratica | Cattiva pratica |
|---|---|
<html lang="ja"> |
<html lang="ja-JP"> |
Cose da Fare e Cose da Non Fare in HTML
Una delle buone pratiche HTML più comuni è quella di avere a mente le cose da fare e quelle da non fare. Ecco alcuni punti da tenere in considerazione quando si programma in HTML:
| Descrizione | Corretto | Non corretto |
|---|---|---|
| Nel testo, usa l’equivalente del codice HTML dei caratteri Unicode invece del carattere stesso. | <p>Copyright © 2021 W3C<sup>®</sup></p> |
<p>Copyright © 2021 W3C<sup>®</sup></p> |
| Elimina gli spazi bianchi intorno ai tag e ai valori degli attributi. | <h1 class="title">Buone pratiche HTML5</h1> |
<h1 class=" title " > Buone pratiche HTML5 </h1> |
| Pratica la coerenza ed evita di mischiare maiuscole e minuscole nei caratteri. | <a href="#status">Stato</a> |
<a HREF="#status">Status</a> |
| Non separare gli attributi con due o più spazi bianchi. | <input type="text" name="LastName"> |
<input type="text" name="LastName"> |
Semplifica
Come per ogni pratica di programmazione, il principio “keep it simple”, semplifica, è applicabile anche all’HTML e all’HTML5. Generalmente, l’HTML5 è compatibile con le vecchie versioni di HTML e XHTML. Per questo motivo, raccomandiamo di evitare l’uso di dichiarazioni o attributi XML.
Per esempio:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>
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 lang="en" xml:lang="en">...</p> Per un Codice Che Tiene a Mente la SEO
Chi lavora nello sviluppo web dovrebbe programmare tenendo a mente anche la SEO. I contenuti web che non vengono trovati non vengono nemmeno indicizzati. Per questo motivo, ecco alcune buone pratiche SEO da considerare:
Aggiungere Metadati Significativi
Il tag <base> è un tag comodo, ma il suo uso improprio può portare ad alcuni comportamenti non intuitivi. Così, se dichiarate un tag base, allora ogni link nel documento sarà relativo a meno che non sia esplicitamente specificato:
<base href="http://www.kinsta.com/" />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:
href="coding.org"il browser lo interpreterà come:
href="http://www.kinsta.com/coding.org"Questa interpretazione diventa caotica, quindi è più sicuro usare sempre percorsi assoluti per i vostri link.
Scrivere le descrizioni dei metatag non fa strettamente parte delle best practice HTML, ma è comunque altrettanto importante.
L’attributo <meta name="description"> è quello a cui i crawler dei motori di ricerca fanno riferimento quando indicizzano la vostra pagina, quindi è vitale per la vostra salute SEO.
Impostare Tag Titolo Appropriati
Il tag <title> rende una pagina web adatta ai motori di ricerca. Per prima cosa, il testo all’interno del tag <title> appare nelle pagine dei risultati dei motori di ricerca di Google (SERP), nella barra del browser web e nelle schede dell’utente.
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 è molto importante nella SEO e nella generazione di traffico del sito.
Le immagini Devono Avere un Attributo Alt
Usare un attributo alt significativo con gli elementi <img> è un must per scrivere codice valido e semantico.
Nella tabella qui sotto, la colonna delle cattive pratiche mostra un elemento <img> senza un attributo alt. Anche se il secondo esempio nella stessa colonna ha un attributo alt, il suo valore è privo di significato.
| Buona pratica | Cattiva pratica |
|---|---|
|
|
Meta Attributi Descrittivi
La meta descrizione è un elemento HTML che descrive e riassume il contenuto di una pagina web. Il suo scopo è che gli utenti trovino il contesto della pagina. Anche se i metadati non aiutano più con il posizionamento SEO, la meta descrizione gioca ancora un ruolo significativo nella SEO on-page.
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 è 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.
<!DOCTYPE html>
<html>
<head>
<title>Buone pratiche HTML nella progettazione di siti web</title>
<meta name = "keywords" content = "HTML, Design siti web, Buone pratiche HTML" />
<meta name = "description" content = "Impara le best practice HTML" />
<meta name = "author" content = "John Doe" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Impariamo a programmare con HTML5!</p>
</body>
</html>Attributo Title con i Link
Negli elementi di ancoraggio, la pratica migliore è quella di utilizzare gli attributi title per migliorare l’accessibilità. L’attributo title aumenta il significato del tag di ancoraggio. Il tag <a> (o elemento di ancoraggio) abbinato al suo attributo href, crea un collegamento ipertestuale a pagine web, indirizzi email e file. Viene usato per collegare posizioni all’interno della stessa pagina o indirizzi esterni.
Guarda l’esempio sotto la colonna delle cattive pratiche: è ridondante. Questo tipo di pratica si fa più 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 è una tecnologia assistiva usata da persone ipovedenti o da chi ha disturbi dell’apprendimento. Come buona pratica, se state solo ripetendo il testo dell’anchor, è meglio non usare un titolo.
| Buona pratica | Cattiva pratica |
|---|---|
<a href="http://kinsta.com/our-pricing" title="Scopri i nostri prodotti.">Clicca qui</a> |
<a href="http://kinsta.com/our-pricing" title="Clicca qui">Clicca qui</a> |
Best Practice HTML nel Layout
Lo sviluppo di un sito web non è solo una questione di creare un blocco di testo, titoli e intestazioni, aggiungere link interni alle pagine e il gioco è fatto. Ci sono alcune best practice HTML da considerare per ottenere il massimo dal vostro sito web.
Impostare una Corretta Struttura del Documento
I documenti HTML funzionano ancora senza gli elementi primari: <html>, <head> e <body>. Tuttavia, le pagine potrebbero non visualizzarsi correttamente se mancano questi elementi. Per questo è importante usare una struttura del documento corretta e coerente.
Raggruppare le Sezioni Rilevanti
Per un raggruppamento tematico del contenuto, usate l’elemento sezione. Secondo le specifiche W3C, una <section> 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:
| Buona pratica | Cattiva pratica |
|---|---|
|
|
Best Practice per il Contenuto Incorporato
Il tag <embed> serve come contenitore per una risorsa esterna. Questo include pagine web, immagini, video o plugin. Tuttavia, dovete considerare che la maggior parte dei browser non supporta più le Applet Java e i plugin. Inoltre, i controlli ActiveX non sono più supportati in nessun browser e anche il supporto per Shockwave Flash è stato disattivato nei browser moderni.
Noi raccomandiamo quanto segue:
- Per un’immagine, usate il tag
<img>. - Per l’HTML estratto da un altro sito, usate il tag
<iframe>. - Per i video o gli audio, usate i tag
<video>e<audio>.
L’attributo alt nell’elemento <img> fornisce una descrizione dell’immagine utile ai motori di ricerca e agli screen reader. Può essere particolarmente utile agli utenti quando le immagini non possono essere elaborate:
| Buona pratica | Cattiva pratica |
|---|---|
<img alt="Buone pratiche di HTML" src="/img/logo.png"> |
<img src="/img/logo.png"> |
Lasciate l’attributo alt vuoto se c’è del testo supplementare per spiegare l’immagine. Questo per evitare la ridondanza:
| Buone pratica | Cattiva pratica |
|---|---|
<img alt="" src="/img/icon/warning.png"> Attenzione |
<img alt="" src="/img/icon/warning.png"> Attenzione |
Lasciate gli elementi <iframe> vuoti se ci sono alcune restrizioni nel contenuto. Un elemento iframe vuoto è sempre sicuro:
| Buona pratica | Cattiva pratica |
|---|---|
|
|
Gli sviluppatori dovrebbero fornire contenuti di ripiego, o link di backup, per qualsiasi elemento <audio> o <video>, proprio come per le immagini. Il contenuto di fallback è necessario, specialmente per gli elementi di nuova introduzione nell’HTML:
| Buona pratica | Cattiva pratica |
|---|---|
|
|
Ridurre il Numero di Elementi
I documenti HTML possono diventare complicati, specialmente per le pagine web con molti contenuti: per questo è meglio ridurre il numero di elementi in una pagina al minor numero possibile. Imparate a usare saggiamente gli elementi di header e fate in modo che gli elementi da <h1> a <h6> seguano la gerarchia del contenuto dell’HTML. Questo rende il vostro contenuto più significativo per chi legge, per i software di lettura dello schermo e per i motori di ricerca.
Esempio:
<h1>Il titolo più in alto</h1>
<h2>Questo è un sottotitolo che segue il titolo principale.</h2>
<h3>Questo è un sottotitolo che segue l’header h2.</h3>
<h4>Questo è un sottotitolo che segue l’header h3.</h4>
<h5>Questo è un sottotitolo che segue l’header h4.</h5>
<h6>Questo è un sottotitolo che segue l’header h5.</h6>Se sviluppate e create contenuti WordPress, usate l’elemento <h1> per il titolo dell’articolo del blog invece del nome del sito. Questo aiuta il crawling dei motori di ricerca ed è un approccio SEO-friendly.
Inoltre, usate l’elemento HTML giusto per trasmettere le informazioni che contiene e ottenere una struttura semantica e significativa del contenuto. Per esempio, usate <em> per dare enfasi e <strong> per evidenziare il testo, invece che i predecessori <i> o <b>, che ora sono obsoleti.
Esempio:
<em>testo in risalto</em>
<strong>testo ancora più in risalto</strong>Altrettanto importante, usate <p> per i paragrafi ed evitate di usare <br /> per aggiungere una nuova riga tra i paragrafi. Usate invece le proprietà CSS margin e/o padding per posizionare meglio il vostro contenuto. A volte potreste essere tentati di usare il tag <blockquote> per scopi di indentazione. Evitate questo tranello e usatelo esclusivamente quando citate del testo.
Cosa Fare e Cosa Non Fare nel Layout
Una delle best practice HTML è quella di usare elementi semanticamente appropriati nel layout della vostra pagina. Diversi elementi vi aiuteranno a organizzare il layout in sezioni.
Con la vasta gamma di argomenti sotto il layout HTML, è meglio evidenziare rapidamente le cose da fare e da non fare nel layout. Per esempio, l’HTML dà più significato semantico agli elementi dell’header e del footer, quindi non trascurate l’uso del tag <header> quando viene utilizzato in una determinata sezione o articolo. Oltre a controllare i tag <title> e <meta> e altri elementi stilistici del documento, è utilizzato nei titoli, nelle date di pubblicazione e in altri contenuti introduttivi della vostra pagina o sezione. Allo stesso modo, potete abbandonare l’idea che i footer appartengono solo alla sezione del copyright: ora potete usarli praticamente ovunque.
Dovreste invece usare l’elemento <nav> per la navigazione in tutto il sito. Non c’è bisogno di dichiarare un ruolo poiché l’uso è già implicito nel tag.
| Buona pratica | Cattiva pratica |
|---|---|
<nav></nav> |
<nav role="navigation"></nav> |
Per quanto riguarda l’elemento <main>, è già parte delle ultime versioni di HTML5, che denota il contenuto principale del corpo del documento. Quindi, non c’è più bisogno di usare <div> quando abbiamo un tag più specifico per il nostro contenuto principale.
| Buona pratica | Cattiva pratica |
|---|---|
<main id="content"></main> |
<div id="content"></div> |
Il tag <article> viene utilizzato per un blocco di contenuto. È a sé stante e ha senso senza bisogno di dare ulteriori spiegazioni, mentre il tag <section> viene utilizzato per dividere una pagina in diverse aree tematiche o per sezionare un singolo articolo. Sfortunatamente, molti sviluppatori usano ancora i due in modo intercambiabile.
Considerate che il tag <section> è un tag più generico del tag <article>. Questo significa che il primo denota un contenuto relativo all’argomento in questione, ma non necessariamente autonomo. Il secondo, al contrario, è una proprietà autonoma.
Ma quando non c’è un tag di markup appropriato per i vostri scopi, cosa dovreste usare? La risposta è di usare <div> quando nessun altro elemento funziona o quando è un elemento specificamente stilistico. Per i nostri scopi, usare <div> è anche una cattiva pratica.
Torniamo al tag <section>, che è un tag di markup semantico. Non è un elemento stilistico ed è importante sottolinearlo. In effetti, una buona pratica di codifica dovrebbe includere un tag di header.
Ora, le buone norme ci dicono che il tag <section> non dovrebbe essere usato per etichettare un wrapper, un contenitore, o qualsiasi altro blocco puramente stilistico. Qui sotto c’è un esempio di cattiva pratica di codifica con il tag <section>:
<section id="wrapper">
<section class="container-fluid">
<div id="main">
</div>
</section>
</section>Qui c’è un approccio migliore, dove però ci sono troppi tag <div>:
<div id="wrapper">
<div class="container-fluid">
<div id="main">
</div>
</div>
</div>Quindi l’approccio migliore sarebbe questo:
<body id="wrapper">
<div class="container-fluid">
<main id="main">
</main>
</div>
</body>Una parte popolare di molti layout sono le figure per la rappresentazione dei dati, e l’elemento <figure> è usato principalmente con le immagini. Tuttavia, ha una gamma più ampia di possibili usi, poiché qualsiasi cosa relativa al documento potrebbe essere posizionata in qualunque punto ed essere avvolta in un elemento <figure>. Alcuni esempi includono illustrazioni, tabelle o diagrammi in un libro.
Una caratteristica interessante di <figure> è che non contribuisce alla descrizione del documento. Pertanto, potete usarlo per raggruppare elementi con un tema comune, come per esempio diverse immagini con una <figcaption> comune, o anche un blocco di codice.
Nel raggruppare elementi con <figure>, usate <figcaption>. La didascalia <figcaption> dovrebbe andare direttamente dopo il tag <figure> di apertura o direttamente prima del tag </figure> di chiusura:
<figure>
<img src="image1.jpg" alt="Immagine di un’aquila">
<img src="image2.jpg" alt="Immagine di un albero">
<img src="image3.jpg" alt="Immagine del sole">
<figcaption>Tre immagini relative a un argomento</figcaption>
</figure>.Best Practice HTML nello Scripting
L’HTML è una delle tecnologie fondamentali nello sviluppo web. Ha una potenza impressionante e caratteristiche che lo hanno reso popolare tra chi sviluppa o chi gestisce aziende. Lo sviluppo frontend continua a innovare e, per stare al passo, gli sviluppatori dovrebbero conoscere le best practice di scripting HTML.
Utilizzare Fogli di Stile Esterni
Gli stili in linea renderanno il vostro codice disordinato e illeggibile. A tal fine, collegate e usate sempre fogli di stile esterni. Inoltre, evitate di usare dichiarazioni di importazione nei vostri file CSS perché producono una richiesta extra al server.
Lo stesso vale per CSS e JavaScript in linea. A parte i problemi di leggibilità, questo renderà il vostro documento più pesante e più difficile da mantenere in modo da evitare l’inlining del codice.
Usare il Markup Minuscolo
Usare caratteri minuscoli nel codice è una pratica standard del settore. Usare solo le maiuscole o altri metodi di uso delle maiuscole permetterà comunque di visualizzare la pagina; il problema non è la standardizzazione ma la leggibilità del codice.
La leggibilità del codice è un aspetto importante della codifica in quanto aiuta a rendere le applicazioni manutenibili e sicure. Non solo, lo sviluppo web comprende per lo più un team. Rendere il codice leggibile rende il vostro lavoro e quello del vostro team meno complicato.
| Buona pratica | Cattiva pratica |
|---|---|
|
|
Cose da Fare e da Non Fare nello Scripting
Anche se ci sono molte cose da non fare quando si programma in HTML, condivideremo due pratiche da seguire nello scripting:
- Scrivere codici ben indentati e formattati in modo coerente: Un codice pulito e ben scritto promuove una migliore leggibilità sul vostro sito, il che è di grande aiuto per chi lo sviluppa e per le altre persone che potrebbero lavorarci sopra. Mostra anche grande professionalità e attenzione ai dettagli, ed è un buon biglietto da visita che rappresenta il vostro metodo di sviluppo.
- Evitare di includere commenti eccessivi: I commenti sono essenziali e rendono il vostro codice più comprensibile. Tuttavia, la sintassi HTML è molto autoesplicativa, quindi i commenti non sono necessari a meno che non dobbiate chiarire la semantica e le convenzioni di denominazione.
Validazione e Minificazione
La convalida e la minificazione dei codici servono per identificare gli errori all’inizio. Non aspettate di terminare il documento HTML: prendete l’abitudine di validare e identificare gli errori frequentemente. Potete fare la convalida manualmente o usare qualsiasi strumento di convalida conosciuto, come il W3C Markup Validator.
Potete anche approfittare della funzione di minificazione del codice integrata nel cruscotto di MyKinsta. Questo permette ai clienti di abilitare la minificazione automatica di CSS e JavaScript con un semplice clic, che velocizzerà i siti senza alcuno sforzo.
Allo stesso tempo, praticate la minificazione rimuovendo tutto ciò che non è essenziale come i commenti o gli spazi bianchi. Scrivete codici puliti e concisi per ridurre la dimensione del vostro file HTML. Potete utilizzare strumenti come HTML Minifier e altri.
Riepilogo
Molte risorse sulle best practice HTML5 per il 2021 sono disponibili online e vi saranno di grande aiuto. Tuttavia, ricordate la regola generale nella programmazione: la coerenza. Questo articolo vi fornisce dei suggerimenti di base e vi aiuta a dare il via al viaggio nello sviluppo frontend. Usando questa guida, saprete come scrivere HTML5 semanticamente corretto in poco tempo.
Quando sarete pronti, esplorate ciò che può offrire l’HTML e avventuratevi anche oltre, con alcuni framework HTML open source per costruire moderne applicazioni web a pagina singola. Offrono un’eccellente sincronizzazione tra i dati e l’UI e lavorano senza problemi con CSS e JavaScript.
Ci siamo persi qualche buona pratica dell’HTML che usate nella vostra programmazione? Fatecelo sapere nella sezione commenti!
Lascia un commento