HTML5:n uudet elementit

HTML5:n uudet elementit

Alla lueteltu HTML5:n uudet elementit ja niiden kuvaukset.

uudet semantiikka-/rakenteelliset elementit

HTML5 tarjoaa uusia elementtejä, joita voidaan käyttää paremman asiakirjastruktuurin rakentamiseen:

Tunniste Kuvaus
<article> määritä asiakirjan sisällä oleva artikkeli.
<aside> määritä sivun sisällön ulkopuolinen sisältö.
<bdi> määritä erilaisen tekstin suunta.
<details> määritä käyttäjän näkyvät tai piilotetut lisätiedot.
<dialog> määritä dialogi tai ikkuna.
<figcaption> määritä <figure>-elementin otsikko.
<figure> määritä sisältö, joka on itsenäistä, kuten kuvaukset, kaaviot, valokuvat, koodilistaat ja niin edelleen.
<footer> määritä asiakirjan tai osan alatunniste.
<header> määritä asiakirjan tai osan otsikkopalkki.
<main> määritä asiakirjan pääsisältö.
<mark> määritä tärkeää tai korostettavaa sisältöä.
<menuitem> määritä komentoja tai valikoita, joita käyttäjä voi kutsua ponnahdusvalikosta.
<meter> määritä tunnettu mitta-asteikko (mittakaava) sisältäen skaalatut mittaukset.
<nav> määritä asiakirjan sisällä oleva navigointilinkki.
<progress> määritä tehtävän edistymisaste.
<rp> määritä mitä näytetään selaimessa, joka ei tue ruby kommentteja.
<rt> määritä merkkiä koskeva selitys/ääntämys (käytetään Itä-Aasian kirjasinjärjestelmässä).
<ruby> määritä ruby kommentti (käytetään Itä-Aasian kirjasinjärjestelmässä).
<section> määritä asiakirjan osa.
<summary> määritä <details>-elementin näkyvä otsikko.
<time> määritä päivämäärä/aika.
<wbr> määritä mahdolliset rivinvaihdot (line-break).

Lue lisää HTML5 semantiikkasisältö.

uudet lomakeelementit

Tunniste Kuvaus
<datalist> määritä syöttöelementin ennakkovalinnat.
<keygen> määritä avainparin generointikenttä (käytetään lomakkeissa).
<output> määritä laskentatulos.

Lue lisää HTML-lomakkeen elementituudet, vanhat ja vanhentuneet elementit.

uusi syöttötyyppi

uusi syöttötyyppi uusi syöttöominaisuus
  • väri
  • päivämäärä
  • datetime
  • datetime-local
  • sähköposti
  • kuukausi
  • luku
  • alue
  • haku
  • puhelinnumero
  • aika
  • url
  • viikko
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • korkeus ja leveys
  • list
  • min ja max
  • monikertainen
  • malli (regexp)
  • placeholder
  • pakollinen
  • askel

Opitaan HTML Syöte-tyypitkaikissa uusissa ja vanhoissa syöteyypeissä.

Opitaan HTML Input-ominaisuudetkaikissa syöteattribuuteissa.

HTML5 - Uudet attribuuttisyntaksit

HTML5 sallii neljä erilaista attribuuttisyntaksia.

Tämä esimerkki näyttää eri syntaxien käyttöä <input>-tunnisteessa:

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

HTML5:ssä voidaan käyttää kahta näistä neljästä syntaxista tarpeen mukaan.

HTML5 Kuva

Tunniste Kuvaus
<canvas> Määritellään SVG:n käyttöön liittyvä kuvan piirtäminen JavaScriptillä.
<svg> Määritellään SVG:n käyttöön liittyvä kuvan piirtäminen.

Lue lisää HTML5 Canvas sisältö.

Lue lisää HTML5 SVG sisältö.

Uudet media-elementit

Tunniste Kuvaus
<audio> Määritellään ääni- tai musiikkimateriaalin sisältö.
<embed> Määritellään ulkoisten sovellusten konteinerit (esim. lisäosat).
<source> Määritellään <video> ja <audio> -lähteet.
<track> Määritellään <video> ja <audio> -kanavat.
<video> Määritellään video- tai elokuvamateriaalin sisältö.

Lue lisää HTML5 Videosisältö.

Lue lisää HTML5 Äänisisältö.