Un principiu important în proiectarea web este ideea de a utiliza elemente HTML pentru a indica ce sunt de fapt, mai degrabă decât cum pot apărea în browser în mod implicit. Acest lucru este cunoscut sub numele de utilizarea semantic HTML.

Ce este HTML semantic?

HTML semantic sau marcaj semantic este HTML care introduce semnificație paginii web, nu doar prezentarea. De exemplu, a

 eticheta indică faptul că textul atașat este un paragraf. Acest lucru este atât semantic, cât și prezentativ, deoarece oamenii știu ce sunt paragrafele, iar browserele știu cum să le afișeze.

Pe partea opusă a acestei ecuații, etichete precum  și  nu sunt semantice. Acestea definesc doar cum ar trebui să arate textul (aldin sau cursiv) și nu oferă niciun sens suplimentar marcajului.

Exemple de etichete HTML semantice includ:

• Etichete antet

   prin

Există mai multe etichete HTML semantice pe care să le folosiți pe măsură ce creați un site Web conform standardelor.

De ce ar trebui să-ți pese de semantică

Avantajul scrierii HTML semantice provine din ceea ce ar trebui să fie scopul principal al oricărei pagini web: dorința de a comunica. Adăugând etichete semantice în documentul dvs., furnizați informații suplimentare despre acel document, care ajută la comunicare. Mai exact, etichetele semantice clarifică browserului care este semnificația unei pagini și a conținutului acesteia. Această claritate este comunicată și cu motoarele de căutare, asigurându-se că paginile potrivite sunt livrate pentru interogările corecte.

Etichetele HTML semantice oferă informații despre conținutul acelor etichete care depășesc doar aspectul pe care îl au pe o pagină. Text care este inclus în  eticheta este recunoscută imediat de browser ca un anumit tip de limbaj de codare. În loc să încerce să redea acel cod, browserul înțelege că folosiți textul respectiv ca exemplu de cod în scopul unui articol sau tutorial online.

Utilizarea etichetelor semantice vă oferă și mai multe cârlige pentru stilizarea conținutului. Poate că astăzi preferați ca mostrele de coduri să fie afișate în stilul implicit al browserului, dar mâine s-ar putea să doriți să le strigați cu o culoare de fundal gri; mai târziu, s-ar putea să doriți să definiți familia de fonturi mono-spațiată precisă sau stiva de fonturi de utilizat pentru probele dvs. Puteți face toate aceste lucruri cu ușurință utilizând marcaj semantic și CSS aplicat inteligent.

Utilizarea corectă a etichetelor semantice

Atunci când utilizați etichete semantice pentru a transmite sens mai degrabă decât în ​​scopuri de prezentare, aveți grijă să nu le utilizați incorect, pur și simplu pentru proprietățile lor comune de afișare. Unele dintre cele mai frecvent utilizate etichete semantice includ:

• cotare blocată - Unii oameni folosesc etichetă pentru indentarea textului care nu este un citat. Acest lucru se datorează faptului că ghilimelele sunt indentate în mod implicit. Dacă doriți pur și simplu să indentați textul care nu este un blockquote, utilizați în schimb margini CSS.
• p - Unii editori web folosesc (un spațiu neîntrerupt conținut într-un paragraf) pentru a adăuga spațiu suplimentar între elementele paginii, mai degrabă decât definirea paragrafelor reale pentru textul acelei pagini. Ca și în exemplul anterior, ar trebui să utilizați în schimb marja sau proprietatea stilului de umplere pentru a adăuga spațiu.
• ul - Ca și în cazul

  , înglobând text în interiorul unui

   eticheta indentează textul în majoritatea browserelor. Acesta este atât HTML semantic incorect, cât și HTML nevalid, deoarece doar
  •  etichetele sunt valabile în cadrul unui
    etichetă. Din nou, utilizați marja sau stilul de umplere pentru a indenta textul.
  • h1, h2, h3, h4, h5 și h6 - Puteți utiliza etichete de titlu pentru a face fonturile mai mari și mai îndrăznețe, dar dacă textul nu este un titlu, utilizați în schimb proprietățile CSS cu greutatea fontului și cu dimensiunea fontului.

  Utilizând etichete HTML care au semnificație, creați pagini care transmit mai multe informații decât cele care pur și simplu înconjoară totul

   Etichete.

  Ce etichete HTML sunt semantice?

  Deși aproape fiecare etichetă HTML4 și toate HTML5 etichetele au semnificații semantice, unele etichete sunt în primul rând semantic.

  De exemplu, HTML5 a redefinit semnificația  și  etichetele să fie semantice.  eticheta nu transmite o importanță suplimentară; mai degrabă, textul etichetat este de obicei redat cu caractere aldine. La fel,  eticheta nu transmite o importanță sau un accent suplimentar; mai degrabă, definește textul care este redat de obicei în cursiv.

  Etichete HTML semantice

  Abreviere
  Acronim
  Citat lung
  Definiție
  Adresa autorului (autorilor) documentului
  Citare
  Cod de referință
  Teletip text
  Diviziunea logică
  Container generic în stil
  Text șters
  Text inserat
  Accent
  Accent puternic
  Titlul de primul nivel
  Titlul celui de-al doilea nivel
  Titlul nivelului al treilea
  Titlul celui de-al patrulea nivel
  Titlul de nivelul cinci
  Titlul nivelului șase
  	Pauză tematică
  Text care trebuie introdus de utilizator
  Text pre-formatat
  Citat scurt în linie
  Eșantion de ieșire
  Indice
  Superscript
  Text variabil sau definit de utilizator