HTML eli HyperText Markup Language (suomeksi hypertekstin merkintäkieli) on kieli, jota käytetään, kun rakennetaan verkkosivuja ja kuvataan niiden sisältöä. HTML:n avulla luodaan verkkosivujen koko sisältö ja rakenne: teksti, kuvat, linkit, otsikot, taulukot ja lomakkeet.
HTML-koodi muodostuu erilaisista merkintätageista, jotka määrittelevät sivun sisällön, rakenteen ja ulkoasun. Kun valmis sivu sitten ladataan selaimessa, selain tulkkaa HTML-koodin ja näyttää sivun käyttäjälle koodin mukaisesti.
Vaikka HTML ei ole ohjelmointikieli, kuten esimerkiksi JavaScript tai Python, se kuitenkin käyttää tiettyä syntaksia ja kielioppia, jotta verkkosivun rakenne ja sisältö voidaan kuvata tietokoneelle ymmärrettävällä tavalla.
Miten HTML toimii?
HTML mahdollistaa sen, että käyttäjä näkee selaimessaan näkyvän verkkosivun ymmärrettävässä muodossa. Koodi määrittelee sen, miten sivun eri elementit, kuten otsikot, väliotsikot, kappaleet, kuvat ja linkit näytetään käyttäjälle.
HTML:n mahdollistaa myös vuorovaikutuksellisten elementtien sisällyttämisen verkkosivulle. Käyttäjä voi esimerkiksi täyttää sivulla jonkun lomakkeen tai klikata linkkiä, joka johdattaa hänet toiselle verkkosivulle. Linkkien avulla käyttäjille voidaan tarjota tietoa erilaisista asioista; klikkaamalla esimerkiksi tätä linkkiä https://sijoita.net/ voi löytää paljon tietoa sijoittamisesta.
HTML perustuu siihen, että se määrittelee verkkosivun rakenteen ja sisällön käyttämällä erilaisia merkintätageja. Kun käyttäjä avaa koodin avulla rakennetun verkkosivun, selain lukee koodin ja käyttäjä näkee sivun sisällön ymmärrettävässä muodossa selaimessaan.
HTML-koodi muodostuu eri elementeistä, jotka määrittävät sivun eri osat. Jokaisella elementillä on oma merkintätagi, joka kertoo selaimelle, minkä tyyppinen elementti on kyseessä ja miten se tulisi näyttää. Esimerkiksi kappaleen aloittava tagi on aina <p> ja kappaleen lopettava tagi on puolestaan </p>.
Tämän lisäksi HTML-koodiin voidaan liittää CSS (Cascading Style Sheets) -tyylimääritys, joka määrittävää sen, miltä sivun ulkoasu näyttää valmiina. CSS-tiedostot määrittävät ohjeet siihen, miten elementit näytetään selaimessa.
HTML:n perusteet
HTML:ssä käytetään siis erilaisia merkintätageja, jotka määrittävät sisällön rakenteen ja ulkoasun. Seuraavassa listassa mainitaan muutamia yleisiä HTML-tageja sekä niiden käyttötarkoitukset:
- <html> määrittää, että dokumentin sisältö on kirjoitettu HTML-kielellä
- <head> sisältää dokumentin otsikkotiedot, kuten meta-tiedot ja linkit tyylitiedostoihin
- <body> sisältää dokumentin varsinaisen sisällön, kuten tekstiä, kuvia, taulukoita ja muita elementtejä
- <h1>, <h2>, <h3> jne… käytetään otsikoiden määrittämiseen
- <a> määrittää hyperlinkin
- <img> määrittää kuvan
- <ul>, <ol> käytetään luetteloiden määrittämiseen. <ul> tagilla luodaan epäjärjestetty lista, jossa jokainen listan kohta merkitään ympyrällä. <ol> tagilla luodaan järjestetty lista, jossa jokainen kohta merkitään numerolla
- <div>, <span> käytetään sisällön jakamiseen loogisiin ryhmiin. <div> tagilla voi luoda erillisiä lohkoja sisällölle, kun taas <span> tagilla voi määrittää pienemmän tekstimäärän ryhmän.
Käytössä olevia HTML-tageja on kuitenkin huomattavasti enemmän kuin esimerkeissä mainitut, ja käytetyt tagit riippuvat aina kulloisenkin verkkosivun tarpeista.
Miksi on tärkeää ymmärtää HTML:n toimintaa?
Käyttäjän ei välttämättä tarvitse ymmärtää HTML:n toimintaa pystyäkseen käyttämään verkkosivuja. HTML-koodin ymmärtäminen voi kuitenkin auttaa ymmärtämään sitä, miksi tietyt verkkosivut näyttävät ja toimivat tietyllä tavalla. Verkkosivustojen suunnittelijat käyttävät HTML-koodia esimerkiksi rakentaakseen esteettisesti mahdollisimman miellyttäviä verkkosivuja, tai verkkosivut voidaan suunnitella ensisijaisesti helppokäyttöisiksi ja kaikilla laitteilla hyvin toimiviksi.
HTML:n toiminnan ymmärtäminen on hyödyllistä myös monessa muussa mielessä. Kun ymmärtää koodin, voi luoda ja muokata myös omia verkkosivuja. Monessa työtehtävässä voidaan nykyään vaatia verkkosisällön luomista tai päivittämistä. Kun oppii ymmärtämään HTML:n perusteet, voi luoda itse verkkosivuja alusta alkaen, ja päivittää jo olemassa olevaa sisältöä.
On erittäin tärkeää ymmärtää, miten verkkosivut toimivat ja miten ne on suunniteltu. Ennen kaikkea on hyvä ymmärtää, mihin tarkoitukseen verkkosivut on luotu: onko niiden tarkoitus antaa tietoa, viihdyttää, johdattaa asiakas jollekin toiselle verkkosivulle vai jotain muuta? Ymmärtämällä HTML-koodia voikin kehittää kriittistä ajatteluaan eri verkkosisältöjen suhteen. Kun on tietoinen HTML:n perusteista, puhuu ikään kuin samaa kieltä muiden kehittäjien kanssa ja ymmärtää, miten sivuja rakennetaan ja mistä elementeistä ne koostuvat.
Miten HTML eroaa XML-kielestä?
XML (Extensible Markup Language) ja HTML ovat molemmat merkintäkieliä, ja niitä käytetään tietojen esittämiseen verkkosivuilla. Vaikka molemmat ovat merkintäkieliä, ne ovat kuitenkin käyttötarkoitukseltaan erilaisia.
HTML on tarkoitettu dokumenttien visuaaliseen esittämiseen selaimessa. Siinä on ennalta määritellyt merkintätagit, joilla merkitään esimerkiksi kappaleet ja otsikot. HTML-koodin tärkeimpänä tehtävänä voidaan sanoa olevan verkkosivun rakenteen ja sisällön määritteleminen niin, että ne voidaan näyttää visuaalisesti.
XML:ssä sen sijaan ei ole ennalta määriteltyjä merkintätageja, vaan käyttäjä voi itse määritellä tarvittavat tagit. XML:n käyttäminen ei siis rajoitu vain verkkosivuihin, vaan sitä voidaan käyttää myös esimerkiksi tietojen tallentamiseen tietokantoihin ja tiedostoformaatteihin.
Toinen merkittävä ero näiden kahden merkintäkielen välillä on se, että XML on paljon tiukempi merkintäkieli kuin HTML. Sen syntaksi on kireämpi ja säännönmukaisempi kuin HTML:n syntaksi. HTML-tiedostoissa sen sijaan on usein vajavaisuuksia, kuten puuttuvia sulkutunnisteita ja muita virheitä, jotka selain usein korjaa automaattisesti.