Linee guida di stile e convenzioni di codice (5) HTML
- Pagina precedente Semantiche HTML5
- Pagina successiva Entità HTML
Convenzioni di codice HTML
Gli sviluppatori web spesso non sono sicuri dei stili di codice e della sintassi da utilizzare in HTML.
Tra il 2000 e il 2010, molti sviluppatori web sono passati da HTML a XHTML.
Con XHTML, gli sviluppatori devono scrivere codice 'ben formato' efficace.
HTML5 è più permissivo durante la convalida del codice.
Con HTML5, è necessario creare il proprioBest practice, linee guida di stile e convenzioni di codice.
Intelligente e con garanzia futura
L'uso logico dello stile può rendere più facile per altri comprendere e utilizzare il proprio HTML.
Nel futuro, programmi come i lettori XML potrebbero dover leggere il proprio HTML.
Usare una sintassi ben formattata simile a XHTML per essere più intelligente.
Commento:Mantenere sempre il proprio stile intelligente, ordinato, puro e ben formato.
Utilizzare il tipo di documento corretto
Deve sempre dichiarare il tipo di documento nella prima riga del documento:
<!DOCTYPE html>
Se si è sempre stati fedeli ai tag minuscoli, allora si può usare:
<!doctype html>
Utilizzare nomi di elementi in minuscolo
HTML5 permette di usare lettere maiuscole e minuscole nei nomi degli elementi.
Raccomandiamo di utilizzare nomi di elementi in minuscolo:
- I nomi misti di caso non sono buoni
- Gli sviluppatori hanno l'abitudine di usare nomi in minuscolo (ad esempio, in XHTML)
- La minuscola è più pura da vedere
- La minuscola è più facile da scrivere
Non proprio bene:
<SECTION> <p>Questo è un paragrafo.</p> </SECTION>
Pessimo:
<Section> <p>Questo è un paragrafo.</p> </SECTION>
Non male:
<section> <p>Questo è un paragrafo.</p> </section>
Chiudere tutti gli elementi HTML
In HTML5, non è necessario chiudere tutti gli elementi (ad esempio, l'elemento <p>).
Suggeriamo di chiudere tutti gli elementi HTML:
Sembra male:
<section> <p>This is a paragraph. <p>This is a paragraph. </section>
Sembra bene:
<section> <p>Questo è un paragrafo.</p> <p>Questo è un paragrafo.</p> </section>
Chiudere gli elementi HTML vuoti
Nel HTML5, chiudere gli elementi vuoti è opzionale.
Anche questo è permesso:
<meta charset="utf-8">
Anche questo è permesso:
<meta charset="utf-8" />
La barra obliqua (") è necessaria in XHTML e XML.
Se si aspetta che il software XML acceda alla propria pagina, mantenere questa abitudine è una buona idea.
Utilizzare nomi degli attributi in minuscolo
HTML5 permette nomi degli attributi misti di case.
Raccomandiamo di utilizzare nomi degli attributi in minuscolo:
- I nomi degli attributi misti non sono buoni
- Gli sviluppatori sono abituati a utilizzare nomi degli attributi in minuscolo (ad esempio in XHTML)
- I nomi degli attributi in minuscolo sembrano più puri
- I nomi degli attributi in minuscolo sono più facili da scrivere
Sembra male:
<div CLASS="menu">
Sembra bene:
<div class="menu">
Aggiungere virgolette ai valori degli attributi
HTML5 permette valori degli attributi senza virgolette.
Raccomandiamo di aggiungere virgolette ai valori degli attributi:
- Se il valore dell'attributo contiene un valore, è necessario utilizzare virgolette
- Il mix di stili è assolutamente male
- I valori tra virgolette sono più facili da leggere
Questo valore dell'attributo è invalido perché contiene spazi:
<table class=table striped>
Questo è valido:
<table class="table striped">
Proprietà necessarie
Definire sempre l'immagine con alt Proprietà. Questa proprietà è importante quando l'immagine non può essere visualizzata.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Definire sempre le dimensioni dell'immagine. Questo ridurrà il flicker, poiché il browser riserverà spazio per l'immagine prima del suo caricamento.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Spazi e uguale
Gli spazi intorno all'uguale sono legali:
<link rel = "stylesheet" href = "styles.css">
Ma uno spazio meno è più facile da leggere, Ma uno spazio meno è più facile da leggere e groupa meglio le entità insieme:
<link rel="stylesheet" href="styles.css">
Evitare righe di codice lunghe
Leggere il codice HTML tramite scorrimento laterale con l'editor HTML è molto scomodo.
Evitare di superare i 80 caratteri per ogni riga di codice.
Spazi vuoti e indentazioni
Non aumentare spazi vuoti senza motivo.
Aumentare il numero di spazi vuoti per separare grandi o logici blocchi di codice.
Aumentare l'indentazione di due spazi per migliorare la leggibilità. Non utilizzare i tab.
Non utilizzare spazi vuoti e indendazioni inutili.
Non necessario:
<body>
<h1>Città famose</h1>
<h2>Tokyo</h2>
<p>
Tokyo è la capitale del Giappone, il centro della Greater Tokyo Area,
e la regione metropolitana più popolosa del mondo.
È la sede del governo giapponese e del Palazzo imperiale,
e la residenza della famiglia imperiale giapponese.
</p>
</body>
Meglio:
<body> <h1>Città famose</h1> <h2>Tokyo</h2> <p> Tokyo è la capitale del Giappone, il centro della Greater Tokyo Area, e la regione metropolitana più popolosa del mondo. È la sede del governo giapponese e del Palazzo imperiale, e la residenza della famiglia imperiale giapponese. </p> </body>
Esempio di tabella:
<table>
<tr>
<th>Nome</th>
<th>Descrizione</th>
<tr>
<tr>
<td>A</td>
<td>Descrizione di A</td>
<tr>
<tr>
<td>B</td>
<td>Descrizione di B</td>
<tr>
</table>
Esempio di elenco:
<ol> <li>LondonA</li> <li>Parigi</li> <li>Tokyo</li> </ol>
Omittere <html> e <body>?
Secondo lo standard HTML5, è possibile omittre i tag <html> e <body>.
Ecco un esempio di codice validato come HTML5:
Esempio
<!DOCTYPE html> <head> <title>Titolo della pagina</title> </head> <h1>Questo è un titolo.</h1> <p>Questo è un paragrafo.</p>
Non raccomandiamo di omittre i tag <html> e <body>.
L'elemento <html> è l'elemento radice del testo. È il punto ideale per definire la lingua della pagina.
<!DOCTYPE html> <html lang="en-US">
Per le applicazioni accessibili (lettori di schermo) e i motori di ricerca, dichiarare la lingua è molto importante.
L'omissione di <html> o <body> può causare il crash di software DOM e XML.
L'omissione di <body> può causare errori nei browser obsoleti (IE9).
Omesso <head>?
Secondo lo standard HTML5, il tag <head> può essere omesso.
Per default, il browser aggiunge tutti gli elementi prima del <body> all'elemento <head> predefinito.
Tralasciando il tag <head>, è possibile ridurre la complessità dell'HTML:
Esempio
<!DOCTYPE html> <html> <title>Titolo della pagina</title> <body> <h1>Questo è un titolo.</h1> <p>Questo è un paragrafo.</p> </body> </html>
Commento:Per gli sviluppatori web, l'omissione dei tag è sconosciuta. La creazione di regole richiede tempo.
Metadati
L'elemento <title> è obbligatorio in HTML5. Cerca di creare titoli significativi.
<title>HTML5 Syntax and Coding Style</title>
Per garantire una spiegazione appropriata e un'indicizzazione corretta dai motori di ricerca, è meglio definire il linguaggio e la codifica dei caratteri nel documento il prima possibile:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>HTML5 Syntax and Coding Style</title> </head>
Commenti HTML
I commenti brevi dovrebbero essere scritti in una riga, con uno spazio dopo --> e prima di -->:
<!-- Questo è un commento -->
I commenti lunghi, che vanno su più righe, dovrebbero essere scritti in righe indipendenti tra <!-- e -->:
<!-- Questo è un esempio di commento lungo. Questo è un esempio di commento lungo. Questo è un esempio di commento lungo. Questo è un esempio di commento lungo. Questo è un esempio di commento lungo. Questo è un esempio di commento lungo. -->
I commenti lunghi sono più facili da osservare se sono rientrati di due spazi.
Tabella di stili
Usare una sintassi semplice per collegare la tabella di stili (l'attributo type non è obbligatorio):
<link rel="stylesheet" href="styles.css">
Le regole brevi possono essere compressi in una riga, come questo:
p.into {font-family:"Verdana"; font-size:16em;}
Le regole lunghe dovrebbero essere divise in più righe:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
- Il parentesi aperto è sulla stessa riga del selettore
- Usare uno spazio prima del parentesi aperto
- Usare un rientro di due spazi
- Usare due punti seggiola e uno spazio tra l'attributo e il suo valore
- Usare uno spazio dopo ogni virgola o punto e virgola
- Usare un punto e virgola dopo ogni coppia di valore di attributo (inclusa l'ultima)
- Usare virgolette solo quando il valore contiene spazi
- Mettere il parentesi chiuso su una nuova riga, senza spazi prima
- Evitare di superare 80 caratteri per riga
Commento:Aggiungere uno spazio dopo la virgola o il punto e virgola è una regola universale per tutti i tipi di scrittura.
Caricare JavaScript in HTML
Usa una sintassi semplice per caricare script esterni (l'attributo type non è obbligatorio):
<script src="myscript.js">
Accedi agli elementi HTML tramite JavaScript
Le conseguenze dell'uso di uno stile HTML 'disordinato' possono portare a errori JavaScript.
Queste due istruzioni JavaScript producono risultati diversi:
var obj = getElementById("Demo")
var obj = getElementById("demo")
Se possibile, usa le stesse convenzioni di nomi in HTML (come JavaScript).
Visita la guida di stile JavaScript.
Usa nomi di file in minuscolo
La maggior parte dei server web (Apache, Unix) è sensibile alle maiuscole dei nomi dei file:
Non puoi accedere a London.jpg come london.jpg.
Altri server web (Microsoft, IIS) non sono sensibili alle maiuscole:
Puoi accedere a London.jpg sia come london.jpg che come London.jpg.
Se usi una mistura di maiuscole e minuscole, devi mantenere una alta coerenza.
Se passi da un server che non è sensibile alle maiuscole a uno che lo è, questi errori minori possono danneggiare il tuo sito.
Per evitare questi problemi, usa sempre nomi di file in minuscolo (se possibile).
Estensione dei file
Il nome del file HTML dovrebbe utilizzare l'estensione .html(piuttosto che .htm)
I file CSS dovrebbero utilizzare l'estensione .css.
I file JavaScript dovrebbero utilizzare l'estensione .js.
- Pagina precedente Semantiche HTML5
- Pagina successiva Entità HTML
