Briefly In English

15.11.2009 HTML5

HTML5 on HTML/XHTML:n seuraava versio, joka sisältää joukon sivujen kehitystä helpottavia ominaisuuksia sekä uusia semanttisempia merkintätapoja dokumentin rakenteelle. HTML5 tekee merkkauksesta yksinkertaisempaa. Joitakin vanhoja HTML4:n ulkoasuun viittaavia ominaisuuksia on pudotettu pois.

Doctype

HTML5:n doctype on kaikessa yksinkertaisuudessaan seuraavanlainen:

<!DOCTYPE html>

Rakenteelliset uudistukset

HTML5 vie semantiikan hieman pidemmälle. Jokainen dokumentin osa on saanut oman elementtinsä, joiden on tarkoitus korvata <div id=”header”></div> tyyppinen merkkaus.

  • header
    Dokumentin header-osion sisältö.
  • nav
    Sivuston navigaatiot sijoitetaan nav-elementin sisään.
  • section
    Yleiskäyttöinen elementti. Käyttötarkoitus on vastaava kuin <div> elementillä.
  • article
    Article-elementti sisältää yleensä sivun pääsisällön, esimerkiksi blogikirjoituksen.
  • aside
    Tämä on sivuston sisältöön liittyvä elementti, joka voi sisältää esimerkiksi tagipilven tai aiheeseen liittyviä artikkeleita.
  • footer

Header- ja footer-elementtejä voi käyttää myös section- tai article-elementin sisällä.

Uusia ominaisuuksia

HTML5 sisältää muitakin mielenkiintoisia uusia ominaisuuksia, joiden avulla erilaisten toimintojen tekeminen yksinkertaistuu. Esimerkiksi video- ja audio-tiedostojen upottamiseen ei tarvita enää Flashia tai muita kolmannen osapuolen liitännäisiä.

  • Canvas
    Elementti, jonka avulla voi piirtää erilaisia kuvioita.
  • Datan varastointi (Web Storage)
    HTML5 sallii tiedon tallentamisen lokaalisti samaan tapaan kuin evästeillä. Erona on se, että nyt tietoa voi tallentaa huomattavasti enemmän ja käyttömahdollisuudet ovat monipuolisemmat.
  • Video & Audio
    Video- ja audioelementtien liittäminen sivustolle yksinkertaistuu: <video width=”500″ height=”450″ src=”video.mp4″></video>
  • Maantieteellinen sijainti (Geolocation API)
    Käyttäjän maantieteellisen sijainnin selvittäminen helpottuu.
  • Raahaa & pudota -toiminto
    Natiivi tuki raahaa & pudota -toiminnolle. QuirksMode-blogin kirjoituksessa ominaisuus ei tosin kerää kovinkaan paljon kehuja: “HTML5 drag and drop module is not just a disaster, it’s a fucking disaster”.
  • Muokattavat sisällöt
    Attribuutti contenteditable=”true” muuntaa minkä tahansa elementin sisällön muokattavaksi.
  • Viestien lähettäminen eri domainien välillä
    PostMessage API mahdollistaa viestien lähettämisen ikkunasta toiseen, välittämättä siitä missä domainissa vastaanottaja sijaitsee.

Lomakkeet

Lomakkeisiin on tulossa helpotusta kenttien validointiin. Kentät voi määritellä pakollisiksi sekä tietyn tyyppisiksi (email, URL, puhelin, päivämäärä jne.), jolloin selain tarkistaa automaattisesti, että sisältö on oikeassa muodossa. Tämä ei tietenkään poista datan validoinnin tarvetta palvelimen puolella, mutta helpottaa tarkistusten tekemistä selaimessa.

Koska sitä voi käyttää?

Teoriassa HTML5:n voi ottaa käyttöön vaikka heti, ainakin perusominaisuuksien osalta. Yllätys yllätys, IE-selaimet tuottavat kuitenkin taas vaikeuksia. Pienellä Javascript-koodinpätkällä saadaan kuitenkin IE:kin tottelemaan uutta merkkausta. Javascriptin pakollisuuden takia kannattaa kuitenkin vielä hetki odottaa ennen kuin HTML5:n todella ottaa käyttöön.

<script>
    document.createElement('header');
    document.createElement('footer');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('nav');
    document.createElement('article');
</script>

Huomaa, että Javascript ei tarvitse enää type=”text/javascript” määritystä, vaan kaikkien script-elementtien oletetaan olevan tyyppiä “text/javascript” oletuksena. HTML5 hyväksyy itsensä sulkevat tagit, joten XHTML-merkkauksen muuttaminen HTML5:ksi käy helpommin.

Katso HTML5-testisivu (testattu toimivaksi IE6-8, Firefox 3.5, Opera 9.64, Google Chrome 3, Safari for Windows 3.1.2 selaimilla).

W3 validaattorikin ymmärtää nykyään HTML5-merkkausta, joten validointikaan ei tuota ongelmia.

Resursseja ja lisätietoa

Aihe: HTML & CSS | Trackback | Kommentit RSS | Jätä kommentti »
Tagit: , ,

Kommentoi kirjoitusta

Täytäthän kaikki pakolliset kentät jättääksesi kommentin