HTML5

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

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

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

section

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ä

ruby, rt, rp ja bdi

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

datalista ja list

-elementillä

tel
```
<input type="tel" name="" />
```
search
```
<input type="search" name="search" />
```
url
```
<input type="url" name="url" />
```
email
```
<input type="email" name="email" />
```

datetime

<input type="datetime" name="datetime"  />

date

<input type="date" name="date" min="2014-01-01" max="2014-12-31" />

month
```
<input type="month" name="month" />
```
week
```
<input type="week" name="week" />
```
time
```
<input type="time" name="time" />
```

datetime-local

<input type="datetime-local" name="datetime-local" />

number

<input type="number" name="number" min="0" max="10" step="2" value="4" />

range

<input type="range" name="range" min="1" max="100" value="10" />

color
```
<input type="color" name="color" />
```

Lisätietoa ja esimerkkejä uusista input-elementin tyypeistä:

HTML5 forms input types

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

HTML5

section

article

main

nav

aside

hgroup

header

footer

dialog

figure

audio

video

track

embed

mark

progress

meter

data

dialog

ruby, rt, rp ja bdi

wbr

menuitem

details

datalista ja list

keygen

output

canvas

Uusia attribuutteja

input