Le migliori pratiche HTML

Articolo originale: HTML Best Practices – How to Build a Better HTML-Based Website

L'HTML costituisce le fondamenta di qualsiasi sito web. È la prima cosa che le persone vedono. Senza di esso, non ci sarebbe alcun sito web.

Per questo motivo, è importante attenersi alle buone pratiche di scrittura di codice. Se non segui le migliori pratiche, creerai un'esperienza utente negativa per chi naviga sul web.

C'è sempre qualcosa di nuovo da imparare in HTML, che tu sia un novellino a programmare o un professionista con tanta esperienza alle spalle.

In questo articolo, parleremo delle migliori pratiche di base in HTML.

Iniziamo. 💃

Le migliori pratiche HTML sono regole che ti aiuteranno a creare siti web facili da mantenere e leggere.

Qui illustriamo alcune linee guida da tenere a mente quando si costruisce un sito web basato sull'HTML:

Usa un solo elemento `h1` per pagina

Ci sono 6 diversi tag di intestazione in HTML, da <h1> a <h6>. Il tag <h1> è l'intestazione principale (il soggetto della pagina web), mentre il tag <h6> è l'intestazione meno importante.

Il tag <h1> è più grande del tag <h2> , il tag <h2> è più grande del tag <h3>, e così via fino al tag <h6>. Ciascuna di queste intestazioni diminuisce di dimensione in base alla sua importanza.

È importante evitare di usare più di un elemento <h1> per pagina.

Non fare questo ⬇️:

<main>
<div>
<h1>Programmare può essere divertente?</h1>
<p>Più scrivi codice, più migliori.</p>
</div>

<div>
<h1>Programmare è divertente</h1>
<p>È sempre meglio quando ci si diverte a scrivere codice</p>
</div>
</main>

Nell'esempio precedente, abbiamo usato il tag <h1> nel primo e secondo <div>. Programmare in questo modo funzionerà, ma sebbene tu raggiunga lo stesso obiettivo, questa non è una buona pratica.

Fai così invece ⬇️:

<main>

<div>
<h1>Programmare può essere divertente?</h1>
<p>Più scrivi codice, più migliori</p>
</div>

<div>
<h2>Programmare è divertente</h2>
<p>È sempre meglio quando ti diverti a scrivere codice</p>
</div>

</main>

Avere un solo elemento <h1> in una pagina web è fondamentale per l'ottimizzazione dei motori di ricerca (Search Engine Optimization, SEO). Aiuta i motori di ricerca a capire di cosa tratta una pagina web (l'idea principale di una pagina).

Non saltare i livelli di intestazione in HTML

Quando si usano i tag di intestazione, è fondamentale procedere da <h1> a <h2>, <h3>, <h4> e così via...

Non usare <h1> e saltare poi subito a <h3> quando usi i tag di intestazione. È difficile per i visitatori del web usare uno screen reader per capire il contenuto della tua pagina web quando salti i livelli di intestazione.

Uno screen reader è una tecnologia che aiuta le persone con difficoltà visive ad accedere a contenuti digitali come siti web o applicazioni ed interagire con essi tramite audio o touch. Gli utenti principali degli screen reader sono persone non vedenti o con una vista molto limitata.

Non fare questo ⬇️:

<h1>Programmare è divertente</h1>
<h3>È sempre meglio quando ci si diverte a scrivere codice</h3>
<h5>La consistenza è chiave</h5>

Fai così invece⬇️:

<h1>Programmare può essere divertente?</h1>
<h2>Più scrivi codice, più migliori</h2>
<h3>Programmare è divertente</h3>

Usa l'elemento `figure` per aggiungere didascalie alle tue immagini in HTML

È consigliabile usare l'elemento <figure> quando si aggiungono didascalie alle immagini. È importante usare l'elemento <figcaption> insieme all'elemento <figure> affinché funzioni.

Non fare questo ⬇️:

<div>
<img src=“a-man-coding.jpg” alt=“Un uomo che lavora al computer”>
<p>Questa è una foto di un uomo che lavora al computer</p>
</div>

L'esempio precedente funzionerà come previsto, ma non è il modo migliore per farlo. In una situazione in cui l'immagine non si carica, verranno visualizzati sullo schermo il testo alternativo alt e il testo nell'elemento <p>. Sarà difficile per un visitatore usare uno screen reader per distinguere i testi del paragrafo e dell'alt.

Tieni sempre a mente che il fatto che il tuo codice funzioni, non vuol dire che stai seguendo le migliori pratiche.

Fai così invece ⬇️:

<figure>
<img src=“a-man-coding.jpg” alt=“Un uomo che lavora al computer”>
<figcaption> Questa è una foto di un uomo che lavora al computer</figcaption>
</figure>

L'esempio precedente è il modo migliore per aggiungere didascalie alle tue immagini.

È importante aggiungere didascalie alle tue immagini in questo modo per:

Ottimizzazione dei motori di ricerca: è più facile trovare le tue immagini sui motori di ricerca.
Sarà più semplice per i visitatori del sito che usano gli screen reader capire il contenuto della tua pagina web.

Non usare `div` per creare intestazioni e piè di pagina - usa invece gli elementi semantici

Gli elementi semantici HTML rendono la struttura di un documento più significativa su una pagina web. È buona pratica usare gli elementi semantici HTML per il corretto assemblaggio della tua pagina web.

Evita di usare <div> al posto degli elementi semantici HTML. Non usare gli elementi <div> per mostrare intestazioni o piè di pagina sulla tua pagina web. Al loro posto usa gli elementi semantici <header> e <footer>.

L'elemento <header> mostra la navigazione o la parte iniziale della pagina web.

L'elemento <footer> mostra le informazioni sul copyright o i link di navigazione della pagina web.

Non fare questo ⬇️:

<div class="header">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>

<div class="footer">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>

Nell'esempio sopra, abbiamo usato il tag <div> come un contenitore per l'intestazione e il piè di pagina . Scriverlo così funzionerà, ma anche se raggiungi lo stesso obiettivo, questa non è questa una buona pratica.

Fai così invece ⬇️:

<header>
<h1></h1>
</header>

<footer>
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</footer>

L'esempio precedente è il modo migliore per aggiungere piè di pagina ed intestazioni alla tua pagina web.

È importante aggiungere piè di pagina e intestazioni usando gli elementi HTML semantici perché:

Usare gli elementi semantici per l'intestazione (header) e il piè di pagina (footer) rende il tuo codice più leggibile.
Fornisce una migliore esperienza utente per i visitatori del sito. Sarà più facile per i visitatori che usano uno screen reader per capire il contenuto della tua pagina web.

Dai un'occhiata a questo articolo per sapere di più sugli elementi HTML semantici.

Evita di usare `<b>` e `<i>` per il grassetto o il corsivo del testo di una pagina web

I tag <b> e <i> sono anche conosciuti come i tag per il grassetto e il corsivo. Sono entrambi usati per evidenziare le parole in un testo su una pagina web.

Non dovresti usare <b> e <i> per il grassetto e il corsivo perché non hanno un significato semantico. Usa la proprietà CSS font-weight o usa i tag <strong> e <em> invece.

Usi il tag <strong> per rendere importante un testo su una pagina web. Evidenzia o rende in grassetto un testo su una pagina web. Il tag <em> enfatizza il testo in una pagina web. Mostra anche il testo in corsivo come lo farebbe il tag <i>.

Non fare questo ⬇️:

<p><i>Programma al tuo ritmo</i><p>

<p><b>programma al tuo ritmo</b><p>

I testi visualizzati saranno in grassetto e in corsivo nell'esempio sopra. Questo non avrà nessuna rilevanza per l'utente del web che usa uno screen reader. Non ha alcun significato semantico.

Le specifiche di HTML5 dicono che i tag <b> e <i> dovrebbero essere usati come come ultima risorsa se nessun altro tag è disponibile.

Fai così invece ⬇️:

<p><strong>Programma al tuo ritmo</strong><p>

<p><em>programma al tuo ritmo</em><p>

Non posizionare elementi block-level dentro elementi inline

Gli elementi block-level iniziano in una nuova linea su una pagina web. Di default, occupano una riga intera su una pagina. Non sarai in grado di aggiungere contenuti inline a un elemento block-level senza usare CSS.

Gli elementi <p>, <h1>-<h6> e <div> sono alcuni degli esempi di un elemento block-level.

Gli elementi inline occupa l'area più piccola su una pagina web. Non iniziano su una nuova riga su una pagina web.

Gli elementi <span>, <em> e <a> sono alcuni esempi di elementi inline.

Non puoi posizionare elementi block-level all'interno di elementi inline.

Non fare questo ⬇️:

<a href="#" >

    <p> Visita freecodecamp </p>

</a>

Non puoi inserire un <p> dentro un <a> perché <p> è un elemento block-level e <a> è un elemento inline.

Fai così invece ⬇️:

<p>
Visita <a href="www.freecodecamp. org" target="_blank">FreecodeCamp</a> 
per imparare Javascript
</p>

L'esempio sopra è il modo migliore per annidare elementi inline all'interno un elemento block-level.

È importante notare che:

L'elemento block-level non può essere annidato dentro un elemento inline.
L'elemento inline può essere annidato dentro un elemento block-level.
Elementi inline e block-level possono essere annidati dentro un elemento block-level.

Una nota veloce: annidare, nell'esempio precedente, significa "posizionare all'interno". Perciò, quando dico che non può essere annidato, mi riferisco al fatto che un elemento non può essere collocato all'interno di un altro.

Spero che tu abbia compreso queste tre semplici regole usate per annidare elementi.

È anche possibile convertire elementi block-level in elementi inline e viceversa, usando il CSS. Scrivi display: inline-block e display: inline per convertire un elemento da block-level a inline.

È importante ricordare che solo perché il tuo codice funziona non vuol dire che stai seguendo le pratiche migliori.

Questo è il motivo per cui ti consiglio di usare sempre il servizio di convalida del markup W3C per controllare il tuo codice.

Questo validatore controlla la validità del markup dei documenti HTML, XHTML, SMIL, MathML, ecc.

Puoi controllare il tuo codice copiando il suo URL e incollandolo sul sito o caricando il tuo file HTML.

Conclusione

Spero che questo articolo ti abbia aiutato a imparare qualcosa di nuovo sulle migliori pratiche HTML. Ho provato a includere solo i consigli più utili, così che tu possa iniziare ad usarli fin da subito!

Se hai altre domande o commenti, sentiti libero/a di contattarmi in qualsiasi momento su Twitter @cessss_ e LinkedIn: Success

Proverò a rispondere il prima possibile! Grazie per aver letto questo articolo 💙.