Pažvelkite į tinkamą HTML5 semantiką
Jei atidžiai suplanuojate savo HTML dokumentų struktūrą, galite padėti kompiuteriams suprasti turinio reikšmę. Teisinga sintaksė yra tikrai svarbi, tačiau iš esmės ji tik suteikia analizatoriams, paieškos sistemoms ir pagalbinėms technologijoms nereikalingą duomenų grupę.
Jei patobulinsite „front-end“ darbo eigą, atkreipdami dėmesį į semantiką, galite sukurti aukštesnės kokybės turinį, pritraukiantį daugiau lankytojų. Semantika yra prasmės tyrimas, platesniame kontekste logikos ir kalbotyros sritis.
Žiniatinklio kūrimo pasaulyje kalbame apie semantinį turinį, kai kompiuteriai supranta dokumento struktūrą ir elementų viduje. Jei norime sukurti tinkamą semantiką, mums reikia giliai suprasti struktūrą mūsų turinio ir galimybes technologijas.
Taigi, kokios yra apčiuopiamos naudos? Tinkama semantika reiškia a daugiau paieškos turinio kuris veda prie a geresnis paieškos reitingas. Taip pat didiname prieinamumą, kaip pagalbines technologijas, pvz ekrano skaitytojai gali geriau suprasti mūsų turinio reikšmę.
Yra daug skirtingų „front-end“ kūrimo metodų, leidžiančių kūrėjams pasiekti semantinę puslapio struktūrą. Šis pranešimas suteiks jums trumpą intemą į semantinius HTML žymes ir dokumento kontūro koncepciją.
Semantinis ir ne semantinis HTML žymės
Semantikos samprata nėra tokia nauja, kaip atrodo, ji egzistavo dar iki HTML5 eros. Semantinio žiniatinklio terminas buvo sukurtas jau 2001 m. Sir Tim Berners-Lee. Pagal “semantinis tinklas” jis reiškė duomenų tinklą, kurį gali apdoroti mašinos.
Tai visų pirma reiškia atskiri HTML elementai turi turėti savo skiriamuosius struktūrinius vaidmenis. Pagal W3C apibrėžimą “semantinis elementas aiškiai apibūdina jo reikšmę tiek naršyklei, tiek kūrėjui”.
Semantiniai elementai prieš HTML5
Semantiniai elementai egzistavo ir prieš HTML5, o daugeliu atvejų kūrėjai to nežinojo kai kurios žymos, kurias jos naudojo, iš tikrųjų buvo semantinės. Pagalvokite apie arba
Jų ir naudotojo agentų vaidmenys yra aiškūs: tiesiog yra forma, kaip ir
The
Užsakyta ir neregistruoti sąrašai, pastraipose, h1-h6 pozicijos žymos yra visi semantiniai elementai, kurie buvo prieš HTML5.
Ne semantiniai elementai
Ne semantiniai elementai neturi jokios ypatingos reikšmės, jų hierarchiniai santykiai yra tik iliuziniai. Dažniausiai naudojami ne semantinių HTML žymenų pavyzdžiai yra ir žymės.
Jei jūsų svetainė kada nors sugavo siaubingą ligą divitis, žinote, apie ką kalbu. Taip. „Divs“ nebūtinai yra neteisingi, bet divitis reikia kovoti, jei norime parašyti išlaikomą, modulinę ir prasmingą HTML kodą.
Smashing Magazine gražiai paaiškina, kokia yra tikroji problema dėl pernelyg didelio ir nepagrįsto Nėra ryšio tarp dviejų, kaip ir Nesijaudinkite, jei vis dar jaučiate prisirišimą HTML5 pristatė daug naujų semantinių elementų, kurie leidžia lengvai organizuoti turinį. Jie ne tik padeda jums organizuoti turinį viso dokumento lygiu (žr. Išsamią informaciją kitame skyriuje), bet ir teksto blokus, kaip inline žymes. Tikriausiai populiariausios teksto lygio semantinės žymės Žr. Šį sąrašą visiems šiuo metu naudojamiems teksto lygio semantiniams elementams. Dokumento struktūra yra HTML dokumento struktūra. Tai rodo, kaip elementai yra tarpusavyje susiję. Dokumento kontūras sukurtas tik kartojant elementus, tokius kaip antraštės, lentelės pavadinimai, formos pavadinimai ir kiti ankstesnėse HTML versijose, pvz., HTML4.01 ir XHTML. HTML5 pagrindiniame algoritme buvo patobulinti nauji sekcijos elementai: HTML5 yra penktas segmentavimo elementas, tačiau jis nėra naujas Jei norime sukurti gerai struktūrizuotą dokumentą, turime atkreipti dėmesį į šias taisykles: 1. Išorinis sekcijos elementas visada yra 2. HTML5 sekcijos gali būti įdėtos. 3. Kiekvienas skyrius turi savo antraštės hierarchiją. Kiekvienas iš jų (net ir pačių viduje įmontuotų skyrių) gali turėti 4. Nors dokumento metmenis pirmiausia apibrėžia 5 suskirstymo elementai, kiekvienam skyriui taip pat reikalingos tinkamos antraštės. 5. Tai visada yra pirmasis pozicijos elementas (tegul jis yra h1 arba žemesnio rango antraštė), kuris apibrėžia atitinkamo sekcijos pavadinimą. Toje pačioje skiltyje turi būti šios antraštės žymos. (Jei pirmoji antraštė yra h3 viduje pjūvio elemente, po to neuždėkite h3.) 6. Skyriai, kuriuos nustato 7. Kiekvienas skyrius (kūnas, sekcija, straipsnis, nuošalyje, nav) gali turėti savo Pamatysime semantinio dokumento kontūro pavyzdį, kad pamatytume aiškesnį jo veikimo būdą. Mūsų pavyzdinio kodo rezultatas bus toks: Ir čia yra kodas, turintis tinkamą semantinę sekciją: Čia yra mūsų logotipas ir šūkis. 1 dalis pirmajame skirsnyje 2 dalis pirmajame skirsnyje 1 dalis antroje dalyje 2 dalis antroje dalyje Jei pažvelgsite į anksčiau pateiktą kodo fragmentą, pamatysite, kad antraštės ir poraštės yra neprivalomos, mes galime laisvai pasirinkti, ar norime juos naudoti, ar ne, bet tai primygtinai rekomenduojama visada įtraukti kiekvienos sekcijos antraštę, kitaip skirsnis bus “Be pavadinimo” dokumente. Laimei, visame internete yra daug puikių įrankių, leidžiančių mums patikrinti dokumento struktūrą, šį kartą naudosime html5.org Outliner įrankį. Jei įvesime kodo fragmentą į formą, kurią nurodo kontūro operatorius, ir spustelėkite “Apibūdinkite tai!” mygtukas, pamatysime šį rezultatą: Tai yra dokumento pavyzdys, tai mato paieškos sistemos, o ekrano skaitytojai ją perskaito savo regėjimo negalią turintiems vartotojams. Tai semantinis, gerai struktūrizuotas, ir nėra bjaurių “Be pavadinimo” skyriuose. Jei norite ieškoti, kaip antraštėje „Outliner“ atrodo „Untitled“, tiesiog ištrinkite kai kurias antraštės žymes pavyzdiniame kode. Semantinės HTML žymos ir dokumento kontūrai yra tik nedidelė žiniatinklio semantikos dalis. Tinklalapio turinys gali būti dar prasmingesnis naudojant WAI-ARIA prieinamumo protokolą ir struktūrizuotus duomenis, kurie gali būti naudojami kartu su RDFa protokolu, mikroduomenimis arba JSON-LD žymėjimu. žyma, kuri veikia tokiu pačiu būdu, tik lygiagrečiai.-vis dėlto, kaip jūs neturite jų visiškai griovti. Jie vis dar yra geriausias pasirinkimas grupuojant turinį tik stiliaus tikslais ir kitais paskutiniais atvejais. Teksto semantika HTML5
ir , tačiau jie taip pat egzistavo prieš HTML5. Tarp naujų inline semantinių elementų galime rasti, pavyzdžiui, , žymas žmogaus skaitymo datas, ir dėl pažymėtas tekstas.Dokumento struktūra HTML5
dėl skyriai, suskirstyti pagal konkrečią temą dėl sudėtingos arba savarankiškos kompozicijos pvz., dienoraščio įrašą ar valdiklį dėl navigacijos blokai dėl papildomas turinys, pvz., šoninės juostos. žyma. The Žymos taip pat yra naujos, tačiau dokumente nesukuriamos naujos sekcijos, jos padalija turinį skyriuose. Tai reiškia, kad kiekvienas sekcijos elementas (kėbulas, straipsnis, sekcija, Nav ir Aside) gali turėti savo antraštę ir poraštę.Semantiškai struktūrizuoto turinio patarimai
žyma.h1 žyma., ir žymos neatitinka pagrindinio HTML dokumento kontūro, jie paprastai nėra teikiami pagalbinėmis technologijomis. žymos, kuriose apibrėžiama antraštė (pvz., logotipas, autoriaus vardas, datos, meta informacija ir pan.) ir poraštė (autorių teisės, pastabos, nuorodos ir kt.).Pavyzdys: Semantinė kontūra
Sveiki atvykę į mūsų svetainę!
Straipsnio pavadinimas. \ T
Straipsnio subtitrai. \ T
Pirmoji loginė dalis (pvz., „Teorija“)
Kai kurie kiti subpozicijos pirmojoje dalyje
Antroji loginė dalis (pvz., „Praktika“)
Kiti interneto semantikos aspektai
