Condividere:
9 errori che non dovresti fare quando costruisci una pagina web
Creare una pagina Web con HTML e CSS è piuttosto semplice Come creare un sito Web: per principianti Come creare un sito Web: per principianti Oggi ti guiderò attraverso il processo di creazione di un sito Web completo da zero. Non ti preoccupare se questo sembra difficile. Ti guiderò in ogni fase del percorso. 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 allontani prima piuttosto che dopo, la tua pagina avrà un aspetto migliore, sarà più facile da mantenere e funzionerà come vuoi che sia.
1. Styling in linea
Una delle grandi cose su HTML e CSS è che puoi formattare qualsiasi riga di testo - ogni singola parola, davvero - ogni volta che vuoi. Ma ciò non significa che dovresti approfittare di questa capacità.
Ecco un esempio di uno stile inline che potresti utilizzare per creare un paragrafo più grande dei paragrafi circostanti e evidenziarlo in un colore diverso:
Il tuo testo qui.
Questo dà al paragrafo uno stile CSS. Impara HTML e CSS con questi tutorial passo passo. Impara HTML e CSS con questi tutorial passo per passo. Curioso su HTML, CSS e JavaScript? Se pensi di avere un talento per imparare a creare siti Web da zero, ecco alcuni tutorial dettagliati che vale la pena provare. Leggi altro che termina con la conclusione del paragrafo. Sembra abbastanza efficiente, giusto?
C'è un grosso problema: se vuoi cambiare molte cose nel tuo sito web, devi andare a cercare ogni istanza di stile in linea e cambiarla. Se hai 100 paragrafi diversi con dimensione del testo pari al 120% e blu, dovrai trovare tutti i 100 e modificarli in base a qualsiasi formato che hai deciso è un formato migliore.
Invece, usa un foglio di stile CSS. Ecco lo stile che utilizzerai per il paragrafo precedente:
p.importante dimensione: 120%; colore blu; Ora, invece di usare lo stile in linea, puoi semplicemente usare questa linea:
Il tuo testo qui.
E il tuo paragrafo sarà grande e blu. E quando apporti una modifica al “importante” classe nel tuo CSS, cambieranno tutti.
2. Tabelle per il layout
Le persone usavano le tabelle per la formattazione del layout di pagina abbastanza regolarmente. Utilizzando una tabella, è possibile organizzare gli elementi sulla pagina in colonne e righe, nonché applicare diversi allineamenti e stili. Verranno utilizzate anche tabelle a cella singola per allineare correttamente il contenuto. Ma questo uso delle tabelle è generalmente disapprovato.
Proprio come gli stili in linea, l'uso di CSS anziché di tabelle HTML per il layout è più facile da mantenere. Ancora una volta, se vuoi apportare modifiche a dozzine o centinaia di pagine, è molto più semplice modificare il tuo foglio di stile piuttosto che passare attraverso ogni pagina e modificare le tabelle.
Oltre a facilitare la manutenzione, leggere i layout CSS tende ad essere un po 'più semplice della lettura di tabelle HTML. Soprattutto se finisci per annidare molti livelli di tabelle l'uno dentro l'altro. Potrebbe non essere facile andare avanti e indietro tra il tuo documento HTML e il tuo 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 più veloce di fare scherzi con i CSS. Ma se stai realizzando tabelle gigantesche e multilivello, dovresti prendere in considerazione la possibilità di riformattare con i CSS.
3. HTML deprecato
Come ogni lingua, l'HTML cambia regolarmente. I tag riconosciuti ufficialmente cambiano e alcuni diventano deprecati. Anche se questi tag funzionano ancora, è meglio evitarli.
Ad esempio, se sei abituato a usare il etichetta per grassetto e il tag per corsivo, sei dietro i tempi. e (per “enfasi”) sono ora i tag standard.
La maggior parte dei tag deprecati è stata sostituita con CSS, quindi è necessario utilizzare gli stili (preferibilmente non in linea) per ottenere lo stesso effetto. Se non sei sicuro di come sostituire un tag ritirato o se un tag specifico è ancora in uso, controlla la documentazione HTML ufficiale o esegui una ricerca rapida.
4. JavaScript incorporato
Alcune pagine Web utilizzano JavaScript per aggiungere ulteriori funzionalità JavaScript e sviluppo Web: Utilizzo del modello di oggetto documento Sviluppo JavaScript e Web: utilizzo del modello di oggetto documento In questo articolo viene presentato lo scheletro del documento con cui JavaScript funziona. Avendo una conoscenza pratica di questo modello di oggetto astratto documento, è 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 una pagina più utile fornendo un comportamento aggiunto.
Proprio come il CSS, puoi aggiungere JavaScript in linea al tuo HTML. Anche come i CSS, questo è generalmente scoraggiato. Oltre ad essere potenzialmente più difficili da mantenere, ci sono un paio di altri motivi che giustificano questa ammonizione.
JavaScript in linea può utilizzare una maggiore quantità di larghezza di banda rispetto a uno script collegato da un file diverso. Un processo chiamato minification comprime HTML e CSS prima di inviarlo a un utente, richiedendo meno larghezza di banda su connessioni a banda larga o mobili. JavaScript in linea, 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ù impegnativo in termini di larghezza di banda.
È anche più difficile eseguire il debug, poiché è possibile utilizzare un validatore JavaScript per un file JavaScript ... ma non funzionerà sullo script inline. E, ancora, rende l'HTML più pulito e più facile da gestire.
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 determinati punti.
Ma ci sono sei livelli di tag di intestazione per un motivo. Dovrebbe esserci solo un tag H1 nella tua pagina. E questo è spesso il titolo della pagina (specialmente su blog e siti simili). Potresti pensare che mettere un sacco di parole chiave nei tag H1 renderà più probabile che Google li raccolga e classifica il tuo sito più in alto nei risultati.
Ma quello che realmente fa è rendere la tua pagina più confusa e più difficile da leggere. Ciò negherà qualsiasi vantaggio SEO che potresti vedere comunque.
Usa H2, H3 e il resto dei tag di intestazione per delineare meglio la tua pagina. Il livello dell'intestazione dovrebbe dare al tuo lettore un'idea di quanto sia importante la seguente sezione. Se li hai ingannati, loro lo sapranno e non saranno felici.
6. Salta immagine Alts
Ogni immagine può essere data a “alt” attributo che visualizza una riga di testo specifica se l'immagine non può essere visualizzata. Questo potrebbe non sembrare un grosso problema, specialmente con i browser moderni (sia desktop che mobili) in grado di visualizzare 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 riesce a caricare un'immagine, il tuo lettore non ha idea di cosa vedere. Un attributo alt può risolverlo.
E se qualcuno sta usando uno screen reader VoiceOver rende i dispositivi Apple più accessibili che mai VoiceOver rende i dispositivi Apple più accessibili che mai Il presidente della Fondazione americana dei non vedenti calcola che "Apple ha fatto di più per l'accessibilità di qualsiasi altra società fino ad oggi" - e VoiceOver ha giocato un ruolo importante in questo. Per saperne di più o altre funzionalità di accessibilità, l'attributo alt potrebbe essere tutto ciò che esce 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. Non tagliando i tag
Ci sono alcuni tag HTML che puoi farla franca non chiudendo, come
e
Prima di tutto, nonostante i progressi della 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 degli stili potrebbe produrre risultati imprevedibili, come dimostra l'utente di Stack Exchange robertc.
Quello che viene fuori è che i browser si aspettano i tag di chiusura. Non ne hanno assolutamente bisogno ... ma sicuramente trarranno vantaggio dall'avere il codice HTML corretto quando stanno cercando di visualizzare la tua pagina.
Fortunatamente, non ci vuole molto per chiudere i tag, soprattutto se stai usando un buon editor HTML.
8. Non incluso un DOCTYPE
All'inizio dei documenti HTML, di solito vedi una dichiarazione DOCTYPE, come questa:
È qualcosa di cui non si parla spesso, ma è un elemento importante nella tua pagina. La dichiarazione DOCTYPE indica al browser quale tipo di HTML stai utilizzando. Questo gli permette di rendere l'HTML correttamente.
Se salti la dichiarazione DOCTYPE, la pagina verrà visualizzata “modalità strane.” Questa è la difesa del browser moderno contro pagine Web antiquate. E cambia il modo in cui viene visualizzata la pagina. Una rapida occhiata alla modalità di quirks di Firefox mostra che la distinzione tra maiuscole e minuscole cambia, le proprietà dei caratteri non ereditano le tabelle, le dimensioni dei caratteri sono calcolate in modo diverso e le immagini senza attributi alt a volte vengono visualizzate in modo errato.
La maggior parte di queste cose sono relativamente minori. Ma se vuoi che la tua pagina sia visualizzata correttamente, devi assicurarti che un browser abbia la piena modalità standard abilitata.
E per farlo, hai bisogno di un DOCTYPE. (Se non sei sicuro di cosa usare, basta usare .)
9. Neglect Schema Markup
Il markup dello schema aiuta i motori di ricerca a farsi un'idea migliore di cosa c'è nella pagina. Più in particolare, quel markup indica ai motori di ricerca di cosa stai scrivendo in ciascuna sezione.
Ad esempio, in un articolo, è possibile utilizzare il markup dello schema per indicare a un motore di ricerca titolo, autore, data, editore e altre informazioni utili su un articolo.
Esistono schemi per film, libri, organizzazioni, persone, ristoranti, prodotti, luoghi, azioni, diversi tipi di dati, musica, scultura, prenotazioni, servizi, bancomat, birrerie e quasi tutto ciò che si può pensare. È piuttosto sorprendente.
Puoi sicuramente andare via 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 dall'includere questo markup. I motori di ricerca saranno in grado di fornire informazioni molto più dettagliate e utili sulla tua pagina, compresi i rich snippet.
E con lo strumento di markup dello schema di Google, il processo è in realtà piuttosto semplice.
Abituati alle best practice HTML
La realizzazione di queste buone pratiche può richiedere un po 'di tempo. E a volte può sembrare che stai prendendo un sacco di tempo in più per qualcosa che non ti dà molto. Ma assicurati che HTML e CSS imparino HTML e CSS con questi tutorial passo passo. Impara HTML e CSS con questi tutorial passo per passo. Curioso su HTML, CSS e JavaScript? Se pensi di avere un talento per imparare a creare siti Web da zero, ecco alcuni tutorial dettagliati che vale la pena provare. Ulteriori informazioni sono ben strutturati, facili da utilizzare e manutenibili ti consentiranno di risparmiare un sacco di tempo a lungo termine.
Quali altre buone abitudini hai trovato utili nella creazione di pagine web? Sei in disaccordo con qualcuna delle pratiche di cui sopra? Condividi i tuoi pensieri nei commenti qui sotto!