HTML(5) Style Guide and Coding Conventions

Convenții HTML de codificare a mărfurilor

Dezvoltatorii web sunt adesea incerte despre stilul de codificare și sintaxa pentru a utiliza în HTML.

Între 2000 și 2010, mulți dezvoltatori web convertit de la HTML la XHTML.

Cu XHTML, dezvoltatorii au fost obligați să scrie valabile și "well-formed" cod.

HTML5 este un pic mai neglijent atunci când vine vorba de codul de validare.

Cu HTML5, trebuie să vă creați propriile convenții Cele mai bune practici, Ghid stilistic și de codificare a mărfurilor.

Fii inteligent și tehnologiile viitoare

O utilizare ulterioară a stilului, face mai ușor pentru alții să înțeleagă și să utilizeze HTML.

În viitor, programe cum ar fi cititorii XML, ar putea dori să citească codul HTML.

Folosind un bine format "close to XHTML" sintaxa, poate fi inteligent.

Păstrați întotdeauna stilul inteligent, ordonat, curat și bine format.

Utilizați corect Tip de document

să declare întotdeauna tipul de document ca prima linie din document:

<!DOCTYPE html>

Dacă doriți coerența cu tag-uri minuscule, puteți utiliza:

<!DOCTYPE html>

Utilizați Lower Case nume de elemente

HTML5 permite amestecarea litere mari și mici în nume de elemente.

Vă recomandăm să utilizați nume de elemente cu litere mici:

Amestecarea nume mari și litere mici este rău
Dezvoltatorii sunt utilizate pentru folosirea numelor mici (as in XHTML)
Minuscule mai curat aspect
Minuscule sunt mai ușor de a scrie

Rău:

<SECTION>
<p>This is a paragraph.</p>
</SECTION>

Foarte rău:

<SECTION>
<p>This is a paragraph.</p>
</SECTION>

Bun:

<SECTION>
<p>This is a paragraph.</p>
</SECTION>

Închide Toate Elemente HTML

În HTML5, nu trebuie să închidă toate elementele (for example the <p> element) , (for example the <p> element) .

Vă recomandăm să închideți toate elementele HTML:

Privind rău:

<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

Arata bine:

<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

Închide Gol Elemente HTML

În HTML5, este opțională pentru a închide elemente goale.

Acest lucru este permis:

Acest lucru este, de asemenea, a permis:

Slash (/) este necesară în XHTML și XML.

Dacă vă așteptați software-ul XML pentru a accesa pagina dvs., ar putea fi o idee bună să-l păstrați.

Use Case de Jos nume de atribute

HTML5 permite amestecarea litere mari și mici în nume de atribute.

Vă recomandăm să utilizați nume de atribute cu litere mici:

Amestecarea nume mari și litere mici este rău
Dezvoltatorii sunt utilizate pentru folosirea numelor mici (as in XHTML)
Minuscule mai curat aspect
Minuscule sunt mai ușor de a scrie

Privind rău:

Arata bine:

Valori Citat Atribut

HTML5 permite valorilor atributelor fără ghilimele.

Vă recomandăm citând valorile atributelor:

Trebuie să utilizați ghilimele dacă valoarea conține spații
Amestecarea stiluri nu este niciodată bun
Valorile indicate sunt mai ușor de citit

Acest lucru nu va funcționa, deoarece valoarea conține spații:

Acest lucru va funcționa:

Atribute imagine

Utilizați întotdeauna alt atribut cu imagini. Este important ca atunci când imaginea nu poate fi vizualizat.

Întotdeauna defini dimensiunea imaginii. Reduce pâlpâirea, deoarece browser-ul poate rezerva spațiu pentru imagini înainte ca acestea sunt încărcate.

Spații și egalurile

Spațiile în jurul egalurile este legal:

Dar-spațiu mai puțin este mai ușor de citit, și grupuri de entități mai bine împreună:

Evitați linii de cod lung

Când se folosește un editor HTML, este incomod pentru a defila dreapta și stânga pentru a citi codul HTML.

Încercați să evitați liniile de cod mai lungi de 80 de caractere.

Linii goale și amprentare

Nu adăugați linii goale, fără un motiv.

Pentru lizibilitate, adăuga linii goale pentru a separa blocuri mari sau logice de cod.

Pentru lizibilitate, se adaugă 2 spații de indentare. Nu utilizați TAB.

Nu utilizați linii goale inutile și indentare. Nu este necesar să se folosească linii goale între elemente scurte și conexe. Nu este necesar să indentare fiecare element:

Inutil:

<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>

Mai bine:

<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>

Tabel Exemplu:

<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>

Exemplu de listă:

<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>

Omiterea <html> și <body> ?

În standard HTML5, <html> tag și <body> tag - ul poate fi omis.

Codul de mai jos va valida ca HTML5:

Exemplu

<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Încearcă - l singur »

Nu recomandăm omiterea <html> și <body> tag - uri.

<html> element este documentul rădăcină. Este locul recomandat pentru specificarea limbii paginii:

<!DOCTYPE html>
<html lang="en-US">

Declararea unei limbi este importantă pentru aplicațiile de accesibilitate (screen readers) de (screen readers) și motoarele de căutare.

Omiterea <html> sau <body> poate crash DOM și software - ul XML.

Omiterea <body> poate produce erori în browsere mai vechi (IE9) .

Omiterea <head> ?

În standardul HTML5, <head> tag - ul poate fi omisă.

În mod implicit, browsere vor adăuga toate elementele înainte de <body> , la o valoare implicită <head> Element.

Puteți reduce complexitatea HTML, prin omiterea <head> tag - ul:

Exemplu

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Încearcă - l singur »

Omiterea tag-uri este necunoscut pentru dezvoltatorii web. Este nevoie de timp să fie stabilit ca un ghid.

Meta date

<title> Elementul este necesară în HTML5. Asigurați-vă titlul cât semnificativ posibil:

<title>HTML5 Syntax and Coding Style</title>

Pentru a asigura o interpretare corectă și corectă indexare motor de căutare, atât în limba și codificarea caracterelor trebuie să fie definite cât mai curând posibil, într-un document:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>

HTML Comentarii

Scurte comentarii ar trebui să fie scrise pe o singură linie, cu un spațiu după  :

Comentarii lungi, care acoperă mai multe linii, ar trebui să fie scrise cu  Pe linii separate:

comentarii lungi sunt mai ușor de observat, în cazul în care acestea sunt indentate 2 locuri.

Foi de stil

Utilizați sintaxă simplă pentru conectarea foi de stil (the type attribute is not necessary) de (the type attribute is not necessary) :

reguli scurte pot fi scrise comprimat, pe o singură linie, astfel:

p.into {font-family: Verdana; font-size: 16em;}

Normele lungi ar trebui să fie scrise pe mai multe linii:

body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

Așezați suportul de deschidere pe aceeași linie ca și selectorul.
Utilizați un spațiu înainte de paranteza de deschidere.
Utilizați 2 spații de indentare.
Utilizați două puncte plus un spațiu între fiecare proprietate și valoarea sa.
Utilizați spațiu după fiecare virgulă sau punct și virgulă.
Utilizați punct și virgulă după fiecare pereche de proprietate valoare, inclusiv ultima.
Utilizați numai ghilimele valori în cazul în care valoarea conține spații.
Așezați suportul de închidere pe o linie nouă, fără spații de conducere.
Evitați liniile de peste 80 de caractere.

Adăugarea unui spațiu după o virgulă sau punct și virgulă, este o regulă generală în toate tipurile de scriere.

Se încarcă JavaScript în HTML

Utilizați sintaxă simplă pentru încărcarea script - uri externe (the type attribute is not necessary) de (the type attribute is not necessary) :

Accesarea elementelor HTML cu JavaScript

O consecință a utilizării "untidy" stiluri HTML, ar putea avea ca rezultat erori JavaScript.

Aceste două declarații JavaScript va produce rezultate diferite:

Exemplu

var obj = getElementById("Demo")

var obj = getElementById("demo")

Încearcă - l singur »

Dacă este posibil, utilizați aceeași convenție de denumire (as JavaScript) în HTML.

Vizitați Style Guide JavaScript .

Utilizați nume de fișiere Minuscule

Cele mai multe servere de web (Apache, Unix) sunt cazuri sensibile cu privire la nume de fișiere:

london.jpg nu pot fi accesate ca London.jpg.

Alte servere de web (Microsoft, IIS) nu sunt sensibile la litere:

london.jpg pot fi accesate ca London.jpg sau london.jpg.

Dacă utilizați o combinație de litere mari și mai mici, trebuie să fie extrem de consistente.

Dacă mutați de la un caz insensibil, la un server de sensibil caz, chiar si mici erori va rupe dvs. de web.

Pentru a evita aceste probleme, folosiți întotdeauna nume de fișiere cu litere mici (if possible) este (if possible) .

Extensii de fișiere

Fișierele HTML ar trebui să aibă o extensie .html (or .htm ) .

Fișiere CSS ar trebui să aibă o extensie .css.

Fișiere JavaScript ar trebui să aibă o extensie .js.

Diferențe între .htm și .html

Nu există nici o diferență între .htm și extensiile .html. Ambele vor fi tratate ca HTML prin orice browser web sau pe un server web.

Diferențele sunt culturale:

.htm "smells" a sistemelor DOS timpurie în cazul în care sistemul a limitat extensiile la 3 caractere.

.html "smells" a sistemelor de operare Unix , care nu au avut această limitare.

Diferențele tehnice

Atunci când o adresă URL nu specifică un nume de fișier (like http://www.w3ii.com/css/) , serverul returnează un nume de fișier implicit. nume de fișiere comune implicite sunt index.html, index.htm, default.html și default.htm.

Dacă serverul dvs. este configurat numai cu "index.html" ca nume de fișier implicit, fișierul trebuie să fie numit "index.html" , nu "index.htm."

Cu toate acestea, servere pot fi configurate cu mai mult de un nume de fișier implicit, și în mod normal, puteți seta cât mai multe nume de fișiere implicite după cum este necesar.

Oricum, extensia completă pentru fișiere HTML este .html, și nu există nici un motiv nu trebuie utilizat.

❮ Anterior Urmatorul capitol ❯

HTML5 Tutorial

HTML Formulare

HTML5

HTML Grafică

HTML Mass-media

HTML APIs

HTML Exemple

HTML Referințe

HTML(5) Style Guide and Coding Conventions

Convenții HTML de codificare a mărfurilor

Fii inteligent și tehnologiile viitoare

Utilizați corect Tip de document

Utilizați Lower Case nume de elemente

Rău:

Foarte rău:

Bun:

Închide Toate Elemente HTML

Închide Gol Elemente HTML

Use Case de Jos nume de atribute

Valori Citat Atribut

Atribute imagine

Spații și egalurile

Evitați linii de cod lung

Linii goale și amprentare

Inutil:

Mai bine:

Tabel Exemplu:

Exemplu de listă:

Omiterea <html> și <body> ?

Exemplu

Omiterea <head> ?

Exemplu

Meta date

HTML Comentarii

Foi de stil

Se încarcă JavaScript în HTML

Accesarea elementelor HTML cu JavaScript

Exemplu

Utilizați nume de fișiere Minuscule

Extensii de fișiere

Diferențe între .htm și .html

Diferențele tehnice