Vaadake õiget HTML5 semantikat
Kui plaanite hoolikalt oma HTML-dokumentide struktuuri, saate seda teha aidata arvutitel mõista sisu sisu. Korralik süntaks on kindlasti oluline, kuid see annab põhimõtteliselt parsereid, otsingumootoreid ja abitehnoloogiaid mõttetu andmemahtuga.
Kui parandate oma eesmise tööprotsessi, pöörates tähelepanu semantikale, saate luua kõrgema kvaliteediga sisu, mis meelitab ligi rohkem külastajaid. Semantika on tähenduse uurimine, laiemas kontekstis on see loogika ja keeleteaduse haru.
Veebiarenduse maailmas räägime semantilisest sisust, kui arvutid mõistavad dokumendi struktuuri ja elementide sees. Kui tahame luua õige semantika, peame sügavalt mõista struktuuri meie sisu ja võimeid Frontend tehnoloogiaid.
Millised on käegakatsutavad eelised? Õige semantika tähendab a rohkem otsitav sisu mis viib a parem otsingumootor edetabel. Suurendame ka ligipääsetavust kui abitehnoloogiaid, näiteks ekraanilugejad saavad paremini mõista meie sisu tähendust.
On mitmeid erinevaid esiotsa arendustehnikaid, mis võimaldavad arendajatel saavutada semantilise lehekülje struktuuri. See postitus annab teile lühikese tutvustuse semantiliste HTML-siltide ja dokumendi visiooni kontseptsiooni kohta.
Semantiline ja mitte-semantiline HTML-kood
Semantika mõiste ei ole nii uus kui tundub, et see eksisteeris ka enne HTML5 ajastu. Semantilise veebi mõiste loodi juba 2001. aastal Sir Tim Berners-Lee poolt. Alla “semantiline veeb” ta tähendas masinate poolt töödeldavate andmete veebi.
See tähendab eelkõige seda eraldi HTML-elementidel peab olema oma eristatav struktuuriline roll. Vastavalt W3C määratlusele “semantiline element kirjeldab selgelt selle tähendust nii brauserile kui ka arendajale”.
Semantilised elemendid enne HTML5
Semantilised elemendid eksisteerisid ka enne HTML5, vaid enamikul juhtudel ei teadnud arendajad seda mõned märgised, mida nad kasutasid, olid tegelikult semantilised. Mõtle lihtsalt või
Nende rollid on nii meie kui ka kasutajaagendi jaoks selged. lihtsalt sisaldab vormi, nagu
The
Tellitud ja järjekorras olevad nimekirjad, lõiked, h1-h6 rubriigi sildid on kõik semantilised elemendid, mis eelnesid HTML5-le.
Mitte-semantilised elemendid
Mitte-semantilistel elementidel ei ole mingit erilist tähendust, nende hierarhilised suhted on vaid illusoorsed. Kõige levinumad mitte-semantiliste HTML-märgiste näited on ja sildid.
Kui teie sait on kunagi tabanud kohutavat haigust divitis, sa tead, mida ma räägin. Jep. Divs ei ole tingimata valed, kuid divitis tuleb võidelda, kui soovime kirjutada hooldatavat, modulaarset ja sisukat HTML-koodi.
Smashing Magazine selgitab ilusti, milline on tegelik probleem ülemäärane ja ebamõistlik kasutamine Nende kahe vahel ei ole mingit seost, just nagu Ärge paanikas, kui tunned end ikka veel HTML5 tutvustas paljusid uusi semantilisi elemente, mis muudavad hõlpsaks sisusüsteemiks. Nad mitte ainult ei aita teil korraldada sisu kogu dokumendi tasemel (vt üksikasju järgmises osas), vaid ka tekstiplokkide sees, kui inline-sildid. Tõenäoliselt on kõige populaarsemad tekstitaseme semantilised sildid Vaadake seda nimekirja kõigi praegu kasutatavate tekstitasemete semantiliste elementide kohta. Dokumendi ülevaade on HTML-dokumendi struktuur. See näitab, kuidas elemendid on omavahel seotud. Dokumendi ülevaade on loodud ainult elementide, näiteks pealkirjade, tabelite pealkirjade, vormide pealkirjade ja muude varasemate HTML-versioonide, nagu HTML4.01 ja XHTML, kaardistamise abil. HTML5-s on kontuuri algoritmi täiustatud uute sektsioonielementidega, nimelt: HTML5-s on olemas viies jaotuselement, kuid see pole uus Kui soovime luua hästi struktureeritud dokumendi visandit, peame pöörama tähelepanu järgmistele reeglitele: 1. Äärepoolseim sektsioonielement on alati 2. HTML5 jaotisi saab pesata. 3. Igal sektsioonil on oma rubriigi hierarhia. Igal neist (isegi kõige sisemisest sektsioonist) võib olla 4. Kuigi dokumendi ülevaade on määratletud peamiselt viie jaotuselemendiga, vajab see iga sektsiooni jaoks ka asjakohaseid pealkirju. 5. See on alati esimese rubriigi element (olgu see h1 või madalama astme pealkiri), mis määrab antud sektsiooni pealkirja. Järgmised rubriigi sildid peavad olema selles osas suhtelised. (Kui esimene pealkiri on sektsioonielemendi sees h3, siis ärge pange sellele h3.) 6. Sektsiooni poolt määratletud osad 7. Igal sektsioonil (keha, sektsioon, artikkel, kõrval, nav) võib olla oma Vaatame näiteid semantilise dokumendi visandist selgemaks, kuidas see toimib. Meie näite kood toob kaasa järgmise dokumendistruktuuri: Ja siin on õige semantilise sektsiooniga kood: Siin on meie logo ja loosung. Lõige 1 esimeses osas Lõige 2 esimeses osas Lõige 1 teises osas Lõige 2 teises osas Kui te vaatate ülaltoodud koodilõiget, näete, et päised ja jalus on vabatahtlikud, me saame vabalt valida, kas me soovime neid kasutada või mitte, aga see on soovitatakse tungivalt alati lisada iga sektsiooni pealkiri, vastasel juhul on sektsioon “Untitled” dokumendiserveris. Õnneks on kogu internetis palju suurepäraseid tööriistu, mis võimaldavad meil dokumendi ülevaatust kontrollida, seekord kasutame html5.org Outlineri tööriista. Kui me sisestame oma koodilõigu outlineri poolt pakutavale vormile ja klõpsate “Kirjeldage seda!” nupp, näeme järgmist tulemust: See on dokumenteerige meie näidiskoodi ülevaade, see on see, kuidas otsingumootorid seda näevad ja ekraanilugejad loevad seda oma nägemispuudega kasutajatele. See on semantiline, hästi struktureeritud ja pole vastik “Untitled” sektsioonid. Kui soovite otsida, kuidas Untitled-osa välja näeb Outlineris, siis lihtsalt kustutage mõned näite koodis olevad pealkirjad. Semantilised HTML-märgendid ja dokumendijooned on vaid väike osa veebi semantikast. Veebilehe sisu saab muuta veelgi olulisemaks WAI-ARIA ligipääsuprotokolli ja struktureeritud andmete abil, mida saab kasutada koos RDFa protokolli, mikroandmete või JSON-LD märgistusega. märgis, mis toimib samal viisil, ainult inline tasandil.-Samas, nagu sa ei pea neid täielikult kraavima. Nad on endiselt parim valik sisu rühmitamiseks ainult stiiliks ja muudeks viimastel juhtudel. Tekstisemantika HTML5-s
ja , kuid need olid olemas ka enne HTML5. Uute inline semantiliste elementide hulgas on näiteks , tag inimloetavad kuupäevad, ja jaoks esiletõstetud tekst.Dokumentide ülevaade HTML5-s
jaoks osa, mis on rühmitatud konkreetse teema ümber jaoks täielikud või iseseisvad kompositsioonid näiteks blogipost või vidin jaoks navigeerimisplokid jaoks täiendavat sisu, näiteks külgribasid. silt. The Sildid on ka uued, kuid need ei tekita dokumendis uusi sektsioone, jagavad sisu sektsioonide sees. See tähendab seda iga sektsioonielement (kere, artikkel, jagu, navigatsioon ja kõrvale jätmine) võib olla oma päis ja jalus.Näpunäited semantiliselt struktureeritud sisu jaoks
silt.h1 silt., ja Sildid ei kuulu HTML-dokumendi põhistruktuurini, neid tavaliselt ei pakuta algselt abitehnoloogiatelt. sildid, mis määravad päise (näiteks logo, autori nimi, kuupäevad, metainfo jne) ja selle jaluse (autoriõigused, märkused, lingid jne).Näide: semantiline ülevaade
Tere tulemast meie veebisaidile!
Artikli pealkiri
Artikli 10 alapealkiri. \ T
Esimene loogiline osa (nt "teooria")
Mõned teised alamrubriigid esimeses osas
Teine loogiline osa (nt "Praktika")
Veebi semantika muud aspektid
