Mikä on HTML5?

Lyhenne HTML tulee sanoista Hypertext Markup Language. HTML-merkintäkieli on maailmanlaajuisen tietoverkon (WWW) perustuskivi. HTML:n kehitti alunperin Tim Berners-Lee vuonna 1990. HTML:stä tuli vuonna 2000 kansainvälinen standardi (ISO). Viimeisin versio on HTML5, joka tarjoaa nopeampaa ja kattavampaa lähestymistä web-kehittämiseen.

Hyperteksti puolestaan on teksti, joka ruudulla näkyessä viittaa toiseen tekstiin, jonka käyttäjä voi nähdä välittömästi hiiren klikkauksella tai napin painalluksella. Tekstin lisäksi hyperteksti voi sisältää kaavioita, listoja, kaavakkeita, kuvia ja muita esityskeinoja. Hyperteksti on helppokäyttöinen ja joustava tapa jakaa tietoa internetissä.

Merkintäkieliä käytetään asettamaan merkkitageja, jotka luonnehtivat dokumentin tekstielementtejä, jotka puolestaan antavat ohjeita verkkoselaimille kuinka dokumenttien tulisi tulla näkyviin.

Kuvastaa HTML5 hypertekstin konseptia ja sitä miten se toimii.

Miten HTML toimii? 

HTML koostuu sarjasta lyhyitä koodeja, jotka on kirjoitettu tekstitiedostoon sivuston tekijän toimesta. Näitä kutsutaan tageiksi. Teksti tallennetaan HTML-tiedostona ja sitä katsotaan selaimen läpi.

Selain lukee tiedoston ja kääntää tekstin näkyvään muotoon ja renderöi sen sivun tekijän toivomalla tavalla. HTML:n kirjoittaminen vaatii tagien oikeaoppista käyttöä, jotta kehittäjän visio toteutuu. HTML-sivujen luontiin voi käyttää sekä alkeellisempia tekstieditoreita tai tehokkaita graafisia editoreita.

HTML5 Pääasialliset hyödyt

Multimediaelementit

Video- ja audiotageja käyttämällä voi sivustolle lisätä multimediaelementtejä ilman että joutuu käyttämään Adobe Flashia tai muita kolmannen osapuolen plugineita. Kaikki toiminta tapahtuu selaimesta itsestään, joka pienentää lopullisen version tiedostokokoa.

Sivustolle voidaan siis sisällyttää tuote-esittelyvideoita, videoarvioita, podcasteja tai musiikkinäytteitä. Lisäksi sivustoille voi myös upottaa videoita YouTubesta tai Vimeosta, jolloin lopullinen tiedoston koko ei muutu ja voit silti esitellä haluamiasi multimediaelementtejä.

Geolokaatio

Geolokaation avulla verkkosivu havaitsee verkkosivulla kävijöiden lokaation. Toiminnolla voi olla useita eri käyttötarkoituksia sekä markkinoinnin tehostamisessa, että käyttäjäkokemuksen parantamisessa. Esimerkiksi kielivaihtoehtojen tarjoaminen lokaation perusteella on osana parantamassa käyttäjäkokemusta. Kuitenkin kyseinen ominaisuus vaatii käyttäjien hyväksynnän, jotta kenenkään yksityisyyttä ei rikota.

Sovelluksia

Yksi tärkeimmistä ominaisuuksista HTML5-sovelluksissa on niiden lopullisten versioiden saatavuus. Tarkoittaen siis että sovellus on saatavilla tietokoneella, tabletilla tai mobiililaitteella. Laitetta vaihtaessa, voit yhä päästä sovellukseen käsiksi URLin kautta, toisin kuin mobiilisovelluksessa. Useimmat verkkosovellukset ajetaan pilven kautta.

HTML5 Lisäedut

Ilmainen 

HTML5-ohjelmoinnin aloittaminen on helppoa koska se on täysin ilmaista ja se ei vaadi erityisiä lisäohjelmistoja. Kuitenkin on mahdollista myös käyttää ilmaisia koodieditoreja kuten Visual Studio Code ja Atom, jotka kaikki tarjoavat perustoimintoja kuten sisällön ja tagien värittämisen eri väreillä. Editorien käyttäminen on suositeltavaa tekstitiedoston sijaan, koska tekstitiedosto ei erottele tageja sisällöstä, mikä vaikeuttaa korjausten tekemistä.

Kuvastaa HTML5-dokumenttirakennetta osoittamalla miten verkkosivun elementit asettuvat.

Rakennemahdollisuudet

Uusien tagien ansiosta HTML-dokumentti voidaan rakentaa eri osista, jolloin verkkosivulle saadaan sekä rakenteellisesti järkevä ulkonäkö että semanttista sisältöä koko verkkosivuille.

HTML-koodi pystytään helposti erottelemaan tageihin ja sisältöön, joka mahdollistaa ohjelmoijien tehokkaamman työskentelyn sekä nopeamman virheiden tunnistamisen. Tagit ovat selkeitä ja kuvaavia, joten ohjelmoija voi aloittaa koodaamisen ongelmitta. HTML5:sta on kokonaisuudessaan tehty todella helppo ja yksinkertainen kieli ymmärtää ja oppia.

Lähes kaikille selaimille sopiva

Modernit ja suositut selaimet kuten Chrome, Firefox, Safari ja Opera tukevat kaikki HTML5:sta. Toisin sanoen, riippumatta mitä selainta käytät, pystyt näkemään sisällön oikealla tavalla oikean näköisenä. Ainoana mainitsemisen arvoisena seikkana on HTML5-yhteensopivuus vanhempien selainversioiden kanssa. Jotkut toiminnot ja tagit eivät vanhemmissa versioissa ole toiminnallisia, jonka puolesta kannattaa pitää mielessä myös vanhempien selainversioiden käyttäjät verkkosivua luodessa. Voit etukäteen selvittää onko verkkosivuilla toimintoja, joita vanhemmat selainversiot eivät tue ja sen pohjalta miettiä vaihtoehtoisia ratkaisuja.

Design mukautuu eri laitteille 

Mikä tahansa HTML5:lla tehty sivu on yhteensopiva sekä tietokoneiden että mobiililaitteiden kanssa. Toisin sanoen voit asettaa mobiilin määrittelyt suoraan HTML-dokumentista itsestään. Tämä on yksi HTML5- kielen hyödyllisimpiä ominaisuuksia, koska sen ansiosta käyttäjä pääsee mobiililaitteella mille tahansa verkkosivulle tai verkkosovellukseen yhtä helposti kuin tietokoneellakin.

Voimme lopussa todeta että HTML5:n kehittäminen on ollut kunnianhimoinen ja perusteellinen projekti, joka on johtanut suuriin edistysaskeleisiin ohjelmointimaailmassa. Suurin osa maailman verkkosivuista ja verkkosovelluksista on tehty HTML5:n avulla tai ne soveltavat sen ominaisuuksia, jonka vuoksi HTML5 onkin yksi jokaisen ohjelmoijan arvokkaimmista työkaluista.

Niko Ollikka

  • Junior Marketing Specialist
  • Työkalut: Hootsuite, G Suite, LinkedIn, Leadfeeder, Vainu
  • Diggaa: Narratiiviset ja visuaaliset pelit, kamppailulajit ja amerikkalainen jalkapallo

Kysyttävää? Soita Herkolle!