Katso oikea HTML5-semantiikka
Jos suunnittelet huolellisesti HTML-asiakirjojen rakennetta, voit auta tietokoneita ymmärtämään sisällön merkitystä. Oikea syntaksi on tärkeää varmasti, mutta se tarjoaa periaatteessa parsereita, hakukoneita ja apuvälineitä merkityksettömälle joukolle tietoja.
Jos parannat etupään työnkulkuasi kiinnittämällä huomiota semantiikkaan, voit luoda laadukkaamman sisällön, joka houkuttelee enemmän kävijöitä. Semantti on merkityksen tutkiminen, se on laajemmassa yhteydessä logiikka ja kielitiede.
Web-kehityksen maailmassa puhumme semanttisesta sisällöstä, kun tietokone ymmärtää asiakirjan rakenteen ja sen sisällä olevien elementtien roolit. Jos haluamme luoda asianmukaista semantiikkaa, meidän täytyy syvästi ymmärtää rakenteen sisältöä ja kyvyt Frontend-tekniikoista.
Joten mitkä ovat konkreettiset edut? Oikea semantti tarkoittaa a enemmän etsittävää sisältöä joka johtaa a parempi hakukoneen sijoitus. Lisätään myös saavutettavuutta apuvälineinä, kuten näytönlukijat voivat paremmin tulkita sisällön merkitystä.
On olemassa monia erilaisia etupään kehitystekniikoita, joiden avulla kehittäjät voivat saavuttaa semanttisen sivurakenteen. Tämä viesti antaa sinulle lyhyen esittelyn semanttisiin HTML-tunnisteisiin ja asiakirjan ääriviivan käsitteeseen.
Semanttinen ja ei-semanttinen HTML-tunniste
Semantiikan käsite ei ole niin uusi kuin näyttää, se oli olemassa jo ennen HTML5: n aikakautta. Semanttisen webin termi on luotu jo vuonna 2001 Sir Tim Berners-Lee. Alla “semanttinen verkko” hän tarkoitti verkkoa, jota voidaan käsitellä koneilla.
Tämä tarkoittaa ensisijaisesti sitä erillisillä HTML-elementeillä on oltava erotettavat rakenteelliset tehtävänsä. W3C: n määritelmän mukaan “semanttinen elementti kuvaa selvästi sen merkitystä sekä selaimelle että kehittäjälle”.
Semanttiset elementit ennen HTML5: ää
Semanttiset elementit olivat olemassa myös ennen HTML5: tä, useimmissa tapauksissa kehittäjät eivät tienneet sitä jotkut käytetyt tunnisteet olivat itse asiassa semanttisia. Ajattele vain tai
Niiden roolit ovat selkeitä sekä meille että käyttäjäagentille: yksinkertaisesti sisältää lomakkeen, aivan kuten
tilattu ja järjestämättömät luettelot, Edellä, h1-h6-otsikkotunnisteet ovat kaikki semanttisia elementtejä, jotka ovat edenneet HTML5: lle.
Ei-semanttiset elementit
Ei-semanttisilla elementeillä ei ole mitään erityistä merkitystä, niiden väliset hierarkkiset suhteet ovat vain harhakuvia. Yleisimmin käytetyt esimerkit ei-semanttisista HTML-tunnisteista ovat ja tunnisteet.
Jos sivustosi on koskaan tarttunut hirvittävään tautiin divitis, tiedät mistä puhun. Jep. Divs eivät välttämättä ole väärässä, mutta divitis on taisteltava, jos haluamme kirjoittaa ylläpidettävää, modulaarista ja mielekästä HTML-koodia.
Smashing Magazine selittää kauniisti, mikä on todellinen ongelma Näiden välillä ei ole mitään suhdetta, aivan kuten Älä paniikkia, jos tunnet edelleen HTML5 esitteli monia uusia semanttisia elementtejä, jotka helpottavat sisällön organisointia. Ne eivät vain auta sinua järjestämään sisältöä koko asiakirjan tasolla (katso lisätietoja seuraavassa osassa), vaan myös tekstilohkojen sisäisiksi tunnisteiksi. Luultavasti suosituimmat tekstitason semanttiset tunnisteet ovat Katso tämä luettelo kaikista käytössä olevista tekstitason semanttisista elementeistä. Asiakirjan ääriviiva on HTML-asiakirjan rakenne. Se osoittaa, miten elementit liittyvät toisiinsa. Asiakirjan ääriviivat on luotu ainoastaan kartoittamalla elementit, kuten otsikot, taulukon otsikot, lomakkeen otsikot ja muut HTML-versioiden, kuten HTML4.01 ja XHTML, aiemmissa versioissa. HTML5: ssä ääriviiva-algoritmi on parantunut uusilla osituselementeillä, nimittäin: HTML5: ssä on viides osiointielementti, mutta se ei ole uusi Jos haluamme luoda hyvin jäsennellyn asiakirjan, meidän on kiinnitettävä huomiota seuraaviin sääntöihin: 1. Ulkopuolinen leikkauselementti on aina 2. HTML5: n osiot voidaan sijoittaa. 3. Jokaisella osuudella on oma otsikkohierarkia. Jokaisella (jopa sisimmällä sisäkkäisellä osalla) voi olla 4. Vaikka asiakirjan luonnos määritellään ensisijaisesti viidellä osio-osalla, se tarvitsee myös asianmukaiset otsikot kullekin osalle. 5. Se on aina ensimmäinen otsikkorakenne (anna sen olla h1 tai alemman tason otsikkotunniste), joka määrittelee tietyn osan otsikon. Seuraavien otsikkotunnisteiden on oltava saman osan sisällä suhteessa tähän osioon. (Jos ensimmäinen otsikko on h3 leikkauselementin sisällä, älä aseta h3: ta sen jälkeen.) 6. 7. Jokaisella osuudella (runko, osa, artikkeli, sivu, nav) voi olla omat Katsotaanpa esimerkki semanttisen asiakirjan ääriviivasta, jotta näet, miten se toimii paremmin. Esimerkkikoodimme johtaa seuraavaan asiakirjarakenteeseen: Ja tässä on koodi, jossa on oikea semanttinen leikkaus: Tässä on logo ja iskulause. 1 kohta ensimmäisessä osassa 2 kohta ensimmäisessä osassa 1 kohta toisessa osassa 2 kohta toisessa osassa Jos tarkastelet yllä olevaa koodinpätkiä, näet, että otsikot ja alatunnisteet ovat valinnaisia, voimme vapaasti valita, haluatko käyttää niitä vai ei, mutta se on suositellaan, että jokaisessa osassa on aina otsikko, muuten jakso on “nimetön” asiakirjan ääriviivassa. Onneksi Internetissä on monia hyviä työkaluja, joiden avulla voimme tarkistaa asiakirjan ääriviivat, tällä kertaa käytämme html5.org Outliner-työkalua. Jos lisäät koodinpätkän outlinerin tarjoamaan lomakkeeseen ja napsauta “Esitä tämä!” -painiketta, näemme seuraavan tuloksen: Tämä on asiakirjan kuvaus mallikoodistamme, Näin hakukoneet näkevät sen, ja näytönlukijat lukevat sen näkövammaisille käyttäjille. Se on semanttinen, hyvin jäsennelty ja ei ole ilkeä “nimetön” osia. Jos haluat etsiä, miten nimettömät-osio näyttää Outlinerissa, vain poista joitakin otsikkotunnisteita esimerkkikoodista. Semanttiset HTML-tunnisteet ja asiakirjan ääriviivat ovat vain pieni osa web-semantiikkaa. Web-sivun sisältö voidaan tehdä vieläkin merkityksellisemmäksi WAI-ARIA-esteettömyysprotokollan ja RDFa-protokollan, mikrodatan tai JSON-LD-merkinnän kanssa käytettävien jäsennettyjen tietojen avulla. tunniste, joka toimii samalla tavalla, vain inline-tasolla.-s kuitenkin sinun ei tarvitse täysin ojentaa niitä. Ne ovat edelleen paras valinta ryhmittelemään sisältöä vain muotoilutarkoituksiin ja muissa viimeisissä tapauksissa. Tekstisemantiikka HTML5: ssä
ja , mutta ne olivat myös olemassa ennen HTML5: ää. Uusien inline-semanttisten elementtien joukosta löytyy esimerkiksi , tunniste ihmisen luettavissa olevat päivämäärät, ja varten korostettu teksti.Dokumentin ääriviivat HTML5: ssä
varten osiot, jotka on ryhmitelty tietyn teeman ympärille varten täydelliset tai itsenäiset koostumukset esimerkiksi blogipostin tai widgetin varten navigointilohkot varten täydentävä sisältö, kuten sivupalkit. tag. tunnisteet ovat myös uusia, mutta ne eivät luo uusia osia asiakirjassa, ne jakavat sisällön osien sisällä. Se tarkoittaa, että jokainen leikkauselementti (runko, artikkeli, jakso, nav ja sivu) voi olla oma otsikko ja alatunniste.Vinkkejä semanttisesti rakenteelliseen sisältöön
tag.H1 tag., ja tunnisteet eivät kuulu HTML-asiakirjan pääpiiriin, niitä ei yleensä anneta aluksi apuvälineillä. tunnisteet, jotka määrittävät otsikon (kuten logon, tekijän nimen, päivämäärät, metatiedot jne.) ja alatunnisteen (tekijänoikeudet, muistiinpanot, linkit jne.).Esimerkki: semanttinen ääriviiva
Tervetuloa sivuillamme!
Artiklan nimi
1 artiklan alaotsikko. \ T
Ensimmäinen looginen osa (esim. "Teoria")
Muut alaryhmät ensimmäisessä osassa
Toinen looginen osa (esim. "Käytäntö")
Web-semantiikan muut näkökohdat
