Svarbus žiniatinklio standartų judėjimo principas, kuris yra atsakingas už šiandien turimą pramonę, yra idėja naudoti HTML elementus už tai, kokie jie yra, o ne kaip jie gali būti rodomi naršyklėje pagal nutylėjimą. Tai vadinama semantiniu HTML naudojimu.
Kas yra semantinis HTML?
Semantinis HTML ar semantinis žymėjimas yra HTML, kuris supažindina svetainę su prasme, o ne tik pristatymu. Pavyzdžiui,
žymė nurodo, kad pridedamas tekstas yra pastraipa.
Tai yra ir semantinė, ir prezentacinė, nes žmonės žino, kokios pastraipos ir naršyklės žino, kaip jas rodyti.
Šioje lygtyje apatinėje pusėje žymos, tokios kaip ir , nėra semantinės, nes jos apibrėžia tik tai, kaip tekstas turėtų atrodyti (paryškintas arba slaptas) ir neturi jokios papildomos reikšmės žymėjimui.
Semantinio HTML žymių pavyzdžiai apima antraščių žymeles
per , , ir . Yra daug daugiau semantinių HTML žymų, kurias galima naudoti kuriant standartus atitinkančią svetainę.
Kodėl turėtumėte rūpintis semantika
Semantikos HTML rašymo pranašumas yra tai, kas turėtų būti bet kurio interneto puslapio vairavimo tikslas - noras bendrauti. Pridėję semantines žymes į savo dokumentą, pateikiate papildomos informacijos apie šį dokumentą, kuris padeda bendrauti. Konkrečiai, semantinės žymos naršyklėje aiškina, kokia yra puslapio ir jo turinio reikšmė.
Šis aiškumas taip pat perduodamas paieškos sistemoms, užtikrinant, kad tinkami puslapiai būtų pateikti reikiamoms užklausoms.
Semantiniai HTML žymai teikia informaciją apie tų žymų turinį, kuris neapsiriboja tik tuo, kaip jie žiūri į puslapį. Tekstas, kuris yra pridėtas prie žymos , iš karto pripažįstamas naršykle kaip tam tikra kodavimo kalba.
Vietoj to, kad bandyti padaryti šį kodą, naršyklė supranta, kad jūs naudojate šį tekstą kaip kodo pavyzdį tam tikro straipsnio ar internetinio vadovo tikslams.
Naudojant semantines gaires, galite kurti daug daugiau kablių, kad galėtumėte sukurti savo turinį. Galbūt šiandien norėtumėte, kad jūsų kodo pavyzdžiai būtų rodomi numatytuoju naršyklės stiliumi, bet rytoj norite juos paskambinti pilkos spalvos fone, o vėliau norite nustatyti tikslią šriftų šeimą arba šrifto kampaniją, kurią norite naudoti jūsų mėginiai. Galite lengvai atlikti visus šiuos dalykus naudodami semantinį žymėjimą ir protingai pritaikytą CSS.
Naudokite semantines žymes teisingai
Jei norite naudoti semantines žymeles, kad pateiktumėte prasmę, o ne pateikimo tikslais, turite būti atsargiems, kad nenorite jų naudoti netinkamai, kad galėtumėte bendrų rodymo savybių. Kai kurie iš dažniausiai piktnaudžiaujamų semantinių žymų:
- "blockquote". Kai kurie žmonės naudoja žymeklį
,
norėdami atkurti tekstą, kuris nėra citatas. Taip yra todėl, kad blokuoti yra numatytieji. Jei norite, kad būtų naudingos įtraukos, tačiau tekstas nėra blokuotė, vietoj jos naudokite CSS paraštes. - p - Kai kurie interneto redaktoriai naudoja
& nbsp; p> (neatitinkančią erdvę, esančią paragraoph), kad papildyti tarpai tarp puslapio elementų, o ne apibrėžti šio puslapio teksto esamas dalis. Kaip ir anksčiau minėtame įtraukimo pavyzdyje, norėdami pridėti vietos, turėtumėte naudoti maržos arba užpildo stiliaus savybę.
- ul - kaip ir "blockquote", teksto įtraukimas į
tag įterpia šį tekstą daugelyje naršyklių. Tai yra ir semantiškai neteisingas, ir netinkamas HTML, nes tik - žymos galioja
žymelėje. Dar kartą naudokite paraščių arba užpildų stilių, kad tekstas būtų įtrauktas.
- h1-h6. Antraštės žymes gali būti naudojamos šriftams padidinti ir drąsiau, tačiau jei tekstas nėra antraštė, jis neturėtų būti antraštės žymos viduje. Vietoj to naudokite šriftų svorio ir šrifto dydžio CSS savybes, jei norite pakeisti tam tikro teksto dydį ar svorį savo puslapyje.
Naudodami HTML žymes, turinčias prasmę, galite kurti puslapius, kuriuose pateikiama daugiau informacijos, nei tiesiog supanti viską naudodami
žymes.
Kokie HTML žymenys yra semantiniai?
Nors beveik kiekviena HTML4 žyma ir visos HTML5 žymos turi semantinę prasmę, kai kurios žymos visų pirma yra semantinės.
Pavyzdžiui, HTML5 iš naujo apibrėžė semantikos reikšmes, kad ir žymos yra semantinės. Žymė neteikia papildomos svarbos, o tekstas paprastai yra paryškintas pusjuodžiu šriftu. Žymė taip pat neteikia papildomos svarbos ar dėmesio, o apibrėžia tekstą, kuris paprastai pateikiamas kursyvu.
Semantinis HTML žymes
Santrumpa Akronimas
Ilga citata Apibrėžimas Adresas autoriui (-ams) dokumento Citavimas
Kodo nuoroda Teletype tekstas Loginis skyrius Bendras inline stiliaus konteineris Ištrintas tekstas Įterptas tekstas Pabrėžimas Stiprus akcentas
Pirmojo lygio antraštė
Antrojo lygio antraštė
Trečiojo lygio antraštė
Ketvirto lygio antraštė
Penktojo lygio antraštė
Šeštojo lygio antraštė
Teminė pertrauka Tekstas, kurį turi įvesti naudotojas
Iš anksto suformatuotas tekstas
Trumpa eilutė Pavyzdžio išvestis Indeksas Viršūnė Kintamas arba vartotojo apibrėžtas tekstas
, ir . Yra daug daugiau semantinių HTML žymų, kurias galima naudoti kuriant standartus atitinkančią svetainę.
Kodėl turėtumėte rūpintis semantika
Semantikos HTML rašymo pranašumas yra tai, kas turėtų būti bet kurio interneto puslapio vairavimo tikslas - noras bendrauti. Pridėję semantines žymes į savo dokumentą, pateikiate papildomos informacijos apie šį dokumentą, kuris padeda bendrauti. Konkrečiai, semantinės žymos naršyklėje aiškina, kokia yra puslapio ir jo turinio reikšmė.
Šis aiškumas taip pat perduodamas paieškos sistemoms, užtikrinant, kad tinkami puslapiai būtų pateikti reikiamoms užklausoms.
Semantiniai HTML žymai teikia informaciją apie tų žymų turinį, kuris neapsiriboja tik tuo, kaip jie žiūri į puslapį. Tekstas, kuris yra pridėtas prie žymos , iš karto pripažįstamas naršykle kaip tam tikra kodavimo kalba.
Vietoj to, kad bandyti padaryti šį kodą, naršyklė supranta, kad jūs naudojate šį tekstą kaip kodo pavyzdį tam tikro straipsnio ar internetinio vadovo tikslams.
Naudojant semantines gaires, galite kurti daug daugiau kablių, kad galėtumėte sukurti savo turinį. Galbūt šiandien norėtumėte, kad jūsų kodo pavyzdžiai būtų rodomi numatytuoju naršyklės stiliumi, bet rytoj norite juos paskambinti pilkos spalvos fone, o vėliau norite nustatyti tikslią šriftų šeimą arba šrifto kampaniją, kurią norite naudoti jūsų mėginiai. Galite lengvai atlikti visus šiuos dalykus naudodami semantinį žymėjimą ir protingai pritaikytą CSS.
Naudokite semantines žymes teisingai
Jei norite naudoti semantines žymeles, kad pateiktumėte prasmę, o ne pateikimo tikslais, turite būti atsargiems, kad nenorite jų naudoti netinkamai, kad galėtumėte bendrų rodymo savybių. Kai kurie iš dažniausiai piktnaudžiaujamų semantinių žymų:
- "blockquote". Kai kurie žmonės naudoja žymeklį
,
norėdami atkurti tekstą, kuris nėra citatas. Taip yra todėl, kad blokuoti yra numatytieji. Jei norite, kad būtų naudingos įtraukos, tačiau tekstas nėra blokuotė, vietoj jos naudokite CSS paraštes. - p - Kai kurie interneto redaktoriai naudoja
& nbsp; p> (neatitinkančią erdvę, esančią paragraoph), kad papildyti tarpai tarp puslapio elementų, o ne apibrėžti šio puslapio teksto esamas dalis. Kaip ir anksčiau minėtame įtraukimo pavyzdyje, norėdami pridėti vietos, turėtumėte naudoti maržos arba užpildo stiliaus savybę.
- ul - kaip ir "blockquote", teksto įtraukimas į
tag įterpia šį tekstą daugelyje naršyklių. Tai yra ir semantiškai neteisingas, ir netinkamas HTML, nes tik - žymos galioja
žymelėje. Dar kartą naudokite paraščių arba užpildų stilių, kad tekstas būtų įtrauktas.
- h1-h6. Antraštės žymes gali būti naudojamos šriftams padidinti ir drąsiau, tačiau jei tekstas nėra antraštė, jis neturėtų būti antraštės žymos viduje. Vietoj to naudokite šriftų svorio ir šrifto dydžio CSS savybes, jei norite pakeisti tam tikro teksto dydį ar svorį savo puslapyje.
Naudodami HTML žymes, turinčias prasmę, galite kurti puslapius, kuriuose pateikiama daugiau informacijos, nei tiesiog supanti viską naudodami
žymes.
Kokie HTML žymenys yra semantiniai?
Nors beveik kiekviena HTML4 žyma ir visos HTML5 žymos turi semantinę prasmę, kai kurios žymos visų pirma yra semantinės.
Pavyzdžiui, HTML5 iš naujo apibrėžė semantikos reikšmes, kad ir žymos yra semantinės. Žymė neteikia papildomos svarbos, o tekstas paprastai yra paryškintas pusjuodžiu šriftu. Žymė taip pat neteikia papildomos svarbos ar dėmesio, o apibrėžia tekstą, kuris paprastai pateikiamas kursyvu.
Semantinis HTML žymes
Santrumpa Akronimas
Ilga citata Apibrėžimas Adresas autoriui (-ams) dokumento Citavimas
Kodo nuoroda Teletype tekstas Loginis skyrius Bendras inline stiliaus konteineris Ištrintas tekstas Įterptas tekstas Pabrėžimas Stiprus akcentas
Pirmojo lygio antraštė
Antrojo lygio antraštė
Trečiojo lygio antraštė
Ketvirto lygio antraštė
Penktojo lygio antraštė
Šeštojo lygio antraštė
Teminė pertrauka Tekstas, kurį turi įvesti naudotojas
Iš anksto suformatuotas tekstas
Trumpa eilutė Pavyzdžio išvestis Indeksas Viršūnė Kintamas arba vartotojo apibrėžtas tekstas