HTML5-esittely

Jokaisen luvun HTML5-esimerkki

Esimerkki

<!DOCTYPE html>
<html>
<body>
<video width="420" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
 Selaimesi ei tue video-elementtiä.
</video>
</body>
</html>

Kokeile itse

Klikkaa "Kokeile itse" nähdäksesi, miten tämä esimerkki toimii.

Mitä on HTML5?

HTML5 on uusin HTML-standardi.

HTML5 on suunniteltu kantamaan rikasta web-sisältöä ilman lisälaajennuksia.

HTML5 sisältää uusia semanttisia, graafisia ja multimediasisältöjä.

HTML5 tarjoaa uusia elementtejä ja uusia API-kohteita, jotka yksinkertaistavat web-sovellusten rakentamista.

HTML5 on yliverkkoinen ja on suunniteltu toimimaan erilaisten laitteiden (PC, tabletti, puhelin, televisio jne.) päällä.

Huomautus:Seuraavissa luvuissa opit, miten "auttaa" vanhoja selaimia käsittelemään HTML5.

Mitä uutta HTML5:ssä on?

HTML5:n uusi dokumenttipyyntö (DOCTYPE) ilmoitus on myös erittäin yksinkertainen:

<!DOCTYPE html>
Uusi merkistökoodeauksen (charset) ilmoitus on myös erittäin yksinkertainen:
<meta charset="UTF-8">

HTML5-esimerkki:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dokumentin otsikko</title>
</head>
<body>
Dokumentin sisältö......
</body>
</html>

Huomautus:HTML5:ssä oletusarvoinen merkistökoodaus on UTF-8.

HTML5 - uusi ominaisuuslauseen syntaxi

HTML5-standarden sallii neljä erilaista ominaisuuslauseen syntaxia.

Tämä esimerkki näyttää eri syntaxin, joka käytetään <input>-elementissä:

Tyyppi Esimerkki
Tyhjä <input type="text" value="Bill Gates" disabled>
Ei lainausta <input type="text" value=Bill Gates>
Kaksinkertainen lainaus <input type="text" value="Bill Gates">
Yksinkertainen lainaus <input type="text" value='Bill Gates'>

HTML5-standardissa voidaan käyttää kahta grammaticalista muotoa riippuen ominaisuuden vaatimuksista.

HTML5 - Uudet ominaisuudet

HTML5:n kaikkein mielenkiintoisimmat uudet ominaisuudet:

  • Uusia semanttisia elementtejä, kuten <header>, <footer>, <article> ja <section>.
  • Uusia lomakkeiden elementtejä, kuten numeroita, päivämääriä, aikoja, kalentereita ja liukusäädimiä.
  • Voimakas kuvatuki (canvas- ja svg-elementtien avulla)
  • Voimakas multimediasuuntaus (video- ja audio-elementtien avulla)
  • Voimakkaat uudet API:t, kuten paikallisen tallennuksen käyttö cookie:n sijaan.

HTML5 - Poistetut elementit

Seuraavat HTML 4.01-elementit on poistettu HTML5:stä:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>