9 errori da evitare durante la creazione di una pagina Web

Annuncio pubblicitario

La creazione di una pagina Web con HTML e CSS è abbastanza diretto Come creare un sito Web: per principiantiOggi ti guiderò attraverso il processo di creazione di un sito Web completo da zero. Non preoccuparti se questo sembra difficile. Ti guiderò attraverso ogni passaggio. Leggi di più . Ma è facile commettere errori e ci sono alcune cose a cui potresti non pensare. Il più delle volte, questi piccoli errori non faranno molta differenza.

Ma a lungo termine, possono rendere la tua vita più difficile. Questi nove errori sono facili da fare, ma se li elimini prima piuttosto che dopo, la tua pagina avrà un aspetto migliore, sarà più facile da mantenere e funzionerà come desideri.

1. Styling in linea

Una delle cose più belle di HTML e CSS è che puoi formattare qualsiasi riga di testo - qualsiasi singola parola, davvero - ogni volta che vuoi. Ma ciò non significa che dovresti sfruttare questa capacità.

Ecco un esempio di uno stile in linea che potresti utilizzare per ingrandire un paragrafo rispetto ai paragrafi circostanti ed evidenziarlo con un colore diverso:

Il tuo testo qui.

Questo dà il paragrafo a Stile CSS Scopri HTML e CSS con questi tutorial passo dopo passoCurioso di HTML, CSS e JavaScript? Se ritieni di avere un talento per imparare a creare siti Web da zero, ecco alcuni ottimi tutorial passo-passo che vale la pena provare. Leggi di più che termina con la conclusione del paragrafo. Sembra piuttosto efficiente, vero?

C'è un grosso problema: se vuoi cambiare molte cose nel tuo sito web, dovrai andare a trovare ogni istanza di stile in linea e cambiarla. Se hai 100 paragrafi diversi con una dimensione del testo del 120% e blu, dovrai trovare tutti i 100 e cambiarli in qualsiasi formato tu abbia deciso sia un formato migliore.

Invece, usa un foglio di stile CSS. Ecco lo stile che useresti per il paragrafo precedente:

p. importante {dimensione: 120%; colore blu; }

Ora, invece di usare lo stile inline, puoi semplicemente usare questa linea:

Il tuo testo qui.

E il tuo paragrafo sarà grande e blu. E quando apporti una modifica alla classe "importante" nel tuo CSS, cambieranno tutti.

2. Tabelle per il layout

Le persone usavano le tabelle per formattare il layout di pagina abbastanza regolarmente. Utilizzando una tabella, puoi organizzare gli elementi della tua pagina in colonne e righe, nonché applicare diversi allineamenti e stili. Anche le tabelle a cella singola verrebbero utilizzate per allineare correttamente il contenuto. Ma questo uso dei tavoli è generalmente disapprovato.

Proprio come gli stili incorporati, è più facile mantenere l'utilizzo dei CSS anziché delle tabelle HTML per il layout. Ancora una volta, se vuoi apportare modifiche su dozzine o centinaia di pagine, è molto più semplice modificare il tuo foglio di stile che passare attraverso ogni pagina e modificare le tabelle.

Oltre alla manutenzione più semplice, la lettura dei layout CSS tende ad essere un po 'più semplice rispetto alla lettura di tabelle HTML. Soprattutto se finisci per annidare molti livelli di tabelle l'una nell'altra. Potrebbe non essere facile andare avanti e indietro tra il documento HTML e il foglio di stile per vedere esattamente cosa sta succedendo, ma il contenuto della tua pagina sarà più chiaro e più facile da modificare.

Usare le tabelle qua e là per dividere le pagine in colonne non è un peccato mortale. A volte è più facile e veloce che scherzare con i CSS. Ma se stai creando tabelle gigantesche su più livelli, dovresti prendere in considerazione la riformattazione con CSS.

3. HTML obsoleto

Come qualsiasi lingua, l'HTML cambia regolarmente. I tag ufficialmente riconosciuti cambiano e alcuni diventano obsoleti. Anche se quei tag funzionano ancora, è meglio evitarli.

Ad esempio, se sei abituato a utilizzare il tag per grassetto e il tag per il corsivo, sei indietro nel tempo. e (per "enfasi") sono ora i tag standard.

, , , e anche altri sono deprecati.

La maggior parte dei tag obsoleti sono stati sostituiti con CSS, quindi dovrai utilizzare gli stili (preferibilmente non in linea) per ottenere lo stesso effetto. Se non sei sicuro di come sostituire un tag obsoleto o se un tag specifico è ancora in uso, controlla il documentazione HTML ufficiale o semplicemente esegui una ricerca rapida.

4. JavaScript incorporato

Alcune pagine Web utilizzano JavaScript per aggiungere funzionalità aggiuntive JavaScript e sviluppo Web: utilizzo del Document Object ModelQuesto articolo ti introdurrà allo scheletro del documento con cui funziona JavaScript. Avere una conoscenza pratica di questo modello di oggetti di documento astratto, è possibile scrivere JavaScript che funziona su qualsiasi pagina Web. Leggi di più . Può rendere interattive le pagine Web, convalidare il testo mentre viene inserito, aggiungere animazioni, fornire risposte alle azioni dell'utente e così via. In breve, può rendere più utile una pagina fornendo un comportamento aggiuntivo.

Proprio come i CSS, puoi aggiungere JavaScript inline al tuo HTML. Anche come i CSS, questo è generalmente scoraggiato. Oltre ad essere potenzialmente più difficile da mantenere, ci sono un paio di altri motivi che giustificano questa ammonizione.

JavaScript incorporato può utilizzare una maggiore quantità di larghezza di banda rispetto a uno script collegato da un file diverso. Un processo chiamato minificazione comprime HTML e CSS prima di inviarlo a un utente, richiedendo meno larghezza di banda su connessioni a banda larga o mobili. JavaScript incorporato, tuttavia, non può essere minimizzato. Inoltre, non verrà memorizzato nella cache, mentre un file JavaScript separato può essere memorizzato nella cache.

Tutte queste cose rendono JavaScript inline più dispendioso in termini di larghezza di banda.

È anche più difficile eseguire il debug, in quanto puoi utilizzare un validatore JavaScript per un file JavaScript... ma non funzionerà su script inline. E, ancora una volta, rende HTML più pulito e più facilmente gestibile.

5. Più tag H1

I tag di intestazione sono fantastici. Rendono le pagine più facili da sfogliare, possono darti una spinta SEO e possono essere utilizzate per enfatizzare alcuni punti.

Ma ci sono sei livelli di tag di intestazione per un motivo. Dovrebbe esserci davvero solo un tag H1 sulla tua pagina. E questo è spesso il titolo della pagina (specialmente su blog e siti simili). Potresti pensare che mettere un mucchio di parole chiave nei tag H1 renderà Google più propenso a raccoglierle e classificare il tuo sito più in alto nei risultati.

Ma quello che fa davvero è rendere la tua pagina più confusa e più difficile da leggere. Ciò annullerà comunque eventuali vantaggi SEO che potresti vedere.

Usa H2, H3 e il resto dei tag di intestazione per delineare meglio la tua pagina. Il livello dell'intestazione dovrebbe dare al lettore un'idea di quanto sia importante la sezione seguente. Se li hai fuorviati, lo sapranno e non saranno felici.

6. Salta immagine Alts

A ogni immagine può essere assegnato un attributo "alt" che visualizza una riga di testo specifica se l'immagine non può essere visualizzata. Questo potrebbe non sembrare un grosso problema, soprattutto con i browser moderni (sia desktop che mobili) in grado di visualizzare praticamente qualsiasi cosa.

Ma non aggiungere attributi alt è un grosso errore, specialmente nell'era della costante navigazione mobile. Le connessioni mobili non sono sempre eccezionali e se un browser non è in grado di caricare un'immagine, il tuo lettore non ha idea di cosa dovrebbe vedere lì. Un attributo alt può risolverlo.

E se qualcuno sta usando un lettore di schermo VoiceOver rende i dispositivi Apple più accessibili che maiIl presidente della American Foundation of the Blind ritiene che "Apple abbia fatto di più per l'accessibilità rispetto a qualsiasi altra azienda fino ad oggi", e VoiceOver ha giocato un ruolo importante in questo. Leggi di più o altra caratteristica di accessibilità, quell'attributo alt potrebbe essere tutto ciò che ottengono dall'immagine.

Naturalmente, ci sono anche potenziali vantaggi SEO. I motori di ricerca possono indicizzare attributi alt brevi e descrittivi. Ma il più grande vantaggio qui è aiutare i tuoi lettori.

7. Tag non chiusi

Ci sono alcuni tag HTML che puoi evitare di non chiudere, come

e

. I browser sanno che quando si avvia un altro paragrafo o un elemento dell'elenco, il precedente è finito. Ma ciò non significa che dovresti saltare i tag di chiusura.

Innanzitutto, nonostante i progressi nella tecnologia del browser, c'è sicuramente la possibilità che il browser visualizzi i tuoi contenuti in modo improprio se non hai chiuso i tag. E l'applicazione di stili potrebbe produrre alcuni risultati imprevedibili, come Dimostra l'utente robertc di Exchange Stack.

Ciò che si riduce è che i browser si aspettano tag di chiusura. Non ne hanno assolutamente bisogno... ma trarranno sicuramente beneficio dall'avere l'HTML corretto quando provano a visualizzare la tua pagina.

Fortunatamente, non ci vuole molto per chiudere i tag, soprattutto se stai utilizzando un buon editor HTML.

8. Non compreso un DOCTYPE

All'inizio dei documenti HTML, di solito vedrai una dichiarazione DOCTYPE, come questa:

È qualcosa di cui non si parla spesso, ma è un elemento importante nella tua pagina. La dichiarazione DOCTYPE indica a un browser che tipo di HTML stai utilizzando. Ciò gli consente di visualizzare correttamente l'HTML.

Se salti la dichiarazione DOCTYPE, la pagina verrà visualizzata in "modalità stranezze". Questa è la difesa moderna del browser contro le pagine Web antiquate. E cambia la modalità di visualizzazione della tua pagina. Una rapida occhiata a Modalità strane di Firefox mostra che le modifiche della distinzione tra maiuscole e minuscole, le proprietà dei caratteri non ereditano nelle tabelle, le dimensioni dei caratteri vengono calcolate in modo diverso e le immagini senza attributi alt vengono talvolta visualizzate in modo errato.

Molte di queste cose sono relativamente minori. Ma se vuoi che la tua pagina venga visualizzata correttamente, dovresti assicurarti che un browser abbia la sua modalità standard abilitata.

E per farlo, hai bisogno di un DOCTYPE. (Se non sei sicuro di cosa usare, usa semplicemente .)

9. Trascura markup schema

Il markup dello schema aiuta i motori di ricerca a farsi un'idea di ciò che c'è sulla tua pagina. Più specificamente, quel markup dice ai motori di ricerca di cosa stai scrivendo in ogni sezione.

Ad esempio, in un articolo, è possibile utilizzare il markup dello schema per comunicare a un motore di ricerca titolo, autore, data, editore e altre informazioni utili su un articolo.

Ci sono schemi per film, libri, organizzazioni, persone, ristoranti, prodotti, luoghi, azioni, tipi diversi di dati, musica, scultura, prenotazioni, servizi, bancomat, birrifici e praticamente tutto ciò che ti viene in mente. È piuttosto sorprendente.

Puoi sicuramente scappare senza usare il markup dello schema. La tua pagina verrà visualizzata correttamente senza di essa. I tuoi lettori non sapranno nemmeno che è lì. Ma c'è molto da guadagnare includendo questo markup. I motori di ricerca saranno in grado di fornire informazioni molto più dettagliate e utili sulla tua pagina, inclusi rich snippet.

E con lo strumento di markup dello schema di Google, il processo è in realtà abbastanza semplice.

Abituati alle migliori pratiche HTML

Rendere un'abitudine queste best practice può richiedere del tempo. E a volte può sembrare che tu stia impiegando molto tempo extra per qualcosa che non ti dà molto. Ma assicurati che il tuo HTML e CSS Scopri HTML e CSS con questi tutorial passo dopo passoCurioso di HTML, CSS e JavaScript? Se ritieni di avere un talento per imparare a creare siti Web da zero, ecco alcuni ottimi tutorial passo-passo che vale la pena provare. Leggi di più sono ben strutturati, facili da lavorare e mantenibili ti faranno risparmiare molto tempo nel lungo periodo.

Quali altre buone abitudini hai trovato utili durante la creazione di pagine Web? Non sei d'accordo con nessuna delle pratiche sopra? Condividi i tuoi pensieri nei commenti qui sotto!