Se poate trece la capitolul următor cu tasta ► și se poate reveni la un capitol precedent cu tasta ◄

Structura unui document HTML


<

C
a
p
i
t
o
l
u
l

a
n
t
e
r
i
o
r

<

Fiecare document HTML are o anumită structură. Dacă până acuma am vorbit că orice text este în sinea lui un document HTML valid, vom îmbunătății această afirmație și vom defini ce este o structură validă (pentru o aplicație care lucrează cu astfel de documente). De data asta vom începe cu un exemplu:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
</body>
</html>

Prima linie arată un pic ciudat. Pare să fie o etichetă, însă am spus că toate etichetele vin în perechi, una care deschide acea structură, și a doua care ne spune unde această structură se oprește. Sau dacă avem elemente care nu necesită un conținut, se pune / înainte de a închide prima etichetă (de exemplu: <br/>). În acest caz nu avem nici una din cele spuse.

Motivul este simplu: prima linie a unui document HTML este rezervată pentru a defini ce tip de document vom scrie. E un fel de înțelegere între noi, ca dezvoltatori, și browser-ul/aplicația în care se va deschide acel document că vom folosi un anumit set de reguli. Browser-ul citește prima linie și deja se pregătește pentru un anumit tip de conținut.

Desigur, există mai multe tipuri de reguli pe care un document HTML le poate conține, însă suntem în 2015 și HTML5 este deja un standard. Adică toate aplicațiile uzuale care deschid pagini .html știu să lucreze (în mare parte) cu standardul HTML5.

Ca paranteză, alte declarații (depășite acum) pot fi:

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Da. Declarațiile anterioare erau mai complicate. Însă cu standardul HTML5, e suficient să scriem <!DOCTYPE html> și să ne vedem de treabă.

Iar de aici începe documentul nostru propriu-zis. Deși puțin repetitiv, tot documentul este construit în cadrul etichetei <html></html>. Aceasta conține două părți: un antet și un conținut.

Antetul (partea din <head></head>) definește proprietăți ale documentul HTML și resurse care vor fi folosite în cadrul acestuia. Ceea ce este scris aicie nu apare afișat în fereastra aplicației pe care o folosim, însă informațiile sunt prelucrate și utilizate.

În partea de conținut (sau, altul spus, în corpul documentului HTML) este definită structura (inclusiv textul) pe care vrem să-l afișăm. Să luăm un exemplu:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<p>
<strong title="Subiectul propoziției">Ana</strong> este interesată de disiparea forței gravitaționale <em>într-un spațiu deca-dimensional</em>.
</p>
</body>
</html>

 Oh, Ana...

Dacă este să deschidem un fișier .html ce conține acest text, vom vedea:

Ana este interesată de disiparea forței gravitaționale într-un spațiu deca-dimensional.

Nimica neobișnuit, doar că acum respectăm structura formatului HTML5. Ceea ce înseamnă mult pentru că, după cum scriam, aplicațiile de navigare pot să ascundă unele greșeli sau omisiuni făcute de dezvoltatori și să dea impresia că totul e corect deși nu este așa. Chiar dacă ar fi mult mai simplu să scriem proproziția fără să mai ne complicăm cu alte tag-uri, că rezultatul va fi același, noi trebuie să ne obișnuim să respectăm standardul (legile) pe care l-am ales (nu că ar fi altceva mai bun decât HTML5. Pe moment.)

De asemenea, avem un nou tag: <p></p> Acesta vine de la paragraf și are beneficiul de a împărți vizual textul în paragrafe. Exact ceea ce majoritatea nu fac când scriu un comentare „pe net” rezultând un bloc IMENS de text fără început și sfârșit.


>

C
a
p
i
t
o
l
u
l

u
r
m
ă
t
o
r

>

Ți-a fost de ajutor ce am scris aici?
Hei, mersi de răspuns.