Convenzioni di codifica HTML
Gli sviluppatori web sono spesso incerti circa lo stile di codifica e la sintassi da utilizzare in HTML.
Tra il 2000 e il 2010, molti sviluppatori web convertiti da HTML a XHTML.
Con XHTML, gli sviluppatori sono stati costretti a scrivere valido e "well-formed" codice.
HTML5 è un po 'più sciatta quando si tratta di codice di validazione.
Con HTML5, è necessario creare le proprie migliori pratiche, Style Guide e convenzioni di codifica.
Be Smart ea prova di futuro
Un conseguente utilizzo di stile, rende più facile per gli altri a capire e utilizzare il codice HTML.
In futuro, programmi come lettori XML, può essere utile leggere il codice HTML.
Utilizzando un ben formato "close to XHTML" sintassi, può essere intelligente.
Tenere sempre il vostro stile intelligente, ordinato, pulito, e ben formato.
Utilizzare corretto tipo di documento
dichiarare sempre il tipo di documento come la prima linea nel documento:
<!DOCTYPE html>Se si vuole coerenza con casi i tag più bassi, è possibile utilizzare:
<!DOCTYPE html>Utilizzare Lettera minuscola elemento Nomi
HTML5 consente la miscelazione lettere maiuscole e minuscole nei nomi degli elementi.
Si consiglia di utilizzare nomi di elementi minuscoli:
- Mescolando i nomi maiuscoli e minuscoli è male
- Gli sviluppatori sono abituati ad usare i nomi minuscole (as in XHTML)
- pulitore sguardo Minuscolo
- Minuscole sono più facili da scrivere
Cattivo:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Molto brutto:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Buona:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Chiudere tutti gli elementi HTML
In HTML5, non è necessario chiudere tutti gli elementi (for example the <p> element) .
Si consiglia di chiudere tutti gli elementi HTML:
Guardando male:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Guardando bene:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Chiudi vuoto Elementi HTML
In HTML5, è facoltativo per chiudere elementi vuoti.
Questo è consentito:
<meta charset="utf-8">Questo è anche consentito:
<meta charset="utf-8" />La barra (/) è richiesto in XHTML e XML.
Se vi aspettate un software XML per accedere alla tua pagina, potrebbe essere una buona idea per tenerlo.
Usa minuscole nomi di attributi
HTML5 consente la miscelazione lettere maiuscole e minuscole nei nomi degli attributi.
Si consiglia di utilizzare nomi degli attributi in minuscolo:
- Mescolando i nomi maiuscoli e minuscoli è male
- Gli sviluppatori sono abituati ad usare i nomi minuscole (as in XHTML)
- pulitore sguardo Minuscolo
- Minuscole sono più facili da scrivere
Guardando male:
<div CLASS="menu">Guardando bene:
<div class="menu">Valori attributo Citazione
HTML5 consente valori di attributo senza virgolette.
Si consiglia citando i valori degli attributi:
- Devi usare le virgolette se il valore contiene spazi
- stili di miscelazione non è mai buono
- I valori indicati sono più facili da leggere
Questo non funziona, perché il valore contiene spazi:
<table class=table striped>Questo funziona:
<table class="table striped">attributi di immagine
Utilizzare sempre alt attributo con le immagini. E 'importante quando l'immagine non può essere visualizzato.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">definire sempre dimensione dell'immagine. Si riduce lo sfarfallio perché il browser può riservare spazio per le immagini prima che vengano caricati.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px ">Spazi e segni di uguale
Gli spazi attorno segni di uguale è legale:
<link rel = "stylesheet" href = "styles.css">Ma lo spazio-meno è più facile da leggere, e gruppi di entità meglio insieme:
<link rel="stylesheet" href="styles.css">Evitare di linee di codice lungo
Quando si utilizza un editor HTML, è scomodo per scorrere verso destra e sinistra per leggere il codice HTML.
Cercate di evitare di linee di codice di lunghezza superiore a 80 caratteri.
Le righe vuote e indentazione
Non aggiungere righe vuote senza una ragione.
Per facilitare la lettura, aggiungere righe vuote per separare i blocchi di codice di grandi dimensioni o logici.
Per facilitare la lettura, aggiungere 2 spazi di indentazione. Non usare TAB.
Non utilizzare righe vuote non necessarie e rientro. Non è necessario utilizzare righe vuote tra articoli brevi e relativi. Non è necessario far rientrare ogni elemento:
Non necessario:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>Meglio:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>Tabella Esempio:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>Lista Esempio:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>Tralasciando <html> e <body> ?
Nello standard HTML5, il <html> tag e il <body> tag possono essere omessi.
Il seguente codice convaliderà come HTML5:
Esempio
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> Prova tu stesso " Si consiglia di non omettere i <html> e <body> tag.
Il <html> elemento è la radice del documento. E 'il posto consigliato per specificare la lingua della pagina:
<!DOCTYPE html>
<html lang="en-US">La dichiarazione di una lingua è importante per le applicazioni di accessibilità (screen readers) e motori di ricerca.
Omettendo <html> o <body> può mandare in crash DOM XML e software.
Tralasciando <body> può produrre errori nei vecchi browser (IE9) .
Tralasciando <head> ?
Nello standard HTML5, il <head> tag può anche essere omesso.
Per impostazione predefinita, i browser si aggiungono tutti gli elementi prima di <body> , ad un default <head> elemento.
È possibile ridurre la complessità del codice HTML, omettendo il <head> tag:
Esempio
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Prova tu stesso " Tralasciando i tag è familiare per gli sviluppatori web. Ha bisogno di tempo per essere stabilito come linea guida.
Meta Data
Il <title> elemento è richiesto in HTML5. Rendere il titolo più significativa possibile:
<title>HTML5 Syntax and Coding Style</title>Per assicurare una corretta interpretazione e corretta indicizzazione dei motori di ricerca, sia la lingua e la codifica dei caratteri dovrebbe essere definito il più presto possibile in un documento:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>commenti HTML
Commenti brevi devono essere scritti su una riga, con uno spazio dopo <!-- and a space before --> :
<!-- This is a comment -->Commenti lunghi, che coprono molte linee, devono essere scritti con <!-- and --> Su righe separate:
<!--
This is a long comment example. This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example. This is a long comment example.
-->commenti lunghi sono più facili da osservare, se sono rientrati 2 spazi.
Fogli di stile
Utilizzare la sintassi semplice per collegare i fogli di stile (the type attribute is not necessary) :
<link rel="stylesheet" href="styles.css">regole brevi possono essere scritte compressi, su una sola riga, in questo modo:
p.into {font-family: Verdana; font-size: 16em;}regole lunghi devono essere scritti su più righe:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}- Posizionare la staffa apertura sulla stessa riga del selettore.
- Utilizzare uno spazio prima la parentesi di apertura.
- Utilizzare 2 spazi di indentazione.
- Utilizzare i due punti più uno spazio tra ogni proprietà e il suo valore.
- Utilizzare lo spazio dopo ogni virgola o punto e virgola.
- Utilizzare il punto e virgola dopo ogni coppia proprietà-valore, compresa l'ultima.
- utilizzare le virgolette intorno a valori solo se il valore contiene spazi.
- Posizionare la staffa di chiusura su una nuova linea, senza spazi iniziali.
- Evitare le linee più di 80 caratteri.
L'aggiunta di uno spazio dopo la virgola o un punto e virgola, è una regola generale, in tutti i tipi di scrittura.
Caricamento JavaScript in HTML
Utilizzare la sintassi semplice per il caricamento di script esterni (the type attribute is not necessary) :
<script src="myscript.js">Accesso agli elementi HTML con Javascript
Una conseguenza dell'utilizzo di "untidy" stili HTML, potrebbe comportare errori JavaScript.
Queste due affermazioni JavaScript produrranno risultati diversi:
Se possibile, utilizzare la stessa convenzione di denominazione (as JavaScript) in HTML.
Visita la Guida JavaScript Style .
Utilizzare minuscola nomi di file
La maggior parte dei server web (Apache, Unix) sono case sensitive sui nomi di file:
London.jpg non è possibile accedere come London.jpg.
Altri web server (Microsoft, IIS) non sono case sensitive:
London.jpg si può accedere come London.jpg o London.jpg.
Se si utilizza un mix di lettere maiuscole e minuscole, bisogna essere estremamente coerente.
Se ci si sposta da un case insensitive, a un server sensibile caso, anche i piccoli errori si romperà il vostro Web.
Per evitare questi problemi, utilizzare sempre nomi di file minuscolo (if possible) .
estensioni di file
File HTML devono avere un'estensione .html (or .htm ) .
File CSS dovrebbero avere un'estensione css.
File JavaScript dovrebbero avere un'estensione .js.
Differenze tra htm e html
Non v'è alcuna differenza tra il .htm e .html estensioni. Entrambi saranno trattati come HTML da qualsiasi browser web o web server.
Le differenze sono culturali:
.htm "smells" di sistemi DOS precoce in cui il sistema limitato le estensioni a 3 caratteri.
.html "smells" di sistemi operativi Unix che non hanno questa limitazione.
differenze tecniche
Quando un URL non specifica un nome di file (like http://www.w3ii.com/css/) , il server restituisce un nome di file predefinito. i nomi dei file di default comuni sono index.html, index.htm, default.html e default.htm.
Se il server è configurato solo con "index.html" come nome di file predefinito, il file deve essere chiamato "index.html" , non "index.htm."
Tuttavia, i server possono essere configurati con più di un nome di file di default, e normalmente è possibile impostare il maggior numero di nomi di file predefiniti in base alle esigenze.
In ogni caso, l'estensione completa per i file HTML è .html, e non c'è ragione per cui non dovrebbe essere usato.