Uusi HTML5 tuo mukanaan yksinkertaisemman merkkauksen ja mahdollistaa Canvasin avulla jopa Flashin korvaamisen.
Voinko käyttää jo HTML5 ja CSS3-ominaisuuksia?
Kyllä. Itse aloitin uusien ominaisuuksien käytön projekteissani viime vuoden alkupuolella ja nykyään monet selaimet osaa tulkita merkkauksen oikein. W3C -validaattori ei vielä täysin tue HTML5:sta, mutta sillä voi kuitenkin tarkistaa sivut virheiltä. Varsinkin CSS-validaattori herjaa virheellisesti ja sen herjaukset on helposti ohitettavissa laittamalla kaikki CSS3-määritykset erilliseen .css -tiedostoon. Itse en ole kyseistä ohitusta harrastanut, koska en näe siinä mitään väärää jos validaattori herjaa CSS3-ominaisuuksista.
Mitä uusi HTML5-tuo mukanaan?
Ensimmäisenä www-sivujen tekijä törmää uudistuneeseen dokumentin määrittelyyn, mikä hoidetaan vain kahdella sanalla aikaisemmin tehdyn parin rivin sijaan. Seuraavassa koodinpätkässä on normaali HTML4-sivuston rakenne ja sen jälkeen on uusi HTML5-määrittely.
Vanha HTML määrittely
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTML4 -sivu</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/scripti.js"></script>
</head>
<body>
</body>
</html>
Uusi HTML5-määrittely
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>HTML 5 - Testisivu</title> <link rel="stylesheet" href="style.css" /> <script src="js/scripti.js"></script> </head> <body> </body> </html>
Kuten esimerkeistä näkee, on uusi HTML5 paljon yksinkertaisempi ja nopeampi tapa tehdä sivuja. Tyylitiedostot eivät enää tarvitse tietoa “type=text/css” ja javascriptin voi liittää ilman “type=text/javascript” määrittelyä. HTML5 mahdollistaa myös sivuston alueiden nimeämisen, ilman <div id=”…”>. Yleensä on käytetty esimerkiksi seuraavia määrittelyjä:
<div id="header"></div> <div id="post"></div> <div id="footer"></div>
Uusi HTML5 mahdollistaa alueiden määrittelyn ilman divejä, tosin CSS-tiedostoon täytyy laittaa vielä ylimääräinen tyyli, sekä sivuilla pitää käyttää javascriptiä, jotta sivusto näkyy oikein kaikissa selaimissa. Uudet määritykset voi tehdä seuraavasti:
... <title>HTML5 - Testisivu</title> <!--[if IE]><!--Ladataan HTML5-skriptitiedosto korjaamaan Internet Explorer--> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header>Otsikkoteksti</header> <nav>Navigaatio</nav> <section>Sisältöä...</section> <article>Artikkeliosa</article> <footer>Alaosa, vaikka copyright</footer> ...
HTML-tiedostoon täytyy liittää html5.js javascriptitiedosto ja tyylitiedostoon täytyy laittaa seuraavat asetukset, jotta yllä mainitut määrittelyt näkyvät selaimissa oikein.
header, nav, section, article, footer {display:block;}
Näin on perustiedot käsitelty uudesta HTML5-merkkauksesta ja läpi käydyt esimerkit ovat hyödyllisiä. Kaikkia ei tarvitse käyttää, mutta suosittelen ainakin käyttämään uutta HTML5-sivuston määrittelyä. Lisää oppaita löytää verkosta helposti esimerkiksi googlettamalla “HTML5″. hyvä HTML5-pohja löytyy sivulta http://html5boilerplate.com/. Suosittelen myös kirjaa HTML5 For Webdesigners (eng).
Sivulta http://www.cuttherope.ie/ löytyvä peli on tehty HTML5:lla käyttäen Canvasia.
