HTML

HTML (lyhenne sanoista Hypertext Markup Language, suomennettuna hypertekstin merkintäkieli) on avoimesti standardoitu merkintäkieli, jolla voidaan kuvata hyperlinkkejä sisältävää tekstiä eli hypertekstiä. HTML:llä voidaan myös merkitä tekstin rakenne eli esimerkiksi, mikä osa tekstistä on otsikkoa ja mikä leipätekstiä. HTML tunnetaan erityisesti kielenä, jolla internetsivut on kirjoitettu.

HyperText Markup Language
Tiedostopääte	.html
Mediatyyppi	text/html
Kehittäjä	WHATWG
Lyhenne	HTML
Avoimuus	Kyllä
Verkkosivusto	html.spec.whatwg.org
Infobox OK

HTML5:tä edeltävien HTML-versioiden syntaksi on määritelty SGML:n sovelluksina. HTML 4.01:stä on muokattu myös XML:n sovellukseksi luokiteltava versio XHTML 1.0, ja HTML 5:n luonnoksesta on rinnakkainen XML-versio XHTML 5.

Rakenteisuus ja merkkaus

Elementit ja tunnisteet

Esimerkki HTML-koodista

HTML-koodi on rakenteista tekstiä, joka muodostuu sisäkkäisistä ja perättäisistä elementeistä. Koodauksen tasolla elementtejä edustavat kulmasulkein merkityt tunnisteet eli tägit, jotka nimeävät elementin tyypin. Selaimet eivät näytä tunnisteita sellaisinaan vaan käsittelevät niitä teknisinä ohjeina, joiden mukaan sivun varsinainen sisältö tulee jäsentää.

Tavallisesti elementissä on erikseen aloitustunniste ja vinoviivalla merkitty lopetustunniste sekä niiden väliin jäävä sisältö (jossa voi olla tekstiä ja myös muita HTML-elementtejä):

<tunniste>elementin sisältö</tunniste>

Aloitustunnisteeseen saattaa lisäksi sisältyä attribuutteja, jotka määrittävät elementin ominaisuuksia tarkemmin kuin tunnisteen nimeämä elementin tyyppi:

<tunniste attribuutti="arvo">elementin sisältö</tunniste>

Eräissä HTML-elementeissä ei ole mitään sisältöä. Sisällyksetöntä elementtiä edustaa esimerkiksi pakollisen rivinvaihdon muodostava <br />-tunniste. Sisällyksettömät elementit eivät tarvitse lopetustunnistetta, paitsi jos kyse on XHTML-koodista. Tällöinkin erillinen lopetustunniste voidaan korvata siten, että lopetusmerkkinä toimiva vinoviiva merkitään heti aloitustunnisteen loppuun:

<tunniste/>

Rakenteellinen merkkaus määrittää elementin tarkoituksen. Esimerkiksi merkintä <h2>Golf</h2> tarkoittaa, että sana Golf on toisen asteen otsikko (joka näkyy selaimessa samanlaisena kuin Rakenteisuus ja merkkaus -otsikko tämän osion alussa). Rakenteellinen merkkaus ei periaatteessa määritä sitä, miltä tekstin pitää selaimessa näyttää, mutta yleensä selaimet noudattavat jotain oletusarvoista tapaa esittää erityyppisiä elementtejä. Tekstien ulkoasua voidaan lisäksi säädellä tarkemmin CSS (Cascading Style Sheets) -tyyliohjeilla.

Esityksellinen merkkaus määrittää elementin ulkoasun, mutta ei tarkoitusta. Esimerkiksi <b>sisältö</b> tarkoittaa, että elementin sisältö tulisi näyttää lihavoituna tekstinä. Esityksellinen merkkaus ei kuitenkaan ota kantaa siihen, miten sisältö pitäisi esittää, jos tulostuslaite ei pysty lihavoimaan sisältöä (ei ole itsestään selvää, miten esimerkiksi puhesyntetisaattorin pitäisi käsitellä lihavointia, kun se muuntaa tekstin ääneksi). Sen sijaan rakenteellinen merkkaus <strong>sisältö</strong> tarkoittaa, että sisältö tulee esittää voimakkaasti, mutta ei ota kantaa siihen, tarkoittaako voimakkuus tekstin lihavointia vai puheen painokkuutta. Suurin osa esityksellisistä merkkauksista katsotaankin HTML 4.0 -spesifikaatiossa vanhentuneeksi.

Hypertekstuaaliset merkkaukset linkittävät osia dokumentista toisiin dokumentteihin. Hyperlinkki luodaan erityisellä ankkurielementillä <a>, jossa href-attribuutti määrittää kohdedokumentin URL:n. Elementin sisältö hahmottuu selaimessa linkkisanaksi:

<a href="http://en.wikipedia.org/">Wikipedia</a>

Merkki- ja nimiviittaukset

Pääartikkeli: Merkkiviittaus

HTML-koodiin voi sisällyttää erikoismerkkejä merkki- tai nimiviittauksilla, jotka alkavat &-merkillä (et eli ampersandi) ja loppuvat puolipisteeseen. Esimerkiksi nimiviittauksella Ω voidaan tuottaa kreikkalainen suuraakkonen Ω eli oomega (jota kansainvälisen yksikköjärjestelmän mukaan käytetään myös ohmin tunnuksena).

Esimerkkejä elementeistä

Ylätunnus (eng. header) elementti HTML dokumenttiin: <head>...</head>. Ylätunnuksen teksti sisällytetään ylätunnuksen sisälle, esimerkiksi:

<head>
  <title>Otsikon teksti</title>
</head>

Otsikko

HTML-otsikkoelementit (eng. heading) määritellään kuudelle eri tasolle, <h1> – <h6> missä H1-tägi on ylimmäinen taso ja H6 on alimmainen taso:

<h1>Otsikko taso 1</h1>
<h2>Otsikko taso 2</h2>
<h3>Otsikko taso 3</h3>
<h4>Otsikko taso 4</h4>
<h5>Otsikko taso 5</h5>
<h6>Otsikko taso 6</h6>

Rivinvaihto

Rivinvaihtoelementtinä HTML:ssä käytetään tägiä <br />. Käytännössä <br /> -tägi katkaisee rivin, ilman että se muuttaa sivun semanttista rakennetta, toisin kun kappale <p>-tägi paloittelee sivun kappaleisiin. Elementti <br /> on poikkeuksellinen siinä, että vaikka sillä voi olla attribuutteja, sillä ei voi olla muuta sisältöä tai lopetustägiä.

<p>Tässä on kappale, jossa on tekstiä <br /> sekä rivinvaihtoja</p>

Linkit

Linkki HTML:ssä voidaan luoda hyödyntäen hyödyntäen <a>-tägiä. Jos halutaan yhdistää linkkiin URL-osoite, voidaan se tehdä hyödyntäen href-attribuuttia:

<a href="https://www.wikipedia.org/">Linkki Wikipediaan!</a>

Listat

HTML:ssä on tägi järjestetylle listalle (Järjestys esimerkiksi: 1, 2, 3, … / a, b, c, … / i, ii, iii, ...) <ol></ol> sekä järjestämättömälle listalle <ul></ul>. Listan alkioita luodaan hyödyntäen <li></li> tägejä, jotka lisätään listaelementin sisälle (<ol></ol> tai <ul></ul>).

<ol> Ostoslista: <li>Banaani</li> <li>Maito<li/> <li>Leipä</li> </ol>

Kuvat

Kuvia voi lisätä HTML:ssä hyödyntäen <img>-tägiä. <img> tägissä on kaksi vaadittua attribuuttia: src, joka määrittää polun kuvalle sekä alt, joka määrittää vaihtoehtoisen tekstin, jos kuvaa ei jostain syystä pystytä näyttämään.

<img src='<kuvan polku>' alt='Vaihtoehtoinen teksti'>

Canvas

Canvas on HTML5-version mukana tullut elementti, joka mahdollistaa 2D-kappaleiden ja bitmap-kuvien dynaamisen renderöinnin. Canvasia hyödynnetään erityisesti 2D-pelien luomisessa. Yksinkertainen canvas voidaan luoda näin:

<canvas id="CANVASID" width="600" height="400"></canvas>

Koodaus

HTML-dokumentteja on mahdollista kirjoittaa millä tahansa tekstinmuokkaimella, mutta käytettävissä on myös erityisiä HTML-muokkaajia. Periaatteessa HTML-koodin tulisi aina läpäistä vahvistaminen, mutta käytännössä selaimet hyväksyvät myös dokumentteja, joiden HTML-koodi ei ole standardin mukaista. Perinteisesti HTML:n vahvistaminen on ollut sikäli työlästä, että sen jäsentäminen ei ole aivan triviaalia. HTML:n säännönmukaisempi muunnelma XHTML sen sijaan perustuu XML-kieleen, jolle on olemassa huomattava joukko hyviä jäsentimiä ja vahvistimia, joten XHTML:ää voi kirjoittaa helposti myös millä hyvänsä XML-muokkaimella.

Jos koodissa on kaksi tai useampia peräkkäisiä välilyöntejä, ne näyttävät selaimessa yhdeltä välilyönniltä. Myös koodiin sisältyvät rivinvaihdot ilmenevät selaimessa pelkkänä välilyöntinä, ja jos rivinvaihdon halutaan näkyvän selaimessa, se on tuotettava erityisellä merkinnällä.

Historia ja vakiointi

HTML:n historia alkoi vuonna 1989, kun Tim Berners-Lee ja Robert Caillau hahmottelivat korviketta CERNin dokumenttien kirjavalle formaatille. Rinnalle suunniteltiin yksinkertainen verkkoprotokolla HTTP. HTML-dokumenttien verkkoa internetissä kutsutaan World Wide Webiksi eli lyhyesti webiksi. Joillekin se on yhtä kuin Internet. CERN käynnisti oman WWW-palvelimensa vuonna 1991, ja monet ideasta kiinnostuneet liittyivät siihen nopeasti. HTML-normia ylläpitää vuonna 1994 perustettu kansainvälinen yritysten ja yhteisöjen yhteenliittymä W3C (World Wide Web Consortium).

HTML:n alkuperäinen tarkoitus oli pikemminkin kuvata WWW-sivun rakennetta kuin sen ulkoasua, mutta sivujen kirjoittajat halusivat ennen pitkää paremmat mahdollisuudet vaikuttaa myös dokumenttiensa ulkoasuun. Selainvalmistajat vastasivat tarpeeseen esittelemällä HTML-määritykseen kuulumattomia elementtejä, joilla esitystapaa saattoi kuvailla. Monet näistä elementeistä jouduttiin myöhemmin ottamaan mukaan viralliseen HTML-määritykseen käytännön standardeina. Nykyisin monia elementtejä jälleen puuttuu itse HTML:stä, sillä ulkoasun kuvailussa on siirrytty erillisiin tyyliohjeisiin, jotka kuvataan CSS-kielellä. CSS:ään siirtyminen paitsi yksinkertaisti HTML:ää, myös helpotti sivujen luomista ja päivittämistä.

Ensimmäiset määrittelyt

Berners-Lee julkaisi ensimmäisen kuvauksen HTML:stä Internetissä vuoden 1991 lopulla. Siinä oli 22 elementtityyppiä, joista 13 on edelleen käytössä HTML 4:ssä. Berners-Lee suunnitteli HTML:n SGML:n sovellukseksi, mutta vasta IETF toteutti määrittelyn sen avulla vuonna 1993. IETF:n määrittely oli vedos, joka raukesi kuuden kuukauden päästä. Se sisälsi NCSA Mosaicin tukeman kuvien lisäyksen dokumentteihin. Dave Raggett julkaisi kilpailevan HTML+:n, joka sisälsi myös jo käytössä olleet taulukot ja lomakekentät.

HTML 2.0

Alkuvuodesta 1994 IETF muodosti HTML-työryhmän laatimaan ”HTML 2.0” -määritelmän, joka julkaistiin vuonna 1996 koodinimellä RFC 1866. Siihen tehtiin joitain lisäyksiä, kuten tiedoston tallennus palvelimelle, RFC 1867; taulukot, RFC 1942; kuvakartat, RFC 1980; merkistömäärittelyt ja lang-attribuutti, RFC 2070.

HTML 3.0 ja 3.2

IETF julkaisi huhtikuussa 1995 myös standardiehdotuksen HTML 3.0:sta, mutta sekin raukeni viiden kuukauden kuluttua ilman toimenpiteitä. Tämä standardiehdotus sisälsi monia Raggettin HTML+:n ominaisuuksista, kuten matemaattisten kaavojen sisällyttämisen dokumenttiin, taulukot ja tekstin sijoittelun kuvien ympärille. Ainoa selain, joka osasi HTML 3.0:aa, oli W3C:n Arena.

IETF:n työryhmän toiminta hiipui, ja työryhmä lakkautettiin syyskuussa 1997. Pitkään HTML:n kehittäminen oli omia koodejaan määritelleiden selainvalmistajien, lähinnä Netscapen ja Microsoftin varassa.

W3C:n suorittama standardointityö jatkui tammikuussa 1997, kun se julkaisi HTML 3.2:n. Siitä jätettiin kokonaan pois matematiikan tuki, ja siihen lisättiin pääosa Netscapen määrittelemistä sivun ulkomuotoa kuvaavista koodeista.

HTML 4.0

Loppuvuodesta 1997 julkaistiin HTML 4.0. Siinä on kolme tasoa: tiukassa versiossa monia vanhentuneita elementtityyppejä on määritelty laittomiksi, kun taas siirtymävaiheen versiossa näiden käyttö on yhä sallittu; kolmas versio sallii lisäksi Netscape 2.0:n aikoinaan esittelemät kehykset, joiden avulla sivun voi koostaa useasta erillisestä osasivusta.

HTML 4.01

HTML 4:ää päivitettiin huhtikuussa 1998 ja joulukuussa 1999 HTML 4.01:ksi. Siitä julkaistiin myös toukokuussa 2000 tiukkaan standardiin perustuva ISO-standardi ISO/IEC 15445:2000. HTML 4.01 määriteltiin myös XML:n avulla, jolloin syntyi XHTML.

HTML5

Pääartikkeli: HTML5

Ensimmäinen versio HTML5:n vedoksesta julkaistiin tammikuussa 2008. HTML5:n uusia ominaisuuksia ovat muun muassa canvas- ja video-elementit, joiden avulla sivulle voidaan sijoittaa piirtoalue ja videopätkä.

Hypertext Application Technology Working Group aloitti HTML5:n kehitystyön vuonna 2004, kun W3C keskittyi kehittämään XHTML 2.0:aa ja kun HTML 4.01:tä ei ollut päivitetty vuoden 2000 jälkeen. XHTML 2.0:n kehitys lopetettiin, ja sen jälkeen kehittäjät ovat työskennelleet HTML5:n kehitystyössä.

Alun perin HTML5-standardin suunniteltiin valmistuvan 2022 mennessä, mutta suositus valmistui ja hyväksyttiin jo lokakuussa 2014. Päivitysversiot ovat HTML 5.1 ja HTML 5.2.

HTML:n piirteet

HTML eroaa dokumenttimuodoista kuten PDF:stä useilla tavoilla. HTML:n ulkoasu riippuu itse merkinnän (tagit ja CSS) lisäksi selaimesta, näytöstä ja selaimen asetuksista. Tämän vuoksi HTML voi näyttää erilaiselta modernissa ja vanhassa järjestelmässä.

Eri selainten välillä on eroja miten ne käsittelevät HTML:ää ja CSS:ää. Joissakin tapauksissa verkkosivut käyttävät lisänä JavaScriptiä sivujen muodostamiseen, joka on hitaampaa ja vaikeuttaa saavutettavuutta. Kaikki ominaisuudet eivät ole yhdenmukaisesti saatavilla, ja sivujen käytettävyys voi olla erilainen työpöydällä ja mobiililaitteessa: sivut saattavat olla vaikeasti luettavia, jos teksti on liian pientä tai hitaita käyttää animaatioiden vuoksi.

HTML sallii interaktiivisia elementtejä kuten sivun sisäisiä hyperlinkkejä, ja sivuilla voi olla ääntä sekä liikkuvaa kuvaa, mutta sitä ei ole suunniteltu tulostettavaksi pysyvänä kopiona.

Katso myös

• XHTML – XML-standardiin sovitettu HTML
• Cascading Style Sheets (CSS) – HTML-merkityn tekstin muotoilukieli
• BBCode – keskustelusivukäyttöön kehitetty merkkikieli
• JavaScript – selaimella ajettava skripti

Aiheesta muualla

• World Wide Web Consortium, W3C – kansainvälinen ei-kaupallinen yhteisö, joka kehittää HTML -kielen standardointia (englanniksi)
• HTML5 Showcase (Arkistoitu – Internet Archive) - Blogi HTML 5 -esimerkeistä (mainosrahoitteinen) (englanniksi)
• Mozilla Developer Networkin HTML 5 dokumentaatio (englanniksi)
• W3Schools HTML Tutorial - Opettele HTML-merkintäkieltä ilmaiseksi (englanniksi)
• FreeCodeCamp Responsive Web Design - Ilmainen verkkokurssi jossa opetellaan tekemään verkkosivu (englanniksi)