Jokainen, joka osallistuu Web-suunnitteluun tai kehitykseen, on joutunut käsittelemään termiä "semanttinen" viitaten HTML5: een ja Webiin yleensä. Tämä usein ongelmallinen termi on ymmärrettävästi sekava monille meistä, etenkin, koska sen määritelmässä on erilainen yhteisymmärrys tietyissä yhteyksissä.

Tässä artikkelissa selvitetään, mikä tekee HTML5: n semanttisemmaksi kuin sen edeltäjät, ja kertoo, mikä tämä tarkoittaa Web-kehitystä nyt ja tulevaisuudessa.

Semantiikka on merkitystä

Semanttisen käsitteen lähtökohtana on merkityksen tutkimiseen liittyvä kielitieteen ala. Luonnollisilla kielillä, kuten englannilla, erotamme syntaksista (tai kieliopista) ja merkityksestä. Jos ajattelet lause, merkitys liittyy siihen, miten ihmiset tulkitsevat sitä:

"Mies heitti tietokoneen ikkunan läpi."

Semantti liittyy lauseen näkökulmaan, joka sallii ihmisten lukemisen ymmärtää sen sisältämää sanomaa. Yhdessä syntaksin kanssa semantiikka on suuri osa sitä, mikä helpottaa viestintää kielen avulla. Kun puhumme semanttisesta suhteesta HTML: ään, puhumme tietokoneohjelmien välisestä kommunikaatiosta, ei ihmisistä. Semanttisen HTML: n tarkoitus on ennen kaikkea lisätä sitä, missä määrin sovellukset voivat käsitellä tai tulkita Web-sisältöä. Katsele esimerkiksi seuraavia verkkosivujen osia, jotka sisältävät joitakin pidemmät HTML-rakenteet:

The man threw the computer through the window.

Elementit (ja attribuutit) antavat selaimelle tietoa sisällön esittämisestä käyttäjälle. Kohtaelementit näytetään oletusarvoisesti ylä- ja alapuolella olevilla välilyönneillä, kuvaelementit näytetään src-attribuutin sisältämän kuvatiedoston avulla ja niin edelleen. Kun selaimessa on jokainen näistä elementeistä, se tekee sisällön tietyllä tavalla, jota lopulta määräytyvät tunnisteet.

HTML-rakenteilla on jo merkitys

On tärkeää ymmärtää, että HTML5 ei esitä semantiikkaa HTML: ään ensimmäistä kertaa. HTML: llä oli jo sisäänrakennettu semantiikan taso. Nykyiset HTML-rakenteet ovat merkityksellisiä eriasteisesti. Jos tarkastelet tätä tuttua HTML-elementtiä, kuten yllä olevassa osiossa on, näet mitä tarkoitan:

Vaikka se on lyhennetty, elementin img-nimitys tarkoittaa jotain merkityksellistä tunnisteen sisällöstä eli siitä, että se on kuva. Tällä tavoin voit ajatella, että HTML: n semanttinen piirre on samankaltainen kuin metatieto, koska elementtitunniste ja attribuuttien nimet kuvaavat tietoja (verkkosivun tiedot ovat elementti- ja attribuuttisisältöä).

Muistatko, kun aloitimme sisällön erottamisen tyylistä?

Jotkut rakenteet, joita olemme käyttäneet HTML: ssä, kertoivat selaimelle, miten sivun sisältökohteita voidaan muotoilla. Ajan kuluttua meitä on kannustettu erottamaan sivun muotoilu sen sisällöstä.

Esimerkiksi olemme korvannut i-merkinnän em: lla, mikä on mielekkäämpi ja ei kerro selaimelle, miten elementin sisällä oleva teksti näytetään. Emin sijasta emin käyttäminen on välittää tietoa sisällön kohteen luonteesta eikä sen muotoilua. Tietenkin se vaikuttaa tyyliin, joka on tärkein syy siihen, mutta se jättää tyylin yksityiskohdat selaimeen ja / tai CSS-koodiin, joka on ihanteellisesti erotettu sivun merkinnästä.

Semanttinen HTML5 on isompi askel tässä prosessissa. Lopullinen tavoite on luoda järjestelmä, jossa sovelluksilla on pääsy suurempaan merkitystasoon - tämä ei kuitenkaan ole AI, vaan se sisältää vain kuvailevia tietoja tietoelementeistä niiden mallirakenteissa.

Eikö tämä ole samanlainen kuin XML?

Jos olet aiemmin käyttänyt XML: ää, sinä tunnet semanttisen merkinnän käsitteet. Esimerkiksi kun suunnittelet tietosarjan XML-dokumentin (tai mallin), valitset elementtejä ja attribuutteja mallien sisältämiin tietoihin. Ideaalisti elementti- ja attribuuttien nimet määrittelevät dataerät mielekkäällä tavalla:

Jim Smith23 November 2012

Kehittäjä on valinnut nimet, jotka kuvaavat intuitiivisesti mallin mukaisia ​​datajoukon arvoja. HTML5: ssä et voi valita omia elementtejäsi, koska se ei ole vapaasti laajennettavissa. Sen valitsemat rakenteet ovat yksinkertaisempia kuin aiemmat versiot.

Muuten, on olemassa erilaisia ​​merkityksiä

Olemme puhuneet merkityksestä, mutta itse asiassa on olemassa erilaisia ​​tapoja, joilla elementti tai muu koodisarja voi olla tarkoituksenmukaista.

Img-tunniste on mielekästä siinä, että se kertoo jotain elementtisisältöä kuvaavasta siitä, mitä se on.

Osa uusista HTML5-elementeistä, kuten otsikko ja alatunniste, ovat mielekkäitä, koska ne kertovat elementin roolista tai tarkoituksesta sivun yleisessä rakenteessa.

Kuinka kaikki tämä liittyy HTML5-koodiin?

Mitä tämä lisää HTML5: n merkityksellistä osaa? Pohjimmiltaan HTML5: lla on joitain uusia elementtejä, joiden avulla voit lisätä sivusi merkintään enemmän semanttisia tietoja. Uusia elementtejä on kuormitettu, vain muutama niistä, joita tarkastelemme täällä. Ylätunniste ilmoittaa tietoja elementin sisällöstä ja sen roolista sivurakenteessa:

Man in Window Outburst

Päätäelementti voi sisältää muita elementtejä, ja se sisältää ainakin yhden otsakeelementin. Jalkatunniste on samanlainen, ja tunniste taas ilmaisee jotain merkityksellistä elementin sisällöstä ja sen suhteesta muuhun sivuun:

Nav- tunniste kuvaa sivun osion tarkoitusta eli se sisältää navigointiyhteyksiä:

Jako- osa sisältää tyypillisesti saman teeman ryhmän kohteet, usein yhdessä otsikon kanssa. Osio-elementillä on melko abstrakti merkitys, mutta se on kuitenkin mielekästä:

What happened
Police officers apprehended the man at 3.30pm...

Artikkelielementti on samanlainen, jota käytetään määrittämään itsenäinen kohde:

The Law
The law on throwing items through windows is very clear...

Sivusuunnitelma osoittaa elementin roolin suhteessa sen kontekstiin sivussa, kuten seuraavassa artikkelin koodin laajennetussa versiossa:

The Law
The law on throwing items through windows is very clear...

Nämä ovat vain muutamia uusia HTML5-elementtejä, jotka tarjoavat semanttisia parannuksia, toiset sisältävät median ja käyttäjän panoselementit sekä lisäominaisuudet. Mikrotietojen sisällyttäminen HTML5: een lisää myös mahdollisuuksia sisällyttää semanttiset tiedot verkkosivuihin ja sovelluksiin. Kuten näette, osa näistä uusista elementeistä on sisällöltään ja rakenteeltaan merkityksellisiä.

Ajattele joitain vanhempia tunnisteita (joista monet ovat vielä noin), kuten div. Div-elementti on yksinkertaisesti sivun palanen - tagin nimi ei kerro mitään elementin sisällöstä tai sen roolista sivulta. Toisin sanoen tunniste välittää hyvin vähän merkitystä. Paljon pitkäaikaisia ​​tunnisteita välittää joko käytännössä mitään merkitystä lainkaan tai joissakin tapauksissa yleinen, löyhästi määritelty merkitys. Jokainen Web-sivun kohde sisältyi joukkoon hyvin yleisiä elementtiluokkia. Avain jotain mielekästä on spesifinen. Uusilla HTML5-tunnisteilla voimme määrittää verkkosisällön tarkempien termien avulla.

Oletteko jo lisännyt merkityksiä merkintäsi?

Jos olet luonut verkkosivuja kohtuullisen pitkään, jotkin uudet HTML5-elementit saattavat soittaa kelloja sinulle. Todellisuudessa kehittäjät olivat jo rakentamassa merkitystasoa sivuilleen käyttäen elementtiattribuutteja, erityisesti luokkia ja tunnuksia. Jos esimerkiksi olet antanut elementille luokan tai ID-määrityksen "footer" tai "header", et todellakaan ole yksin. HTML5: n avulla tämä merkitys välitetään itse merkinnöissä eikä attribuuttien arvoissa. Jos käytit näitä ominaisuuksia tiettyjen tyylin ominaisuuksien toteuttamiseen, käytit tehokkaasti jotain manuaalisesti, joka on HTML5: n sisäänrakennettu laatikosta - ja semanttisista elementeistä on lisäetuja ...

Miksi me teemme kaiken tämän?

OK, tämä on kaikki hyvin, mutta teille annetaan anteeksi kysyä, miksi aiomme kaiken tämän ongelman jotain, joka tuntuu olennaisilta osin käsitteelliseltä / akateemiselta. No, voit olla varma, että on olemassa hyviä syitä liikkua enemmän semanttisessa suunnassa. Kuten olemme nähneet, HTML5-semantiikan ansiosta voimme luoda merkintäkoodin, joka kuvaa sisällön kohteita. Tämä koodin kuvaava osa mahdollistaa muiden ohjelmien sisällön tehokkaamman käytön useilla sovelluksilla:

• Hakeutettavuus on muutettu Web-semantiikan etenemisellä. Semanttinen merkintä tekee sisällöstä / datasta enemmän hakuja. WWW-sivuja ei tietenkään ole pelkästään tarkasteltu selaimessa, vaan ne käsitellään myös muilla ohjelmilla, kuten hakukonerobotilla. Koska semanttinen merkintä on suunniteltu antamaan sovellusten tulkita verkkosivuja merkityksellisemmillä tavoilla, tämän pitäisi lopulta parantaa hakutoimintojen laatua huomattavasti. Tim Berners-Leyn usein mainitsemassa "unessa" verkossa tietokoneet pystyisivät analysoimaan kaikkia tietoja verkossa - tämä saattaa olla kaukana, mutta HTML5: n semanttinen työntövoima on motivoitunut tällaisen pitkän aikavälin tavoitteen .
• Esteettömyys on yksi semanttisen merkinnän tärkeimmistä eduista. Esteettömyystyökalut voivat hyötyä valtavasti web-sisällön käyttömahdollisuuksista. Tällaisia ​​työkaluja ovat selaimen lisäosat käyttäjille, joilla on rajoitettu näkemys, kuulo, oppimisvaikeudet ja niin edelleen. Semanttisen merkinnän ansiosta verkkosisältöä ja tulosta käsittelevä sovellus on helpompi viestiä alkuperäiselle sanomalle käyttäjälle tarpeidensa mukaisesti. Tämä käsite ulottuu esteettömyyteen ja laitteen joustavuuden ulottuvuuksiin tekniikoiden kuten herkän suunnittelun avulla. Tulos on kokonaisvaltaisempi lähestymistapa web-sisällön toimittamiseen.
• Johdonmukaisuuden tulisi olla semanttisen HTML5: n todellinen hyvä tekijä. Semanttinen merkintä parantaa johdonmukaisuutta, koska sisältökohteet ovat loogisesti määritettävissä tietyille elementtityypeille. Tämä on vastoin vanhempia malleja, joissa tavaroita voisi usein yhtä loogisesti sisältyä mihin tahansa erilaiseen elementtityyppiin. Valitsemalla yksi ei ole osoitus sisällön luonteesta tai sen roolista sivun sisällä, se oli vain heijastus kehittäjän valinnasta. Semanttisen merkinnän avulla tarkempi merkitystaso tekee näistä valinnoista vapaamman, mutta tulokset ovat luonnostaan ​​luotettavampia selaimen tai muiden sovellusten tulkinnassa.

Kehittäjät edistävät Web-teknologioiden etenemistä

Kun olin uniin (muutamia vuosia sitten), muistan lehtori, joka kertoi meille, että akateemisen tutkimuksen aluetta mullistetaan etsinnän avulla. Hän puhui semanttisesta webstä - tarpeetonta sanoa, että se ei ole vielä tapahtunut. Jokainen keskittyminen uudenlaiseen suuntaan jotain erilaista ja epäselvää kuin World Wide Web on aina vaikea tehtävä. Ainakin kehittämällä me kehittäjillä pystyt toimimaan vaikuttamalla tulevaisuuden Web-sivustoon, joka on helppokäyttöisempää, haettavissa ja johdonmukaista kaikille käyttäjille.

Käytätkö HTML5: n semanttisia elementtejä? Tarkoittaako keskittyminen semantiikkaan parempaa laatua olevaa tuotetta? Kerro meille, mitä mieltä olet kommenteissa.

Esitetty kuva / pikkukuva, käyttää kielen kuvaa kautta Shutterstock.