30 Migliori pratiche HTML per principianti

L'aspetto più difficile dell'esecuzione di Nettuts + è rappresentato da così tanti diversi livelli di abilità. Se pubblichiamo troppi tutorial avanzati, il nostro pubblico principiante non ne trarrà beneficio. Lo stesso vale per il contrario. Facciamo del nostro meglio, ma ci sentiamo sempre liberi di informarci se ti senti trascurato. Questo sito è per te, quindi parla! Detto ciò, il tutorial di oggi è specifico per coloro che si stanno appena immergendo nello sviluppo del web. Se hai un anno di esperienza o meno, si spera che alcuni dei suggerimenti elencati qui ti aiuteranno a diventare migliore, più veloce!

Potresti anche voler controllare alcuni dei costruttori HTML su Envato Market, come ad esempio il popolare VSBuilder, che ti consente di generare HTML e CSS per creare automaticamente i tuoi siti web scegliendo opzioni da una semplice interfaccia.

Oppure puoi creare il tuo sito web da zero da uno sviluppatore professionista su Envato Studio che conosce e segue tutte le migliori pratiche HTML.

Scopri CSS: la guida completa

Abbiamo creato una guida completa per aiutarti a imparare i CSS, se hai appena iniziato con le nozioni di base o se vuoi esplorare CSS più avanzati.

Senza ulteriori indugi, esaminiamo le 30 migliori pratiche da osservare durante la creazione del markup.

1: Chiudi sempre i tuoi tag

Nel passato, non era raro vedere cose del genere:

Qualche testo qui. 
Qualche nuovo testo qui. 
Hai un'idea.

Si noti come il tag UL / OL wrapping è stato omesso. Inoltre, molti hanno scelto di lasciare anche i tag LI di chiusura. Secondo gli standard odierni, questa è semplicemente una cattiva pratica e dovrebbe essere evitata al 100%. Sempre, chiudi sempre i tuoi tag. Altrimenti, incontrerai problemi di validazione e glitch ad ogni turno.

Meglio

 Qualche testo qui. 
 Qualche nuovo testo qui. 
 Hai un'idea.

2: dichiara il documento corretto

Quando ero più giovane, ho partecipato parecchio ai forum CSS. Ogni volta che un utente ha riscontrato un problema, prima di esaminare la sua situazione, DOVESSE eseguire prima due cose:

Convalida il file CSS. Correggere eventuali errori necessari.
Aggiungi un doctype.

"DOCTYPE va prima del tag html di apertura nella parte superiore della pagina e indica al browser se la pagina contiene HTML, XHTML o un mix di entrambi, in modo che possa interpretare correttamente il markup."

Molti di noi scelgono tra quattro diversi doctype quando creano nuovi siti web.

http://www.w3.org/TR/html4/strict.dtd ">
http://www.w3.org/TR/html4/loose.dtd ">
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

C'è un grande dibattito in corso sulla scelta corretta qui. A un certo punto, è stata considerata una buona pratica utilizzare la versione XHTML Strict. Tuttavia, dopo alcune ricerche, è stato realizzato che la maggior parte dei browser ripristina il normale codice HTML nell'interpretazione. Per questo motivo, molti hanno scelto di utilizzare HTML 4.01 Strict. La linea di fondo è che nessuno di questi ti terrà sotto controllo. Fai qualche ricerca e decidi tu.

3: non utilizzare mai stili in linea

Quando lavori duramente sul tuo markup, a volte può essere allettante prendere la strada facile e intrufolarsi un po 'di stile.

Ho intenzione di rendere questo testo rosso in modo che si distingua davvero e faccia prendere nota alle persone!

Certo, sembra abbastanza innocuo. Tuttavia, ciò indica un errore nelle pratiche di codifica.

Quando crei il tuo markup, non pensare ancora allo stile. Inizi solo ad aggiungere stili una volta che la pagina è stata completamente codificata.

È come attraversare i torrenti in Ghostbusters. Non è solo una buona idea.
-Chris Coyier (in riferimento a qualcosa di completamente non correlato).

Piuttosto, completa il tuo markup, quindi fai riferimento a quel tag P dal tuo foglio di stile esterno.

Meglio

#someElement> p color: red;

4: Inserisci tutti i file CSS esterni nel tag head

Tecnicamente, puoi posizionare i fogli di stile ovunque desideri. Tuttavia, le specifiche HTML raccomandano che vengano posizionate all'interno del tag HEAD del documento. Il vantaggio principale è che le tue pagine apparentemente si caricano più velocemente.

Durante la ricerca delle prestazioni su Yahoo !, abbiamo scoperto che spostare i fogli di stile sul documento HEAD fa sì che le pagine sembrino caricate più velocemente. Questo perché mettere fogli di stile nell'HEAD consente alla pagina di renderizzare progressivamente.
- ySlow Team

 I miei preferiti Tipi di mais

5: prendere in considerazione l'inserimento dei file Javascript in basso

Ricorda: l'obiettivo principale è caricare la pagina il più rapidamente possibile per l'utente. Durante il caricamento di uno script, il browser non può continuare fino a quando non è stato caricato l'intero file. Pertanto, l'utente dovrà attendere più a lungo prima di notare eventuali progressi.

Se si dispone di file JS il cui unico scopo è aggiungere funzionalità, ad esempio dopo aver fatto clic su un pulsante, andare avanti e posizionare tali file nella parte inferiore, appena prima del tag body di chiusura. Questa è assolutamente una buona pratica.

Meglio

E ora conosci i miei tipi preferiti di mais.

6: Non usare mai Javascript in linea. Non è il 1996!

Un'altra pratica comune, anni fa, era quella di posizionare i comandi JS direttamente all'interno dei tag. Questo era molto comune con semplici gallerie di immagini. In sostanza, un attributo "onclick" è stato aggiunto al tag. Il valore sarebbe quindi uguale a qualche procedura JS. Inutile dire che non dovresti mai farlo mai. Trasferisci invece questo codice su un file JS esterno e utilizza "addEventListener / attachEvent" su "ascolta" per l'evento desiderato. Oppure, se si utilizza un framework come jQuery, basta usare il metodo "click".

$ ('a # moreCornInfoLink'). click (function () alert ('Vuoi saperne di più sul mais?'););

7: convalida continuamente

Recentemente ho scritto sul blog su come l'idea di convalida sia stata completamente fraintesa da coloro che non comprendono completamente il suo scopo. Come menzionato nell'articolo, "la validazione dovrebbe funzionare per te, non contro".

Tuttavia, soprattutto al momento del primo avvio, consiglio vivamente di scaricare la barra degli strumenti di sviluppo Web e utilizzare le opzioni "Convalida HTML" e "Convalida CSS" continuamente. Mentre il CSS è un linguaggio abbastanza facile da imparare, può anche farti strappare i capelli. Come scoprirai, molte volte, è il tuo shabby markup che sta causando lo strano problema degli spazi bianchi sulla pagina. Convalida, convalida, convalida.

8: Scarica Firebug

Non posso raccomandare questo abbastanza. Firebug è, senza dubbio, il miglior plugin che tu possa mai utilizzare durante la creazione di siti web. Non solo fornisce un incredibile debug di Javascript, ma imparerai anche come individuare quali elementi stanno ereditando quel riempimento extra di cui non eri a conoscenza. Scaricalo!

9: Usa Firebug!

Dalle mie esperienze, molti utenti approfittano solo del 20% delle capacità di Firebug. Stai davvero facendo a te stesso un disservizio. Prenditi un paio d'ore e setaccia il web per ogni degno tutorial che puoi trovare sull'argomento.

risorse

Panoramica di Firebug
Debug Javascript con Firebug - video tutorial

10: mantenere i nomi dei tag in lettere minuscole

Tecnicamente, puoi fare a meno di capitalizzare i nomi dei tag.

 Ecco un fatto interessante sul mais.

Detto questo, per favore non farlo. Non serve a niente e mi fa male agli occhi - per non parlare del fatto che mi ricorda la funzione html di Microsoft Word!

Meglio

 Ecco un fatto interessante sul mais.

11: Usa i tag H1 - H6

Devo ammettere che questo è qualcosa a cui tendo. È consigliabile utilizzare tutti e sei questi tag. Se sono onesto, di solito realizzo solo i primi quattro; ma ci sto lavorando! :) Per ragioni semantiche e SEO, costringiti a sostituire quel tag P con un H6 quando appropriato.

Questo è un fatto di mais davvero importante! 
 Il piccolo ma importante fatto di mais va qui.

12: Se si crea un blog, salvare l'H1 per il titolo dell'articolo

Proprio stamattina, su Twitter, ho chiesto ai nostri follower se sentivano che fosse più intelligente posizionare il tag H1 come logo o usarlo come titolo dell'articolo. Circa l'80% dei tweet restituiti erano a favore di quest'ultimo metodo.

Come con qualsiasi cosa, determinare cosa è meglio per il tuo sito web. Tuttavia, se costruisci un blog, ti consiglio di salvare i tag H1 per il titolo dell'articolo. Per gli scopi di SEO, questa è una pratica migliore - secondo me.

13: Scarica ySlow

Soprattutto negli ultimi anni, il team di Yahoo ha fatto un ottimo lavoro nel nostro campo. Non molto tempo fa, hanno rilasciato un'estensione per Firebug chiamata ySlow. Una volta attivato, analizzerà il sito Web specificato e restituirà una sorta di "pagella" che dettaglia le aree in cui è necessario migliorare il sito. Può essere un po 'duro, ma è tutto per il bene più grande. Lo consiglio vivamente.

14: Wrap Navigation con una lista non ordinata

Ogni sito ha una sezione di navigazione di qualche tipo. Mentre si può definitivamente scappare con la formattazione in questo modo:

  Home Informazioni su Contatto

Ti incoraggio a non usare questo metodo, per ragioni semantiche. Il tuo compito è scrivere il miglior codice possibile di cui sei capace.

Perché dovremmo stilare una lista di collegamenti di navigazione con qualcosa di diverso da una LIST non ordinata?

Il tag UL ha lo scopo di contenere un elenco di elementi.

Meglio

 Casa
 Di
 Contatto

15: Scopri come scegliere IE

Ti ritroverai senza dubbio a urlare a IE durante un po 'di tempo. In realtà è diventata un'esperienza di legame per la comunità. Quando leggo su Twitter come uno dei miei amici sta combattendo le forze di IE, sorrido e penso: "So come ti senti, amico".

Il primo passaggio, una volta completato il file CSS primario, è creare un file "ie.css" univoco. È quindi possibile fare riferimento solo per IE utilizzando il seguente codice.

Questo codice dice: "Se il browser dell'utente è Internet Explorer 6 o inferiore, importa questo foglio di stile, altrimenti non fare nulla." Se è necessario compensare anche per IE7, è sufficiente sostituire "lt" con "lte" (minore o uguale a).

16: Scegli un grande editor di codice

Che tu sia su Windows o un Mac, ci sono un sacco di fantastici editor di codice che funzioneranno meravigliosamente per te. Personalmente, ho un Mac e un PC side-by-side che uso durante tutta la giornata. Di conseguenza, ho sviluppato una buona conoscenza di ciò che è disponibile. Ecco le mie migliori scelte / raccomandazioni in ordine:

Amanti del Mac

Coda
Caffè espresso
TextMate
Aptana
DreamWeaver CS4

Amanti del PC

InType
E-Text Editor
Bloc notes++
Aptana
Dreamweaver CS4

17: Una volta completato il sito web, comprimi!

Bloccando i file CSS e Javascript, è possibile ridurre le dimensioni di ciascun file di un sostanziale 25% circa. Per favore non preoccuparti di farlo mentre sei ancora in sviluppo. Tuttavia, una volta che il sito è, più o meno, completo, utilizza alcuni programmi di compressione online per risparmiare un po 'di larghezza di banda.

Servizi di compressione Javascript

Compressore Javascript
Compressore JS

CSS Compression Services

Ottimizzatore CSS
Compressore CSS
Pulisci CSS

18: Taglia, Taglia, Taglia

Guardando indietro al mio primo sito web, devo aver avuto un caso SEVERE di divitis. Il tuo istinto naturale è quello di avvolgere in modo sicuro ogni paragrafo con un div, e poi avvolgerlo con un altro div per buona misura. Come imparerai presto, questo è altamente inefficiente.

Una volta completato il markup, passaci sopra altre due volte e trova modi per ridurre il numero di elementi nella pagina. UL ha davvero bisogno del suo div di fasciatura? Penso di no.

Proprio come la chiave per scrivere è "tagliare, tagliare, tagliare", lo stesso vale per il tuo markup.

19: Tutte le immagini richiedono attributi "Alt"

È facile ignorare la necessità di attributi alt all'interno dei tag immagine. Tuttavia, è molto importante, per motivi di accessibilità e di validazione, prendere un momento in più per riempire queste sezioni.

Male

Meglio

20: Stay up Late

Dubito fortemente che io sia l'unico che, ad un certo punto mentre imparava, alzò lo sguardo e si rese conto che ero in una stanza buia e buia fino al mattino presto. Se ti sei trovato in una situazione simile, ti assicuro che hai scelto il campo giusto.

I momenti incredibili di "AHHA", almeno per me, si verificano sempre a tarda notte. Questo è stato il caso quando ho iniziato a capire esattamente quali erano le chiusure Javascript. È una sensazione meravigliosa che tu debba sperimentare, se non l'hai già fatto.

21: Visualizza sorgente

Quale modo migliore per imparare l'HTML che copiare i tuoi eroi? Inizialmente, siamo tutti fotocopiatrici! Poi lentamente, inizi a sviluppare i tuoi stili / metodi. Quindi visita i siti web di coloro che rispetti. Come hanno codificato questa e quella sezione? Impara e copia da loro. L'abbiamo fatto tutti, e anche tu dovresti. (Non rubare il design, basta imparare dallo stile di codifica.)

Noti gli effetti Javascript interessanti che vorresti imparare? È probabile che stia usando un plugin per realizzare l'effetto. Visualizza l'origine e cerca nel tag HEAD il nome dello script. Quindi esegui Google e implementalo nel tuo sito! Sìì.

22: stile TUTTI gli elementi

Questa best practice è particolarmente vera quando si progetta per i clienti. Solo perché non hai usato un blockquote non significa che il cliente no. Non usare mai liste ordinate? Ciò non significa che non lo farà! Fatti un servizio e crea una pagina speciale appositamente per mostrare lo stile di ogni elemento: ul, ol, p, h1-h6, blockquotes, ecc..

23: Usa Twitter

Ultimamente, non posso accendere la TV senza sentire un riferimento a Twitter; è davvero diventato piuttosto odioso. Non ho il desiderio di ascoltare Larry King pubblicizzare il suo account Twitter - che sappiamo tutti che non aggiorna manualmente. Yay per gli assistenti! Inoltre, quante mamme si sono iscritte agli account dopo l'approvazione di Oprah? Non possiamo che desiderare il giorno in cui solo pochi di noi erano a conoscenza del servizio e del suo potenziale di "refrigeratore d'acqua".

Inizialmente, l'idea dietro Twitter era di pubblicare "cosa stavi facendo". Sebbene questo sia ancora valido in piccola parte, è diventato molto più uno strumento di networking nel nostro settore. Se uno scrittore di webdot che ammiro pubblica un link a un articolo che ha trovato interessante, è meglio che tu lo verifichi - e dovresti farlo anche tu! Questo è il motivo per cui siti come Digg stanno diventando sempre più nervosi.

Se ti sei appena iscritto, non dimenticare di seguirci: NETTUTS.

24: impara Photoshop

Un recente commentatore di Nettuts + ci ha attaccato per aver pubblicato alcune raccomandazioni di Psdtuts +. Ha sostenuto che i tutorial di Photoshop non hanno alcun business su un blog di sviluppo web. Non sono sicuro di lui, ma Photoshop è aperto 24 ore su 24, 7 giorni su 7, sul mio computer.

In effetti, Photoshop potrebbe diventare lo strumento più importante che possiedi. Una volta che hai imparato HTML e CSS, ti consiglio personalmente di apprendere quante più tecniche di Photoshop possibile.

Visita la sezione Video di Psdtuts+
Forchetta oltre $ 25 per iscriversi per un abbonamento di un mese a Lynda.com. Guarda tutti i video che riesci a trovare.
Goditi la serie "You Suck at Photoshop".
Prenditi qualche ora per memorizzare il maggior numero di scorciatoie da tastiera PS che puoi.

25: scopri ogni tag HTML

Ci sono letteralmente dozzine di tag HTML che non incontrerai ogni giorno. Tuttavia, ciò non significa che non dovresti impararli! Hai familiarità con il tag "abbr"? Che dire "citare"? Questi due soli meritano un posto nel tuo torace. Impara tutti loro!

A proposito, nel caso non abbiate familiarità con i due sopra elencati:

abbr fa praticamente quello che ti aspetteresti. Si riferisce ad un'abbreviazione. "Blvd" potrebbe essere avvolto in a tag perché è l'abbreviazione di "boulevard".
citare è usato per fare riferimento al titolo di qualche lavoro. Ad esempio, se si fa riferimento a questo articolo sul proprio blog, è possibile inserire "30 Migliori pratiche HTML per principianti" in a etichetta. Si noti che non dovrebbe essere usato per fare riferimento all'autore di una citazione. Questo è un malinteso comune.

26: Partecipa alla Comunità

Proprio come i siti come il nostro contribuiscono notevolmente a favorire la conoscenza di uno sviluppatore web, dovresti farlo anche tu! Finalmente capito come far galleggiare correttamente i tuoi elementi? Fai un post sul blog per insegnare agli altri come. Ci saranno sempre quelli con meno esperienza di te. Non solo contribuirai alla comunità, ma insegnerai anche a te stesso. Hai mai notato come non capisci veramente qualcosa finché non sei costretto a insegnarlo?

27: usa un reset CSS

Questa è un'altra area che è stata discussa a morte. Ripristini CSS: da usare o non usare; questa è la domanda. Se dovessi offrire il mio consiglio personale, raccomanderei al 100% di creare il proprio file di ripristino. Inizia scaricando uno dei più popolari, come quello di Eric Meyer, e poi lentamente, mentre impari di più, inizia a modificarlo nel tuo. Se non lo fai, non capirai veramente perché i tuoi articoli di lista ricevono quel tocco in più quando non lo hai specificato in nessun punto del tuo file CSS. Salva te stesso la rabbia e resetta tutto! Questo dovrebbe iniziare.

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td margin: 0; padding: 0; confine: 0; contorni: 0; dimensione carattere: 100%; vertical-align: baseline; sfondo: trasparente;  body line-height: 1;  ol, ul list-style: none;  blockquote, q quotes: none;  blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0;

28: Line 'em Up!

In generale, dovresti cercare di allineare i tuoi elementi nel miglior modo possibile. Dai un'occhiata ai tuoi disegni preferiti. Hai notato come ogni intestazione, icona, paragrafo e logo si allineano con qualcos'altro sulla pagina? Non farlo è uno dei più grandi segni di un principiante. Pensala in questo modo: se ti chiedo perché hai inserito un elemento in quel punto, dovresti essere in grado di darmi una ragione precisa.

29: taglia un PSD

Ok, quindi hai acquisito una solida conoscenza di HTML, CSS e Photoshop. Il prossimo passo è convertire il tuo primo PSD in un sito Web funzionante. Non preoccuparti; non è così difficile come potresti pensare. Non riesco a pensare a un modo migliore per mettere alla prova le tue capacità. Se hai bisogno di assistenza, rivedi questi video tutorial dettagliati che ti mostrano esattamente come portare a termine il lavoro.

Slice and Dice that PSD
Da PSD a HTML / CSS

30: Non usare un quadro ... Eppure

I framework, che siano per Javascript o CSS, sono fantastici; ma per favore non usarli quando si inizia per la prima volta. Sebbene si possa sostenere che jQuery e Javascript possono essere appresi simultaneamente, lo stesso non può essere fatto per i CSS. Ho promosso personalmente il Framework CSS 960 e lo uso spesso. Detto questo, se sei ancora nel processo di apprendimento dei CSS - ovvero il primo anno - ti sentirai più confuso se ne usassi uno.

I framework CSS sono per sviluppatori esperti che vogliono risparmiare un po 'di tempo. Non sono per principianti.

Seguici su Twitter o iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.

Codice