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, o etichetă
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 precum și nu sunt semantice, deoarece definesc doar modul în care ar trebui să arate textul (cu caractere aldine sau cu caractere cursive) și nu oferă nici o semnificație suplimentară marcajului.
Exemple de etichete HTML semantice includ etichetele antet
până la , , ș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 browser ca fiind 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 - Unele persoane utilizează eticheta 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
& nbsp; (un spațiu care nu se rupe într-un paragraf) pentru a adăuga un spațiu suplimentar între elementele de pagină, î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, încadrarea textului în interiorul unei
tag-ul indentă acel text în majoritatea browserelor. Acesta este atât incorect din punct de vedere semantic, cât și HTML nevalid, deoarece numai etichetele - sunt valide într-o 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 înconjurarea tuturor cu etichetele
.
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 etichetelor și ca fiind semantice. Eticheta nu transmite o importanță suplimentară, ci mai degrabă un text care este de obicei redat cu caractere aldine. tag-ul, de asemenea, nu transmite o importanță sau un accent suplimentar, ci definește mai degrabă text care este redat de obicei î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
, ș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 browser ca fiind 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 - Unele persoane utilizează eticheta 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
& nbsp; (un spațiu care nu se rupe într-un paragraf) pentru a adăuga un spațiu suplimentar între elementele de pagină, î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, încadrarea textului în interiorul unei
tag-ul indentă acel text în majoritatea browserelor. Acesta este atât incorect din punct de vedere semantic, cât și HTML nevalid, deoarece numai etichetele - sunt valide într-o 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 înconjurarea tuturor cu etichetele
.
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 etichetelor și ca fiind semantice. Eticheta nu transmite o importanță suplimentară, ci mai degrabă un text care este de obicei redat cu caractere aldine. tag-ul, de asemenea, nu transmite o importanță sau un accent suplimentar, ci definește mai degrabă text care este redat de obicei î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