Ce este codul HTML semantic și de ce ar trebui să îl folosiți

Un principiu important al mișcării standardelor Web care este responsabil pentru industria pe care o avem astăzi este ideea utilizării elementelor HTML pentru ceea ce sunt, mai degrabă decât modul în care acestea pot apărea în browser în mod implicit. Acest lucru este cunoscut ca folosirea HTML-ului semantic.

Ce este Semantic HTML

HTML-ul semantic sau marcajul semantic este un HTML care introduce semnificația pentru pagina web, nu doar pentru prezentare. De exemplu, a

eticheta indică faptul că textul inclus este un paragraf.

Acest lucru este atât semantic, cât și prezentational, deoarece oamenii știu ce paragrafe și browsere știu să le afișeze.

Pe partea laterală a acestei ecuații, etichetele de genul și nu sunt semantice, deoarece definesc doar modul în care textul ar trebui să arate (cu caractere aldine sau italice) și nu oferă niciun înțeles suplimentar markupului.

Exemple de etichete HTML semantice includ etichetele antetului

prin

,

, și . Există mai multe tag-uri HTML semantice care pot fi utilizate pe măsură ce construiți un site web compatibil cu standardele.

De ce ar trebui să aveți grijă de semantică

Beneficiul scrisului HTML semantic decurge din ceea ce ar trebui să fie obiectivul de conducere al oricărei pagini web - dorința de a comunica. Prin adăugarea de etichete semantice în documentul dvs., furnizați informații suplimentare despre acel document, care ajută la comunicare. În mod specific, etichetele semantice clarifică în browser ce semnificație are o pagină și conținutul acesteia.

Această claritate este, de asemenea, comunicată cu motoarele de căutare, asigurându-se că paginile potrivite sunt livrate pentru interogările corecte.

Etichetele HTML semantice furnizează informații despre conținutul acestor etichete, care depășesc doar modul în care arată pe o pagină. Textul care este inclus în tag-ul este imediat recunoscut de către browser ca un tip de limbaj de codare.

În loc să încercați să redați acest cod, browserul înțelege că utilizați acel text ca exemplu de cod în scopul unui articol sau al unui tutorial online de un fel.

Utilizarea de etichete semantice vă oferă mult mai multe cârlige pentru a-ți personaliza conținutul. Poate că astăzi preferați afișarea eșantioanelor de cod în stilul implicit al browserului, dar mâine doriți să le apelați cu o culoare de fund gri și mai târziu doriți să definiți familia precisă de fonturi monobloc sau stiva fontului pe care să o utilizați probele tale. Puteți face cu ușurință toate aceste lucruri folosind marcajul semantic și CSS aplicat inteligent.

Utilizați etichetele semantice corect

Când doriți să utilizați etichete semantice pentru a transmite sensul, mai degrabă decât pentru prezentare, trebuie să fiți atenți să nu le utilizați incorect pentru proprietățile lor comune de afișare. Unele dintre cele mai frecvent utilizate etichete semantice sunt:

• blockquote - Unii oameni folosesc

  etichetă pentru indentarea textului care nu este un citat. Acest lucru se datorează faptului că bloccotările sunt indentate în mod prestabilit. Dacă doriți pur și simplu să beneficiați de indentare, dar textul nu este un blocaj, utilizați în schimb marjele CSS.

• p - Unii editori web folosesc (un spațiu care nu se rupe într-un paragraf) pentru a adăuga un spațiu suplimentar între elementele paginii, în loc să definească paragrafe reale pentru textul acelei pagini. Ca și în cazul exemplului de indentare menționat anterior, ar trebui să utilizați proprietatea stilului de margine sau de umplutură pentru a adăuga spațiu.
• ul - cum ar fi blockquote, care include text în interiorul unui
  tagul introduce linkurile în majoritatea browserelor. Acesta este atât incorect din punct de vedere semantic, cât și HTML nevalid
  • etichetele sunt valabile într - un
    etichetă. Din nou, utilizați marginea sau stilul de umplutură în liniuță.
  • h1-h6 - Etichetele de titlu pot fi folosite pentru a face fonturile mai mari și mai îndrăznețe, dar dacă textul nu este o rubrică, nu ar trebui să fie în interiorul unei etichete de titlu. Utilizați în schimb proprietățile CSS pentru greutatea fontului și dimensiunea fontului, dacă doriți să modificați dimensiunea sau greutatea textului specific pe pagină.

  Folosind etichete HTML care au sens, creați pagini care conferă mai multe informații decât prin simpla înconjurătoare a tuturor

  Etichete.

  Ce etichete HTML sunt semantice?

  În timp ce aproape fiecare etichetă HTML4 și toate etichetele HTML5 au o semnificație semantică, unele etichete sunt în primul rând semantice.

  De exemplu, HTML5 a redefinit semnificația și etichetele să fie semantice. tag-ul nu transmite o importanță suplimentară, ci mai degrabă un text care este de obicei redat cu caractere aldine. De asemenea, eticheta nu transmite o importanță sau un accent suplimentar, ci definește mai degrabă textul redat în italice.

  Semantic HTML Tags

  	Abreviere
  	Acronim
  	Ofertă lungă
  	Definiție
  	Adresa pentru autor (i) a documentului
  	Citare
  	Cod de referință
  	Text cu text
  	Diviziune logică
  	Container generic de stil inline
  	Textul șters
  	Text inserat
  	Accent
  	Accent puternic
  	Titlul de primul nivel
  	Titlu al doilea nivel
  	Titlul de la al treilea nivel
  	Titlul al patrulea nivel
  	Titlul de la cel de-al cincilea nivel
  	Titlul al șaselea
  	Pauză tematică
  	Text introdus de utilizator
  	Text pre-formatat
  	Ofertă scurtă inline
  	Eșantion de probă
  	subscript
  	Exponent
  	Textul variabil sau definit de utilizator