HTML5

HTML5 on uusin versio HTML-merkintäkielestä ja tulee aikanaan korvaamaan XHTML 1.0/1.1:en.

HTML5 sisältää uusia elementtejä.

Voit testata HTML5-elementtejä ja oman selaimesi tukea niille seuraavilla sivuilla:

Tarkempi selitys eri elementeistä ja niiden käytöstä kannattaa tarkistaa virallisesta suosituksesta tai html5 Doctorin sivulta.

Hyvää opiskelumateriaalia aiheesta on HTML/Training

Lisää HTML5-dokumentteihisi informaatiota schema.orgin avulla. Kts. Microdata

Esimerkki HTML5-uutuuksista

HTML5 ja HTML4(xhtml) erot

Olennaisimmat erot HTML5:en ja vanhempien HTML-versioiden (HTML4, XHTML 1.1) välillä ovat seuraavat:

section

HTML Structural elements

Secions and Outlines of an HTML5 Document

section-elementillä dokumentin voi jakaa osiin samaan tapaan kuin osajakoa tehdään tekstinkäsittelydokumenteissa. Osat muodostavat hierarkisen rakenteen. Jokaisessa osassa voi olla h1-elementti tai jokin matalamman tason otsikko riippuen siitä minkätasoisesta osasta on kyse. Osissa pitäisi käyttää aina oikean tason otsikkoelementtiä.

			<body>
			<h1>Hieno sivu</h1>
			<p>lorem impsum</p>
			<section>
			<h2>Alaotsikko</h2>
			<p>lorem impsum</p>
			<p>lorem impsum</p>
			<section>
			<h3>Alempi otsikko</h3>
			<p>lorem impsum</p>
			<p>lorem impsum</p>
			</section>
			</section>
			<section>
			<h2>Alaotsikko</h2>
			<p>lorem impsum</p>
			<p>lorem impsum</p>
			</section>
			</body>
		

h1-elementtiä voi käyttää kaikilla tasoilla mutta vanhemmat selaimet esittävät silloin kaikki otsikot samantasoisina. Tämän voi kuitenkin korjata sopivalla CSS:llä.

			<style>
			section h1 { font-size: 90%; }
			section section h1 { font-size: 80%; }
			</style>
			<body>
			<h1>Hieno sivu</h1>
			<p>lorem impsum</p>
			<section>
			<h1>Alaotsikko</h1>
			<p>lorem impsum</p>
			<p>lorem impsum</p>
			<section>
			<h1>Alempi otsikko</h1>
			<p>lorem impsum</p>
			<p>lorem impsum</p>
			</section>
			</section>
			<section>
			<h1>Alaotsikko</h1>
			<p>lorem impsum</p>
			<p>lorem impsum</p>
			</section>
			</body>
		

article

article-elementti tarkoittaa itsenäistä osaa dokumentissa eli uutisartikkelia, blogipostausta, keskusteluryhmäviestiä jne.

main

main-elementillä merkitään sivun pääsisältö. Dokumentissa voi olla vain yksi main-elementti.

nav

nav-elementillä merkitään sivun osa, joka sisältää linkkejä muille sivuille tai sivun sisällä.

aside

aside-elementillä merkitään article-elementillä sisällä oleva sivun osa, joka sisältää jotain hieman aihetta sivuaa sisältöä. article-elementin ulkopuolella käytettynä aside-elementillä voidaan merkata esim. sivun sivupalkki tai mainos.

hgroup

hgroup-elementillä ryhmitellään osan alla olevia otsikoita jos niitä on useampaa tasoa.

header

header-elementillä merkitään sivun sisällysluettelo, esittely tms.

footer

footer-elementillä merkitään osan kirjoittaja, copyright-tiedot jne.

dialog

-elementillä

figure

figure-elementillä merkitään diagrammeja, kuvia, koodilistauksia ym. asioita jotka voat itsenäisiä kokonaisuuksia ja joilla yleensä on oma otsikko.

audio

audio-elementillä lisätään dokumenttiin ääni

video

video-elementillä lisätään dokumenttiin videota

track

track-elementti sisältää videoon liittyviä tekstejä

embed

embed-elementillä lisätään sivulle liitännäisillä (plugins) toimivaa sisältöä

mark

mark-elementillä merkitään teksti, joka halutaan korostaa. Esim. hakua vastaavat sanat voitaisiin merkitä mark-elementillä.

progress

progress-elementillä

meter

meter-elementillä

data

data-elementillä

dialog

dialog-elementillä

ruby, rt, rp ja bdi

Näitä elementtejä käytetään esim. japaninkielessä tai kielissä jotka kirjoitetaan oikealta vasemmalle.

wbr

wbr-elementillä

menuitem

menuitem-elementillä

details

details-elementillä

datalista ja list

-elementillä

keygen

keygen

output

output

canvas

Uusia attribuutteja

input

input-elementin type-attribuutilla on paljon uusia tyyppejä:

Malli input-elementin uusista tyypeistä

Uusi attribuutteja
Elementti Uudet attribuutit
a download
area
  • hreflang
  • type
  • rel
  • download
base target
meta charset
table sortable
th sorted
input
  • autofocus
  • placeholder
  • form
  • required
  • autocomplete
  • min
  • max
  • multiple
  • pattern
  • step
  • list
  • width
  • height
  • dirname
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • inputmode
select
  • autofocus
  • form
  • required
textarea
  • autofocus
  • placeholder
  • form
  • required
  • dirname
  • maxlength
  • wrap
  • inputmode
button
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • menu
label
  • form
object
  • form
fieldset
  • form
  • disabled
  • name
form
  • novalidate
menu
  • type
  • label
style
  • scoped
script
  • async
  • crossorigin
  • onerror
html
  • manifest
link
  • sizes
  • crossorigin
ol
  • reversed
iframe
  • sandbokx
  • seamless
  • srcdoc
object
  • typemustmatch
img
  • crossorigin
  • srcset
Kaikki elementit
  • contenteditable
  • contextmenu
  • data-*
  • draggable
  • dropzone
  • hidden
  • inert
  • role
  • aria-*
  • spellcheck
  • translate

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/web-sovellukset/luennot/html5/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2016-01-13 18:27:58
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta