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 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:

Erilliset vaatimukset selaimille ja web-tuottajille. Selaimen pitää tukea vanhojakin elementtejä joita taas sisällöntuottajat eivät enää saa käyttää.

HTML5:lla on kaksi eri syntaksia:

HTML-pohjainen syntaksi, joka on yhteensopiva HTML4:n kanssa. Käytetään mediatyypillä text/html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

XML-pohjainen syntaksi, joka on yhteensopiva XHTML:n kanssa. Käytetään mediatyypillä application/xhtml+xml tai application/xml. Elementtien pitää olla http://www.w3.org/1999/xhtml-nimiavaruudessa.
```
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>
```

Dokumentin merkistö esitetään XML-syntaksissa kuten kaikissa muissakin XML-dokumenteissa. HTML-syntaksissa on kolme vaihtoehtoa:
- HTTP-protokollan Content-type-otsake
- Unicoden Byte Order Mark (BOM) merkki tiedoston alussa
- <meta charset="UTF-8">
Dokumenttityyppi ilmaistaan merkinnällä <!DOCTYPE html>
Dokumenttiin voi upottaa MathML- tai SVG-elementtejä math- ja svg-elementtien sisään.
Olennaisesti muuttuneita elementtejä:
- address-elementti liittyy lähimpään article- tai body-elementtiin.
- b-elementillä merkitään sanoja joihin halutaan kiinnittää huomiota mutta eivät muuten ole normaalia tärkeämpiä esim. tuotteen nimi
- hr thematic break
- i tarkoittaa vaihtuvaa sävyä esim. tekninen termi, ajatus, fraasi toisella kielellä jne.
- s tarkoittaa sisältöä joka ei ole enää relevanttia
- small tarkoittaa sivukommenttia ns. pientä pränttiä
- strong tarkoittaa tärkeää
- u tarkoittaa esim. väärin kirjoitettua tekstiä

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ä

ruby, rt, rp ja bdi

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

datalista ja list

-elementillä

tel
search
url
email
datetime
date
month
week
time
datetime-local
number
range
color

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

HTML5

HTML5 ja HTML4(xhtml) erot

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