La convalida è uno degli aspetti più importanti di un buon web design. Diamo un'occhiata a cos'è e come verificare la validità del codice HTML. Ad esempio, prendiamo il sistema di gestione dei contenuti (CMS) più comune: WordPress. Dopodiché condivideremo un elenco di errori che abbiamo riscontrato nella pratica e, soprattutto, offriremo i nostri metodi comprovati per eliminarli.
Perché è necessario verificare la validità di un sito web?In poche parole, il controllo di una pagina web determinerà se soddisfa gli standard sviluppati dal Consorzio World Wide Web(W3C). Questo viene in genere fatto controllando la validità delle singole pagine utilizzando il servizio di convalida online del W3C.
Proprio come esistono regole grammaticali in diverse lingue, esistono regole anche nella programmazione. Il controllo permette di vedere se la pagina rispetta queste regole e, se sono presenti errori o avvisi, verranno forniti consigli per risolverli. Discuteremo la necessità di tale verifica più dettagliatamente di seguito.
Cosa influenza la validità di un sito?Ti sei mai chiesto come i browser “leggono” una pagina web? Hanno "motori" per analizzare il codice e trasformarlo in una forma visiva per le persone. Sfortunatamente, ciascun browser dispone del proprio meccanismo di elaborazione del codice e ciò potrebbe far sì che le tue pagine vengano visualizzate in modo diverso.
Una pagina Web errata potrebbe essere letta in modo diverso dai browser. Ciò comporterà che i tuoi visitatori probabilmente non saranno nemmeno in grado di vedere correttamente il contenuto della pagina nei loro browser. La convalida correggerà quindi quasi tutte le principali differenze e renderà la tua pagina web leggibile da quasi tutti i browser web (l'eccezione più comune è Internet Explorer vecchie versioni). Da qui deriva il termine “layout cross-browser” – ad es. layout ugualmente buono (compatibile) per tutti i browser più diffusi.
In che modo ciò influirà sulla SEO? È importante capire che i robot motori di ricerca amo le pagine web semantiche. Il layout semantico, secondo Wikipedia, è un approccio alla creazione di pagine web utilizzando Linguaggio HTML, basato sull'utilizzo Tag HTML in conformità con la loro semantica (scopo). Inoltre, una pagina web semantica strutturata consente ai robot di ricerca di determinare con maggiore precisione il significato, ad esempio singoli elementi pagina web e l'intero testo nel suo complesso. Secondo Google, un codice valido non influisce in alcun modo sul posizionamento della pagina. Ma allo stesso tempo, la presenza di errori nel codice può influire negativamente sulla scansione del micromarkup e sull'adattamento ai dispositivi mobili.
Strumenti di convalida per il tuo sito webComprendendo la necessità dell'assenza di errori di convalida nelle pagine del sito, vediamo come cercare questi errori.
Ce ne sono molti servizi gratuiti per la verifica del sito, come Markup Validation Service W3C, Web Page Analyser, Browsershots e altri.
Analisi degli errori di validazione del sito
Finalmente ho avuto un po' di tempo libero tra una serie infinita di ordini e ho deciso di aprire il mio blog. Proviamo a migliorarlo in termini di validazione. Di seguito nell'articolo ti dirò cos'è la convalida del sito, codice html e css, perché è necessario e come portare un sito agli standard utilizzando un esempio specifico.
Cos'è la convalida del sito?
In parole semplici, questo è un test per la conformità agli standard. In modo che qualsiasi browser possa visualizzare correttamente il tuo sito. La validità del sito non incide molto sulla promozione, ma di certo non peggiorerà le cose.
Un esempio specifico di superamento della convalida per una pagina del sito Web
Prendiamo la prima pagina che incontri sul mio sito web: codifica e decodifica Base64 in Java 8. Inseriamo l'indirizzo della pagina nel validatore e osserviamo il risultato:
Sono stati rilevati errori durante la verifica di questo documento come HTML 4.01 di transizione! Risultato: 105 errori, 67 avvisi Sì, il quadro che emerge è spiacevole: più di un centinaio di errori e 67 avvisi: come indicizzano i motori di ricerca il mio blog e le persone lo visitano? Ma non arrabbiamoci, ma impariamo a sottoporci alla validazione e a correggere gli errori. Quindi, primo avvertimento:
Impossibile determinare la modalità di analisi! Il validatore può elaborare documenti come XML (per tipi di documenti come XHTML, SVG, ecc.) o SGML (per HTML 4.01 e versioni precedenti). Per questo documento, le informazioni disponibili non lo era sufficiente per determinare in modo inequivocabile la modalità di analisi, perché: il tipo di supporto MIME (testo/html) può essere utilizzato per tipi di documenti XML o SGML non è stato possibile rilevare alcun tipo di documento noto non è stata trovata alcuna dichiarazione XML (ad esempio) all'inizio del documento . Nessuno spazio dei nomi XML (ad esempio) è stato trovato nella radice del documento. Per impostazione predefinita, il validatore torna alla modalità SGML. Attenzione Nessun DOCTYPE trovato! Verifica con il tipo di documento transitorio HTML 4.01 predefinito. Nessuna dichiarazione DOCTYPE può essere trovata o riconosciuta in questo documento. Ciò significa generalmente che il documento non dichiara il proprio Tipo di documento in alto. Può anche significare che la dichiarazione DOCTYPE contiene un errore di ortografia o che non utilizza la sintassi corretta. Il documento è stato controllato utilizzando una definizione del tipo di documento "fallback" predefinita che assomiglia molto a "HTML 4.01 di transizione". È la stessa cosa. E la soluzione è semplice: aggiungi il tag all'inizio della pagina:
Controlliamo cosa abbiamo fatto e vediamo che con questo tag abbiamo rimosso 105 errori e 3 avvisi! Ora ci restano solo 64 avvisi. Iniziamo a smontarli uno per uno.
Avvertenza: l'attributo type per l'elemento style non è necessario e deve essere omesso. Dalla riga 5, colonna 1; alla riga 5, colonna 23 /x-icon">↩↩↩↩↩A Ciò significa che l'elemento style non ha bisogno di un attributo type - è superfluo. Abbiamo due commenti di questo tipo sulla pagina. Un avvertimento simile si applica a JavaScript:
Avvertenza: l'attributo type non è necessario per le risorse JavaScript. Dalla riga 418, colonna 1; alla riga 418, colonna 31 ↩↩$(doc Abbiamo 8 errori di questo tipo. Rimuoviamo questi attributi ed evviva: altri 10 avvisi in meno!
Errore: CSS: background: il primo argomento della funzione gradiente lineare dovrebbe essere top, non top. Alla riga 39, colonna 61 0%,#E8E8E8 100%);↩ border-r L'errore successivo è che il primo argomento di linear-gradient dovrebbe essere to top, non top. Lo sistemeremo. Errore successivo:
Errore: CSS: errore di analisi. Dalla riga 65, colonna 13; alla riga 65, colonna 16 margine: 0 auto;↩padd Qui ho commentato erroneamente css. Devi solo rimuovere questa riga. Oppure commentare /* e */ in modo diverso. L'ho fatto come facevo prima.
Errore: CSS: @import non è consentito dopo qualsiasi istruzione valida diversa da @charset e @import.. Alla riga 88, colonna 74 0,600,700,300);↩@import url(// Ora abbiamo un errore di importazione. Spostiamo queste righe in proprio l'inizio del file e scomparirà.
Errore: valore non valido _blanck per la destinazione dell'attributo sull'elemento a: è stata utilizzata la parola chiave riservata vuota. Dalla riga 241, colonna 218; alla riga 241, colonna 295 cookies..php?id=98" target="_blanck" style="display: inline;">Qui Successivamente, non ci piace il valore dell'attributo target, ci viene detto che abbiamo bisogno per usare “blank” senza il carattere di sottolineatura davanti Rimuoviamolo.
Errore: è stato visualizzato il tag finale, ma c'erano elementi aperti. Dalla riga 379, colonna 2; alla riga 379, colonna 6
- ↩ ↩↩
↩
↩↩↩↩
Inserisci le parole chiave.