JWT 2015 - Johdatus www-tekniikoihin
© Aulikki Hyrskykari, Antti Sand, 2015 - Kopiointi ilman lupaa kielletty.

3. HTML5

Ensimmäisessä luvussa selviteltiin eri www-sivun merkkauskielisukupolvien kehitystä. Seuraavassa käsitellään uusinta, lähes standardoitua, HTML-versiota HTML5. Kieli käydään läpi tarkalla tasolla ja samalla esitetään esimerkkejä HTML5-kielen käytöstä www-sivun kuvaamisessa.

3.1 Dokumentin rakenne

Dokumentin rakenne Minimaalisen HTML5 -dokumentin rakenne on seuraavanlainen

jossa <html>-elementti koostuu edelleen

Aiemmissa HTML-kielen versioissa dokumenttityypin määrittelyt olivat monimutkaisempia; niissä vaadittiin public identifier ja mahdollisesti myös system-identifier -osat joiden avulla viitattiin kielen DTD (Document Type Definition) esittelyihin. Esimerkiksi version HTML 4.01 strict (HTML 4.01:n xml-versio) vaatimat dokumenttityypin määrittely oli:
html4.01 dokumenttityyppimäärittely

Nykyisin HTML5 -dokumentin dokumenttityypin määrittely on yksinkertaisesti <!DOCTYPE html5> Määrittely aktivoi selaimen tulkitsemaan dokumentin standardimoodissa (activating browser modes) ja saa vanhemmat selaimetkin, jotka eivät tunne HTML5 -versiota, tulkitsemaan dokumentin HTML 4-dokumenttina (eräs HTML5:n suunnittelun peruslähtökohdista oli taaksepäin yhteensopivuus).

Dokumenttityypin määrittelyn jälkeen dokumentti sisältää yhden HTML-elementin, joka alkaa tunnuksella ("tägillä", tag) <html> ja loppuu tunnukseen </html>. Alkutunnukseen on mahdollista liittää lisämääreitä (näistä tarkemmin myöhemmin), tässä esimerkiksi lang, joka kertoo millä kielellä dokumentti on kirjoitettu. Esimerkissä dokumentin kieleksi on määritelty suomi (fi), muut käytettävissä olevat standardoidut kielitunnukset voi käydä katsomassa IANA:n language-subtag dokumentissa (tai hiukan selkeämmässä muodossa w3school-sivuilta).

HTML5 -dokumentti koostuu siis elementtien hierarkiasta, joista juuri-elementti <html> sisältää kaikki muut dokumentin elementit. Katsotaan aluksi, millaista syntaksia HTML5-elementit noudattavat.

Takaisin ylös

3.2 HTML-elementin syntaksi

HTML-elementin kuva

Alkutunnuksen sisällä elementille voidaan määritellä yksi tai useampia attribuutti="arvo" -paria, esimerkiksi:

<p lang="en">
   A paragraph in English.
</p>

tai

<a href="http://palvelin/tiedostopolku/tiedosto" 
   target="_blank">Tämä on linkki</a>

3.2.1 Alku- ja lopputunnukset (tags)

Alku- ja lopputunnukset, "tägit", koteloivat HTML-elementin. Alkutunnuksen aloittavan kulmasulun "<" ja tag-nimen välissä ei saa olla väliöntejä, siis esim. < p> määrittelyä ei tunnistettaisi kappaleen aluksi. Vastaavasti lopputunnuksessa kulmasulun, kauttaviivan ja tägi-nimen välissä ei saa olla välilyöntejä. Kaikilla elementeillä on alkutunnus ja ei-tyhjillä (non-void) elementeillä tulee aina olla lopputunnus.

3.2.2 Elementin sisältö

Elementti voi sisältää tekstiä, elementtejä tai kommentteja: ne muodostavat elementin sisällön (content). Attribuutit ja niiden arvot eivät ole elementin sisältöä.

Teksti ja merkkitieto

Välilyönti- ja sarkainmerkkejä, sekä rivin- sivun- ja osanvaihtomerkkejä kutsutaan yhteisesti tyhjätilamerkeiksi ns. white space -merkeiksi. Kun sivua tuotetaan, peräkkäiset white space -merkit luhistetaan yhdeksi välilyönniksi ja rivin loppuun osuva white space tuottaa rivinvaihdon. HTML-dokumenttiin kirjoitetussa tekstissä ei saa olla white spaces -merkkejä lukuunottamatta muita kontrollimerkkejä.

pienempi-kuin merkki HTML-entiteettinä Jos jokin tarvittava erikoismerkki ei löydy käytetetystä merkistökoodauksesta, merkin voi aina tuottaa käyttäen ns. HTML-entiteettejä (entity) (ks. W3C: Named character referencestai Tutorialspoint: HTML5 - Entities Reference). HTML entiteetti alkaa '&'-merkillä ja päättyy ';'-merkkiin. Niiden väeliin kirjoitetaan joko erikoismerkille annetu nimi tai sen numerokoodi heksadesimaalilukuna. Kun lukua edeltää #-merkki, luku tulkitaan heksadesimaaliluvuksi. Jos esimerkiksi halutaan sivulla näkyväksi "pienempi kuin"-merkki, sen joutuu tuottamaan joko entiteettinä &lt;- tai &#60;. Jos tekstiin kirjoittaisi merkin < sellaisenaan, se ei tulisi näkyviin, koska se tulkittaisiin HTML-elementin alkumerkiksi. Samaten esimerkiksi ä- ja ö-kirjaimet saa tuotettua käytetystä merkistökoodauksesta riippumatta aina käyttäen HTML-entiteettiä &auml; ja &ouml; (tai &#228; ja &#246;). Jos halutaan kirjoittaa välilyöntimerkki, jota ei saa korvata rivinvaihtomerkillä käytetään entiteettiä &nbsp; (non-breaking space).

Elementtien luokittelu

HTML4-versioissa elementit luokiteltiin lohkotason ja rivitason elementteihin (block- ja inline-elementit). Lohkotason elementille on luonteenomaista, että se näytetään "omalla rivillään", ts. se alkaa sivun vasemmasta reunasta ja sen jälkeen seuraava elementti myös alkaa sivun vasemmasta reunasta. Kappale on tyypillinen lohkotason elementti, se erotetaan ympäristöstään rivinvaihdoin. Rivitason elementti taas on elementti, joka voi sisältyä kappaleeseen, kuten esim. <strong>-elementti, jonka avulla merkitään jokin tekstin osa kappaleen sisällä tärkeäksi.

HTML5:ssä elementeille voi edelleen antaa ns. display-piirteet inline / block (tästä tarkemmin CSS:n yhteydessä), mutta elementtejä ei enää jaeta lohkotason ja rivitason elementteihin. HTML5 luokittelee elementit phrasing- ja flow-elementeiksi.

Kuva: Phrasing-elementit ovat myös flow-elementtejä

Phrasing elementit Dokumentin tekstisisällössä määritelly "kappleensisäiset" muotoiluelementit luokitellaan phrasing-sisällöksi. Phrasing-elementit vastaavat siis vanhoja rivitason elementtejä.

Phrasing elementtjä ovat
<a>, <abbr>, <area>, <audio>, <b>, <bdi>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <date>, <datalist>, <del>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <link>, <map>, <mark>, <math>, <meta>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <u>, <var>, <video> ja <wbr>

Flow elementit Lähes kaikki muut elementit, mukaanlukien phrasing-elementit ovat flow-sisältöä.

Flow elementtejä ovat
kaikki phrasing-elementit, ja niiden lisäksi myös: <address>, <article>, <aside>, <blockquote>, <details>, <dialog>, <div>, <dl>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <input>, <ins>, <kbd>, <keygen>, <label>, <link>, <map>, <mark>, <math>, <menu>, <meta>, <meter>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <style>, <table>, ja <ul>

Elementtiluokittelua käytetään kuvaamaan millaista sisältöä eri elementit voivat saada (sisältömalli). Yllä esitellyt phrasing- ja flow-elementtiluokat riittävät suurimpaan osaan tilanteista, mutta itseasiassa elelmenttien luokittelu on hieman hienojakoisempi, sisältäen myös elementtiluokat heading, sectioning, embedded, interactive ja metadata (ks. tarvittaessa myös sanallinen selitys W3C HTML5-standandista).

Sisältömalli

Kullekin elementille määritelty sisältömalli (content-model) kuvaa millaista sisältöä elementti voi saada. Useimmat ei-tyhjät HTML-elementit, jotka eivät vaadi sisällökseen jotain määrättyä lapsi-elementtiä, voivat saada joko vain phrasing-sisältöä tai sitten väljemmin flow-sisältöä. Joidenkin elementtin sisältömallissa saatetaan käyttää myös edellä mainittuja ykstityikohtaisempia elementtiluokkia.

Esimerkiksi kappale-elementti <p> voi saada sisällökseen vain phrasing-sisältöä. Siten saattaa aluksi tuntua yllättävältä, että www-sivun rakenne ei salli listojen esittelyä (listat ovat flow-elementtejä) kappaleiden sisällä; listat tulee kirjoittaa kappaleiden väliin. Yleisemmin voi panna merkille, että elementit, jotka voivat saada flow-sisältöä, eivät ole sallittua phrasing-sisältöä.

Dokumentin runko-elementti <body> on esimerkki elementistä, joka voi saada sisällökseen flow-sisältöä. Flow-sisältö on sallivampaa kuin phrasing-sisältö. Esimerkiksi osa-, otsikko-, ja alatunniste-elementit (<section>, <h1>.. <h6>, <footer>), teksti-sisältö ja myös ne elementit joita voidaan käyttää phrasing-sisältönä, ovat sallittua flow sisältöä.

Ensi-silmäyksellä samalta näyttävillä elementeillä saattaa olla erilaiset sisältömallit. Esimerkiksi <dl>-elementillä on kaksi lasta, <dt> ja <dd>. Jälkimmäisen sisältö voi olla mitä tahansa flow-sisältöä, mutta ensimmäisen sisältö voi olla vain phrasing-sisältöä. Näin ollen <dl>-listan ensimmäinen elementti on sisällöstään toista lapsielementtiään huomattavasti nirsompi.

3.2.3 Elementin attribuutit

Attribuutit ovat nimi="arvo" -pareja.

Yhtäsuuruusmerkin molemmin puolin saa olla välilyönti, tai se voi puuttua. Boolean-tyyppiselle attribuutille ei HTML5-syntaksin mukaan tarvitse antaa arvoa. Pelkkä attribuutin esittäminen vastaa silloin attribuutin "true"-arvoa, esimerkiksi videon määrittelyn <video loop=""> tai <video loop="loop"> voi esittää pelkistetymmin <video loop> (ks. tyhjät attribuutit).

Attribuuttien avulla tarkennetaan elementtien merkitystä ja tulkintaa omassa kontekstissaan. HML5:ssä on joukko attribuutteja, jotka voidaan osoittaa attribuutiksi mille tahansa elementille. Näitä kutsutaan globaaleiksi attribuuteiksi.

Takaisin ylös

3.3 Globaalit attribuutit

accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang spellcheck, style, tabindex, title, translate.

Yllä luetellut attribuutit ovat HTML5-merkkauskielessä ns. globaaleja attribuutteja. Kielen kaikki elementit voivat saada mitä tahansa näistä attibuuteista. Näiden attribuuttien lisäksi elementti voi saada attribuutteja, jotka määritelty kullekin yksittäiselle elementille erikseen.

Joidenkin globaalien attribuuttien merkitys (esimerkiksi title-attribuutti) saattaa riippua siitä, minkä elementin attribuutiksi se on määritelty.

Takaisin ylös

3.4 Dokumentin otsikko

HTML-dokumentissa voi olla vain yksi otsikko-osa. Otsikko-osassa, ts. dokumentin <head> elementissä määritellään yleisiä dokumentiin liittyviä tietoja. Se voi sisältää seuraavia elementtejä: <base> <link> <meta> <script> <style> <title>

Näiden elementtien avulla voidaan määritellä dokumentin oletuspolku (oletuksena dokumentissa käytetyille ankkurilinkeille, base), linkata dokumentin tarvitsemat resurssit (esimerkiksi tyylitiedostot, link), kuvata dokumenttia (meta), liittää dokumentissa käytetyt skriptit (scipt) esitellä tyylisääntöjä (style) ja määritellä dokumentille selaimen vlilehdessä näkyvä otsikko (title).

Takaisin ylös

3.5 Dokumentin runko

Dokumentin sisältö kirjoitetaan <body>-elementin sisään, dokumentin runko-osaan.

Dokumenttia luotaessa tulisi aina varautua siihen, että dokumenttia saatetaan sen elinaikana katsella hyvin erilaisilla laitteilla ja erilaisissa olosuhteissa. Paitsi, että laitteen näytön koko voi vaihdella pienestä taskulaitteesta todella isoon paneelinäyttöön, dokumenttia "renderöivän" (kuvantavan, tuottavan) selaimen haasteet saattavat olla paljon monimuotoisemmat. Renderöinti voi esimerkiksi olla visuaalisen tuotoksen sijasta vaikkapa auditiivista (ruudunlukija) tai kosketukseen perustuvaa (braille-näytöt). Sivut saattavat elää todella pitkään, emmekä koskaan tiedä millaisia laitteita tulevaisuus tuo tullessaan. Sivun semanttisen sisällön tunnistaminen auttaa tekemään kuhunkin ympäristöön huomattavasti osuvamman ja selkeämmän tukinnan.

HTML5:n korostama periaate on, että elementit dokumentin rungossa välittävät dokumentin osien semanttisen roolin (merkityksen). HTML-koodissa ei oteta kantaa siihen miten sisältö renderöidään selaimen ikkunassa, tai jonkun muun laitteen näytöllä. Selaimen on tärkeätä tietää mikä renderöitävän tekstin merkitys dokumentissa on, ruudunlukija saattaa esimerkiksi lukea otsikot hitaammin tai erisävyisellä äänellä kuin muu teksti. Edellisen lisäksi, selaimet voivat käyttää semanttista merkkausta apunaan luodessaan selaustoimintoja, ruudunlukijan voi pyytää lukemaan vain otsikot, hyppäämään yhteystietoihin, menemään suoraan alatunnisteeseen, jne.

Vielä näidenkin lisäksi, erilaiset verkossa toimivat ohjelmistot saattavat käyttää semanttista merkkausta hyväkseen. Hakukoneet, esimerkiksi, voivat tarjota merkkausta hyväkseen käyttäen sivustosta selkeän, sivuston rakennetta kuvaavan pikalinkkikokoelman. W3C määrittelee selainten ja muiden www-sivuja ohjelmallisesti käsittelevien ohjelmistojen tekijöille tarkasti miten tällainen yhteenveto (outline) luodaan (http://www.w3.org/TR/html5/sections.html#outline)

Käsitellään seuraavassa ensin elementit, joiden avulla kuvataan (1) dokumentin yleistä rakennetta, ja sen jälkeen käydään läpi elementit, joiden avulla kuvataan dokumentin (2) sisällön ryhmittelyä lohkotasolla ja (3) tekstin sisällä tapahtuvaa tekstinosien semanttista merkkausta.

3.5.1 Rakenteen määrittelyä

<address> <h1>..<h6> <hgroup> <header> <section> <article> <aside> <footer> <nav>

esimerkki dokumentin rakenteesta HTML5-versioon tullut useita uusia elementtejä, joiden avulla dokumentin rakennetta voidaan selkeyttää. Yllä esitellyistä yhdeksästä elementistä peräti seitsemän on HTML5:een esiteltyjä uusia, vain kaksi ensimmäistä ovat vanhoja (<h1>..<h6> otsikkoelementit on laskettu yhdeksi elementiksi). Alla katsotaan kahta näistä uusista elementeistä (<section> ja <hgroup>) hiukan tarkemmin.

Eritasoiset otsikot olivat aiemmin ainoa tapa jäsentää dokumentin rakennetta. Jos esimerkiksi halutaan oheisen kuvan mukainen rakenne käyttäen vanhoja (edelleen käytössä olevia) elementtejä, se tapahtuisi seuraavasti.

<!DOCTYPE html>
<html lang="fi">
<head>
  <meta charset="UTF-8" />
  <title>Dokumentin rakenteen määrittely</title>
</head>

<body>
  <h1>1 Otsikko</h1>
  <p> Lorem... </p>
  <h1>2 Otsikko</h1>
  <p> Lorem... </p>
  <h2>2.1 Otsikko</h2>
  <p> Lorem... </p>
  <h3>2.1.1 Otsikko</h3>
  <p> Lorem... </p>
  <h3>2.1.2 Otsikko</h3>
  <p> Lorem... </p>
  <h2>2.2 Otsikko</h2>
  <p> Lorem... </p>
  <h3>2.2.1 Otsikko</h3>
  <p> Lorem... </p>
</body>

Dokumentti löytyy esimerkkisivuilta nimellä 03-01-a-dokumentin-rakenne.html

Tässä ratkaisussa dokumentin sisältöä otsikoiden alla ei kuvata lainkaan hierarkisena rakenteena, selain joutuu päättelemään rakenteen vain otsikoiden tasojen perusteella. HTML5 -dokumentissa sisällön hierarkisen rakenteen voi kuvata eksplisiitisesti section-elementtien avulla.

<section>-elementin käyttö

Edellisen esimerkin rakenne esitettäisiin section-elementtien avulla seuraavasti

esimerkki dokumentin rakenteesta

Dokumentti löytyy esimerkkisivuilta nimellä 03-01-b-dokumentin-rakenne.html

Html5:n periaatteiden mukaista on, että kukin osa (section-elementti, mutta aivan vastaavasti myös alla esiteltävät article-, aside- ja nav-elementit) aloittaa oman otsikkohierarkiansa h1-tasolta kuten yllä tehtiin. Taaksepäin yhteensopivuus takaa kuitenkin sen, että vaikka käytettäisiinkin section-elementtejä, voi otsikkotasot esittää myös hierarkiatasoa kuvaavassa muodossaan. Seuraava koodi tuottaa siis todennäköisesti saman tuloksen kuin edellinenkin.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Dokumentin rakenteen määrittely</title>
</head>

<body>
  <h1>1 Otsikko</h1>
  <p> Lorem... </p>
  <h1>2 Otsikko</h1>
  <p> Lorem... </p>
  <section>
     <h2> 2.1 Otsikko</h2>
     <p> Lorem... </p>
     <section>
          <h3>2.1.1 Otsikko</h3>
          <p> Lorem... </p>
     </section>
     <section>
          <h3>2.1.2 Otsikko</h3>
          <p> Lorem... </p>
     </section>
  </section>
  <section>
     <h2>2.2 Otsikko</h2>
     <p> Lorem... </p>
     <section>
        <h3>2.2.1 Otsikko</h3>
        <p> Lorem... </p>
     </section>
  </section>
</body>

Dokumentti löytyy esimerkkisivuilta nimellä 03-01-c-dokumentin-rakenne.html.

Tämä viimeinen versio on se, mitä suositellaan käytettäväksi. Yksi syy suositukseen on, että ruudunlukijat eivät (ainakaan toistaiseksi, 2014) jäsennä otsikkotasoja dokumentin osien sisältä, ' vaan turvautuvat suoraan käytettyyn <h1>..<h6>-elementtiin (ks. esim. Bruce Lawson: Headings in HTML5 and accessibility, http://brucelawson.co.uk./2009/headings-in-html-5-and-accessibility/ ja HTML5 Doctor: The section element, http://html5doctor.com/the-section-element/).

Tämä viimeinen tapa yksinkertaistaa myös otsikoiden muotoilua, koska eri tasoiset otsikot voi edelleen muotoilla suoraan määrittämättä sen tasoa section-hierarkiassa (CSS-sääntöjen avulla). Dokumentin rakenne saattaa aluksi tuntua monimutkaiselta, mutta se on HTML5-versiossa yksikäsitteisesti määritelty. Epäselvältä tuntuvissa tapauksissa Geoffrey Sneddonin HTML5 Outliner (http://gsnedders.html5.org/outliner/) on yksinkertainen ja kätevä työkalu, jolla voit tarkistaa miten dokumenttisi rakenne tulkitaan HTML5 spesifikaatioiden mukaisesti.

Tässä yhteydessä on hyvä vielä kerran korostaa, että näiden uusien dokumentin rakennetta määrittävien HTML5-elementtien taustalla on nimenomaan dokumentin osien semanttisen roolin (merkityksen) merkkaaminen. Esimerkiksi <section> -elementtiä ei pidä käyttää vain lohkon ("wrapper") määrittämiseen, jotta voisit muotoilla sitä halutulla tavalla tilanteissa, jossa muuten olisit käyttänyt <div>-elementtiä. <section> -elementin avulla on tarkoitus kuvata dokumentin hierarkista rakennetta. Jos <section> -elementtisi ei ala otsikko-elementillä (<hn>), on todennäköistä, että käytät elementtiä virheellisesti.

Yleisemminkin, uusien, dokumentin rakennetta kuvaavien HTML5-elementtien käyttöön liittyy vastaavia väärinkäsityksiä. Hyvä, ytimekäs katsaus näihin asioihin löytyy artikkelista:
Avoiding common HTML5 mistakes (Richard Clark).

<hgroup>-elementin käyttö

hgroup postettiin HTML5-määrittelystä

HTML5-elementtiä <hgroup> tulisi käyttää selkeyttämään dokumentin rakennetta. Koska dokumentin semanttisessa jäsentelyssä nojataan vahvasti <hn>-elementteihin, seuraavanlainen koodi ei ole suositeltavaa:

  <body>
      <h1>Pääotsikko</h1>
      <h2>Tarkentava aliotsikko</h2>
      ...

Tässä <h2>-otsikko ei aloita uutta alilukua, vaan se itse asiassa muodostaa otsikon luvulle yhdessä <h1>-otsikon kanssa. Tällöin tulisi käyttää <hgroup>-elementtiä:

  <body>
      <hgroup>
        <h1>Pääotsikko</h1>
        <h2>Tarkentava aliotsikko</h2>
      </hgroup>
      ...

3.5.2 Sisällön ryhmittelyä (lohkotaso)

<p> <hr> <br> <pre> <blockquote> <ol> <ul> <li> <dl> <dt> <dd> <figure> <figcaption> <div>

Yllä esiteltyjä elementtejä käytetään dokumentin sisällön erilaiseen ryhmittelyyn, kuten jakamiseen kappaleiksi, temaattisiin osiin, listoihin tai muihin jollain tavalla oman kokonaisuutensa muodostaviin osiin. Nämä elementit esitetään oletusarvoisesti omana lohkonaan. Silloin ne erotetaan muusta sisällöstä rivinvaihdoin.

3.5.3 Tekstitason semanttisia elementtejä

<a> <em> <strong> <small> <s> <cite> <q> <dfn> <abbr> <time> <code> <var> <samp> <kbd> <sub> <sup> <i> <b> <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> <span>

Vanhemmissa HTML versioissa oli mahdollista määrittää sivulle tuotettavaan tekstiin muotoilukomentoja vähän samaan tapaan kuin tekstinkäsittelyohjelmassa (esimerkiksi lihavoida <b>-elementtiä käyttäen). HTML5:ssä ei enää ole muotoiluun liittyviä elementtejä. Tekstinosia, sanaryhmiä, sanoja tai ehkä joskus vain yksittäisiä merkkejä voidaan edelleenkin merkata, mutta merkkaus on aina semanttinen. Merkittävään tekstinosaan siis liittyy aina jokin semanttinen arvo, jokin merkitys.

Tarkastellaanpa esimerkiksi <strong>- ja <em>-elementtejä, jotka molemmat tarkoittavat jonkinlaista tekstinosan korostusta. Vaikka ne useimmissa selaimissa saavatkin aikaan lihavoinnin tai kursivoinnin, niitä ei pitäisi käyttää ajatellen näiden muotoilujen aikaansaamista.

Elementin <strong> sisään kapseloidaan sellainen tekstinosa, joka on erityisen tärkeää. Se, miten tärkeä tekstinosa eri ympäristöissä (graafisesti, tai esim. äänenä) esitetään, vaihtelee asiakasohjelmasta riippuen.

<em>-elementin sisälle suljetaan tekstinosa jota halutaan painottaa. Kyse on silloin enemmänkin kielellisestä painotuksesta, ei niinkään tekstinosan tärkeydestä. Esimerkiksi lauseiden Ensi kesänä menen Ruotsiin töihin tai Ensi kesänä menen Ruotsiin töihin merkitys on erilainen. Tällöin tulisi käyttää <em>-elementtiä painotuksen ilmaisemiseen, ei <strong>-elementtiä, koska painotettu sana ei ole varsinaisesti tärkeä vaikka sitä painotetaankin. Vastaava logiikka pätee muihinkin tässä osassa esiteltyihin elementteihin.

Nyrkkisäännöksi voimme tiivistää: merkatessasi tekstinosaa, ajattele tekstinosan merkitystä, älä sen esityksellistä muotoa.

Takaisin ylös

3.6 Linkit

WWW-sivulla jonnekin toisaalle (sivun sisällä, sivuston sisällä, muilla palvelimella sijaitseville sivuille) viittavat hyperlinkit esitetään <a>-elementin avulla.

3.6.1 Linkki mihin?

Siirtymisen kohde määrätään href attribuutin avulla:
href = "merkkijono"

Attribuutin arvona oleva merkkijono voi olla jokin uri (Uniform Resource Locator)-osoite. Merkkijonon alussa annetaan skeema, joka voi olla jokin seuraavista: http, https, ftp, mailto, ldap, file, news, gopher tai telnet.

Esimerkiksi HTML-koodi
<a href="mailto:asiaspalvelu@yritys.fi">asiakaspalvelu@yritys.fi</a>
tuottaisi tekstin "aisakaspalvelu@yritys.fi" joka olisi samalla linkki. Linkin aktivointi aukaisisi koneen oletussähköpostiohjelman, ja loisi (riippuu koneen oletussähköpostiohjelmasta, tekeekö se tämän oletustoiminnan) uuden viestin, jonka to-osoitekentässä olisi valmiiksi "aisakaspalvelu@yritys.fi".

Jos attribuutin arvona on url-osoite tai hakemistopolku, se kertoo mistä osoitteesta selaimeen haetaan sivun sisältö.

Osoite voi olla absoluuttinen url-osoite mille tahansa internet sivulle, sivuston sisäinen suhteellinen osoite tai id-attribuutin avulla esitelty sivun sisäinen tunnus (sivun sisäinen "ankkuri"). Jos haluaa, että osoite viittaa dokumentin sisällä tiettyyn elementtiin, jolle on määritelty attribuutti id="tunnus", liitetään osoitteen jälkeen merkkijono "#tunnus" (vrt. kolmas alla esitetyistä esiemerkeistä).

Absoluutinen osoite, siirtyminen mille tahansa sivulle

Absoluuttinen (absolute) osoite on koko url-osoite, joka paikallistaa dokmentin mistä tahansa internettiin liitetyltä palvelimelta. url-osoitteen avulla voidaan paikallistaa osoite mille tahansa sivulle internetissä. Osoite muodostuu

Esimerkkejä:
http://dev.w3.org:80/html5/markup/datatypes.html
http://www.sis.uta.fi/~jwt/13/sisalto.html
http://www.sis.uta.fi/~jwt/13/sisalto.html#luku_3-6-1
http://www.sanakirja.org/

Viimeisen esimerkin osoitteesta puuttuu tiedoston nimi. Tällöin palvelin näyttää

Suhteellinen osoite, siirtyminen sivuston sisällä

Suhteellinen (relative) osoite, jonka avulla tehdään siirtyminen toiseen dokumenttiin samalla palvelimella. Suhteellisessa osoitteessa ei määritellä protokollaa eikä palvelinta. Se tulkitaan siinä hakemistossa, jossa linkin sisältämä sivu on. Suhteellinen osoite on siis hakemistopolku ja viitattavan dokumenttin nimi. Hakemistopolku tulkitaan siitä dokumentista lähtien, joka viittauksen tekee. Hakemistopolussa käytetään hakemistojen (kansioiden) nimiä ja ylöspäin hakemistorakenteessa päästään pseudohakemistonimen .. (kaksi pistettä) avulla. Tarvittaessa näitä merkintöjä voi olla useampia peräkkäin.

Esimerkkejä:
<a href="../harj/index.html">linkki</a>
<a href="kuvat/taulu.jpg">toinen linkki</a>
<a href="../../index.html">kolmas linkki</a>
<a href="#ankkuri">viimeinen linkki</a>

Yllä olevista ensimmäinen linkki viittaa samalla tasolla olevassa sisarhakemistossa (harj) olevaan index.html dokumenttiin (tästä hakemistosta yksi taso ylöspäin ja siellä kansio harj) dokumentti index.html. Toinen linkki viittaa alihakemistossa kuvat olevaan taulu.jpg dokumenttiin. Kolmas linkki viittaa kaksi hakemistotasoa ylempänä olevan kansion index.html dokumenttiin. Silloinhan dokumentin nimen voisi jättää pois, koska index.html on joka tapauksessa oletus, ts. kolmannen osoite voisi olla myös muodossa: "../../". Viimeinen linkki saa aikaa siirtymisen tiettyyn elementtiin sivun sisällä. Kohta dokumentissa (johon halutaan siirtyä) merkitään id attributin avulla, elementti voisi olla merkittynä esimerkiksi seuraavasti:
<h1 id="ankkuri">Otsikkoteksti</h1>

3.6.2 Muut <a> elementin attribuutit

target, hreflang, media, rel, type

Linkin kohteen määrittelevän href-attribuutin lisäksi <a>-elementti voi saada yllä luetellut attribuutit. Niiden avulla määritellään mihin linkin kohteena oleva sivu aukaistaan, millä kielellä linkin kohteena oleva sivu on kirjoitettu, millaisella laitteella linkin kohteena oleva sivu suunniteltu esitettäväksi, mikä on "tämän" dokumentin ja linkin kohteena olevan dokumentin keskinäinen suhde ja millainen dokumentti linkin määrittämässä osoitteessa sijaitsee.

3.6.3 Esimerkki

Esimerkkidokumentissa on sivun sisäisiä, sivuston sisäisiä sekä linkkejä muille sivuille. Osa aukeaa samaan selainikkunaan, osa aukaisee uuden välilehden.

Takaisin ylös

3.7 Taulukot verkkosivulla

Taulukoiden tarkoitus on jäsentää taulukkomaista tietoa riveihin ja sarakkeisiin. Niitä alettiin kuitenkin käyttää täysin tästä ajatuksesta poiketen sivun osien asemointiin. Tämä on nykyisen, eri medioita tukevan sivun toteutusperiaatteiden vastaista. Taulukon solujen oletetaan sisältävän taulukkoitua tietoa; kuvittele esimerkiksi miten sivunlukija tulkitsee sivua, jossa taulukkoelementtiä on käytetty pelkästään sivun visuaalisen rakenteen toteutukseen. Taulukoiden käyttö tuleekin rajoittaa nimenomaan taulukoidun tiedon esittämiseen ja sivun ulkoasun määritykset, sivun eri osien asemointi tehdään CSS:n keinoin.

3.7.1 Taulukon perusrakenne

<table> <tr> <td> <th>

Taulukot määritellään <table> elementin avulla. Taulukkoelementin sisällä esitellään taulukon rivit <tr> ja kullakin rivillä esitellään riville kuuluvat solut <td>. Näiden lisäksi taulukkoon voi määritellä sarake- ja riviotsikot <th>.

Aiemmissa HTML-versioissa oli monia attribuutteja, joiden avulla saattoi muokata taulukon ulkoasua. HTML5:ssä kaikki taulukon ulkoasuun liittyvät määritellään CSS-tyylisääntöjen avulla.

Esimerkki perustaulukosta
Esimerkki rivi- ja sarakeotsikoidusta taulukosta

3.7.2 Solujen sulautus

<colspan> <rowspan>

Taulukossa tulee usein tarve sulauttaa kaksi tai useampia solua joko rivillä (horisontaalisesti) tai sarakkeella (vertikaalisesti) yhteen. Se tapahtuu rowspan ja colspan -attribuuttien avulla.

Esimerkiksi <td colspan=3> sulauttaa solulle tämän ja seuraavat kaksi saraketta (ts. horisontaalisesti 3 saraketta) ja <td rowspan="2"> sulauttaa solulle tämän ja seuraavat kaksi riviä (ts. vertikaalisesti 2 riviä).

Esimerkki solujen sulautuksesta

3.7.3 Talukon sarakkeiden muotoilu

<colgroup> <col>

Taulukon määrittely tehdään riveittäin <tr>-elementin avulla. Taulukon riveille on siten helppo kohdistaa CSS-muotoilusääntöjä. Taulukon alussa voi tarvittaessa määritellä myös taulukon sarakkeet <col>-elementin avulla, ja sitoa sarakkeita yhteen <colgroup>-elementtiä käyttäen. Tämä helpottaa sarakkeiden muotoilua, ts. tyylisääntöjen kohdistamista taulukossa vertikaalisessa suunnassa.

Esimerkki sarakkeiden muotoilusta - colgroup
Esimerkki sarakkeiden muotoilusta - col
Esimerkki sarakkeiden muotoilu + solujen sulautus

3.7.4 Esteetön (saavutettava, accessible) taulukko

<caption> <thead> <tbody> <tfoot>

Taulukko on mahdollista määritellä aiemmin esitellyillä elementeillä, mutta jälleen kerran palataan siihen, miten erilaiset sivutulkit pystyvät hyödyntämään kirjotettua koodia. Taulukon esittelijän onkin suositeltavaa määritellä taulukkonsa kertoen, mikä on taulukon otsikko (<caption>), mitkä ovat sarakeotsikoita (<thead>), mikä taulukon osa sisältää taulukon varsinaiset sisältösolut ja (<tbody>) onko taulukossa lopuksi jonkinlainen yhteenvetorivi <tfoot>.

Esimerkki: Esteetön taulukko

Takaisin ylös

3.8 Kuvat verkkosivulla

Kuvat ovat tärkeitä sivuston keventäjinä, ilmeen luojina ja usein myös informaatiota sisältävinä elementteinä.

Seuraavassa käydään läpi perustiedot kuvan tuomiseksi verkkosivuille <img>-elementin avulla. Ennen sitä luodaan kuitenkin lyhyt katsaus siihen, millaisia kuvia sivulle voi tuoda, ja mistä kuvia saadaan tai miten niitä itse luodaan.

Kuvia käytettäessä tulee muistaa olla tarkkana kuvien oikeuksien kanssa. Voit tuoda sivulle vain itse ottamaasi kuvan, tai kuvan, jonka käyttöoikeudet eksplisiittisesti sallivat sen käyttämisen sillä tavalla ja siinä yhteydessä, jossa aiot kuvaa käyttää. Creative Commons -lisenssoinnin kautta on saatavissa eri tavoin vapaita tai rajoitetusti käytettävissä olevia kuvia. Googlen kuvahaun voi myös rajoittaa niin että haet vain vapaasti käytettävissä olevia kuvia (tarkennettu haku, kohta: Käyttöoikeudet). Vaikka kuva olisikin vapaasti käytettävissä on hyvä tapa liittää käyttämänsä kuvan yhteyteen jollain tavoin maininta kuvan tekijästä, jos se on tiedossa, tai yleisemmin kuvan lähteestä.

Joissain tilanteissa on tarpeen piirtää tai luoda kuvia "lennossa", kuten esimerkiksi jossain grafiikkaa sisältävässä nettipelissä. Se on entistä helpompaa uuden <canvas>-elementin ansiosta. Se on nimensä mukaisesti taustakangas kuvalle, itse kuva tuodaan jostain muualta tai luodaan piirtämällä se javascriptillä tai jollain muulla skriptikielellä.

3.8.1 Kuvaformaateista

Digitaalinen kuva voidaan luoda joko vektorigraafisena tai bittikartta- eli rasterigrafiikkakuvana. Kun kuva tuodaan <img>-elementin avulla, vektorigraafisena luotu kuvakin muunnetaan useimmiten bittikarttakuvaksi (rasterikuvaksi, yleisimmät jpeg-, gif- ja png-formaatit), vaikka elementin avulla on mahdollista tuoda vektorigraafisiakin kuvia (svg-piirrokset tai yksisivuiset pdf-tiedostot).

Vektorigrafiikkakuvat piirretään käyttäen geometrisia olioita (viivoja, suorakaiteita, ellipsejä, Bezier-käyriä, jne.). Vektrorigrafiikan iso etu on sen skaalautuvuus: se säilyy terävänä kaikissa kooissa laadun kärsimättä. Vektorigrafiikkaa käytetään esim. kirjasinten toteutuksessa, ja esim. logojen ja julisteiden suunnittelussa. Näitä kuvia voi luoda vektorigrafiikkaa tukevilla piirto-ohjelmilla (esim. Freehand, Illustrator).

Valokuvat ovat aina bittikarttakuvia (rasterigrafiikkakuvia). Bittikarttakuvat koostuvat pisteistä, kuvapikseleistä. Yksi kuvapikseli voi saada arvokseen jonkun värin. Kuvan värisyvyys (kuinka monta väriä kuvassa on käytettävissä) vaikuttaa suoraan kuvan kokoon. Jos värisyvyys on 8 bittiä, se tarkoittaa, että kunkin kuvapikselin esittämiseen varataan 8 bittiä, joten kullakin kuvapikselillä voi olla 28=256 toisistaan poikkeavaa väriä. Jos värisyvyys on 24 bittiä, puhutaan täysvärikuvista, yksi kuvapikseli voi tällöin saada yhden 224=16,7 miljoonasta värisävystä. Kuvan koko kasvaa kolminkertaiseksi.

Yksinkertaisin tapa tallentaa kuva on tallentaa jokainen kuvapikseli erikseen; tämä tiivistämätön tallennusformaatti on BMP-formaatti. Kuvan tallentaminen täysvärisenä bittikarttakuvana vie paljon tilaa joten kuvatiedostojen pienentämiseksi on käytössä erilaisia kuvaa tiivistäviä tallennusformaatteja. Yleisimmät tiivistävät tallennusformaatit ovat JPG, GIF ja PNG. Kuvatiedoston koko on tärkeä (ja mobiililaitteiden vuoksi sellaisena säilyykin) kriteerinä verkkosivuille viedyissä kuvissa. Järkevää on käyttää sitä formaattia, jolla kuvatiedoston koko on pienin ja kuvan laatu tarkoitukseen riittävä.

JPG-kuvaformaatti (Joint Photographic Expert Group)

JPG on hyvä tallennusmuoto valokuville, joissa on paljon eri värisävyjä. Formaatti pakkaa kuvan pienemmäksi säilyttäen kuvan värit, mutta se poistaa kuvasta muuta tietoa (kuvan tarkkuutta). Pakkaus tehdään tallentamalla kuva kuvankäsittelyohjelmassa alkuperäisestä formaatista JPG-formaattiin. Jos JPG-pakkauksen tekee alkuperäisestä kuvasta vain kerran, eivät pakkauksesta aiheutuvat muutokset ole kuvassa silmin havaittavissa. Saman kuvan toistuvaa JPG-pakkausta tulee kuitenkin välttää, jokainen pakkaus vähentää kuvan tarkkuutta. Pakatessaan voi pakkaussuhteen määrätä itse sen mukaan kuinka pieneksi kuvatiedosto on halutaan saada. Luonnollisestikin pakkaussuhteen suuruus ja kuvan tarkkuus ovat käänteisesti verrannollisia.

GIF-kuvaformaatti (Graphics Interchange Format)

GIF-kuvien tyyppillinen käyttötilanne on piirrokset, logot tai muut sellaiset kuvat, joissa on laajoja samanvärisiä kuvapintoja. GIF-kuvina tälläisten kuvatiedostojen koko saadaan hyvin pieneksi, koska kuvien värisyvyys pienennetään 8 bittiin: GIF-kuvissa on käytössä vain 256 väriä. Muuten alkuperäinen kuvainformaatio (tarkkuus) säilyy. Paitsi kuvan tiivistäminen, GIF-formattin alkuperäisenä ajatuksena oli, että GIF-kuvissa voitiin käyttää "turvallisten webbivärien" 256 värin väripalettia, joiden näkyminen näytöillä olisi aina taattu. Laitteistokehityksen myötä tämä aspekti on menettänyt merkityksensä.

Yksi syy käyttää GIF-kuvia on ollut tarve saada kuva läpinäkyväksi. GIF-formaatti on tukenut tätä alusta asti, kuvassa jokin väri (taustaväri) voidaan määritellä läpinäkyväksi, joka antaa monipuolisempia mahdollisuuksia sen käyttöön verkkosivulla. GIF kuvien avulla voi myös tehdä animoituja kuvia, jossa kuvaan tallennetaan useampia kuvia ja niita toistetaan luupissa peräkkäin, tosin niiden käyttö sivustoilla on suurimmaksi osaksi jäänyt pois. Ne häiritsevät toistuessaan loputtomasti, nykyisin löytyy hienovaraisempiakin tapoja toteuttaa liikettä.

PNG-kuvaformaatti (Portable Network Graphics)

W3C:n kehittämä PNG on enenevässä määrin syrjäyttänyt GIF-kuvien käytön. PNG-kuvaformaatti luotiin patenttioikeuksien rajatun GIF-formaatin korvaajaksi (avoin tiedostomuoto). Se tarjoaakin samat ominaisuudet kuin GIF (animoituja kuvia lukuunottamatta) mutta se on pakkausteholtaan parempi, sen tuki läpinäkyville kuville monipuolisempi ja se pystyy tarvittaessa tukemaan myös värisyyvyydeltään rikkaampia kuvia (PNG-8, PNG-24 ja jopa PNG-48).

PNG-kuvia voikin käyttää melkein kaikissa tilanteissa. Monivärisissä valokuvissa JPG-pakkaus kuitenkin toimii paremmin kuin PNG. Pienissä kuvissa JPG-pakkaus ei ole kovin tehokas, koska pakkausinformaation suhteellinen osuus ´tiedostokoosta on iso. Myös tilanteissa, joisa on tärkeää, että sivut toimivat myös vanhoilla selaimilla (esim. IE 4) on tarpeen välttää PNG-kuvien käyttöä.

Yhteenveto

Image Formats: What's the Difference Between JPG, GIF, PNG? (Drew Coffin) on hyvä yhteenvetoartikkeli kuvaformaattien käytöstä verkkosivuilla. Lyhyesti voitaneen todeta, että PNG-kuvia voi käyttää muuten, paitsi isohkoissa, paljon pieniä väripintoja sisältävissä valokuvissa, jolloin JPG-kuvat toimivat paremmin, tai tilanteissa, jossa sivujen toimita vanhoilla selaimilla ovat syystä tai toisesta olennaista.

3.8.2 Kuvan koko, resoluutio ja läpinäkyvyys

Bittikarttakuvan koko (dimensiot) mitataan pikseleissä. Ajatellaanpa esimerkkinä "3 megapik­selin" kameraa. Se ottaa kuvia, jotka ovat 2048 pikselin levyisiä ja 1536 pikselin korkuisia. Kun kuva tulostetaan paperille, kuvan fyysinen koko riippuu tulostuksessa käytetystä painojäljestä. Paperille, siedettävällä painojäljellä 256 ppi (pixels per inch), tulostettuna 3M kuvan koko olisi noin 20 x 15 cm.

Kuvaa ei kuitenkaan voisi näyttää sellaisenaan verkkosivulla. W3schoolin selaininformaatiosivulta voi tarkistaa minkä kokoisia näyttöjä verkossa liikkuvilla käyttäjillä on. Resoluutio 1024x768 on tällä hetkellä se "kynnyskoko" — lähes kaikilla w3school-sivustolla kävijöillä on sen kokoinen tai sitä suurempi näyttö. Kuvamme koko on siis huomattavasti sitä suurempi, lisäksi on kuitenkin hyvä huomioida, että tilasto on w3school sivustolla käyneistä, ja tuolla sivuilla tuskin käydään paljon pieninäyttöisiltä mobiililaitteilta. Näyttöjen tarkkuus vaihtelee välillä 72 - 100 ppi. Jos ajatellaan esimerkkivalokuvamme fyysistä kokoa näytöllä, se olisi näin ollen noin 75 x 54 cm. Siis aivan liian suuri näytöllä esitettäväksi.

On siis järkevää käydä pienentämässä se jossain kuvankäsittelyohjelmassa ennen sivulle tuontia. Nykyisin pienennyksen voi tehdä yksikertaisimmaskin kuvankästtelyohjelmissa (jopa Windowsin Paint-apuohjelmassa).

Termillä resoluutio voidaan tarkoittaa kahta asiaa: kuvan kokoa (esittämiseen käytettävää kuvapikselien lukumäärää, esim. 640 x 480) tai esitystarkkuutta (pikselien lukumäärää tietyllä pinta-alamitalla, esim. 72 ppi, joka on tyypillinen näytön resoluutio). Paperille tulostettuna kuvapikselien määrän kasvu voi lisätä kuvan tarkkuutta tai kuvan kokoa, mutta näytöllä pikselien määrän lisäys tarkoittaa aina kuvan fyysisen koon kasvua.

Läpinäkyvien kuvien avulla on mahdollista luoda monimutkaisempia asetteluja, joissa kuvan ääriviivan ei tarvitse olla suorakulmio, tai kuvia on helpompi sijoitella osittain päällekkäin. GIF ja PNG tukevat läpinäkyvyyttä (kuvankäsittelyohjemissa voi määritellä läpinäkyvät alueet); JPG ei sitä tue. GIF kuvissa voi yhden 256:sta väristä määritellä läpinäkyväksi, ts. yksi pikseli voi olla läpinäkyvä, tai sillä on väri. PNG kuvat tukevat ns. alpha läpinäkyvyyttä (alpha transparency), jolloin pikseli voi olla osittain tai kokonaan läpinäkyvä. PNG kuvien avulla on helpompi saada pehmeästi häpyviä reunoja tilanteissa joissa GIF kuvan reuna näyttäisi rosoiselta ja pykälikkäältä.

3.8.3 Kuvankäsittelyohjelmat

Kuvankäsittelyn perusperiaatteet ovat samat riippumatta käyttämästäsi ohjelmasta. Adoben Photoshop ja sen hiukan halvempi serkku Fireworks ovat suosituimmat kuvankäsittelyohjelmat. Photoshop on monipuolinen, kallis ja raskas ohjelma – Fireworks hinnaltaan noin kolmanneksen edellisestä, ketterämpi ja erityisesti suunniteltu verkkokäyttöön tulevien kuvien luontiin ja muokkaukseen
Alex J. Wendpap: Photoshop vs. Fireworks: Which is best for web design.

Nämä molemmat ovat kuitenkin melko hintavia, varsinkin jos ottaa huomioon, että monet halvat tai jopa täysin ilmaiset kuvankäsittelyohjelmat ovat kehittyneet erittäin monipuolisiksi ja käytettävyydeltäänkin hyviksi työkaluiksi. Edullisia vaihtoehtoja:

Myös online editorit ovat kehittymässä ja kehittyneetkin varteenotettaviksi vaihtoehdoiksi, kuten esim.

3.8.4 Kuvan tuonti verkkosivulle

Kuva sisällytetään HTML5-dokumenttiin <img>-elementin avulla.

Elementti on tyhjä, perusmuodossaan se näyttää seuraavalta

 <img src="kuvan verkko-osoite" alt="seliteteksti" />

Attribuutin src verkko-osoite kertoo mistä kuva sivulle noudetaan. Se voi olla samalla tavalla suhteellinen tai absoluuttinen kuin linkin verkko-osoitekin. Seliteteksti alt="seliteteksti" on HTML5:ssä pakollinen. Se näytetään, jos jostain syystä kuvaa (esim. tekstipohjaisissa tai audioselaimissa) ei voida näyttää. Ruudunlukijat tukeutuvat selitetekstiin kuvan sisällön kuvaamiseksi.

Kuvasta voi myös tehdä linkin asettamalla sen <a>-elementin sisällöksi.

 <a href="#osa-2">
  <img src="../img/ff-arrow.png"  alt="Seuraava osa">
 <a>

Kuva on hyvä luoda suoraan sen kokoiseksi jona sen aikoo näyttää sivulla. Kuvan koon pikseleissä voi kertoa <a>-elementissä height ja width attribuuttien avulla.

Koko (dimensiot) kannattaa aina kertoa html-koodissa, koska jos selain tietää kuva-alueen koon etukäteen, kuvan latautuminen sivulle ei hidasta muun sisällön tuontia, eikä aiheuta tilanteita, joissa teksti ehtii latautumaan johonkin kohtaan ja sitä joudutaankin asettelemaan uudelleen kun kuva latautuu omalle kohdalleen, esim.

<img src="img/www.gif" width="300" height="248" alt="Palvelimet ja selaimet" />

Kuvan koon voi käydä tarkistamassa jossain kuvankäsittelyohjelmassa. Yksinkertaisin tapa koon tarkistamiseen on viedä kuva sivulle ensin ilman dimensioiden kertomista, ja sen jälkeen käyttää selainta kuvan dimensioiden tarkastamiseen (hiiren kakkospainikkeen kautta aukeavasta pudotusvalikosta: View image info / Näytä kuvan tiedot tms.). Selain antaa dimension lisäksi muutkin kuvan perustiedot, kuten esimerkiksi kuvan sijaintiosoitteen, koon, sille määritellyn selitetekstin.

Vaikka kuva kannattaakin pyrkiä näyttämään aina omassa koossaan (kuvan laadun säilymisen ja latautumisen nopeuden takia), height ja width attribuuttien avulla voi kuvan myös skaalata sivulle sopivaan kokoon. Tämä on kätevää ainakin siinä tapauksessa että samaa kuvaa käytetään sivustolla eri kokoisena eri kohdissa. Jos antaa kuvalle vain leveyden tai korkeuden, toinen ulottuvuus määräytyy aina oikeassa suhteessa, eikä vaaraa kuvan venymisestä tai litistymisestä ole. Toisaalta, kuten edellä todettiin, kuvalle kannattaisi aina määrätä molemmat dimensiot, jotta selain tietää kuva-alueen koon etukäteen, kuvan latautuminen sivulle ei hidasta muun sisällön tuontia. Silloin pitää kuitenkin itse huolta siitä, että annetut kuvan dimensiot eivät vääristä kuvaa.

3.8.5 Kuvakartat

Kuvaan voidaan "piilottaa kartta", joka määrittelee kuvan sisällä alueita, joihin liitetään erikseen linkkiominaisuus. Kartta toteutetaan erillisen <map>-elementin ja sen sisältämien <area>-elementtien avulla.

Kuvalle annetaan usemap-attribuutti, joka viittaa kuvaan liitettyyn karttaan. Karttaelementille määritellään vastaava tunniste name-attribuutin avulla.

Jokainen kartan area-elementti määrittelee kuvan sisällä alueen, johon se liittyy. Alue määritellään area-elementin attribuuttien avulla. Alla tarkennusta area-elementin attribuuttien käyttöön.

<img src="img/pinnin-aula.jpg" alt="Pinnin aula" usemap="#kello-ja-kasvi" />
<map name="kello-ja-kasvi">
    <area shape="circle" coords="205,18,13" href="kello.html" alt="Kello" />
    <area shape="rect" coords="64,67,95,95" href="kasvi.html" alt="Viherkasvi" />
</map>

Takaisin ylös

3.9 Videot ja äänitiedostot verkkosivuilla

Ennen HTML5-versiota, ainoa tapa lisätä audio- ja videotiedostoja verkkosivulle oli käyttää kolmansien osapuolien tarjoamia lisäosasia, ns. plugin-ohjelmia, kuten Adoben Flash-player tai Applen Quicktime. Niiden käytössä on ongelmansa; lisäosan tulee olla asennettuna koneelle ja lisäksi usein koodi, joka yhdellä selaimella toimii esimerkiksi Flash-videon upottamiseksi sivulle, ei välttämättä toimikaan toisella selaimella.

HTML5 tekee videoiden ja äänitiedostojen käytön helpoksi, se tukee tiettyjä video- ja ääniformaatteja natiivisti, ts. suoraan selaimessa. Alunperin käytön piti olla nykyistäkin helmpompaa: HTML5 määrittelyssä oli aluksi vain kaksi media formaattia, yksi videolle ja yksi äänelle. Tarkoitus oli, että kaikkien HTML5-yhteensopivien selainten tulisi tukea näitä formaatteja. Apple ja Nokia eivät kuitenkaan suostuneet käyttämään valittua formaattia, joten HTML5:een jouduttiin lopulta ottamaan mukaan muitakin mediaformaatteja.

3.9.1 Videon tuonti verkkosivuille

HTML5-dokumentissa voidaan näyttää palvelimelle, tai johonkin Internettiin tallennettua videota. Videon tuominen HTML5:llä kirjoitetulle verkkosivulle tapahtuu lähes yhtä helposti kuin kuvan tuominen sivulle. Videon lisäämiseen käytetään <video>-elementtiä.

Yksinkertainen esimerkki:

<video src="media/pelikaani.webm">
  ...
</video>

Ks. esimerkki, yllä olevalla yksinkertaisella määrityksellä sivulle tuotu video.

Elementin src-attribuutin avulla siis kerrotaan (vastaavasti kuin kuville) mistä video noudetaan. Yllä olevalla yksinkertaisella videon esittelyllä ei kuitenkaan esimerkiksi määritellä videonsoittoalueen kokoa, tai määritellä miten video käynnistetään. Videon esittämistä voidaan säädellä elementin muiden attribuuttien avulla. Ne ovat seuraavat: height, width, poster, preload, autoplay, controls, muted, loop ja mediagroup.

Attributtien  height  ja  width  avulla voidaan määritellä videosoittoalueen koko. Videota ei voi venyttää, jos annettu leveys/korkeus suhde ei ole sama kuin videossa, video sovitetaan annetun kokoiseen suorakaiteeseen jolloin joko leveydessä tai korkeudessa jää tyhjää tilaa. Voit antaa myös vain toisen mitoista, mutta kuten kuvien yhteydessä, suositeltavaa on antaa molemmat mitat.

Videolle voi antaa aloituskuvan  poster -attribuutin avulla ja  preload -attribuutin avulla selaimelle voi antaa videon noutamiseen liittyviä ohjeita. Jos esimerkiksi oletetaan, että on epätodennäköistä että käyttäjä katsoo videota ja voidaan olettaa, että yhteysnopeus on rajoitettu, voidaan pyytää että video noudetaan selaimeen vasta jos käyttäjä sitä todella pyytää.

Totuusarvoisten  autoplay ,  controls ,  muted  ja  loop -attribuuttien avulla voi määritellä äynnistyykö video automaattisesti, näytetäänkö videolle ohjauspaneeli, soitetaanko videon ääni ja toistuuko video kunnes käyttäjä sen ehkä pysäyttää ja  mediagroup  -attribuutin avulla voi sekä muodostaa videoista ryhmiä.

Seuraavassa esimerkissä on määritelty videonsoittoalueen koko, määritelty videolle aloituskuva, ja määritelty siihen näytettäväksi ohjauspaneeli, jonka avulla käyttäjä voi kontrolloida videon soitamista:

<video src="media/pelikaani.webm" width="500" height="281" controls 
       poster="img/pelikaani.jpg"> 
  ...
</video>

Ks. Esimerkki (koon määritys, aloituskuva, ohjauspaneeli)

3.9.2 HTML5 videoformaateista

Periaatteessa videoiden näyttäminen onkin näin helppoa, mutta kuten alussa todettiin, selainten tukemien eri esitysformaattien takia asia hieman monimutkaistuu. Macin (ja Safarin) käyttäjät huomasivat sen jo edellisten esimerkkien kohdalla. He eivät nähneet videota ensimmäisessä esimerkissä.

HTML5 tukee kolmea videoformaattia (video codec): Ogg Theora, MP4 ja WebM. Alla olevasta taulukosta näet kunkin näistä selaintuen:

Videoformaatti Tiedostopääte Selainten tuki
Ogg Theora.ogg, .ogvFirefox 3.5+, Chrome5+, Opera 10.5+
MP4 (h.264) .mp4, .m4v Safari 3+, Chrome5+, iOS, Android 2+ (tosin Chrome on ilmiottanut aikovansa lopettaa tuen tulevissa versioissaan (Chrome19-?))
WebM .webm Firefox 4+, Chrome6+, Opera 11+, IE 9+, Android 2.3+

Ensinnäkin, yllä olevasta taulukosta näemme, että Safari ei tue WebM-formaattia; itse asiassa videot joutuu aina antamaan sivulla ainakin kahdessa eri formaatissa, jotta voi vakuuttua että se toimii kaikissa selaimissa. Toinen alkuperäistä ajatusta vesittävä seikka on, että Apple ja Microsoft vaativat (ainakin toistaiseksi) että koneelle on asennettu Quicktime (Apple) ja Windows Media Player (MS) jotta Safari (ja myös Chrome, koska molemmat ovat WebKit pohjaisia selaimia) ja IE9 toimisivat.

Useamman videoformaatin antaminen <video>-elementille tapahtuu elementin sisään kirjoitetun <source>-elementin avulla. Tällöin tulee src="url" attribuutti jättää itse <video>-elementistä pois (muuten se syrjäyttää <source>-elementtien vaikutukset). Periaate on, että selain etenee <source>-elementtien listaa ja poistuu <video> elementistä heti kun sen jälkeen kun on pystynyt tunnistamaan jonkun tarjotuista videotiedostoista. Edellisen esimerkin video saatiin siis toimimaan Safarillakin seuraavasti:

<video>
  <source src="img/pelikaani.webm" type="video/webm">
  <source src="img/pelikaani.mp4" type="video/mp4">
  <p>Selaimesi ei pysty näyttämään videota, pahoittelen.</p>	
</video>

<source> elementillä voi olla src attribuutin lisäksi attribuutit type ja media, joista ensimmäinen vaaditaan videon MIME tyypin määrittelemiseksi (video/ogg, video/mp4, video/webm) ja jälkimmäisessä voidaan antaa tietoa siitä millaisille laitteille video on optimoitu näytettäväksi.

Videoiden formaattimuunnoksiin on saatavissa useita video konverttori -ohjelmia, esim.

3.9.3 Tekstityksen lisääminen videoon

<track>-elementin avulla voidaan videoon liittää tekstitys. Attribuutti  src  vaaditaan annettavaksi; se kertoo mistä ajastettu tekstiraita noudetaan. Elementin muut mahdolliset attribuutit ovat: kind, srclang, label ja default.

Attribuutti  kind  määrittää millaista tietoa tekstiraita sisältää. Attribuutti  srclang  määrittää sen millä kielellä tekstiraita on kirjoitettu,  label  katsojalle näytettävän tekstiraidan otsikon ja  default  määrittää, että tekstiraita näytetään oletuksena, elleivät käyttäjän määritykset edellytä käytettäväksi jotain toista raitaa.

Ajastetun tekstitysraidan luominen jätetään tämän esityksen aihepiirin ulkopuolelle.

3.9.4 Videon tuonti YouTubesta

Kuten kuvienkin kohdalla, sinulla tulee luonnollisestikin olla oikeudet käyttää sivulle upottamaasi videota. YouTube-videoita voit käyttää vapaasti, jos upotat ne suoraan YouTubesta omalle sivullesi. Upottaminen tapahtuu HTML5:ssä <iFrame>-elementin avulla (<frame>-elementtiä ei HTML5:ssä enää ole, mutta <iFrame>-elementti kyllä). Saat sen tehtyä yksinkertaisesti kopioimalla videon yhteydestä löytämäsi upota/embed-koodi omalle sivullesi.

Alla on tällä tavalla tuotu YouTube video, joka opastaa upotuksen tekemisen yksityiskohtaisesti. Youtube:n käyttöliittymä on saattanut hiukan muuttua, mutta videon alta löytynee komento Jaa / Upota -jonka avulla saat html-koodirivit, jolla voit tuoda videon omalle sivullesi. Videossa on käytetty vanhaa <object>-elementtiä käyttävää koodia, suositeltavampaa on käyttää <iFrame>-elementtiä.

3.9.5 Äänitiedostot

Äänen soittaminen palvelimelta (tai jonnekin url-osoitteen osoittamaan paikkaan) tallennetusta äänitiedostosta verkkosivulla tapahtuu analogisesti videon esittämisen kanssa, <audio>-elementin avulla.

Elementin attribuutit ovat vastaavat kuin edellä kuvatussa <video>-elementissä. Erona on luonnollisestikin se, että visuaaliseen esittämiseen liittyvät attribuutit puuttuvat, joten äänen soittamista voidaan kontrolloida attribuuteilla  src ,  preload ,  autoplay ,  controls ,  muted ,  loop  ja  mediagroup .

Esimerkki

<audio autoplay="autoplay" loop="loop">
  <source src="audio/ella.wav" type="audio/wav">
  <source src="audio/ella.mp3" type="audio/mp3">
  <a href="audio/ella.mp3">Download the audio</a> 
 </audio>

Ks. Esimerkki (yllä olevalla määrityksellä sivulle tuotu äänitiedosto)

3.9.6 Äänitiedostoformaatit

HTML5 tukee viittä äänentallennusformaattia (audio codec): Ogg Vorbis, MP3, WAV, AAC ja MP4. Alla olevasta taulukossa kunkin formaatin selaintuki:

Äänitiedostoformaatti Selainten tuki
Ogg (Ogg Vorbis).oggFirefox 3.5+, Chrome5+, Opera 10.5+
MP3 (MPEG-1/MPEG-2 Audio Layer III) .mp3 Safari 5+, Chrome6+, iOS, IE9+
WAV(Audio for Windows) .wav Firefox 3.6+, Safari 5+, Chrome8+, Opera 10.5+, IE 9+
AAC (Advanced Audio Coding) .aac Safari 3+, IE9+, iOS 3+, Android 2+
MP4 (MPEG-4 Part 14) .mp4 Safari 3+, Chrome5+, iOS 3+, Android 2+

Ks. Esimerkki (2 ohjauspaneelin avulla kontrolloitavissa olevaa äänitiedostoa)

Takaisin ylös

3.10 Lomakkeet verkkosivulla

Olemme tähän mennessä kuvanneet, miten luodaan WWW-sivuja, joiden avulla välitetään tietoja käyttäjälle. Lomakkeiden avulla voidaan saada tietoa toiseen suuntaan, käyttäjältä sivun julkaisijalle. Lomakkeet ovat keskeinen osa vuorovaikutteisten verkkopalvelujen toteuttamisessa. Tällaisia palveluja ovat esimerkiksi

Lomakkeet koostuvat kahdesta osasta: (1) WWW-sivulla näkyvästä, HTML:n ja CSS:n avulla määritellystä lomakkeesta ja (2) lomakkeelle annettujen tietojen käsittelyn tekevästä ohjelmasta ("lomakkeenkäsittelijä", tallennettuna palvelimelle).

Alla on esimerkki lomakkeesta, johon on esitelty kenttiä, joita verkkolomakkeeseen voi määritellä. Esimerkistä näet, miltä lomakkeen elementit näyttävät selaimen oletusmuotoilulla, mutta voit luonnollisestikin itse muotoilla lomakkeen ulkonäön CSS tyylisääntöjen avulla haluamaksesi. Voit katsoa lomakettä myös esimerkkisivulta.

Lomakkeet on perinteisesti koettu HTML:ssä hankaliksi, koska niiden muotoilu ja käsittely vaatii muita sivuelementtejä enemmän sekä CSS että JavaScript-koodausta. HTML5:ssä tämä on pyritty ottamaan huomioon, ja se sisältääkin huomattavan määrän uusia elementtejä ja attribuutteja lomakkeen käsittelyä varten. Oheisen esimerkkilomakkeen ominaisuudet ovat kaikki jo aiemmissa HTML-versioissa määriteltyjä ominaisuuksia.

Vaikka kaikki selaimet eivät vielä tukisikaan uusia määrityksiä, tässä tulee apuun jälleen HTML-tulkkien tapa jättää tunnistamattomat elementit ja attribuutit käsittelemättä. Niiden käyttö ei siis aiheuta virhettä: uudet ominaisuudet jäävät yksinkertaisesti vaan huomiotta, ja tulevat käyttöön sitä mukaan kun uudet selainversiot oppivat niitä tulkitsemaan. Toki sivun totetuttajan tulee olla tietoinen siitä miten sivulla käytetyt elementit käyttäytyvät niissä selaimissa joita halutaan tukea, ja toteuttaa kriittiselle toiminnallisuudelle varmistukset, esim. JavaScriptillä. Wufoo (http://wufoo.com/html5/) on työkalu, jonka avulla voi tarkistaa miten eri selaimet ja selainversiot tukevat HTML5:een lomakkeen esittelyä ja käsittelyä varten lisättyjä uusia ominaisuuksia.

3.10.1 Lomake-elementti

Lomake esitellään verkkosivulla <form>-elementin avulla.

Karkealla tasolla lomakkeen määrittely näyttää seuraavalta:

<form {lomake-elementin attribuutit}> 
  {elementit lomakkeen sisällä - määräävät lomakkeen sisällön}
  {elementti, joka lähettää lomakkeen  käsittelyyn (input type="submit")} 
</form>

Lomake määritellään <form>-elementin avulla. Lomakkeeseen määritellään kentät elementin sisään kirjoitettavia input-elementtejä käyttäen. Katsotaan kuitenkin ensin mitä attribuutteja lomake voi saada, ja mitä lomakkeen ominaisuuksia niiden avulla voidaan määriellä.

Mahdolliset attribuutit ovat  accept-charset   action   autocomplete   enctype   method   name   novalidate   target 

Attribuuttien accept-charset ja enctype avulla voidaan määritellä lomakkeelta lähetettävien tietojen merkistökoodaukseen liittyviä ominaisuuksia. Lomakkeenkäsittelijä, ts. ohjelma joka ottaa vastaan ja käsittelee lomakkeelle syötetyt tiedot, nimetään action-attribuutin avulla, ja method-attribuutti määrittelee miten tiedot lomakkeenkäsittelijälle välitetään. Attribuutin name avulla annetaan lomakkeelle tunnistetieto ja target määrittää sen, mihin avataan lomakkeenkäsittelijän palauttama HTML-dokumentti.

Uuden autocomplete-attribuutin avulla voidaan määritellä ehdotetaanko käyttäjälle kentän sisältöä aiemmin kenttään syötettyjen sisältöjen perusteella. Toinen uusi attribuutti ja novalidate määrittelee, että kentän syötetietoja ei haluta tarkastettavan automaattisesti (HTML5:ssä kenttiin syötettyjä tietoja tarkistetaan automaattisesti).

3.10.2 Attribuutti id vs. name attribuutti

Lomakkeen kenttien esittelyissä saattavat globaalin id-attribuutin ja lomakkeen name-attribuutin roolit joskus vaikuttaa sekavilta. Jokaiselle lomakkeen syötekentälle on määriteltävä name-attribuutti, jonka avulla verkkosovellus palvelimella tunnistaa miltä elementiltä syötetieto on peräisin. Myös id-attribuutti on lähes aina välttämätön, sitä käytetään verkkosivun sisällä kenttään viittamiseksi. Näiden ei välttämättä tarvitse olla samat, vaikka turhien sekaannusten estämiseksi onkin yleinen käytäntö antaa niille samat arvot.

3.10.3 Lomakkeen sisältö - elementit lomakkeen sisällä

Lomake-elementin sisälle kirjoitettavat elementit määrittävät lomakkeen kentät. Tärkein lomakkeen sisällön määrittelevistä elementeistä on yleiskäyttöinen <input>-elementti, jonka avulla voidaan esitellä suurin osa lomakkeen syötekentistä.

<input>-elementti

Tärkein lomakkeen sisällön määrittelevistä elementeistä on <input>-elementti, jonka avulla voi esitellä useita erilaisia syötekenttiä. Elementti on tyhjä elementti, esimerkiksi

 <input type="text" />

määrittelee kentän, johon käyttäjä voi syöttää yhden tekstirivin.

Se, millaista tietoa ja miten se kentän avulla lähetetään, määritellään elementin  type -attribuutin avulla. Kunkin syötetyypin toteutukseen liittyy oma toteutuksensa käyttöliittymäkomponenttitasolla. Esimerkiksi checkbox-tyyppinen elementti

 <input type="checkbox" />

toteuttaa valinnan annetuista vaihtoehdoista valintaruutu-käyttöliittymäkomponentin (vrt. esimerkkilomakkeen kysymys Oletko kiinnostunut) avulla. Mahdolliset syötetyypit ovat: text|password|checkbox|radio|button|submit|reset|file|hidden|image|datetime|datetime-local|date|month|time|week|number|range|email|url|search|tel|color">

Katsotaan seuraavassa mitä kukin syötetyyppi tarkoittaa ja miten niitä oli esimerkkilomakkeessa käytetty.

Kenttiin syötettyjen tietojen oikeellisuustarkistukset tehdään yleensä JavaScriptin avulla.

Uusien, HTML5:een lisättyjen input elementtien tarkoituksena on vähentää erikseen kirjoitettavien JavaScript-ohjelmien tarvetta, ja tehdä kenttiin syötettyjen arvojen tarkistus automaattisesti. Esimerkiksi sähköpostiosoitetta odottava lomake-kenttä odottaa käyttäjältä syötettä, joka voidaan tulkita sähköpostiosoitteeksi, ja antaa ilmoituksen jos näin ei ole.

Selainten tuki näille uusille syötetyypeille vaihtelee vielä paljon. Tämän tarkistamiseksi kannattaa tukeutua Wufoo-sivustoon: Browser Support for New HTML5 Input Types. Uudet syötetyypit ovat:

type-attribuutin lisäksi <input>-elementti voi saada joukon attribuutteja, joiden avulla voidaan säädellä erilaisia kenttään ja siihen syötettävään tietoon liittyviä ominaisuuksia: accept, alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, value, width

Attribuutin value-arvo on kentän arvo (normaalisti juuri se arvo, joka välitetään elementin arvona lomakkeen käsittelijälle).

Suurin osa lomakkeen kentistä määritellään edellä käsitellyn <input>-elementin avulla, mutta rakenteeltaan monimutkaisemmille on on omat elementtinsä. Samaten kenttien ryhmittelyyn ja selkeyttämiseen on käytettävissä muutama elementti.

<fieldset>, <legend> ja <label> -elementit

Lomakkeen kenttien ryhmittely tapahtuu <fieldset>- ja <legend>-elementtien avulla. Edellisen avulla luodaan lomakkeelle kenttäryhmiä loogisesti yhteenkuuluvista syötekentistä, ja jälkimmäisellä annetaan nimi tällaiselle ryhmälle. Edellisessä esimerkissä tälläisia kenttärymiä oli kuusi kappaletta; kunkin kenttäryhmän yläreunaan annettu nimi tai muunlainen seliteteksti oli annettu <legend>-elementin avulla. <label>-elementin avulla kentälle voidaan antaa lomakkeella kenttään liitettävä nimiö.

<textarea> ja <button> -elementit

Elementin <textarea> avulla voi määritellä useamman tekstirivin syötekenttiä, elementin attributtien avulla tekstikentälle voi määritellä mm. kentän leveyden ja korkeuden, antaa sille automaattisesti fokus lomakkeen latauduttua, tai antaa kenttään valmiiksi alkuarvo (placeholder) jonka käyttäjä voi halutessaan korvata toisella arvolla. Esimerkkilomakkeen viestikenttä oli toteutettu <textarea>-elementin avulla.

  <label for="msg">Viesti: </label>	
  <textarea id="msg" rows="10" cols="40" name="msg"></textarea>

Tavanomaisen painikkeen voi toteuttaa <input>-elementin avulla, mutta jos haluaa määritellä epätyypillisempiä painikkeita, esimerkiksi tekstiä tai kuvia painikkeeksi, sen saa aikaan <button>-elementin avulla.

<select>, <option> ja <optgroup> -elementit

Valintalista-elementtien (<select> ja <option>) avulla voidaan esitellä valintalista (pudotuslistana), kuten esimerkkilomakkeen jälkimmäisessä iän kysymiskentässä tehtiin:

<fieldset>
   <legend>Tai näin: ikäsi [select]</legend>
  
   <label for="age">Ikäsi: </label>
   <select id="age" name="age">
      <option>valitse</option>
      <option>alle 20</option>
      <option>20-39</option>
      <option>40-59</option>
      <option>yli 60</option>
   </select>
</fieldset>

Vaihtoehtoja voi ryhmitellä käyttäen <optgroup> elementtiä, esimerkiksi seuraavasti.

<form action="kasittelija.php"> 
   <select id="kirja" name="on-lukenut" multiple="multiple"> 
      <optgroup label="Sofi Oksanen"> 
         <option>Puhdistus</option> 
         <option>Kun kyyhkyset katosivat</option> 
     </optgroup> 
     <optgroup label="Arto Paasilinna"> 
     	<option>Aatemi ja Eeva</option> 
     	<option>Jäniksen vuosi</option> 
     	<option>Kylmät hermot, kuuma veri</option> 
     </optgroup> 
   </select> 
 <form>

Loput viisi lomake-elementtiä ovat HTML5-kieleen mukaan otettuja uusia elementtejä.

<datalist> , <keygen> ja <output> -elementit

Uuden HTML5-elementin <datalist> avulla voi etukäteen määritellä vaihtoehtoja joita selain ehdottaa automaattisiksi täydennyksiksi käyttäjän kirjoittaessa syötettä tekstikenttään.

Elementin <keygen> avulla voidaan luoda yksityinen ja julkinen avain tiedonsiirron salaamiseksi.

Lomakkeella saattaa olla numeraalisia arvoja sisältäviä kenttiä, joita halutaan käyttää laskutoimituksissa joiden tulokset edelleen halutaan näyttää lomakkeella. Tälläinen tilanne voisi olla esimerkiksi verkkokaupan ostoskoriin tuotujen kenttien arvojen yhteenlasku lopullisen laskun esittämiseksi. Tällaisessa tilanteesssa voitaisiin käyttää <output> elementtiä tiedon viemiseksi haluttuun kenttään.

<progress> ja <meter> -elementit

<progress>-elementin avulla voi piirtää horisontaalisen palkin, jonka täyttöasteen avulla voi ilmaista tehtävän etenemistä. <meter>-elementtin avulla tuodaan sivulle samantapainen komponentti, mutta sen avulla voi esittää suhteellisia arvoja. Sen avulla voi havainnollistaa esimerkiksi levytilan täyttymistä tai yleisemmin tiettyjen rajojen sisällä olevaa arvoa, osittain täytetyn palkin avulla.

3.10.4 Lomakkeen käsittely

Verkkosivujen lomakkeelle syötetyt tiedot lähetetään palvelimelle, jossa tiedot vastaanottaa ja käsittelee lomakkeen  action  -attribuutissa määritelty CGI-ohjelma.

CGI-ohjelmat eivät ole sidottuja mihinkään tiettyyn ohjelmointikieleen, CGI on rajapinta (Common Gateway Interface) lomakkeen ja palvelimella tiedot vastaanottavan ohjelman välillä. CGI-ohjelma on siis WWW-palvelimella suoritettava ohjelma, joka saa selaimelta (yleisimmin HTML-lomakkeilta) tietoja CGI-rajapinnan välityksellä. CGI-ohjelma toteutetaan usein tulkattavilla, ns. skriptikielillä, esimerkiksi Perlillä, Phythonilla tai PHP:lla. CGI-ohjelmat voidaan myös kirjoittaa erilliseen käännettävillä kielillä kuten esim C#, Java tai C++ tai erityisesti verkkosovellusten laatimiseen räätälöityjen ohjelmointiympäristöjen avulla, kuten ASP.NET tai J2EE.

CGI-ohjelmat siis suoritetaan palvelimella, ne ovat ns. palvelinpuolen ohjelmia. Vaikka skriptikielillä kirjoitettua ohjelmakoodia voidaan kirjoittaa HTML-koodin sekaan CSS-tyylisääntöjen tapaan, sekin suoritetaan palvelimella. Palvelimella tulee siis olla käytettävissä ko. kielen tulkki. Tästä syystä ne voivat käyttää ja päivittää palvelimella olevia tietokantoja ja tiedostoja. Tyypillisesti CGI ohjelma tuottaa HTML-dokumentin, ts. palautesivun, joka lähetetään palvelimelta selaimelle, käyttäjälle näytettäväksi.

Tietojen lähettäminen lomakkeelta lomakkeenkäsittelijälle voi tapahtua kahdelle vaihtoehtoisella tavalla, lomakkeen method attribuutin arvoksi voidaan antaa joko get tai post.

get-metodi
<form action="cgi-ohjelman-url" method="get">
Mikäli lähetystavaksi valitaan "get" selain liittää lomakkeen tiedot suoraan kohteena olevan verkkosovelluksen osoitteeseen ja lähettää pyynnön verkkosovelluksen omaavalle www-palvelimelle. Tällöin kaikki lomakkeen tiedot näkyvät suoraan verkko-osoitteessa ?-merkin perässä. Muuttujat on eroteltu toisistaan &-merkillä.

Useimmiten tätä metodia käytetään pienissä lomakkeissa, joiden kautta lähetetään vain pari muuttujaa, ja joita ei ole tarpeen peittää käyttäjältä (tai muilta koneen lähettyvillä olevilta). Useimmat web-hakukoneet käyttävät lomakkeissaan get-metodia. Se mahdollistaa esimerkiksi kyselyn tallentamisen ja edelleen lähettämisen toisille asiasta kiinnostuneille tai tietojen lähettämisen lomakkeenkäsittelijälle myös kokonaan ilman verkkolomaketta, koska palvelinohjelma saa kaikki tietonsa suoraan verkko-osoitteensa perässä.

post-metodi
<form action="cgi-ohjelman-url" method="post">
Käytettäessä post-metodia lomakkeen tietoja ei liitetä suoraan verkkosovelluksen osoitteen perään, vaan ne lähetetään HTTP-kutsun mukana omassa kentässään. Tämän metodin käyttö on suositeltavaa, kun verkkosovellukselle lähetetään suuri määrä tietoa tai tiedon piilottaminen käyttäjältä tai tietokoneen ympärillä olevilta silmäpareilta on tarpeen.

On kuitenkin huomattava, että myös post-metodilla tiedot lähetetään verkkosovellukselle täysin salaamattomina - kolmas osapuoli voi helposti lukea kaikki lomakkeella lähetettävät tiedot, mukaanlukien salasanat. Tällaisia arkaluonteisia tietoja lähetettäessä tulisikin varmistua siitä, että asiakassovellus (web-selain) keskustelee www-palvelimen kanssa esim. SSL-salatulla HTTPS-protokolla.

Ks. Lähetetään people-palvelimella olevalle lomakkeenkäsittelijälle. Ohjelma on php:lla kirjoitettu peilaa.php-ohjelma, joka lähettää kenttien arvot takaisin selaimelle.

Voit halutessasi kopioida ohjelman itsellesi tästä: peilaa.txt
Toinen lomakkeenkäsittelijä, joka lähettää kenttien arvot sähköpostiin: spostina.txt

Jos haluat käyttää näitä omasta kotihakemistostasi, korvaa tiedoston nimestä .txt pääte päätteellä .php anna tiedostolle suoritusoikeudet kaikille. Jälkimmäisessä ohjelmassa sinun täytyy käydä laittamassa ohjelmaan oma sähköpostiosoitteesi sähköpostin lähetysosoitteeksi.

Takaisin ylös

Attribuuttien määrittelyt

accept
syntaksi: <input accept="audio/*|video/*|image/*|MIME_type" />
Määrittää minkä tyyppisiä tiedostoja, tiedoston latauskomponentin avulla hyväksytään ladattavaksi palvelimelle (ääntä, videota tai kuvia). Toimii vain tiedoston latauskomponentin yhteydessä. Arvolla MIME_type ladattavaksi hyväksytään mikä tahansa validi MIME media tyyppi
esimerkki:
  <input type="file" accept="audio/*" />
[W3C] [W3C non-normative] [MDN] [W3School]
accept_charset
syntaksi: <form accept-charset="merkistökoodaus">
Määrittää merkistökoodauksen, jota palvelin lomakkeelta odottaa - jos tämä jätetään antamatta oletuskoodaus sama kuin mitä HTML-dokumentissa on käytetty
esimerkki:
  <form accept-charset="ISO-8859-1">
[W3C] [W3C non-normative] [MDN] [W3School]

Merkintä anytag tarkoittaa minkä tahansa elementin alkutunnusta.

accesskey
syntaksi: <anytag accesskey="x">
Määrittää yhden tai useampia näppäimistö-oikoteitä (x) elementin aktivoimiseksi (esim. aktivoi linkin, tai vie fokuksen elementtiin). Selaimissa oikotie toimii yleensä näppäinkomennolla alt+shift+x tai alt+x.
esimerkki:
  <nav id="nav_yla">
    <a accesskey="i" href="index.html">Info</a>
    <a accesskey="k" href="sisalto.html">Kurssisisältö</a>
    <a accesskey="e" href="esimerkit.html">Esimerkit</a>
    <a accesskey="h" href="harj/index.html">Harjoitukset</a>
    <a accesskey="t" href="ht-tentti.html">Htyö/tentti</a>
    <a accesskey="m" href="muuta.html">Muuta</a>
  </nav>
[W3C] [W3C non-normative] [MDN] [W3School]
action
syntaksi: <form action = "url-osoite">
Määrittää sen ohjelman (CGI-ohjelma, PHP-ohjelma, ...) url-osoitteen (absoluuttinen tai suhteellinen osoite), jolle käyttäjän lomakkeelle kirjoittamat tiedot lähetetään käsiteltäväksi.
esimerkki:
  <form action="mailaa.pl">
[W3C] [W3C non-normative] [MDN] [W3School]
alt
syntaksi: <img|area|input alt="seliteteksti kuvalle">
HTML5:ssä pakollinen seliteteksti <img>-elementin avulla määritellylle kuvalle. Selitetekstiä käytetään tilanteissa, joissa kuvaa ei näy graafisena elementtinä (esimerkiksi tekstipohjaisissa tai audioselaimissa tai normaalistikin, jos linkki on rikki). Jos kuvan rooli sivulla on pelkästään dekoratiivinen, attribuutin arvona saa olla tyhjä merkkijono.
<area>-elementin yhteydessä alt-seliteteksti on pakollinen aina jos kuvakartan hyperlinkki attribuutti
<input>-elementin yhteydessä alt-seliteteksti on käytössä vain image-tyyppisen käyttöliittymäkomponentin yhteydessä, jolloin se on pakollinen, merkkijono ei silloin saa olla tyhjä.  href , jossa annetaan kuvasta aukeava hyperlinkki, on läsnä. Selitetekstinä annetaan vaihtoehtoinen esitys alueelle, jos kuvaa ei voida esittää.
esimerkki:
  <img src="img/utalogo.gif" alt="Yliopiston logo" />
  <area shape="rect" coords="0,0,82,126" href="info.html" alt="Info" />
  <input type="image" src="painike.gif" alt="kuvateksti"  />
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
autocomplete
syntaksi: <form|input autocomplete = "on|off">
<form>: Määrittää ehdotetaanko syötekentän arvoksi automaattisesti aiemmin syötettyjä arvoja.
<input>: Määrittää, käytetäänko syötekenttää kirjoitettaessa automaattitäydennystä, jolloin syötekentän arvoa pyritään arvaamaan etukäteen aiemmin samannimiseen kenttään syötettyjen arvojen perusteella. Käytössä syötetyyppien text, search, url, tel, email, password, datepickers, range, ja color yhteydessä
esimerkki:
  <form autocomplete="on">
  <input type="text" name="cvv-numero" autocomplete="off" />
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
autofocus
syntaksi: <input autofocus[="autofocus"] />
Määrittää että komponentti aktivoidaan sivun latauduttua: tälle kentälle/painikkeelle annetaan fokus aluksi (boolean-arvoinen, ts. jos attribuutti esitetään, arvo on true, pois jättäminen antaa arvoksi false).
esimerkki:
  <input type="text" name="etunimi" autofocus>
[W3C] [W3C non-normative] [MDN] [W3School]
autoplay
syntaksi: <video|audio autoplay[="autoplay"]>
Määrittää käynnistyykö video|audio automaattisesti (boolean-arvoinen, ts. jos attribuutti esitetään, arvo on true, pois jättäminen antaa arvoksi false).
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
challenge
syntaksi: <keygen challenge="merkkijono" />
Lisävarmistukseksi määritetty merkkijono tiedonsiirron salauksen verifioimiseksi. Merkkijono pakataan ja lähetetään lomaketietojen mukana.
esimerkki:
<keygen name="avain" challenge="1234567890" />
[W3C] [W3C non-normative] [MDN] [W3School]
checked
syntaksi: <input checked[="checked"] />
Käytössä syötetyyppien radio ja checkbox yhteydessä; asettaa niissä kyseisen vaihtoehdon (esi)valituksi (boolean-arvoinen, ts. jos attribuutti esitetään, arvo on true, pois jättäminen antaa arvoksi false).
esimerkki:
  <input type="radio" value="20-39" name="ika" checked="checked" />
[W3C] [W3C non-normative] [MDN] [W3School]
class
syntaksi: <anytag class="luokan-nimi">
Määrää elementin kuuluvaksi tiettyyn luokkaan. Elementtiin voidaan tyylisäännöissä viitata tämän luokkanimen avulla.
esimerkki:
<code class="htmlcode">koodirivejä</code>
[W3C] [W3C non-normative] [MDN] [W3School]
cols, rows
syntaksi: <textarea rows="ei-negatiivinen luku" cols="ei-negatiivinen luku">
Kentän leveys (cols) ja korkeus (rows) merkkeinä ja riveinä. Jos jäteään määrittelemättä, oletus on 20 merkkiä ja 3 riviä.
esimerkki:
  <textarea rows="10" cols="50" />
[W3C] [W3C non-normative] [MDN] [W3School]
colspan
syntaksi: <td colspan="ei-negatiivinen-luku">
sulauttaa pyydetyn määrän sarakkeita yhteen (luku 0 sulauttaa loput rivin solut yhteen)
esimerkki:
<table>
	<tr>
		<th>Sarakeotsikko 1 </th>
		<th>Sarakeotsikko 2</th>
		<th>Sarakeotsikko 3</th>
	</tr>
	<tr>
		<td>Rivi 1, solu 1 </td>
		<td colspan="2">Rivi 1, solut 2 ja 3 (colspan="2")</td>
	</tr>
	<tr>
		<td>Rivi2, solu 1</td>
		<td>Rivi 2, solu 2</td>
		<td>Rivi 2, solu 3</td>
	</tr>
	<tr>
		<td>Rivi 3, solu 2</td>
		<td>Rivi 3, solu 3</td>
		<td>Rivi 3, solu 3</td>
	</tr>
</table>
[W3C] [W3C non-normative] [MDN] [W3School]
contenteditable
syntaksi: <anytag contenteditable="true"|""|"false">
Määrää voiko elementin sisältöä muokata. Arvot "true" ja tyhjä merkkijono asettavat elementin editoitavissa olevaksi. Jos attribuuttia ei määritellä elementille lainkaan, elementti perii editoitavuuden äidiltään.
esimerkki:
  <p  contenteditable>
    Tätä tekstiä pystyisi nyt sivulla muokkaamaan.
  </p>
[W3C] [W3C non-normative] [MDN] [W3School]
contextmenu
syntaksi: <anytag contextmenu="menu-id">
Liittää elementille konteksisensitiivisen ponnahdusvalikon, joka esitellään erikseen tunnuksella "menu-id". Valikko aukaistaan hiiren kakkospainikkeen kautta, selaintuki tälle attribuutille kuitenkin toistaiseksi (2013) heikkoa.
[W3C] [W3C non-normative] [MDN] [W3School]
controls
syntaksi: <video|audio controls[="controls"]>
Määrittää näytetäänkö videolle (äänitiedostolle) ohjauspaneeli (boolean-arvoinen, ts. jos attribuutti esitetään, arvo on true, pois jättäminen antaa arvoksi false).
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
coords
syntaksi: <area coords="x1,y1,x2,y2"|"x,y,r"|"x1,y1,x2,y2,..,xn,yn">
Rajaa kuvasta alueen luettelemalla joko suorakaiteen, ympyrän tai monikulmion määrittelevät koordinaatit.
esimerkki:
<area shape="circle" coords="205,18,13" href="pallo.html" alt="txt">
<area shape="rect" coords="64,67,100,100" href="nk.html" alt="txt">
<area shape="poly" coords="54,201,24,194,11,183" href="mk.html" alt="txt">
[W3C] [W3C non-normative] [MDN] [W3School]
default
syntaksi: <track defaul[="default"]>
Jos määriteltynä, tekstiraita näytetään oletuksena, jollei käyttäjän omat määritykset edellytä jonkin toisen raidan näyttämistä näyttämistä (boolean-arvoinen, ts. jos attribuutti esitetään, arvo on true, pois jättäminen antaa arvoksi false).
esimerkki:
  <video width="320" height="240" controls>
    <source src="filmi.mp4" type="video/mp4">
    <source src="filmi.ogg" type="video/ogg">
    <track src="subtitles_fi.vtt" kind="subtitles" srclang="fi" 
           label="Finnish" default>
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" 
           label="English">
</video> >
[W3C] [W3C non-normative] [MDN] [W3School]
dir
syntaksi: <anytag dir="ltr"|"rtl"|"auto">
Määrittää tekstin kirjoitussuunnan (left-to-right, right-to-left tai jätetään ohjelmallisesti määriteltäväksi).
[W3C] [W3C non-normative] [MDN] [W3School]
dirname
syntaksi: <textarea dirname="kentta-id">
Attribuutti välittää kentän nimen, josta saadaan tekstin lukusuunta (ltr, rtt). Attribuutin puuttuessa, oletuksena länsimainen "ltr".
esimerkki:
  <textarea name="syote" dirname="lukusuunta">
[W3C] [W3C non-normative] [MDN] [W3School]
disabled
syntaksi: <input disabled[="disabled"] />
Asettaa komponentin passiiviseen tilaan, jolloin käyttäjä ei pääse muokkaamaan sen sisältöa tai napsauttamaan sitä hiirellä. Passivoidun komponentin nimi/arvo -paria ei välitetä palvelimelle (boolean-arvoinen, ts. jos attribuutti esitetään, arvo on true, pois jättäminen antaa arvoksi false).
esimerkki:
  <input type="radio" name="osa-2" disabled="disabled" />
[W3C] [W3C non-normative] [MDN] [W3School]
draggable
syntaksi: <anytag draggable="true"|"false"|"auto">
Määrittää voiko elementtiä raahata vai ei (itse raahauksen toteuttamien vaatii javascriptin kirjoittamista). Attribuutin oletusarvo auto jättää attribuutin arvon selaimen päätettäväksi.
esimerkki:
  <label draggable="true">Siirrä tämä</label>

Huomaa, että attribuutti ei ole boolean-arvoinen, joten edellistä esimerkkiä EI voi antaa muodossa: <label draggable>Siirrä tämä</label>.

[W3C] [W3C non-normative] [MDN] [W3school]
dropzone
syntaksi: <anytag dropzone="copy"|"move"|"link">
Määrittää miten raahattavaa kohdetta käsitellään jos se raahatessa tiputetaan elementin päälle, selaintuki tälle attribuutille kuitenkin toistaiseksi (2013) heikkoa.
[W3C] [W3C non-normative] [MDN] [W3school]
enctype
syntaksi: <form enctype = "application/x-www-form-urlencoded | multipart/form-data | text/plain">
Määrittää miten lomakkeille kirjoitettua tietoa muunnetaan ennenkuin se lähetetään palvelinohjelmalle syötteeksi. Oletuksena oleva application/x-www-form-urlencoded varmistaa välilyöntien ja erikoismerkkien siirtymisen koodauksesta riippumatta; edelliset muutetaan +-merkeiksi ja jälkimmäiset muutetaan ascii hex -arvoiksi. Arvo multipart/form-data ei tee muunnoksia, ja sitä tulee käyttää jos lomakkeessa on tiedoston lataus -painike.
esimerkki:
  <form enctype="text/plain">
[W3C] [W3C non-normative] [MDN] [W3School]
for
syntaksi: <label for="kentta-id" />
Yhdistää <label>-elementin avulla annetun nimiön kenttään, jonka id on kentta-id
esimerkki:
  <label for="enimi">Etunimi: </label>
  <input type="text" id="enimi" />
ks. <label>-elementin esittely yllä
[W3C] [W3C non-normative] [MDN] [W3School]
form
syntaksi: <input|label form="tunnus" />
Vaikka määriteltävä komponentti ei olisikaan <form>-elementin sisällä, sen voi liittää kuuluvaksi tiettyyn lomakkeeseen, antamalla form-attribuutille sen lomakkeen tunnus, johon komponentti halutaan liittää. Näin komponentin arvo välitetään palvelimelle lomakkeen mukana vaikka se sijaitsisikin sivulla visuaalisesti lomakkeen muista komponenteista erillään.
esimerkki:
  <input form="lomake-id" />
  <label form="form_id">
[W3C] [W3C non-normative] [MDN] [W3School]
formaction
syntaksi: <input formaction="lomakkeenkäsittelijä-url"/>
Normaalisti lomakkeenkäsittelyohjelma nimetään lomake-elementin action-attribuutin avulla. Jos lomakkeen tiedolle halutaan vaihtoehtoisia käsittelyohjelmia, tämän attribuutin avulla voi painikkeelle määritellä muitakin lomakkeenkäsittelijöitä kuin elementin esittelyssä annettu. Voidaan käyttää syötetyyppien submit ja image yhteydessä
esimerkki:
input type="submit" formaction="toinen.php" value="Optio-2" />XXX 
[W3C] [W3C non-normative] [MDN] [W3School]
formenctype
syntaksi: <input formenctype ="application/x-www-form-urlencoded | multipart/form-data | text/plain" />
Määrittää kentästä palvelimelle lähetettävän tiedon koodauksen (käytettäessä post-metodia). Voidaan käyttää syötetyyppien submit ja image yhteydessä.
esimerkki:
  <input  type="submit" formenctype="text/plain" value="Tallenna"/>
[W3C] [W3C non-normative] [MDN] [W3School]
formmethod
syntaksi: <input formmethod="get|post" />
Normaalisti tietojen lähetystapa nimetään lomake-elementin method-attribuutin avulla. Tämän attribuutin avulla voi painikkeelle määritellä lähetystavan, joka syrjäyttää lomakkeelle annetun lähetystavan. Voidaan käyttää syötetyyppien submit ja image yhteydessä
esimerkki:
  <input formmethod="post" />
[W3C] [W3C non-normative] [MDN] [W3School]
formnovalidate
syntaksi: <input formnovalidate[="formnovalidate"] />
Ehkäisee lomakkeen lähetyspainikkeessa lomakkeen kenttien automaattisen tarkistuksen palvelimelle lähetettäessä (boolean-arvoinen, ts. jos attribuutti esitetään, arvo on true, pois jättäminen antaa arvoksi false).
esimerkki:
  <input type="submit" formnovalidate="formnovalidate" value="Lähetä" />
[W3C] [W3C non-normative] [MDN] [W3School]
formtarget
syntaksi: <input formtarget="iframe-nimi|_blank|_self|_parent|_top />
Ohjaa lomakkeen käsittelystä tuotetun palautteen nimettyyn kehykseen (iframe), uuteen välilehteen (_blank), nykyiseen ikkunaan (_self), äiti-elementin ikkunaan (_parent), tai elementtirakenteen ylimmän elementin ikkunaan (_top).
esimerkki:
  <input  formtarget="_top" />
[W3C] [W3C non-normative] [MDN] [W3School]
hidden
syntaksi: <anytag hidden>
Elementti halutaan pitää (ainakin toistaiseksi) näkymättömissä.
esimerkki:
  <p hidden>Tämä teksti ei tule näkyviin</p>
[W3C] [W3C non-normative] [MDN] [W3school]
height
syntaksi: <img|video|input height="ei-negatiivinen luku">
<img>: <video>: Määrittelee elementin korkeuden pikseleissä.
<input>: Voidaan käyttää syötetyypin submit yhteydessä: määrää kuvan avulla muodostetun syötekomponentin korkeuden pikseleissä.
esimerkki:
  <img src="logo.gif" alt="Yrityksen logo" height="42">
  <video width="320" height="240" controls>
    <source src="malli.mp4" type="video/mp4">
    <source src="malli.ogg" type="video/ogg">
    Selaimesi ei pysty näyttämään videota, pahoittelemme.
  </video>
  <input type="image" src="laheta.gif" alt="Lähetä" width="36" height="18">
  <input type="image" height="20" />
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
href
syntaksi: <a href="url">
Määrittää url-osoitteen, jonka hyperlinkki aukaisee.
esimerkki:
<a href="http://www.merriam-webster.com/">Merriam Webster</a> -sanakirjan
avulla voit harjoitella myös englannin kielen ääntämystä.
[W3C] [W3C non-normative] [MDN] [W3School]
hreflang
syntaksi: <a hreflang="language-subtag">
Hyperlinkin osoittaman dokumentin kieli.
esimerkki:
<a href="http://www.sis.uta.fi/~jwt/13/sisalto.html" hreflang="fi">HTML5-kurssi</a>
[W3C] [W3C non-normative] [MDN] [W3School]
id
syntaksi: <anytag id="merkkijono">
Antaa elementille yksikäsitteisen tunnuksen.
esimerkki:
  <h1 id="osa-contact">Yhteystiedot</h1>
[W3C] [W3C non-normative] [MDN] [W3school]
keytype
syntaksi: <keygen keytype="rsa|dsa|ec" />
Määrää käytetttävän salausalgoritmin.
esimerkki: esim.
<form action="kasittelija.php" method="get">
    Pankkitilin numero: <input type="text" name="tilinro">
    Salaus: <keygen name="salaus" keytype="rsa">
    <input type="submit">
</form>
[W3C] [W3C non-normative] [MDN] [W3School]
kind
syntaksi: <track kind ="subtitles"|"captions"|"descriptions"|"chapters"|"metadata">
Määrittää millaista tietoa tekstiraita sisältää.
Jos kind ="subtitles" elementti tuo tekstiraidan, joka on tarkoitettuna tyypilliseen tilanteiseen, jossa katsoja ei täysin ymmärrä ääniraitaa (kuten vieraskielinen video) tai jostain muusta syystä ääniraita ei ole täysin katsojan saatavilla.
Jos ääniraita on täysin kuulumattomissa, attribuutin arvo kind="captions" kertoo, että tekstiraita sisältää paitsi litteroitua puhetta, myös muuta tietoa videon(/audion) äänimaailmasta (kuten esim. kuuroille tarkoitettu tekstiraita).
Jos taas visuaalinen komponentti ei ole käytettävissä, attribuutin arvo kind ="descriptions" määrittää, että tekstiraidassa selitetään videon sisältöä (esim. näkövammaisia ajatellen).
Attribuutin arvo kind="chapters" kuvaa, että track-elementti liittää media-tiedostoon väliotsikoita. kind="metadata" on varattu skriptipätkien käyttöön
[W3C] [W3C non-normative] [MDN] [W3School]
label
syntaksi: <track label="ei-negatiivinen luku">
Antaa tekstiraidalle otsikon, jota voidaan käyttää erilaisissa luetteloissa tai tekstiraidasta annettavassa informaatiossa.
esimerkki:
<track kind="subtitles" src="txt.fi.vtt" srclang="fi" label="suomeksi" />
[W3C] [W3C non-normative] [MDN] [W3School]
lang
syntaksi: <anytag lang="language-subtag">
Kuvaa elementin kirjoittamisessa käytetyn kielen. Tunnisteiden standardoinnista vastaa IANA (Internet Assigned Numbers Authority). Lista käytössä olevista tunnisteista löytyy osoitteesta: http://www.iana.org/assignments/language-subtag-registry.
esimerkki:
  <p  lang="de">
    Dieser Absatz ist in deutscher Sprache verfasst.
  </p>
[W3C] [W3C non-normative] [MDN] [W3school]
list
syntaksi: <input list="datalist-id" />
Liittää syötekentän <datalist>-elementtiin, jossa on lueteltu kenttään mahdollisesti syötettäviä arvoja. Näitä arvoja käytetään kun automaattinen täydentäminen ehdottaa kentälle arvoksi. Jos syötetyyppi on hidden, checkbox, radio, file tai button, attribuutti jätetään huomiotta.
esimerkki:
<input list="kulkuvaline" name="tyomatka">
<datalist id="kulkuvaline">
  <option value="oma auto">
  <option value="bussi">
  <option value="juna">
  <option value="mopedi/moottoripyörä">
  <option value="jalan">
</datalist> />
[W3C] [MDN] [W3School]
loop
syntaksi: <video|audio loop[="loop"]>
Määrittää toistuuko video (äänitiedosto) kunnes käyttäjä sen ehkä pysäyttää (boolean-arvoinen, ts. jos attribuutti esitetään, arvo on true, pois jättäminen antaa arvoksi false)
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
manifest
syntaksi: <html manifest="tiedostonimi.appcache" />
Mahdollistaa sivuston tallentamisen välimuistiin (application cache), joka nopeuttaa sivuston käyttöä ja mahdollistaa sivuston käytön offline-tilassa. Annetuun tiedostoon kirjoitetaan tekstimuodossa ne resurssit, jotka tulisi tuoda välimuistiin, jotta sivustoa voi käyttää ilman verkkoyhteyttä. Tiedostopäättenä tiedostolle suositellaan käytettäväksi päätettä appcache. esimerkki: <html manifest="sivusto.appcache" />
[W3C] [W3C non-normative] [MDN] [W3School]
max
syntaksi: <input max="number|date" />
Kentän suurin mahdollinen arvo (numeerinen arvo tai aika). Sen tulee olla suurempi kuin elementille määritelty min-arvo.
esimerkki:
  <input type="date" name="luokka" min="1" max="3" />
[W3C] [W3C non-normative] [MDN] [W3School]
maxlength
syntaksi: <input maxlength="luku" />
Määrittää elementin pituuden merkeissä; syötekentässä määrää kuinka monta merkkiä syötekenttään maksimissaan otetaan vastaan.
esimerkki:
  <input type="text" name="etunimi" maxlength="15" />
[W3C] [W3C non-normative] [MDN] [W3School]
media
syntaksi: <a media="arvo">
Kertoo millä laitteella dokumentti on suunniteltu esitettäväksi (ts. mille laitteelle optimoitu). Attribuutin arvo voi olla jokin mediakyselyn antama mediatyyppi (media query) yhdistettynä esitysympäristöä tarkentaviin mediapiirteisiin (media features). Mediatyyppivaihtoehtoja ovat tällä hetkellä all, aural, braille, handheld, projection, print, screen, tty ja tv, mutta valikoima laajennee laitteistojen kehittyessä. min-width on esimerkki mediapiirteistä (media features)
esimerkki:
<a href="url" media="screen and (min-width: 320px)">linkki</a>
[W3C] [W3C non-normative] [MDN] [W3School]
mediagroup
syntaksi: <video|audio mediagroup="merkkijono">
Attribuutin avulla voi sekä muodostaa videoista (äänitiedostoista) ryhmiä että kysyä mihin ryhmään video kuuluu.
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
method
syntaksi: <form method = "get|post">
Lomakkeen tiedot voi lähettää verkkosovellukselle kahdella eri tavalla, get- tai post-metodia käyttäen.
esimerkki:
  <form method="post">
[W3C] [W3C non-normative] [MDN] [W3School]
min
syntaksi: <input min="number|date" />
Elementin pienin mahdollinen arvo (numeerinen arvo tai aika). Sen tulee olla pienempi kuin elementille mahdollisesti määritelty max-arvo.
esimerkki:
  <input type="date" name="saika" min="1900-01-01" />
[W3C] [W3C non-normative] [MDN] [W3School]
multiple
syntaksi: <input multiple="multiple" />
Käytettäessä email- ja file-typpisten syötekomponenttien yhteydessä antaa mahdollisuuden valita useamman tiedoston kerralla, tai antaa syötteeksi useammman pilkulla toisistaan erotetun sähköpostiosoitteen kerralla. Käytettäessä <select-elementissä, jolloin listakomponentista tulee monivalinnan salliva lista (muuten select-lista toteutetaan yleensä pudotusvalikkona).
esimerkki:
  <input type="email" multiple="multiple" />
[W3C] [W3C non-normative] [MDN] [W3School]
muted
syntaksi: <video|audio muted[="muted"]>
Määrittää soitetaanko videon (äänitiedoston) ääni (boolean-arvoinen, ts. jos attribuutti esitetään, arvo on true, pois jättäminen antaa arvoksi false).
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
name
<map>: Antaa kuvakartalle nimen, jonka avulla se ydistetään siihen kuvaan, jolle halutaan määritellä aktiivisia alueita.
syntaksi: <map|form|input name="nimi">
<form>: Antaa lomakkeelle nimen, jota ohjelmat käyttävät tunnistetietona lomakeen avulla lähetettyihin tietoihin viitattaessa. Nimen tulee olla yksikäsitteinen (lomakkeiden kesken)
<input>: Antaa komponentille nimen, jota käytetään tunnistetietona kun elementin arvo lähetetään lomakkeenkäsittelijälle
esimerkki:
<img usemap="#kartta-1" src = ...
<map name="kartta-1">
  <area shape=rect coords=25,25,75,75 href="osoite">
</map>
  <form name="asiakastiedot">
  <input type="text" name="etunimi" />
[W3C] [W3C non-normative] [MDN] [W3School] (<map>)
[W3C] [W3C non-normative] [MDN] [W3School] (<form>)
[W3C] [W3C non-normative] [MDN] [W3School] (<input>)
novalidate
syntaksi: <form novalidate="novalidate">
Määrittää, että lomakkeelle annetuille tiedoille ei tehdä automaattista tarkistusta ennen lähetystä.
esimerkki:
  <form novalidate>
[W3C] [W3C non-normative] [MDN] [W3School]
pattern
syntaksi: <input pattern="säännöllinen lauseke" />
Mahdollistaa hyväksyttävän arvon määrittelemisen säännöllisten lausekkeiden avulla. Alla oleva esimerkki vaatii, että kenttään tuotekoodi vaaditaan syöte, joka alkaa numerolla ja sitä seuraa kolme kirjainta.
esimerkki:
  <input type="text" name="tuotekoodi" pattern="[0-9][A-Z]{3}" />
[W3C] [W3C non-normative] [MDN] [W3School]
placeholder
syntaksi: <input placeholder="vihje"/>
Kenttään voi antaa vihjeeksi alku-arvon, joka esimerkiksi kehottaa antamaan syötteen tietyssä muodossa.
esimerkki:
  <input type="text" name="sostunnus" placeholder="000000-000X" />
[W3C] [W3C non-normative] [MDN] [W3School]
poster
syntaksi: <video poster="url">
Aloituskuvan osoite, jos halutaan että videon paikalla ennen sen käynnistämistä on aloituskuva. Aloituskuva venyy määriteltyyn videon leveyteen ja korkeuteen, ellei sen mittasuhteet valmiiksi ole samat.
esimerkki:
<video width="500" height="281" poster="img/pelikaani.jpg"> 
  <source src="media/pelikaani.webm" type="video/webm">
  . . .
</video>
[W3C] [W3C non-normative] [MDN] [W3School]
preload
syntaksi: <video|audio preload="none"|"metadata|"auto"|"">
Voidaan esittää selaimelle pyyntö, että videota (äänitiedostoa) ei ladata palvelimelta, ennenkuin se käynnistetään, tai että vain sen metatiedot (koko, tyyppi, pituus, jne.) tuodaan selaimeen, tai että latauksesta huolehtiminen jätetään selaimen päätettäväksi. Ei ole takuita, että selain kaikissa tilanteissa noudattaa annettua pyyntöä. Tyhjällä merkkijonolla attribuutin sisältönä on sama vaikutus kuin arvolla auto.
esimerkki:
<video width="500" height="281" preload="metadata"> 
  <source src="media/pelikaani.webm" type="video/webm">
  . . .
</video>
[W3C] [W3C non-normative] [MDN] [W3School]
[W3C] [W3C non-normative] [MDN] [W3School]
readonly
syntaksi: <input readonly[="readonly"] />
Asettaa kentän passiiviseen tilaan, sen arvoa ei pääse muokkaamaan (boolean-arvoinen, ts. jos attribuutti esitetään, arvo on true, pois jättäminen antaa arvoksi false).
esimerkki:
  <input  type="text" value="osa.3" readonly/>
[W3C] [W3C non-normative] [MDN] [W3School]
rel
syntaksi: <a rel= "void"|"alternate"|"author"|"bookmark"|"help"|"license"| "next"|"nofollow"|"noreferrer"|"prefetch"|"prev"|"search"|"tag">
Kuvaa tämän (viittaavan) dokumentin ja linkitetyn dokumentin (href) keskinäisen suhteen.
void suhdetta ei ole määritelty
alternate linkki vaihtoehtoiseen versioon dokumentista (esim. käännös)
author linkki dokumentin kirjoittajaan
bookmark kirjanmerkkinä käytettävä pysyvä osoite
help linkki ohjedokumenttiin
license linkki dokumentin copyright-tietoihin
next linkki seuraavaan dokumenttiin lineaarisesti etenevässä sivustossa
nofollow linkki sivulle, jota kirjoittaja ei ole itse määrittänyt (esim. maksetut linkit). Hakukoneet voivat jättää linkin seuraamatta.
noreferrer estää viittaajan tietojen välittämisen linkin viittaamalle sivulle
prefetch viitatun sivun noutaminen etukäteen välimuistiin olisi hyödyllistä, koska käyttäjä tulee todenäköisesti tarvitsemaan sitä
prev linkki edelliseen dokumenttiin lineaarisesti etenevässä sivustossa
search linkki sivun hakutyökaluun
stylesheet linkki sivun tyylitiedostoon
tag linkki tämän dokumentin avainsanaan (annetussa osoitteessa on määrittely tms. informaatiota ko. avainsanasta)
esimerkki:
  <a href="osoite" rel="next">Seuraava luku</a>
[W3C] [W3C non-normative] [MDN] [W3School]
required
syntaksi: <input required[="required"] />
Pakollisti täytettävä kenttä: kenttään on annettava arvo ennen kuin lomakkeen voi lähettää käsittelyyn (boolean-arvoinen, ts. jos attribuutti esitetään, arvo on true, pois jättäminen antaa arvoksi false).
esimerkki:
  <input type="text" name="puhno" required="required"/>
[W3C] [W3C non-normative] [MDN] [W3School]
rows
syntaksi: <textarea [cols="ei-negatiivinen luku"} [rows="ei-negatiivinen luku"]>
Kentän korkeus (rows) ja merkkeinä ja leveys (cols) riveinä. Jos jäteään määrittelemättä, oletus on 20 merkkiä ja 3 riviä.
esimerkki:
  <textarea rows="10" cols="50" />
[W3C] [W3C non-normative] [MDN] [W3School]
rowspan
syntaksi: <td rowspan="ei-negatiivinen-luku">
sulauttaa pyydetyn määrän sarakkeita yhteen (luku 0 sulauttaa loput rivin solut yhteen)
esimerkki:
<table>
	<tr>
		<th>Sarakeotsikko 1 </th>
		<th>Sarakeotsikko 2</th>
		<th>Sarakeotsikko 3</th>
	</tr>
	<tr>
		<td>Rivi 1, solu 1 </td>
		<td>Rivi 1, solu 2</td>
		<td>Rivi 1, solu 3</td>
	</tr>
	<tr>
		<td rowspan="2">Rivi 2 ja 3, solu 1 <br />(rowspan="2")</td>
		<td>Rivi 3, solu 2</td>
		<td>Rivi 3, solu 3</td>
	</tr>
	<tr>
		<td>Rivi 3, solu 2</td>
		<td>Rivi 3, solu 3</td>
	</tr>
</table>
[W3C] [W3C non-normative] [MDN] [W3School]
shape
syntaksi: <area shape="rect"|"circle"|"poly"|"default">
Kertoo määriteltävän kuvakartan alueen muodon, joka voi olla suorakaide, ympyrä, monikulmio tai, jos attribuutin arvo on "default", alue on koko kuva.
esimerkki:
  <area shape="circle" coords="205,18,13" href="kello.html" alt="Kello" />
[W3C] [W3C non-normative] [MDN] [W3School]
size
syntaksi: <input size="positiivinen luku" />
Kenttään näkyviin mahtuvien merkkien lukumäärä. Käytettävissä syötekomponenttien text, search, tel, url, email ja password yhteydessä.
esimerkki:
  <input type="text" name="snimi" maxlength="25" size="12" />
[W3C] [W3C non-normative] [MDN] [W3School]
spellcheck
syntaksi: <anytag spellcheck[="true"|""|false"]>
Määrää suoritetaanko elementin tekstisisällölle automaattinen oikeinkirjoitustarkistus. Selaintuki tälle attribuutille kuitenkin toistaiseksi (2013) heikkoa.
esimerkki:
<input type="text" name="paivitettava-kuvaus" spellcheck="true" />
[W3C] [W3C non-normative] [MDN] [W3school]
src
syntaksi: <img|input src="url-osoite" />
<img> Kertoo osoitteen, josta kuva noudetaan.
<input> Käytettävissä vain image-syötekomponentilla.
esimerkki:
  <img  src="img/kuvat.gif" alt="kuvan selitys" />
  <input  type="image" src="img/tallenna.gif" alt="tallenna" />
[W3C] [W3C non-normative] [MDN] [W3School]
srclang
syntaksi: <track srclang="language-subtag">
Määrittää tekstiraidan kielen.
esimerkki:
<video src="esimerkki.ogv">
   <track kind="captions" src="sampleCaptions.srt" srclang="en">
   <track kind="descriptions" src="sampleDesciptions.srt" srclang="en">
   <track kind="chapters" src="sampleChapters.srt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.srt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.srt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_fi.srt" srclang="fi">
</video>
[W3C] [W3C non-normative] [MDN] [W3School]
step
syntaksi: <input step="luku" />
Käytetään rajoittamaan hyväksyttäviä syötekentän arvoja, sekä luku-arvojen rajoittamiseen että ajan painoarvon määrittämiseen. Käytettävissä attribuuttien number, range, date, datetime, datetime-local, month, time ja week yhtyedessä.
esimerkki:
  <input type="number" step="5" />
[W3C] [W3C non-normative] [MDN] [W3School]
style
syntaksi: <anytag style="[CSS-sääntö;]*">
Attribuutin avulla voi elementin sisään kirjoittaa CSS-sääntöjä, jotka koskevat vain tätä elementtiä. Tämä kuitenkin rikkoo hyvää kooodaustapaa: HTML-dokumentti tulisi pitää erillään sen muotoiluun liittyvistä css-säännöistä. Muotoilusäännöt tulisi esittää erillisessä CSS-tiedostossa, niitä ei pitäisi löytyä *.html-dokumentista, eikä varsinkaan dokumentin runko-osasta. Joissain tilanteissa – esimerkiksi tilapäisesti kokeiltaessa CSS-sääntöjen toimintaa – tämä on kuitenkin näppärä mahdollisuus.
esimerkki:
  <h1 style="background-color:yellow; text-align:right">
    Tämä otsikko on oikealla
  </h1>
[W3C] [W3C non-normative] [MDN] [W3school]
tabindex
syntaksi: <anytab tabindex="luku">
Määrittää, että elementti voi saada fokuksen, ja sen avulla voi määrittää missä järjestyksessä elementit (esimerkiksi linkit tai lomakkeen kentät) saavat fokuksen kun niitä käydään näppäimistöltä sarkainselauksella läpi. Sarkaimella käydään elementit läpi lähtien tabindex-arvosta 1. Samalla tabindex-arvolla olevat elementit käydään läpi esiintymisjärjestyksessä. Negatiivinen tabindex-arvo tarkoittaa, että elementti voi saada fokuksen, mutta se ei ole mukana sarkainselaussekvenssissä. Jos tabindex-arvoksi annetaa 0, halutaan, että elementti voi saada fokuksen ja että se voidaan aktivoida sarkainselauksella, mutta selausjärjestys jätetään selaimen toteutettavaksi.
esimerkki:
  <p>
    Sivun <a href="kohde1.html" tabindex="2">linkkien</a> 
    selausjärjestyksen voi halutessaan määrätä itse. Esimerkiksi 
    nyt tähän <a href="kohde2.html" tabindex="1">linkkiin</a> 
    tullaan ensin.
  </p>
[W3C] [W3C non-normative] [MDN] [W3school]
target
syntaksi: <a| target="_blank"|"_self"|"_parent"|"_top">
<a>: Määrittelee missä linkin osoittama sisältö avataan.
<form>: Määrittää missä lomakkeen aktivioman cgi-ohjelman palauttama HTML-dokumentti näytetään (uudessa välilehdessä, samassa ikkunassa, vanhempielementin kehyksessä, dokumentin runko-elementissä.)

Attribuutille annettavien arvojen merkitykset ovat seuraavat:
_blank: uuteen selaimeen tai välilehteen, esimerkki:
Aukaise <a href="osoite" target="_blank">linkki</a> uuteen välilehteen.
<form target ="_blank">
  ... lomakkeen määritykset
</form>
_self: samaan selaimen osaan jossa linkki itse sijaitsee, esimerkki:
Aukaise <a href="osoite" target="_self">linkki</a> tähän samaan ikkunaan.
<form target ="_self">
  ... lomakkeen määritykset
</form>
_parent: samaan selaimen osaan missä äiti-elementti sijaitsee, esimerkki:
Aukaise <a href="osoite" target="_parent">linkki</a> äitielementtiin.
<form target ="_parent">
  ... lomakkeen määritykset
</form>
_top: jos linkki iframe:n sisällä, ylimmälle tasolle, esimerkki:
Aukaise <a href="osoite" target="_top">linkki</a> koko ikkunaan.
<form target ="_top">
  ... lomakkeen määritykset
</form>
[W3C] [W3C non-normative] [MDN] [W3School] (<a>)
[W3C] [W3C non-normative] [MDN] [W3School] (<form>)
title
syntaksi: <anytag title="merkkijono">
Liittää elementtiin tooltip-tyyppistä lisäinformaatiota. Tulee yleensä näkyviin hiiren kursorin viivähtäessä elementin päällä (mouse-over). Kannattaa pitää mielessä, että kaikissa käyttötilanteissa ei ole hiiren kursoria (tabletit, puhelimet), joten tämän attribuutin välittämään tieto ei saa olla sivun käytön kannalta olennaista tietoa. <link>- ja <style>-elementeille annettuna title-attribuutin merkitys on erityinen.
esimerkki:
  <p  title="Tähän kappaleeseen liittyvä huomautus ">
    Huomautukset voivat olla vain rivin mittaisia, koska
    merkkijonoon ei voi sisällyttää rivinvaihtoja.
  </p>
[W3C] [W3C non-normative] [MDN] [W3school]
translate
syntaksi: <anytag translate="yes"|"no">
Määrittää, käännetäänkö elementin attribuuttien arvot ja elementin ja sen lasten tekstisisältö, kun sivusta tehdään lokasoitu versio.
[W3C] [W3C non-normative]
type
Attribuutti on määritelty <a>, <input>, <button> ja <ol>-elementeille:

syntaksi (1): <a type="mime-tyyppi">
Kertoo linkattavan dokumentin esitysmuodon, ns. MIME-tyypin. Tällä hetkellä tieto on tiedotuksenomainen, mutta tulevaisuudessa sitä saatetaan käyttää eri tavoin; selain saattaisi esimerkiksi lisätä pienen kaiutinikonin linkkiin, jonka mime-tyyppin on audio/wav. MIME-tyypit on esitelty IANAn sivuilla.

syntaksi (2): <input type="text|password|checkbox|radio|button|submit|reset|file|hidden|image|datetime|datetime-local|date|month|time|week|number|range|email|url|search|tel|color">
Määrittää <input>-elementin yhteydessä, millainen syötekomponentti lomakkeelle luodaan.

syntaksi (3): <button type="submit|reset|button">
Määrittää <button>-elementillä painikkeen tyypin. Jos painikkeen tyyppi on submit, sen napsautus lähettää lomakkeen tiedot käsittelyyn. Jos arvo on reset, painikkeen napsautus poistaa käyttäjän tekemät komponenttien muokkaukset ja palauttaa lomakkeen alkuarvot.

syntaksi (4): <ol type="1"|"a"|"A"|"i"|"I">
Määrittää järjestetyssä <ol>-listassa käytettävän luettelomerkin. Oletuksena on arabialainen numerointi ("1"), muut mahdolliset ovat isot tai pienet aakkoset ("a" tai "A") ja isot tai pienet roomalaiset numerot ("i" tai "I").

esimerkki:
.. asiaa <a href="url" type="image/png">havainnollistava kuva</a> osoittaa..
  <input type="button" />
  <button type="button">
	<img src="" alt="Painike">
  </button>
  <ol type="A">
	<li>listan 1 alkio (alussa A.)</li>
	<li>listan 2 alkio (alussa B.)</li>
	<li>listan 3 alkio (alussa C.)</li>
	<li>listan 4 alkio (alussa D.)</li>
  </button>
[W3C] [W3C non-normative] [MDN] [W3School] (<a>)
[W3C] [W3C non-normative] [MDN] [W3School] (<input>)
[W3C] [W3C non-normative] [MDN] [W3School] (<button>)
[W3C] [W3C non-normative] [MDN] [W3School] (<ol>)
value
syntaksi: <input value="merkkijono">
Kentästä oletuksena lähetettävä arvo, ellei käyttäjä muokkaa arvoa ennen lähetystä. Kun attribuuttia käytetään syötekomponenttien button, reset ja submit yhtyedessä, merkitys on erilainen. Niille value-attribuutin arvo kuvaa painikkeeseen kirjoitettavan tekstin. Visuaalisilla progress ja meter-elementeillä value-arvo määrää palkkiin piirrettävän täyttöasteen. esimerkki:
  <input type="submit" value="Lähetä">
[W3C] [W3C non-normative] [MDN] [W3School]
width
syntaksi: <img|video|input width="ei-negatiivinen luku">
Määrittelee elementin (kuva, video, input-elementti) leveyden pikseleissä. <input>-elementillä voidaan käyttää syötetyypin submit yhteydessä (kuvan avulla muodostetun syötekomponentin leveys pikseleissä).
esimerkki:
  <img src="logo.gif" alt="Yrityksen logo" width="42">
  <video width="320" height="240" controls>
    <source src="malli.mp4" type="video/mp4">
    <source src="malli.ogg" type="video/ogg">
    Selaimesi ei pysty näyttämään videota, pahoittelemme.
  </video>
  <input type="image" widtht="50" />
  <input type="image" src="laheta.gif" alt="Lähetä" width="36" height="18">
[W3C] [W3C non-normative] [MDN] [W3School] (<img>)
[W3C] [W3C non-normative] [MDN] [W3School] (<video>)
[W3C] [W3C non-normative] [MDN] [W3School] (<input>)attr_ATRTAG
wrap
syntaksi: <textarea wrap="hard|soft"">
Jos arvo on "hard", kentästä lähetettävä teksti lähetetään pätkittyinä (newline-merkkien avulla) riveiksi. Jos arvo on "soft" newline-merkkejä ei lisätä.
esimerkki:
  <textarea name="osoite" wrap="hard">
[W3C] [W3C non-normative] [MDN] [W3School]

Takaisin ylös

Elementtien määrittelyt

<a> Hyperlinkki (linkeistä tarkemmin kohdassa 3.6)
sallittu sisältö sama kuin äidillään (transparent)
sallitut attribuutit  globaalit attribuutit   href   target   hreflang   rel   media   type 
sallittu äiti-elementti elementti, joka voi saada flow- tai phrasing-sisältöä
esimerkki:
<p>
  Sivujen tekijän on hyvä tietää mitä selaimia nykyisin käytetään.   
  Eräs selkeä tilasto selainten niin nykyisestä kuin menneestäkin   
  käytöstä löytyy <a href=
  "http://www.w3schools.com/browsers/browsers_stats.asp" target="_blank">W3schoolin 
  sivuilta</a>
</p>
[W3C] [W3C non-normative] [MDN] [W3School]


<abbr> Merkkaa lyhenteen tai akronyymin. Jos elementillä on title-attribuutti, sen tulee sisältää lyhenteen selitys.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
   Internet tarjoaa infrastruktuurin 
   <abbr title="World Wide Web">WWW</abbr>:lle.
[W3C] [W3C non-normative] [MDN] [W3School]


<address> Sisältää yhteystiedot; jos elementin äiti on body-elementti, yhteystiedot ovat koko sivua koskevat yhteystiedot.
sallittu sisältö flow-sisältöä, joka ei ole heading- tai sectioning-sisältöä, lisäksi ei <header>-, <footer>- eikä <address>-elementtiä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti Elementti, joka voi saada flow-sisältöa
esimerkki:
 <address>
    &copy;Aulikki Hyrskykari<br />
    Informaatiotieteiden yksikkö, Tietojenkäsittelytieteet<br />
    Tampereen yliopisto<br />
    email: aulikki.hyrskykari(at)uta.fi
  </address>
[W3C] [W3C non-normative] [MDN] [W3School]


<area> Kuvakartan alueiden määrittely; käytetään yhdessä <map>-elementin kanssa.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   alt   coords   shape   href   hreflang   target   rel   media   type 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
<img src="img/pinnin-aula.jpg" alt="Pinnin aula" usemap="#kello-ja-kasvi" />
<map name="kello-ja-kasvi">
    <area shape="circle" coords="205,18,13" href="kello.html" alt="Kello" />
    <area shape="rect" coords="64,67,95,95" href="kasvi.html" alt="Viherkasvi" />
</map>
[W3C] [W3C non-normative] [MDN] [W3School]


<article> Osa dokumenttia, joka muodostaa oman kokonaisuutensa; sellainen osa, jonka voisi ajatella itsenäisesti julkaistavaksi. Tälläinen voisi olla esimerkiksi lehtiartikkeli tai blogi.
sallittu sisältö flow-sisältöä, jota saattaa edeltää yksi tai useampia <style>-elementtejä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä, ei kuitenkaan <address>-elementti
esimerkki:
  <article>
    <h2>Kakkosluvun otsikko</h2>
    <p>
      Tämän otsikon alle kirjoitettu teksti muodostaa selkeästi oman 
       kokonaisuutensa, että sen voisi vaikka "ripata" jonnekin muualle.
    </p>
  </article>
[W3C] [W3C non-normative] [MDN] [W3School]


<aside> Sivulla omaan lokeroonsa kirjoitettua sisältö. Usein tälläisia oheissisältöjä ovat "hyvä-tietää" tai "taustafaktoja"-tyyppiset sivuhuomautuslokerot ("tangentially related" informaatiota).
sallittu sisältö flow-sisältö, jota voi edeltää yksi tai useampia <style>-elementtenä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <aside>
    <h1>FAKTA-BOKSI</h1>
    <p>
       Tiesitkö, että ...
    </p>
  </aside>
[W3C] [W3C non-normative] [MDN] [W3School]


<audio> Soittaa äänitiedoston.
sallittu sisältö Läpinäkyvä, ts. äidiltä peritty sisältömalli, kuitenkin niin, että elementin sisältö rakentuu seuraavasti. Sisältönä tulee olla
(1) joko  src -attribuutti tai yksi tai useampia <source>-elementtejä,
(2) jota seuraa nolla tai useampia <track>-elementtejä, sekä mahdollisesti flow tai phrasing-sisältöä (ei kuitenkaan sisäkkäistä <video>-elementtiä tai <audio>-elementtiä).
sallitut attribuutit  globaalit attribuutit   src   preload   autoplay   controls   muted   loop   mediagroup 
sallittu äiti-elementti mikä tahansa elementti, jolle joko phrasing- tai flow-sisältö on sallittua
[W3C] [W3C non-normative] [MDN] [W3School]


<b> Merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on lihavoitu teksti. Testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia; tällainen tekstinosa voisi olla esimerkiksi hakusana artikkelissa, dokumentin abstrakti tai henkilön nimi lehtiartikkelissa.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Eurooppaministeri <b>Alexander Stubbin</b> mukaan kyproslaisten on 
itse löydettävä ratkaisu, joka täyttää EU:n, Euroopan keskuspankin ja 
Kansainvälisen valuuttarahaston IMF:n ehdot lainapaketin saamiseksi.
[W3C] [W3C non-normative] [MDN] [W3School]


<base> Oletuspolku dokumentissa viitatuille linkeille. Dokumentissa saa olla vain yksi <base>-elementti.
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit  globaalit attribuutit ,  href ,  target 
sallittu äiti-elementti <head>
esimerkki:
  <base href="http://www.sis.uta.fi/~jwt/13/" />
[W3C] [W3C non-normative] [MDN] [W3School]


<bdi> Merkataan tekstinosa, joka on kaksisuuntaista tekstinkirjoitussuunnan (länsimainen/arabia). Suunnan voi määrätä dir-attribuutilla. Normaalisti attribuutin oletusasrvo on ltr, siitä poiketen tässä yhteydessä oletusarvo on auto, ts. attribuutin puuttuessa suunta päätellään tekstiosan sisällön perusteella automaattisesti.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   dir 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Pääsiäinen arabiaksi on <bdi>لفصح</bdi> ja pääsiäisloma
<bdi>عيد الفصح</bdi>.
[W3C] [W3C non-normative] [MDN] [W3School]


<bdo> Muuttaa (käyttäen  dir -attribuuttia) tekstin oletuskirjoitussuunnan halutuksi.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   dir 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Uskotko, että "eno Kimmo, pese se pommikone" on
panlindromi? Kokeillaan. Kirjoitettuna oikealta vasemmalle se on:
<bdo dir="rtl">eno&nbsp;Kimmo,&nbsp;pese&nbsp;se&nbsp;pommikone</bdo>
[W3C] [W3C non-normative] [MDN] [W3School]


<blockquote> Muusta lähteestä lainattu tekstisisältö.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit   cite 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <blockquote cite=
   "http://www.w3.org/TR/html5/grouping-content.html#attr-blockquote-cite">
    If the cite attribute is present, it must be a valid URL potentially 
    surrounded by spaces.
  </blockquote>
[W3C] [W3C non-normative] [MDN] [W3School]


<body> Elementti on dokumentin runko-osa; se sisältää www-sivulle sisältöä tuottavat elementit.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <html>-elementti


<br> Edustaa rivinvaihtoa.
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing sisältöä
esimerkki:
  <p>
    Tästä tulostuu selaimessa <br /> kaksi riviä.
  </p>
[W3C] [W3C non-normative] [MDN] [W3School]


<button> Elementti erilaisten painikkeenomaisesti toimivien komponenttien toteutukseen.
sallittu sisältö Phrasing-sisältöä.
sallitut attribuutit globaalit attribuutit , autofocus disabled form formaction formenctype formmethod formnovalidate formtarget name type value
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
  <button name="kentan-id">Nimesi: </button>
[W3C] [W3C non-normative] [MDN] [W3School]


<canvas> Luo alueen, "taustakankaan" jonka sisältönä voi olla vaikkapa vain tekstiä, mutta sisällön voi myös luoda skriptikielellä. Alueeseen voi piirtää, tuoda grafiikkaa, tai vaikkapa ohjemoida vuorovaikutteisia pelejä.
sallittu sisältö sama kuin äidillään (transparent)
sallitut attribuutit globaalit attribuutit width height
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  <canvas id="canvas" width="300" height="300">
  Sorry, your browser doesn't support the <canvas> element.
  </canvas>
[W3C] [W3C non-normative] [MDN] [W3School]


<caption> Merkkaa tekstinosan taulukon (äiti-elementtinsä) otsikoksi. <caption>-elementin tulee olla äitinsä ensimmäinen lapsi (ts. ennen talukon muita elementtejä).
sallittu sisältö flow-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <table>
esimerkki:
<p>Seuraavalla talukolla on otsikko</p>
<table>
  <caption>Taulukon otsikko</caption>
  <tr>
    <td>Solu11</td> <td>Solu12</td> <td>Solu13</td>
  </tr>
  <tr>
    <td>Solu21</td> <td>Solu22</td> <td>Solu23</td>
  </tr>
</table>
[W3C] [W3C non-normative] [MDN] [W3School]


<cite> Viittaus johonkin teokseen, esimerkiksi kirjan, artikkelin, runon, musiikkiteoksen, TV ohjelman, elokuvan, teatteriesityksen, veistoksen tai taulun nimeen. Kyseessä ei tarvitse olla teoksen esittely, myös ohimennen mainittu teoksen nimi voidaan antaa cite-elementissä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
<p>
    Pentti Haanpään klassikossa <cite>Noitaympyrä</cite> kuvataan nälkäisen miehen
    hysteeristä hiihtoa kuutamoyössä hirmupakkasessa läpi Kairanmaan korpien.
</p>
[W3C] [W3C non-normative] [MDN] [W3School]


<code> Merkkaa tekstinosan ohjelmakoodiksi.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Otsikko kirjoitetaan <code>h1</code>-elementin sisään seuraavasti:<br />
<code>&lt;h1>Pääotsikko&lt;/h1></code>
[W3C] [W3C non-normative] [MDN] [W3School]


<dd> <dl>-listassa kuvaus tai arvo määriteltävälle termille tai käsitteelle.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <dl>-elementti
esimerkki:
  <dl>
    <dt>Termi A</dt>
      <dd>Tässä selitys termille A</dd>
    <dt>Termi B</dt>
      <dd>Tässä selitys termille B</dd>
  </dl> 
[W3C] [W3C non-normative] [MDN] [W3School]


<dfn> Merkkaa kohdan, jossa termi määritellään.
sallittu sisältö phrasing-sisältö, ei kuitenkaan sisäkkäistä <dfn>-elementtiä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
<p> 
  <dfn id="Internet-maaritelma">Internet</dfn> on maailmanlaajuinen, 
  palvelinkoneiden ympärille muodostettujen verkkojen yhteenliittymä,
  "verkkojen verkko".
</p>
[W3C] [W3C non-normative] [MDN] [W3School]


<dl> Määrittelylista (description list), ts. lista, jossa annetaan kuvauksia termeille, käsitteille, tms.
sallittu sisältö nolla tai useampia <dt>-elementtiä, jota seuraa yksi tai useampia <dd>-elementtiä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <dl>
    <dt>Termi A</dt>
      <dd>Tässä selitys termille A</dd>
    <dt>Termi B</dt>
      <dd>Tässä selitys termille B</dd>
  </dl> 
[W3C] [W3C non-normative] [MDN] [W3School]


<div> Geneerinen flow-elementti, joka kapseloi lohkon, jolle sinällään ei ole annettu merkitystä. Käytetään apuna merkitsemään lohko, johon halutaan vaikuttaa CSS-säännöillä. Lohkotason elementti, vastaava elementti tekstitasolla on <span>.
sallittu sisältö flow-sisältö, jota voi edeltää yksi tai useampia <style>
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <div id="container">
	<p>
	   Täällä div:in sisällä voi olla mitä
	   vaan sisältöä, kappaleita, taulukoita, listoja,..
	   Tarkoituksena on vain kapseloida tämä osa
	   dokumenttia
	</p>
  </div>
[W3C] [W3C non-normative] [MDN] [W3School]


<dt> <dl>-listan termi, käsite, tms.
sallittu sisältö flow-sisältöä, ei kuitenkaan heading- tai sectioning-sisältöä, eikä myöskään <header>- tai <footer>-elementtejä.
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <dl>-elementti
esimerkki:
  <dl>
    <dt>Termi A</dt>
      <dd>Tässä selitys termille A</dd>
    <dt>Termi B</dt>
      <dd>Tässä selitys termille B</dd>
  </dl> 
[W3C] [W3C non-normative] [MDN] [W3School]


<em> Painotettu tekstinosa, kyse on kielellisestä painotuksesta, ei tekstinosan tärkeydestä, jonka merkintään tulisi käyttää elementtiä <strong>)
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  Ensi kesänä menen Ruotsiin <em>töihin</em>.
[W3C] [W3C non-normative] [MDN] [W3School]


<fieldset> Asettaa kentät lomakkeella omaksi kehystetyksi ryhmäkseen, ryhmälle voi antaa otsikon <legend>-elementin avulla.
sallittu sisältö <legend>-elementti, jota voi seurata mitä tahansa flow-sisältöä
sallitut attribuutit globaalit attribuutit, name, disabled, form
sallittu äiti-elementti elementti, joka voi voida flow-sisältöä
esim. (vrt. esimerkkilomake)
<fieldset>
  <legend>Tekstiä ja salasana</legend>
  <label for="kja-tunnus">Tunnus:</label>
  <input id="kja-tunnus" type="text" name="kja-tunnus"size="22" 
         value="Anna käyttäjätunnuksesi" />
  <label for="password">Salasana:</label>
  <input id="password"  type="password" name="password"size="15"  />
</fieldset>
[W3C] [W3C non-normative] [MDN] [W3School]


<figcaption> <figure>-elementin seliteteksti.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <figure>-elementti
esimerkki:
  <figure>
      <img src="kuva.png" alt="Tuotteen x kuva">
      <figcaption>Tuotteen x kuvaus</figcaption>
  </figure>
[W3C] [W3C non-normative] [MDN] [W3School]


<col> määrittää sarakkeet <colgroup>-elementin sisällä.
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit  globaalit attribuutit   span 
sallittu äiti-elementti sellainen <colgroup>, jolla ei ole span-attribuuttia.
esimerkki (sarakkeet merkattu col-elementtien avulla):
<style type="text/css">
   .maa {background-color:lime;}
   .vakiluku {background-color:yellow;}
   .kieli {background-color:pink;}
</style>
.
. 
<p>Sarakkeen korostus col-elementtiä käyttäen:</p>
<table >
  <colgroup>
    <col />
    <col class="maa" />
    <col class="vakiluku" />
    <col class="kieli" />
  </colgroup>
  <tbody><tr>
      <th></th>
      <th>Pääkaupunki</th>
      <th>Väkiluku</th>
      <th>Kieli</th>
    </tr>
    <tr>
      <td>USA</td>
      <td>Washington D.C.</td>
      <td>309 miljoonaa</td>
      <td>englanti</td>
    </tr>
    <tr>
      <td>Suomi</td>
      <td>Helsinki</td>
      <td>5,5 million</td>
      <td>suomi, ruotsi, saami</td>
    </tr>
  </tbody>
</table>

vrt. vastaava sivu

[W3C] [W3C non-normative] [MDN] [W3School]


<colgroup> Määrittää taulukosta yhden tai useamman sarakkeen, jolloin muotoilun voi kohdistaa vertikaalisessa suunnassa, sarakkeen soluille.
sallittu sisältö yksi tai useampia <col>-elementtejä tai vaihtoehtoisesti span-attribuutti (jälkimmäisessä tilanteessa <colgroup>-elementillä ei saa olla lapsia)
sallitut attribuutit  globaalit attribuutit   span 
sallittu äiti-elementti <table> - mahdollisen <caption> -elementin jälkeen, mutta ennen kaikkia muita taulukon sisällön määrittäviä elementtejä.
esimerkki (neljästä sarakkeesta kolmas on merkattu korosta-luokkaan kuuluvaksi):
<style type="text/css">
   .korosta-vakiluku {background-color:yellow;}
</style>
.
. 
<p>Sarakkeen korostus:</p>
<table >
  <colgroup span="2"></colgroup>
  <colgroup class="korosta-vakiluku"></colgroup>
  <tbody><tr>
      <th></th>
      <th>Pääkaupunki</th>
      <th>Väkiluku</th>
      <th>Kieli</th>
    </tr>
    <tr>
      <td>USA</td>
      <td>Washington D.C.</td>
      <td>309 miljoonaa</td>
      <td>englanti</td>
    </tr>
    <tr>
      <td>Suomi</td>
      <td>Helsinki</td>
      <td>5,5 million</td>
      <td>suomi, ruotsi, saami</td>
    </tr>
  </tbody>
</table>

vrt. vastaava sivu

[W3C] [W3C non-normative] [MDN] [W3School]


<datalist> Elementin avulla voi tekstityyppiseen <input>-syotekstikenttään liittää list-attribuuttia käyttäen ennakkoon määritellyn listan arvoja, joita tarjotaan automaattisena täydennyksenä kun kenttään kirjoitetaan sisältöä.
sallittu sisältö nolla tai useampia <option-elementtejä
sallitut attribuutit globaalit attribuutit
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esim.
<input type="text" list="isotkaupungit" name="kotikaupunki">
<datalist id="isotkaupungit">
   <option value="Tampere">
   <option value="Helsinki">
   <option value="Oulu">
   <option value="Turku">
   <option value="Rovaniemi">
</datalist>
[W3C] [W3C non-normative] [MDN] [W3School]


<figure> Elementti, jossa on itsenäinen sisältö niin että siihen viitataan tyypillisesti omana, elementtivirrasta irrallisena, yksikkönään ja se voidaan siirtää päävirrasta sivuun vaikuttamatta dokumentin merkitykseen. Tällainen elementti voisi olla esimerkiksi kuva, kaavio tai vaikkapa koodilistaus.
sallittu sisältö flow-sisältöä, jota saattaa seurata tai edeltää <figcaption>-elementti
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <figure>
      <img src="kuva.png" alt="Tuotteen x kuva">
      <figcaption>Tuotteen x kuvaus</figcaption>
  </figure>
[W3C] [W3C non-normative] [MDN] [W3School]




<form> Määrittelee lomakkeen, joka sisältää kenttiä tietojen syöttämiseen palvelimelle tallennetun ohjelman käsiteltäväksi.
sallittu sisältö flow sisältö; ei kuitenkaan sisäkkäisiä <form>-elementtejä;
erityisesti: lomakkeen kentät määritellään elementtien <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label> avulla
sallitut attribuutit  globaalit attribuutit   accept-charset   action   autocomplete   enctype   method   name   novalidate   target 
sallittu äiti-elementti Mikä tahansa elementti, joka voi saada flow-sisältöä
[W3C] [W3C non-normative] [MDN] [W3School]

Lomake-elementin attribuuttien avulla voidaan määritella lomakkeen ominaisuuksia seuraavasti.

<h1>... <h6> Otsikko tasolla 1... 6. Selainten html-tulkit saattavat käyttää otsikoita automaattisen sisällysluettelon luomiseen sivusta.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä, <hgroup>-elementti
esimerkki:
  <h1>Ensimmäisen tason otsikko</h1>
  <p>Kappale.... </p>
[W3C] [W3C non-normative] [MDN] [W3School]


<hgroup> Elementin avulla ryhmitellään yhteen <h1>.. <h6> elementtejä silloin kun otsikko koostuu usean tason otsikosta.
Elementti hgroup poistettiin HTML5-määrittelystä
sallittu sisältö yksi tai useampi <hn>-elementti
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <hgroup id="harj_02" class="harjoituksen-otsikko">
    <h1 class="harjoituksen-otsikko">Harjoitus 2</h1>
    <h2>HTML&CSS, Dao of Web Desing, peruselementtejä</h2>
  </hgroup>
[W3C] [W3C non-normative] [MDN] [W3School]


<head> Dokumentin otsikko-osa määrittää dokumentiin liittyvän metainformaation (metadata), kuten esimerkiksi osoitteet joista sivuun liitettävät tyylisäännöt ja skriptit löytyvät.
sallittu sisältö yksi <title>-elementti (otsikko-osan ensimmäisenä elementtinä), mahdollinen <base>-elementti, sekä nolla tai useampia seuraavista metadata-elementeistä: <command>, <link>, <meta>, <noscript>, <script>, <style>
sallitut attribuutit globaalit attribuutit
sallittu äiti-elementti dokumentin juurielementti <html>
[W3C] [W3C non-normative] [MDN] [W3School]


<header> Alkavan osan alkunimiö, ts. elementin avulla voidaan sitoa osan alussa osan sisältöön johdattelevia tietoja yhtenäiseksi alkunimiöksi.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <article>
    <header>
      <h1>Hard Trance is My Life</h1>
      <p>By DJ Steve Hill and Technikal</p>
    </header>
    <p>The album with the amusing punctuation has red artwork.</p>
  </article>
[W3C] [W3C non-normative] [MDN] [W3School]


<html> dokumentin juurielementti, joka sisältää sekä dokumentin otsikko-osan, että sisältö-osan.
sallittu sisältö yksi <head>-elementti ja yksi <body>-elementti
sallitut attribuutit globaalit attribuutit, manifest
sallittu äiti-elementti ei äitiä
[W3C] [W3C non-normative] [MDN] [W3School]


<hr> Sisällön temaattinen vaihdos, kappaletasolla. Vaikka monet selaimet renderöivät tämän horisontaaliseksi viivaksi, merkitys temaattisena vaihdoksena on olennaista, esitysmuoto voi tietysti olla jotain muutakin.
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
        ...
    </section>  
    <hr>
    <section>
        Dokumentin sektiovaihdon kohdalla usein temaattisen  
        sisällönvaihdoksen merkkaus voi olla paikallaan.
        ....
[W3C] [W3C non-normative] [MDN] [W3School]


<i> Merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on kursivoitu teksti. Testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia vaan esimerkiksi mielenalan, tunnelman tai muun merkityksen takia esimerkiksi ajatus, sananlasku tai laivan nimi.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Sanalaskukin sen sanoo: <i>Sitä saa mitä tilaa</i>.
[W3C] [W3C non-normative] [MDN] [W3School]


<img> Elementti tuo sivulle kuvan src-attribuutin määrittelemästa tiedostosta
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   src   alt   height   width   usemap   ismap 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
 <img src="img/kuva.jpg" alt="seliteteksti" />
[W3C] [W3C non-normative] [MDN] [W3School]


<input> Yleinen lomakkeen syötekenttä, type attribuutti määrittelee tarkemmin millaisesta syötekentästä on kyse.
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit globaalit attribuutit, type, accept, alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, value, width,
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä.
esim.
  <input type="text" id="sivu-id" name="palvelin-id" value="oletusarvo" />
[W3C] [W3C non-normative] [MDN] [W3School]


<kbd> Merkkaa tekstinosan joka kuvaa käyttäjän antamaa syötettä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Selaimissa oikotie toimii yleensä näppäinkomennolla <kbd>alt+shift+x</kbd> 
tai <kbd>alt+x</kbd>.
[W3C] [W3C non-normative] [MDN] [W3School]


<keygen> Elementin avulla luodaan salausavainpari, jota käytetään salaamaan tiedot jotka kulkevat palvelimen ja selaimen välillä.
sallittu sisältö ei sisältöä
sallitut attribuutit globaalit attribuutit, autofocus, challenge, disabled, form, keytype, name
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esim.
<form action="kasittelija.php" method="get">
    Pankkitilin numero: <input type="text" name="tilinro" />
    Salaus: <keygen name="salaus" />
    <input type="submit" value="Lähetä" />
</form>
[W3C] [W3C non-normative] [MDN] [W3School]


<label> Antaa kentälle nimikkeen.
sallittu sisältö Flow- tai phrasing-content.
sallitut attribuutit globaalit attribuutit, for, form
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä.
esim.
<label for="enimi">Etunimi: </label>
<input type="text" id="enimi" />
Ks. myös esimerkki käytöstä edellä <fieldset>-elementin esittelyssä.
[W3C] [W3C non-normative] [MDN] [W3School]


<legend> Antaa lomakkeella otsikon <fieldset>-kenttäryhmälle.
sallittu sisältö mitä tahansa phrasing-sisältöä
sallitut attribuutit ei sallittuja attribuutteja
sallittu äiti-elementti <fieldset>-elementti
esimerkki käytöstä edellä <fieldset>-elementin esittelyssä.
[W3C] [W3C non-normative] [MDN] [W3School]

Verkkosivulla näkyvälle kentälle halutaan usein antaa nimiö (esim. esimerkkilomakkeen Tunnus:). Nimikkeen antaminen tapahtuu <label> elementin avulla ja sen sidonta kenttään for attribuutin avulla.



<li> Listan rivi.
sallittu sisältö flow-sisältö
sallitut attribuutit  globaalit attribuutit   value 
sallittu äiti-elementti <ul> <ol> <menu>
esimerkki:
  <ol>
    <li value="100">lista alkaa sadasta</li>
    <li>satayksi</li>
    <li>satakaksi</li>
    <li>satakolme</li>  
  </ol>
[W3C] [W3C non-normative] [MDN] [W3School]




<map> Sisältää <area>-elementit, jotka määrittävät kuvaan hiiren napsautuksella aktioivissa olevat. Kuvan ja kuvakartan yhdistäminen tapahtuu antamalla usemap-attribuutille kuvakartan nimi name arvoksi.
sallittu sisältö äidiltä peritty sisältömalli
sallitut attribuutit  globaalit attribuutit   name 
sallittu äiti-elementti mikä tahansa elementti, jolle joko phrasing- tai flow-sisältö on sallittua
esimerkki:
<img src="img/pinnin-aula.jpg" alt="Pinnin aula" usemap="#kello-ja-kasvi" />
<map name="kello-ja-kasvi">
   <area shape="circle" coords="205,18,13" href="kello.html" alt="Kello" />
   <area shape="rect" coords="64,67,95,95" href="kasvi.html" alt="Kasvi" />
</map>
[W3C] [W3C non-normative] [MDN] [W3School]


<mark> Merkkaa tekstinosan, joka merkitään tai korostetaan viittaustarkoituksessa, ts. sen oletetaan olevan tärkeätä jossain toisessa kontekstissa.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Tätä elementtiä käytetään tekstinosan <mark>korostamiseen</mark>.
[W3C] [W3C non-normative] [MDN] [W3School]


<meta> Tämän elementin avulla voidaan määritellä sellaisia metatietoja, joita muiden meta-elementtien (<title> <base> <link> <script> <style>) avulla ei saa määrittellyksi. Elementin avulla voidaan mm. määritellä käytetty merkistökoodaus, antaa avainsanoja hakukoneille, kertoa dokumentin tekijän nimi, kuvailla dokumentin sisältö tai määrätä sivulle virkistystaajuus (viimeisen käyttöä pitäisi välttää, koska se on WAI-suositusten vastainen toiminta).
sallittu sisältö ei sisältöä (tyhjä elementti)
sallitut attribuutit  globaalit attribuutit   name   http-equiv   content   charset 
sallittu äiti-elementti <head>, poikkeus: jos elementillä on  http-equiv -attribuutti, äiti voi olla myös <noscript>
esimerkki:
  <meta charset="utf-8">
 
  <!-- lataa 2 sekunnin kuluttua toinen sivu -->
  <meta http-equiv="refresh" content="2; url=http://www.uta.fi">
[W3C] [W3C non-normative] [MDN] [W3School]


<meter> Piirtää horisontaalisen palkin, jolla voi visualisoida suhteellista määrää. Esimerkiksi arvo 0.5 piirtää puoleen väliin täytetyn palkin.
sallittu sisältö phrasing sisältö
sallitut attribuutit globaalit attribuutit, value, min, max, low, high, optimum
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esim. kaksi palkkia, ensimmäinen täytettynä 13- ja toinen 75-prosenttisesti
Mittari1: <meter value="2013" min="2000" max="2100" ></meter>
Mittari2: <meter value="0.75"></meter>
Mittari1: meter-1 Mittari2: meter-2
[W3C] [W3C non-normative] [MDN] [W3School]

Vaikka näitä syotekomponentteja käytetään tyypillisesti lomakkeiden sisällä, niitä voi myös käyttää sivulla ilman <form> elementtiä.



<ol> Järjestetty lista, ts. lista, jonka rivien järjestyksellä on merkitystä (rivien järjestyksen vaihtaminen muuttaisi listan merkitystä).
sallittu sisältö nolla tai useampia <li>-elementtejä
sallitut attribuutit  globaalit attribuutit   reversed   start   type 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
<ol start="5">
  <li>Listan eka rivi (alussa 5.)</li>
  <li>Listan toka rivi (alussa 6.) <!-- ei suljeta   -->
    <ol type="I" start="10" reversed> <!-- roomalaiset   -->
      <li>alilistan eka rivi (alussa X)</li>
      <li>alilistan toka rivi (alussa IX)</li>
      <li>alilistan kolmas rivi (alussa VIII)</li>
    </ol>
  </li>                     <!-- toka rivi (6.)suljetaan täällä -->
  <li>kolmas rivi, edessä numero 7</li>
</ol>
[W3C] [W3C non-normative] [MDN] [W3School]


<option> Elementin avulla määritellään valintalistan, valintaruudun tai radiopainikkeen vaihtoehdot.
sallittu sisältö tekstiä
sallitut attribuutit globaalit attribuutit, label, selected, value
sallittu äiti-elementti <select-, <optgroup>- tai <datalist>-elementti
esimerkki käytöstä edellä <select>-elementin esittelyssä
[W3C] [W3C non-normative] [MDN] [W3School]


<optgroup> Ryhmittelee vaihtoehtoja valintalistassa.
sallittu sisältö nolla tai useampia <option-elementtejä
sallitut attribuutit globaalit attribuutit, disabled, label
sallittu äiti-elementti <select-elementti
esim.
<form action="kasittelija.php">
  <select  id="kirja" name="on-lukenut" multiple="multiple">
    <optgroup label="Sofi Oksanen">
      <option>Puhdistus</option>
      <option>Kun kyyhkyset katosivat</option>
    </optgroup>
    <optgroup label="Arto Paasilinna">
      <option>Aatemi ja Eeva</option>
      <option>Jäniksen vuosi</option>
      <option>Kylmät hermot, kuuma veri</option>
    </optgroup>
  </select>
<form>
[W3C] [W3C non-normative] [MDN] [W3School]


<output> Vastaavasti kuin <input>-elementtiä käytetään tiedon tuomiseen verkkosivun lomakkeelta käsittelyyn, tulisi <output>-elementtiä käyttää ohjelmassa tuotettujen (selaimessa javascriptillä laskettujen tai palvelimelta saatujen) tietojen näyttämiseen.
sallittu sisältö phrasing sisältö
sallitut attribuutit globaalit attribuutit, for, form, name
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
[W3C] [W3C non-normative] [MDN] [W3School]


<p> Kappale (erotettuna rivinvaihdoin ympäristöstään)
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  <p>
     Tämä teksti renderöityy omaksi kappaleekseen
  </p>
[W3C] [W3C non-normative] [MDN] [W3School]


<pre> Esimuotoiltua tekstiä, jossa tekstin rakenne esitetään suoraan sellaisenaan; esim. välilyönnit ja rivivaihdot menevät suoraan sellaisenaan esitettävälle sivulle. Myöskään automaattisia rivinvaihtoja ei tehdä. Esityksessä käytetään tasalevyistä kirjasinta, yleensä Courieria.
sallittu sisältö phrasing-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
<pre>&lt;p>
      koodi kirjoitetaan usein &lt;pre>-elementtiä 
      käyttäen, koska sen avulla teksti 
      voidaan muotoilla itse:
      rivitys, sisennykset ym. säilyvät sellaisenaan 
&lt;/p></pre>
[W3C] [W3C non-normative] [MDN] [W3School]


<progress> Piirtää horisontaalisen palkin, jolla voi visualisoida tehtävän etenemistä. Esimerkiksi arvo 20 piirtää puoleen väliin täytetyn palkin, jos maksimiarvoksi on annettu 40 (kuten esimerkissä alla).
sallittu sisältö phrasing sisältö
sallitut attribuutit globaalit attribuutit, value, max
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esim. piirtää puoleenväliin täytetyn palkin
<progress value="20" max="40"></progress>
Progress bar:
[W3C] [W3C non-normative] [MDN] [W3School]


<q> Jostain muusta lähteestä lainattu teksti.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   cite 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Selain lisää lainausmerkin q-elementin sisään kirjoitettuun lainattuun
tekstiin, niitä ei siis kirjoiteta itse. Lisäksi elementtiä  käytetään
nimenomaan lainattaessa tekstiä:  
<q cite="http://www.w3.org/TR/html5/text-level-semantics.html">The 
   q element must not be used in place of quotation marks that do not  
   represent quotes; for example, it is inappropriate to use the q element 
   for marking up sarcastic statements.
</q>
[W3C] [W3C non-normative] [MDN] [W3School]


<rp> Elementti, jonka avulla näytetään teksti (tyypillisesti sulkeet) selaimissa, jotka eivät tue ruby-merkkejä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <ruby>
[W3C] [W3C non-normative] [MDN] [W3School]


<rt> Ruby merkkien ääntämisohje, käytetään yhdessä <ruby>-elementin kanssa.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <ruby>
[W3C] [W3C non-normative] [MDN] [W3School]


<ruby> Ruby merkkien (itä-aasialaisin merkein kirjoitettu) ääntämisohje, käytetään yhdessä <rt>-elementin kanssa
sallittu sisältö phrasing-sisältö, jota tulee seurata <rt>-elementti, tai <rp>-elementti jota seuraa <rt>- ja <rp>-elementit
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
[W3C] [W3C non-normative] [MDN] [W3School]


<s> Vanhentunutta, epätarkkaa tai ei enää relevanttia tietoa, tyypillinen . Ei pidä käyttää esittämään tietoa joka halutaan poistaa, tai korvata uudella tekstillä (siihen tarkoitukseen del-elementti).
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Kotimainen tomaatti <s>3.50€/kg </s> 2.50 €/kg 
[W3C] [W3C non-normative] [MDN] [W3School]


<samp> Merkkaa tekstinosan ohjelman tulosteeksi.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  <samp>Tämä on ohjelman tulostetta.</samp>
[W3C] [W3C non-normative] [MDN] [W3School]


<select> Elementti valintalistan totetutukseen.
sallittu sisältö nolla tai enemmän <optiongroup>- ja <option>-elementtejä
sallitut attribuutit globaalit attribuutit, autofocus, disabled, form, multiple, name, required, size
sallittu äiti-elementti elementti, joka voi voida flow-sisältöä
esim.
<form action="kasittelija.php">
  select  id="kirja" name="on-lukenut" multiple="multiple">
      <option>Väinö Linna: Tuntematon sotilas</option>
      <option>Arto Paasilnna: Jäniksen vuosi</option>
      <option>Sofi Oksanen: Kun kyyhkyset katosivat</option>
      <option>Aki Ollikainen: Nälkävuosi</option>
      <option>Ulla-Leena Lundberg: Jää</option>
  </select>
<form>
[W3C] [W3C non-normative] [MDN] [W3School]


<section> Määrittelee dokumentin osan ("sektion"). Sektiot ovat temaattisia kokonaisuuksia, ts. sektioihin jakoa ei pitäisi käyttää muotoilun apuvälineenä, siihen tarkoitukseen käytetään edelleen <div> -elementtiä. Sisäkkäisten sektioiden avulla voidaan määritellä dokumentin hierarkinen rakenne (luvut, niiden aliluvut, jne).
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä, ei kuitenkaan <address>-elementti
esimerkki:
  <section>
    <h1>Otsikko</h1>
    <p>	
      Tämä luku on merkattu omaksi sektiokseen. Tyypillisesti sektioon 
      merkataan sekä otsikko että sen sisältö.
    </p>
  </section>
[W3C] [W3C non-normative] [MDN] [W3School]


<script> Esittelee sivulla käytetyt selainpuolen ohjelmat (kuten esim. JavaScript-koodin) ja antaa niihin liittyviä määrittelyjä.
sallittu sisältö ohjelmakoodia
sallitut attribuutit  globaalit attribuutit   src   async   defer   type   charset 
sallittu äiti-elementti <head>, tai jokin muu elementti, joka voi saada metadata-sisältöä, tai mikä tahansa elementti, joka voi saada phrasing-sisältöä.
esimerkki:
  <!-- erillisestä tiedostosta haettu ohjelmakoodi -->
  <script src="script/javascript.js"> </script>

  <!-- suoraan elementtiin kirjoitettu ohjelmakoodi -->
  <script>
    document.write("Hello World!")
  </script>
[W3C] [W3C non-normative] [MDN] [W3School]


<small> Pienellä painettua tekstiä, kuten esimerkiksi lakiteksti tai huomautukset.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
<small>Noudatamme voimassa olevaa henkilötietolakia</small>
[W3C] [W3C non-normative] [MDN] [W3School]


<span> Geneerinen phrasing-elementti, joka kapseloi tekstiä jolle sinällään ei ole annettu merkitystä. Käytetään apuna merkitsemään tekstinosa, johon halutaan vaikuttaa CSS-säännöillä. Tekstitason elementti, vastaava elementti lohkotasolla on <div>.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
<p>
  dropzone="<span class="default">copy</span>"|"move"|"link"
</p>
[W3C] [W3C non-normative] [MDN] [W3School]


<strong> Tärkeä tekstinosa, kuten uusi termi tai muuten huomatuksi haluttava osa tekstiä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  Nykyisin suuri osa laajemmista www-sivuistoista toteutetaan
  jonkun <strong>sisällönhallintajärjestelmän</strong> avulla.
[W3C] [W3C non-normative] [MDN] [W3School]


<style> Mahdollistaa CSS-sääntöjen esittelyn html-dokumentin otsikko-osassa. Vähänkin isommissa sivustoissa erillisen tyylitiedoston (tyylitiedostojen) esittely on kuitenkin suositeltavampaa.
sallittu sisältö type-attribuutin määrittämän tyyppistä sisältöä
sallitut attribuutit  globaalit attribuutit   media   type   scoped  Lisäksi  title -attribuutin merkitys tässä elementissä on erityinen; sen avulla on mahdollista määritellä vaihtoehtoisia tyylisääntöjoukkoja.
sallittu äiti-elementti <head> tai jokin muu elementti, joka voi saada metadata-sisältöä, tai <div> <noscript> <section> <article> <aside>
esimerkki:
  <style type="text/css">
    body {
       font-family: verdana, arial, sans-serif;
    }
  </style> 
[W3C] [W3C non-normative] [MDN] [W3School]


<sub> Merkkaa alatunnisteen, ts. osan tekstiä, jonka halutaan tulostuvan rivin perusviivaa alemmas ja muuta tekstiä pienemmällä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Veden kemiallinen kaava on H<sub>2</sub>O.
[W3C] [W3C non-normative] [MDN] [W3School]


<sup> Merkkaa yläviitteen, ts. osan tekstiä, jonka halutaan tulostuvan korkeammalle ja muuta tekstiä pienemmällä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Neliön pinta-ala lasketaan sivun nelionä: sivu<sup>2.
[W3C] [W3C non-normative] [MDN] [W3School]


<table> Esittelee taulukon.
sallittu sisältö taulukon sisällön määritteleviä elementtejä: <caption> <colgroup> <thead> <tfoot> <tbody>
sallitut attribuutit  globaalit attribuutit   border 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
  <table>
    <tr>
      <td>rivi 1 sarake 1</td>
      <td>rivi 1 sarake 2</td>
    </tr>
    <tr>
      <td>rivi 2 sarake 1</td>
      <td>rivi2 sarake 2</td>
    </tr>
  </table>
[W3C] [W3C non-normative] [MDN] [W3School]


<tbody> Merkkaa taulukon runko-osan (sisältörivit).
sallittu sisältö yksi tai useampia <tr> -elementtejä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <table> (elementissä <caption> <colgroup> ja <thead>-elementtien jälkeen)
esimerkki: ks. <thead> -elementin esimerkki
[W3C] [W3C non-normative] [MDN] [W3School]


<td> Määritteleen yhden solun taulukon rivillä.
sallittu sisältö flow-sisältöä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <tr>
esimerkki:
  <table border="5">
    <tr>
      <td>rivi 1 sarake 1</td>
      <td>rivi 1 sarake 2</td>
    </tr>
    <tr>
      <td>rivi 2 sarake 1</td>
      <td>rivi2 sarake 2</td>
    </tr>
  </table>
[W3C] [W3C non-normative] [MDN] [W3School]


<textarea> Syötekomponentti useamman rivin tekstille.
sallittu sisältö Merkkimuotoista tietoa
sallitut attribuutit globaalit attribuutit, autofocus, cols, dirnamea, disabled, form, maxlength, name, placeholder, readonly, required, rows, wrap
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä.
vrt. esimerkkilomake
<label for="msg">Viesti: </label>	
<textarea id="msg" rows="10" cols="40" name="msg"></textarea>
[W3C] [W3C non-normative] [MDN] [W3School]


<tfoot> Merkkaa taulukon rivin/rivit taulukon yhteenvetoriveiksi.
sallittu sisältö nolla tai useampia <tr>-elementtejä.
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <table> (elementissä ennen <tbody> ja <tr>-elementtejä, HTML5:ssä tätä vaatimusta lievennetty)
esimerkki: ks. <thead> -elementin esimerkki
[W3C] [W3C non-normative] [MDN] [W3School]


<th> Merkkaa solun otsikkosoluksi. Jos solu on taulukon ensimmäisellä rivillä, se tulkitaan sarakeotsikoksi, jos taas rivin ensimmäinen solu, riviotsikoksi.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   colspan   rowspan   scope   headers 
sallittu äiti-elementti <tr>
esimerkki (päivittäiset työtunnit):
<table>
  <tr>
    <td></td>
    <th>MA</th>
    <th>TI</th>
    <th>KE</th>
    <th>TO</th>
    <th>PE</th>
  </tr>
  <tr>
    <th>Päivätunnit</th>
    <td>4</td>
    <td>0</td>
    <td>0</td>
    <td>8</td>
    <td>2</td>
  </tr>
  <tr>
    <th>Iltatunnit</th>
    <td>0</td>
    <td>3</td>
    <td>0</td>
    <td>0</td>
    <td>6</td>
  </tr>
</table>
[W3C] [W3C non-normative] [MDN] [W3School]


<thead> Merkkaa taulukon otsikko-osan (otsikkorivit, yksi tai usemapia taulukon rivejä).
sallittu sisältö yksi tai useampia <tr> -elementtejä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <table> (elementissä <caption> ja <colgroup>-elementtien jälkeen, mutta ennen <tbody> <tfoot> <tr> -elementtejä)
esimerkki:
<p>Esteetön taulukko</p>
<table>
  <caption>Puolivuosikatsaus: myynti liikkeittäin</caption>
  <thead>
    <tr>
      <th></th>
      <th>Tammikuu</th>
      <th>Helmikuu</th>
      <th>Maaliskuu</th>
      <th>Huhtikuu</th>
      <th>Kesäkuu</th>
      <th>Heinäkuu</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Yht.</th>
      <td>11 730 €</td>
      <td>9 480 €</td>
      <td>12 450 €</td>
      <td>8 680 €</td>
      <td>11 200 €</td>
      <td>5 730 €</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>Kemi</th>
      <td>3 240 €</td>
      <td>2 980 €</td>
      <td>4 200 €</td>
      <td>3 200 €</td>
      <td>3 100 €</td>
      <td>1 500 €</td>
    </tr>
    <tr>
      <th>Jyväskylä</th>          
      <td>4 590 €</td>
      <td>2 200 €</td>
      <td>3 020 €</td>
      <td>2 500 €</td>
      <td>3 200 €</td>
      <td>2 340 €</td>
    </tr>
    <tr>
      <th>Tampere</th>          
      <td>3 900 €</td>
      <td>4 300 €</td>
      <td>5 230 €</td>
      <td>2 980 €</td>
      <td>4 900 €</td>
      <td>1 890 €</td>
    </tr>
  </tbody>
</table>
[W3C] [W3C non-normative] [MDN] [W3School]


<time> Merkkaa joko kellonajan (24-tuntinen) tai päiväyksen; aika tai päiväys annetaan datetime-attribuutin arvona. Tarkoituksena on, että ohjelmat voivat käyttää hyväkseen tätä ohjelmallisesti luettavissa olevaa esitystä.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit   datetime 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Kesän 2013 teatterikesän <time datetime="2013-08-05">5.</time> - 
<time datetime=2013-08-11"">11.8.</time> ohjelmisto on jukistettu.
[W3C] [W3C non-normative] [MDN] [W3School]


<title> Dokumentin otsikko, joka tulee näkyviin selaimessa sivun (välilehden) otsikkona. Dokumentilla voi olla vain yksi otsikko.
sallittu sisältö merkkimuotoinen tieto joka saa sisältää myös <-merkkejä (HTML-jäsentäjä ei tulkitse otsikon sisältä HTML-alkutunnuksia)
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <head>
esimerkki:
  <title>UTA: JWT - 2013</title>
[W3C] [W3C non-normative] [MDN] [W3School]


<tr> Määritteleen yhden rivin taulukossa.
sallittu sisältö nolla tai useampia <th> ja <td>-elementtejä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti <table> <thead> <tbody> <tfoot>
esimerkki:
  <table>
    <tr>
      <td>rivi 1 sarake 1</td>
      <td>rivi 1 sarake 2</td>
    </tr>
    <tr>
      <td>rivi 2 sarake 1</td>
      <td>rivi2 sarake 2</td>
    </tr>
  </table>
[W3C] [W3C non-normative] [MDN] [W3School]


<track> Elementin avulla mediatiedostoon voi liittää "tekstiraidan".
sallittu sisältö ei sisältöä (tyhjä elementti).
sallitut attribuutit  globaalit attribuutit   src   kind   srclang   label   default 
sallittu äiti-elementti <video>- tai <audio>-elementti
esimerkki:
<!-- tekstitetty -->
<video src="video.ogg">
  <track kind="subtitles" src="tt.fi.vtt" srclang="fi" label="Suomeksi">
  <track kind="subtitles" src="tt.sv.vtt" srclang="sv" label="Ruotsiksi">
</video>
[W3C] [W3C non-normative] [MDN] [W3School]


<u> Merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on alleviivattu teksti. Testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa puolesta; tällä voidaan merkata esimerkiksi tekstinosa, jossa on kirjoitusvirhe tai käyttää kiinan kielessä henkilön nimen alleviivaukseen.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
  <p>This is a <u>parragraph</u>.</p>
[W3C] [W3C non-normative] [MDN] [W3School]


<ul> Järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä.
sallittu sisältö nolla tai useampia <li>-elementtejä
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada flow-sisältöä
esimerkki:
<ul>
  <li>Listan eka rivi</li>
  <li>Listan toka rivi      <!-- </li> ei tänne  -->
    <ul> 
      <li>alilistan eka rivi</li>
      <li>alilistan toka rivi</li>
      <li>alilistan kolmas rivi</li>
    </ul>
  </li>                     <!-- toka rivi suljetaan täällä -->
  <li>Kolmas rivi</li>
</ul>
[W3C] [W3C non-normative] [MDN] [W3School]


<var> Merkkaa muuttujan matemaattisessa lausekkeessa tai ohjelmakoodissa.
sallittu sisältö phrasing-sisältö
sallitut attribuutit  globaalit attribuutit 
sallittu äiti-elementti elementti, joka voi saada phrasing-sisältöä
esimerkki:
Suorakaiteen pinta-ala lasketaan kaavalla 
<var>leveys</var> * <var>korkeus</var>.
[W3C] [W3C non-normative] [MDN] [W3School]


<video> Tuo sivulle videon.
sallittu sisältö Läpinäkyvä, ts. äidiltä peritty sisältömalli, kuitenkin niin, että elementin sisältö rakentuu seuraavasti. Sisältönä tulee olla
(1) joko  src -attribuutti tai yksi tai useampia <source>-elementtejä,
(2) jota seuraa nolla tai useampia <track>-elementtejä, sekä mahdollisesti flow tai phrasing-sisältöä (ei kuitenkaan sisäkkäistä <video>-elementtiä tai <audio>-elementtiä).
sallitut attribuutit  globaalit attribuutit   src   height   width   poster   preload   autoplay   controls   muted   loop   mediagroup 
sallittu äiti-elementti mikä tahansa elementti, jolle joko phrasing- tai flow-sisältö on sallittua
esimerkki:
<video src="img/pelikaani.ogg">
  Ikävä kyllä selaimesi ei tue sivulle upotettuja videoita, mutta voit toki
  <a href="img/pelikaani.ogg">ladata videon</a> ja katsella sen omalta 
  koneeltasi.
</video>

<video>
  <source src="img/pelikaani.webm" type="video/webm">
  <source src="img/pelikaani.mp4" type="video/mp4">
  <p>Selaimesi ei pysty näyttämään videota, pahoittelen.</p>	
</video>
[W3C] [W3C non-normative] [MDN] [W3School]

Takaisin ylös