pnuk!

HTML 5

Oli synkkä ja myrskyinen yö. Heräsin aamulla ukkoseen ja poltettuani savukkeen parvekkeella, menin sohvalle istumaan MBP sylissä. Selailin hetken Internetin gurujen uusia kirjoituksia ja läpi paistoi HTML 5.

Tämä juttu on kirjoitettu ihan vaan selkeyttääkseni oman pään ääniä. En väitä olevani minkään suhteen Oikeassa™.

Ensivaikutelma on iloinen. Vihdoinkin kuvaavia tageja ikuisten divien tilalle. HTML 4.01 on jo kuitenkin kohta 10 vuotta vanha, joten aikakin, että jotain uutta tulee. Selainten tuki ei vielä hirveän hienolta näytä, mutta oikeaan suuntaan ollaan matkalla.

XHTML ei ole kuollut ja kuopattu kuitenkaan, vaan se jatkaa eloaan XHTML 5- nimellä, joka on sama kuin HTML 5, mutta erilaisella MIME-tyypillä, HTML on text/html ja XHTML on application/xhtml+xml tai application/xml. Tokihan sivuja voi tehdä millä tahansa standardilla, mikä tuntuu sopivimmalta. HTML 4.01 Strict on aivan yhtä hyvä kuin XHTML 1.0 Strict. HTML 5 ei ihan valmis ole.

HTML 5 eroaa muista ensimmäiseksi siinä, että DOCTYPE on aina <!DOCTYPE html>. Tyhjät elementit eivät tarvitse sulkemista, mutta sitä ei kielletäkään, eli siirtyminen XHTML:stä ei ole hirveän suurta niiden osalta. Se ikävä ominaisuus HTML 4:stä on jäänyt, että esimerkiksi <li> -elementtiä ei ole pakko sulkea, jos seuraava elementti on sama. <p> -elementin tilanne on vielä huonompi ja sen saa jättää auki vielä useammassa tapauksessa. Muitakin vastaavia elementtejä on.

HTML 5:n myötä tulee uusia rakenteellisia elementtejä, jotka ovat:

<section>. Tämä on tullut ”korvaamaan” <div>-elementin. Tällä määritellään geneerisiä osia sivusta, esimerkiksi artikkelit ja sivupalkki. Käyttö ei ole pakollista, mutta voi auttaa tyylittelyssä.

<article> on esimerkiksi blogin merkintää tai uutisartikkelia varten. Voi sisältää <header>– ja <footer>-elementit. Jos haluaa esimerkiksi listata artikkeliin liittyviä linkkejä, jotka eivät varsinaisesti kuulu artikkeliin, ne voi laittaa <aside>-elementin sisään.

<aside>. Minä ymmärrän tämän niin, että tämän sisään voi laittaa artikkeliin tai sivuun jollain tavalla liittyviä juttuja.

HTML 5 differences from HTML 4

<aside> represents a piece of content that is only slightly related to the rest of the page.

Tuon lauseen perusteella sitä voisi käyttää esimerkiksi sivupalkkina, jos sen sisältö liittyy sivuun. Jos sivupalkissa on linkkejä arkistoihin tai tietoa vaikka artikkelin kirjoittajasta (usein sivuston ylläpitäjä), mielestäni se voisi olla <aside>, mutta HTML5 Doctor -sivustolla neuvotaan olemaan käyttämättä sivupalkkina. Aluksi pidin tätä ihan selvänä sivupalkkina, mutta <section> voisin olla parempi.

<header>. Tämä on selkeä. Esimerkiksi artikkelin otsikko ja päiväys voi olla tämän sisällä. <header>-elementtejä voi olla sivulla useita ja usean elementin sisällä.

<footer> on alatunnisteita varten. Copyright-merkinnät ja muut samanlaiset meta-tiedot kuuluvat sen sisään. <footer>-elementti ei saa sisältää <header>-elementtiä, eikä ilmeisesti myös mitään muitakaan otsikoita. <footer>-elementtejä voi myös olla useampia sivulla. Itse olen käyttänyt artikkelin aihesanojen listaukseen, päiväykseen ja kommenttilinkkiä varten ja myös koko sivun alatunnisteena.

<nav> on navigointia varten. Ensimmäisenä tietysti mielessä on sivuston navigointi, mutta myös sivutus ja sivupalkissa olevat linkit arkistoon kuuluvat tämän elementin sisään. <nav> on vain rakenteellinen elementti, joten joutuu käyttämään esimerkiksi <ul>-elementtiä navigoinnin rakentamiseen.

<dialog> on yksinkertaisesti dialogin esittämistä varten. Samantapainen kuin vanha kunnon <dl>.

<dialog>
    <dt>Officer Leroy<dt>
    <dd>Hey, I thought I told you...<dd>
    <dt>Me<dt>
    <dd>Yeah, whatever!<dd>
</dialog>

<figure> on uutta. Sitä voidaan käyttää otsikon liittämiseen kuvaan tai videoon. Oikein näppärä tämäkin.

Myös muitakin uusia elementtejä on paljon. Tässä joitain niistä.

<video> ja <audio> ovat multimediaa varten. <embed> on plugineja, esimerkkinä Flash, varten. Ikävää on se, että selainvalmistajat eivät ole päässeet yhteisymmärrykseen videostandardista. W3C ehdotti Ogg Theoraa, mutta Apple kieltäytyi siitä sen huonon laadun vuoksi. Laatu on kyllä ihan hyvää minun silmillä nettikäyttöön, mutta vaatii kaistaa paljon. Tällä hetkellä ainoa selain mikä sitä tukee on Firefox 3.5. Opera 9.5:ssä oli tuki, mutta myöhemmistä versioista se poistettiin. H.264 olisi hyvä, mutta sen kanssa on jotain lisenssiongelmia. Microsoft tuskin heti on tukemassa, koska se olisi pois Silverlightilta. Youtube saattaa vaikuttaa standardiin aika paljon myös, toistaiseksi hekin suosivat H.264:ää.

<canvas> on 2d-grafiikan esittämistä varten. Sitä käyttäen on tehty jo kovasti demoja. Ehkä yksi mielenkiintoisimmista uusista elementeistä. Yksi niistä asioista mitä pitää pistää opeteltavien asioiden listaan, vielä en ole saanut aikaiseksi mitään kovin kummoista.

<input> ei ole uusi, mutta uusia tyyppejä on tullut:

datetime toimii siten, että kun käyttäjä klikkaa sitä, se avaa kalenterinäkymän. Tai avaisi, jos selaimet tukisivat sitä. Muutkin ovat aika selkeitä, email on sähköpostia, url www-osoitetta ja search hakukenttää varten. Semantiikkaa näilläkin haettu ja jos vielä selaimet tarkistaisivat esimerkiksi email -kentässä sen formaatin niin olisi hienoa. Yksi hieno asia on myös uusi boolean attribuutti required. Selain ei saa lähettää lomaketta, jos jokin vaadittu kenttä on tyhjänä.

Poistettuja HTML 4 elementtejä ovat <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt> ja <u>. Selainten täytyy vielä tukea näitä, mutta saman tekee paremmin CSS:llä. Myös kehyksiin liittyvät elementit ovat vihdoinkin poissa, vain <iframe> jäi. Muita poistettuja ovat <acronym> (tilalla <abbr>), <applet>, <isindex> ja <dir>. Harvemminpas nuita on tarttenut. Attribuuttejakin on vähennelty reippaasti CSS:n tieltä kuten align ja background.

Kaiken kaikkiaan oikein hienoja uudistuksia on listalla. Nyt vielä täytyy odottaa, että selaimet seuraavat perässä. Jopa IE8 tukee osittain jo. HTML 5 ei vielä ole standardi, eli ei selainten tarvitsekaan sitä noudattaa täysin, mutta toivon, että tämä tapahtuisi lähitulevaisuudessa. IE7:n ja jopa IE6:n saa tottelemaan uusia elementtejä Remy Sharpin JavaScriptin pätkällä. Firefox 2 vaatii jonkin verran enemmän, en ole itsekään vielä sitä säätänyt. <video> ja muut hienot ja hotit elementit eivät kuitenkaan nuilla korjauksilla toimi.

DOM on saanut myös paljon uudistuksia. DOM storage on kiinnostava, tietoa voi tallentaa vähän niinkuin keksiin käyttäjän koneelle, jolloin voi nopeuttaa esimerkiksi tiedon hakua. Erona keksiin on se, että tämä tieto on vain asiakaspuolen koodin käytettävissä, palvelimet eivät voi sitä tietoa kaivaa esiin.

Lisää tietoa ja esimerkkejä löytyy seuraavilta sivuilta:

Jutusta voi päätellä, että uutta ulkoasua on tulossa uudella merkkauskielellä. Tämäkin ulkoasu on väännetty HTML 5 -muottiin, mutta pieniä semanttisia erheitä vielä on.

2 Replies to “HTML 5”

  1. Torsti

    Älyttömän hieno tämä uusi ulkoasu, hei!

Vastaa