Ghid de stil HTML

Ghid de Stil HTML

Un cod HTML consecvent, curat și ordonat face codul tău mai ușor de citit și înțeles de alții. Iată câteva reguli și sfaturi pentru a scrie HTML de calitate.

Declară Întotdeauna Tipul de Document

Declară întotdeauna tipul documentului ca prima linie a documentului. Pentru HTML, cel corect este <!DOCTYPE html>.

Doctype HTML5

Doctype-ul de pus pe prima linie.

index.html 
<!DOCTYPE html>

Folosește Nume de Elemente cu Litere Mici

HTML permite amestecarea literelor mari și mici în numele elementelor, dar se recomandă literele mici: amestecul de litere arată urât, dezvoltatorii folosesc de obicei litere mici, iar literele mici sunt mai curate și mai ușor de scris. Așa că scrie <p>Acesta este un paragraf.</p>, nu <P>.

Închide Toate Elementele HTML

În HTML nu trebuie să închizi fiecare element (precum <p>), dar este puternic recomandat să o faci. Închiderea fiecărui tag menține structura clară și evită surprizele.

Folosește Nume de Atribute cu Litere Mici

HTML permite nume de atribute cu litere amestecate, dar se recomandă literele mici din aceleași motive ca la numele elementelor: arată mai curat, este ceea ce folosesc de obicei dezvoltatorii și este mai ușor de scris. Așa că scrie href, nu HREF.

Pune Întotdeauna Valorile Atributelor Între Ghilimele

HTML permite valori de atribute fără ghilimele, dar ar trebui să le pui între ghilimele: dezvoltatorii o fac de obicei, valorile cu ghilimele sunt mai ușor de citit, iar dacă valoarea conține spații trebuie neapărat să folosești ghilimele. O valoare cu spații scrisă fără ghilimele nu va funcționa.

Specifică Întotdeauna alt, width și height pentru Imagini

Setează întotdeauna atributul alt pe imagini, deoarece contează atunci când imaginea nu poate fi afișată. De asemenea, setează width și height, ceea ce reduce clipirea, deoarece browserul poate rezerva spațiu pentru imagine înainte ca aceasta să se încarce.

Spații și Semne de Egalitate

HTML permite spații în jurul semnelor de egalitate, dar omiterea lor este mai ușor de citit și grupează lucrurile mai bine. Așa că scrie rel="stylesheet", nu rel = "stylesheet".

Evită Liniile de Cod Lungi

Când folosești un editor HTML, derularea la stânga și la dreapta pentru a citi codul este incomodă, deci încearcă să eviți liniile foarte lungi.

Linii Goale și Indentare

Nu adăuga linii goale, spații sau indentare fără motiv. Pentru lizibilitate, adaugă linii goale pentru a separa blocuri mari sau logice, și folosește două spații de indentare în loc de tasta tab.

Nu Omite Niciodată Elementul <title>

Elementul <title> este obligatoriu în HTML. Contează mult pentru optimizarea pentru motoarele de căutare (SEO), deoarece motoarele de căutare îl folosesc pentru a ordona paginile în rezultate. Setează titlul din bara de instrumente a browserului, numele folosit atunci când pagina este adăugată la favorite, precum și titlul din rezultatele căutării, deci fă-l precis și cu sens.

Omiterea <html> și <body>?

O pagină HTML va fi validă chiar și fără tag-urile <html> și <body>, dar ar trebui să le adaugi mereu. Omiterea <body> poate cauza erori în browserele mai vechi, iar omiterea ambelor poate bloca software-uri DOM și XML.

Pagină fără html și body

O pagină care omite tag-urile <html> și <body> (nerecomandat).

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

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

Omiterea <head>?

Tag-ul <head> poate fi de asemenea omis; browserul adaugă toate elementele dinainte de <body> într-un head implicit. Chiar și așa, se recomandă folosirea tag-ului <head>.

Pagină fără head

O pagină care omite tag-ul <head> (nerecomandat).

index.html 
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

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

</body>
</html>

Închiderea Elementelor HTML Goale?

În HTML este opțional să închizi elementele goale, deci atât <meta charset="utf-8">, cât și <meta charset="utf-8" /> sunt permise. Dacă te aștepți ca software XML sau XHTML să citească pagina ta, păstrează bara oblică de închidere, deoarece acolo este obligatorie.

Adaugă Atributul lang

Include întotdeauna atributul lang pe tag-ul <html> pentru a declara limba paginii. Acest lucru ajută motoarele de căutare și browserele.

Exemplu

Un document care își declară limba cu lang="en-us".

Prompt
Un document HTML complet care își declară limba cu lang="ro-ro" pe eticheta html, cu un titlu în head și un titlu (heading) și un paragraf în body.
Rezultat: pagină HTML completă

Meta Date

Pentru o interpretare corectă și pentru indexarea de către motoarele de căutare, definește atât limba, cât și codificarea caracterelor (<meta charset="...">) cât mai devreme posibil în document.

Limbă și charset

Declararea limbii și a setului de caractere devreme, în head.

index.html 
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>

Setarea Viewport-ului

Viewport-ul este zona vizibilă a paginii pentru utilizator, mai mică pe un telefon decât pe un calculator. Include tag-ul <meta> pentru viewport în fiecare pagină. Partea width=device-width face ca lățimea paginii să urmeze ecranul dispozitivului, iar initial-scale=1.0 setează nivelul inițial de zoom.

Meta tag pentru viewport

Tag-ul meta pentru viewport de inclus în fiecare pagină.

index.html 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Comentarii HTML

Scrie comentarii scurte pe o singură linie, precum <!-- Acesta este un comentariu -->. Pentru comentarii care se întind pe mai multe linii, pune <!-- și --> pe rânduri proprii; comentariile lungi sunt mai ușor de citit dacă sunt indentate cu două spații.

Folosirea Foilor de Stil

Folosește o sintaxă simplă pentru a lega o foaie de stil (atributul type nu este necesar). Regulile CSS scurte pot fi scrise pe o singură linie, în timp ce regulile lungi ar trebui să se întindă pe mai multe linii: pune acolada de deschidere pe aceeași linie cu selectorul, cu un spațiu înainte, indentează cu două spații, termină fiecare proprietate cu punct și virgulă, pune valorile între ghilimele doar dacă conțin spații, iar acolada de închidere pune-o pe propriul rând.

Încărcarea JavaScript în HTML

Folosește o sintaxă simplă pentru a încărca scripturi externe; atributul type nu este necesar, de exemplu <script src="myscript.js">.

Accesarea Elementelor HTML cu JavaScript

HTML dezordonat poate cauza erori JavaScript. Deoarece id-urile sunt sensibile la majuscule, getElementById("Demo") și getElementById("demo") se referă la elemente diferite și dau rezultate diferite.

Id-uri sensibile la majuscule

Două instrucțiuni care vizează elemente diferite deoarece majusculele din id diferă.

script.js 
getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

Folosește Nume de Fișiere cu Litere Mici

Unele servere web (Apache, Unix) tratează numele fișierelor ca fiind sensibile la majuscule, deci london.jpg nu este identic cu London.jpg; altele (Microsoft IIS) nu. Pentru a evita probleme la mutarea între servere, folosește întotdeauna nume de fișiere cu litere mici.

Extensii de Fișiere

Fișierele HTML ar trebui să folosească extensia .html (.htm este permis), fișierele CSS extensia .css, iar fișierele JavaScript extensia .js.

Diferențe Între .htm și .html?

Nu există nicio diferență între extensiile .htm și .html. Ambele sunt tratate ca HTML de orice browser și server.

Nume de Fișiere Implicite

Când un URL nu numește un fișier la final (precum https://prompt-cookbook.com), serverul adaugă un nume de fișier implicit, precum index.html, index.htm, default.html sau default.htm. Dacă singurul implicit al serverului este index.html, fișierul tău trebuie să se numească exact așa. Serverele pot fi de asemenea configurate cu mai multe nume de fișiere implicite.