Վեբ Ստանդարտների շարժման կարեւոր սկզբունքը, որը պատասխանատու է արդյունաբերության համար այսօր, HTML- ի տարրերը օգտագործելու գաղափարն է այն բանի համար, թե ինչ են նրանք, քան թե ինչպես դրանք կարող են հայտնվել բրաուզերում: Սա հայտնի է որպես Semantic HTML- ի օգտագործումը:
Ինչ է Սեմական HTML
Semantic HTML կամ semantic markup- ը HTML է, որը ներկայացնում է իմաստը վեբ էջի փոխարեն, այլ ոչ թե ներկայացման: Օրինակ,
պիտակը ցույց է տալիս, որ կից տեքստը պարբերություն է:
Սա սիմենտիկ եւ ներկայացուցչական է, քանի որ մարդիկ գիտեն, թե ինչ պարապմունքներ են, եւ բրաուզերները գիտեն, թե ինչպես դրանք ցուցադրելու համար:
Այս հավասարման կողքի վրա, եւ պիտակները նշանակալի չեն, քանի որ նրանք սահմանում են, թե ինչպես պետք է տեքստը նայել (թավ կամ շեղ) եւ որեւէ այլ լրացուցիչ նշանակություն չի տալիս նշման:
Սեմական HTML տողերի օրինակները ներառում են
, , եւ վերնագրերի պիտակները: Կան շատ ավելի semantic HTML- ի պիտակներ, որոնք կարող են օգտագործվել որպես չափանիշներին համապատասխանող կայք:
Ինչու պետք է ուշադրություն դարձնեք իմաստաբանության վրա
Սեմական HTML- ի ստեղծման նպատակը բխում է այն բանից, թե ինչ պետք է լինի ցանկացած վեբ էջի շարժիչ նպատակ, շփվելու ցանկություն: Ձեր փաստաթղթում ավելացված է իմաստային պիտակներ, դուք տրամադրում եք լրացուցիչ տեղեկություններ այդ փաստաթղթի մասին, որը օգնում է կապի մեջ: Մասնավորապես, semantic tags- ը հստակեցնում է զննարկիչին, թե ինչ է նշանակում էջի իմաստը եւ դրա բովանդակությունը:
Այդ հստակությունը նաեւ հաղորդակցվում է որոնման համակարգերով, ապահովելով, որ ճիշտ էջերը տրամադրվեն ճիշտ հարցումների համար:
Semantic HTML tags- ը տեղեկություններ է տալիս այն տեքստի բովանդակության մասին, որը դուրս է գալիս այն բանից, թե ինչպես են նայում էջը: պիտակում տեղադրված տեքստը անմիջապես զննարկիչը ճանաչում է որպես որոշակի կոդավորման լեզու:
Այս կոդը կոտրելու փոխարեն, զննարկիչը հասկանում է, որ դուք օգտագործում եք այդ տեքստը, որպես հոդվածի հոդվածի կամ ինչ-որ տեսակի առցանց դասընթացի նպատակների համար:
Օգտագործելով սիմվոլիկ պիտակները, ձեր բովանդակությունը ոճավորելու համար ձեզ ավելի շատ կեռիկներ են տալիս: Հնարավոր է, այսօր դուք նախընտրում եք ունենալ ձեր կոդերի նմուշները լռելյայն զննարկիչի ոճով, բայց վաղը, ուզում եք զանգահարել դրանք գորշ ֆոնի գույնով, եւ հետագայում ցանկանում եք սահմանել ճշգրիտ մոնոֆակցված տառատեսակի տառատեսակ կամ տառատեսակ , ձեր նմուշները: Դուք հեշտությամբ կարող եք անել այս բոլոր բաները, օգտագործելով սիմվոլային չափանիշ եւ սրամտությամբ կիրառվող CSS:
Օգտագործեք Semantic Tags պատշաճ կերպով
Երբ դուք ցանկանում եք օգտագործել իմաստային պիտակներ, այլ ոչ թե ներկայացման նպատակներով փոխանցելու իմաստը, դուք պետք է զգույշ լինեք, որ դրանք սխալ օգտագործեն միայն իրենց ընդհանուր ցուցադրման հատկությունների համար: Ամենատարածված չարաշահող իմաստային տեգերից ոմանք ներառում են.
- blockquote - Որոշ մարդիկ օգտագործում են պիտակը, տեքստի չհրապարակելու համար, որը մեջբերում չէ: Սա է պատճառը, որ blockquotes- ն անջատված է լռությամբ: Եթե պարզապես ուզում եք հատուցումներ ստանալ, բայց տեքստը ոչ թե բլոկկոտ է, այլ CSS- ի ծածկանունը:
- p - Որոշ վեբ խմբագրիչները օգտագործում են
& nbsp; (paragraof- ում պարունակվող ոչ տարածվող տարածք) էջի տարրերի միջեւ լրացուցիչ տարածություն ավելացնելու համար, այլ ոչ թե այն էջի տեքստի համար փաստացի պարբերությունները սահմանելու համար: Ինչպես նախկինում նշված նշագրման օրինակով, դուք պետք է օգտագործեք շեղնաշարի կամ լրտեսության ոճի հատկություն, տարածք ավելացնելու համար:
- ul - Like blockquote- ը, որը ներառում է տեքստը
տեքստի ներդիրների մեջ, այն տեքստը, որը շատ բրաուզերներում է: Սա էլ semantically սխալ եւ անվավեր HTML, քանի որ միայն - պիտակները գործում են
պիտակով: Կրկին օգտագործեք շեղը կամ լցված ոճը, տեքստի անջատելու համար:
- h1-h6 - Թեմաների պիտակները կարող են օգտագործվել տառատեսակների ավելի մեծ եւ հուսալի դարձնելու համար, բայց եթե տեքստը վերնագիր չէ, այն չպետք է լինի վերնագրի պիտակի մեջ: Օգտագործեք font-weight եւ font-size CSS հատկությունները, փոխարենը, եթե ցանկանում եք փոխել ձեր էջի տեքստի չափը կամ կշիռը:
Օգտագործելով HTML տառերը, որոնք ունեն իմաստ ունեն, դուք ստեղծում եք ավելի շատ տեղեկություններ հաղորդող էջեր, քան պարզապես շրջապատող ամեն ինչ
պիտակներով:
Որ HTML- ի Tags են Semantic?
Չնայած գրեթե յուրաքանչյուր HTML4 պիտակը եւ բոլոր HTML5 պիտակը իմաստային նշանակություն ունեն, որոշ պիտակները հիմնականում նշանակում են բնութագրական:
Օրինակ, HTML5- ը վերաիմաստավորեց եւ պիտակների իմաստը, որպես իմաստաբան: պիտակը չի նշանակում լրացուցիչ նշանակություն, այլ տեքստային, որը սովորաբար դրսեւորվում է համարձակ: պիտակը նույնպես չի տալիս լրացուցիչ նշանակություն կամ շեշտադրում, այլ սահմանում է տեքստ, որը սովորաբար մատնվում է շեղագրով:
Սեմանտիկ HTML Թեմաներ
ԿԻՍՎԵԼ <հապավումը> Կրճատում
Երկար տառադարձություն Սահմանում <հասցե> Փաստաթղթի հեղինակի (հասցեների) հասցեն Մեջբերում Կոդի հղում Teletype տեքստը Տրամաբանական բաժանումը Ընդհանուր ներդիրի ոճի բեռնարկղ Ջնջված տեքստը Տեղադրված տեքստը Կարեւորում Ուժեղ շեշտը
Առաջին մակարդակի վերնագիր
Երկրորդ մակարդակի վերնագիր
Երրորդ մակարդակի վերնագիր
Չորրորդ մակարդակի վերնագիր
Հինգերորդ մակարդակի վերնագիր
Վեցերորդ մակարդակի վերնագիր
Թեմատիկ ընդմիջում Տեքստ մուտքագրելու համար օգտագործողի կողմից <նախ.> Նախնական ձեւաչափված տեքստը
Կարճ մեջբերված մեջբերում Նմուշի արտադրանքը Ենթաբաժին Վերադաս Փոփոխական կամ օգտագործողի կողմից սահմանված տեքստը
, եւ վերնագրերի պիտակները: Կան շատ ավելի semantic HTML- ի պիտակներ, որոնք կարող են օգտագործվել որպես չափանիշներին համապատասխանող կայք:
Ինչու պետք է ուշադրություն դարձնեք իմաստաբանության վրա
Սեմական HTML- ի ստեղծման նպատակը բխում է այն բանից, թե ինչ պետք է լինի ցանկացած վեբ էջի շարժիչ նպատակ, շփվելու ցանկություն: Ձեր փաստաթղթում ավելացված է իմաստային պիտակներ, դուք տրամադրում եք լրացուցիչ տեղեկություններ այդ փաստաթղթի մասին, որը օգնում է կապի մեջ: Մասնավորապես, semantic tags- ը հստակեցնում է զննարկիչին, թե ինչ է նշանակում էջի իմաստը եւ դրա բովանդակությունը:
Այդ հստակությունը նաեւ հաղորդակցվում է որոնման համակարգերով, ապահովելով, որ ճիշտ էջերը տրամադրվեն ճիշտ հարցումների համար:
Semantic HTML tags- ը տեղեկություններ է տալիս այն տեքստի բովանդակության մասին, որը դուրս է գալիս այն բանից, թե ինչպես են նայում էջը: պիտակում տեղադրված տեքստը անմիջապես զննարկիչը ճանաչում է որպես որոշակի կոդավորման լեզու:
Այս կոդը կոտրելու փոխարեն, զննարկիչը հասկանում է, որ դուք օգտագործում եք այդ տեքստը, որպես հոդվածի հոդվածի կամ ինչ-որ տեսակի առցանց դասընթացի նպատակների համար:
Օգտագործելով սիմվոլիկ պիտակները, ձեր բովանդակությունը ոճավորելու համար ձեզ ավելի շատ կեռիկներ են տալիս: Հնարավոր է, այսօր դուք նախընտրում եք ունենալ ձեր կոդերի նմուշները լռելյայն զննարկիչի ոճով, բայց վաղը, ուզում եք զանգահարել դրանք գորշ ֆոնի գույնով, եւ հետագայում ցանկանում եք սահմանել ճշգրիտ մոնոֆակցված տառատեսակի տառատեսակ կամ տառատեսակ , ձեր նմուշները: Դուք հեշտությամբ կարող եք անել այս բոլոր բաները, օգտագործելով սիմվոլային չափանիշ եւ սրամտությամբ կիրառվող CSS:
Օգտագործեք Semantic Tags պատշաճ կերպով
Երբ դուք ցանկանում եք օգտագործել իմաստային պիտակներ, այլ ոչ թե ներկայացման նպատակներով փոխանցելու իմաստը, դուք պետք է զգույշ լինեք, որ դրանք սխալ օգտագործեն միայն իրենց ընդհանուր ցուցադրման հատկությունների համար: Ամենատարածված չարաշահող իմաստային տեգերից ոմանք ներառում են.
- blockquote - Որոշ մարդիկ օգտագործում են պիտակը, տեքստի չհրապարակելու համար, որը մեջբերում չէ: Սա է պատճառը, որ blockquotes- ն անջատված է լռությամբ: Եթե պարզապես ուզում եք հատուցումներ ստանալ, բայց տեքստը ոչ թե բլոկկոտ է, այլ CSS- ի ծածկանունը:
- p - Որոշ վեբ խմբագրիչները օգտագործում են
& nbsp; (paragraof- ում պարունակվող ոչ տարածվող տարածք) էջի տարրերի միջեւ լրացուցիչ տարածություն ավելացնելու համար, այլ ոչ թե այն էջի տեքստի համար փաստացի պարբերությունները սահմանելու համար: Ինչպես նախկինում նշված նշագրման օրինակով, դուք պետք է օգտագործեք շեղնաշարի կամ լրտեսության ոճի հատկություն, տարածք ավելացնելու համար:
- ul - Like blockquote- ը, որը ներառում է տեքստը
տեքստի ներդիրների մեջ, այն տեքստը, որը շատ բրաուզերներում է: Սա էլ semantically սխալ եւ անվավեր HTML, քանի որ միայն - պիտակները գործում են
պիտակով: Կրկին օգտագործեք շեղը կամ լցված ոճը, տեքստի անջատելու համար:
- h1-h6 - Թեմաների պիտակները կարող են օգտագործվել տառատեսակների ավելի մեծ եւ հուսալի դարձնելու համար, բայց եթե տեքստը վերնագիր չէ, այն չպետք է լինի վերնագրի պիտակի մեջ: Օգտագործեք font-weight եւ font-size CSS հատկությունները, փոխարենը, եթե ցանկանում եք փոխել ձեր էջի տեքստի չափը կամ կշիռը:
Օգտագործելով HTML տառերը, որոնք ունեն իմաստ ունեն, դուք ստեղծում եք ավելի շատ տեղեկություններ հաղորդող էջեր, քան պարզապես շրջապատող ամեն ինչ
պիտակներով:
Որ HTML- ի Tags են Semantic?
Չնայած գրեթե յուրաքանչյուր HTML4 պիտակը եւ բոլոր HTML5 պիտակը իմաստային նշանակություն ունեն, որոշ պիտակները հիմնականում նշանակում են բնութագրական:
Օրինակ, HTML5- ը վերաիմաստավորեց եւ պիտակների իմաստը, որպես իմաստաբան: պիտակը չի նշանակում լրացուցիչ նշանակություն, այլ տեքստային, որը սովորաբար դրսեւորվում է համարձակ: պիտակը նույնպես չի տալիս լրացուցիչ նշանակություն կամ շեշտադրում, այլ սահմանում է տեքստ, որը սովորաբար մատնվում է շեղագրով:
Սեմանտիկ HTML Թեմաներ
ԿԻՍՎԵԼ <հապավումը> Կրճատում
Երկար տառադարձություն Սահմանում <հասցե> Փաստաթղթի հեղինակի (հասցեների) հասցեն Մեջբերում Կոդի հղում Teletype տեքստը Տրամաբանական բաժանումը Ընդհանուր ներդիրի ոճի բեռնարկղ Ջնջված տեքստը Տեղադրված տեքստը Կարեւորում Ուժեղ շեշտը
Առաջին մակարդակի վերնագիր
Երկրորդ մակարդակի վերնագիր
Երրորդ մակարդակի վերնագիր
Չորրորդ մակարդակի վերնագիր
Հինգերորդ մակարդակի վերնագիր
Վեցերորդ մակարդակի վերնագիր
Թեմատիկ ընդմիջում Տեքստ մուտքագրելու համար օգտագործողի կողմից <նախ.> Նախնական ձեւաչափված տեքստը
Կարճ մեջբերված մեջբերում Նմուշի արտադրանքը Ենթաբաժին Վերադաս Փոփոխական կամ օգտագործողի կողմից սահմանված տեքստը