18.3.2014 Aulikki Hyrskykari Edellinen luento o historiaa tärkeää tietää koska vanhojakin sivuja tulee aina vastaan o HTML / DOM / CSS perusperiaatteet ja yhdessä toimiminen o elementtien syntaksista, erikoismerkeistä, merkistökoodauksista o elementtien luokittelu ja sisältömallit Tällä kertaa o vertaisarvioinnit o kertausta elementtien sisältömalleista o attribuuteista globaalit attribuutit o <head> osan sisältö o <body> osan sisältö - dokumentin rakenteen määrittely - dokumentin sisällön ryhmittely - tekstitason semanttinen merkkaus
Arvioitava työ Antamasi pisteet Kommenttisi työstä Aiemmin HTML elementit jaettiin lohkotason ja rivitason (block ja inline) elementteihin o lohkotason elementti erottuu ympäristöstään rivin vaihdoin (esim. <p> elementti) o rivitason elementti merkkaa tekstiä kappaleen sisällä ( esim <strong> elementti) HTML5:ssä elementit jaetaan useampaan luokkaan Pääluokat ovat o phrasing elementit (~rivitason elementtejä) o Flow elementit (~lohkotason elementtejä)
Spesifikaatio luokittelee elementit hienojakoisemmin Luokat ovat päällekkäisiä, ts. yksi elementti voi kuulua useampaan luokkaan ks. elementtien luokitteluluettelot HTML spesifikaatiosta: http://www.w3.org/tr/html5/dom.html#content models diagrammi löytyy suoraan osoitteesta http://www.w3.org/tr/html5/images/content venn.svg Mihin luokittelua tarvitaan? o kullekin elementille määritelty sisältömalli (content model) o kuvaa millaista sisältöä elementti voi saada, esim. - tyhjä HTML elementti (void element), ei mitään, - vain tietyn määrätyn elementin (määrättyjä elementtejä), - vain phrasing sisältöä tai väljemmin - flow sisältöä. Attribuuttien avulla tarkennetaan elementtien merkitystä ja tulkintaa omassa kontekstissaan Yhtäsuuruusmerkin molemmin puolin saa olla välilyönti, tai se voi puuttua. Jos attribuutti on Boolean tyyppinen o HTML5 syntaksin mukaan ei tarvitse antaa arvoa o pelkkä attribuutin esittäminen vastaa silloin attribuutin "true" arvoa o esim. <input disabled> HML5:ssä on joukko attribuutteja, jotka voidaan osoittaa attribuutiksi mille tahansa elementille. Näitä kutsutaan globaaleiksi attribuuteiksi.
Kaikille elementeille voi antaa mitkä tahansa näistä attribuuteista Kunkin elementin määrittelyn yhteydessä määritellään erikseen mitä muita attribuutteja elementti voi saada Joidenkin globaalien attribuuttien merkitys (esim titleattribuutti) saattaa olla eri elementeille määriteltynä hiukan erilainen. Globaalit attribuutit ovat: accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title, translate id syntaksi: <anytag id="merkkijono"> Antaa elementille yksikäsitteisen tunnuksen o koko dokumentissa vain yksi elementti, jolla ko. tunnus <h1 id="osa contact">yhteystiedot</h1> Elementtiin viitataan käyttäen # merkkiä, esimerkiksi o tyylisäännöissä: #osa contact: background color:yellow; o linkissä: <a href= #osa contact >yhteystietoihin</a> [W3C] [W3C non normative] [MDN] [w3school]
syntaksi: <anytag class="luokan nimi"> Määrää elementin kuuluvaksi tiettyyn luokkaan Elementtiin voi tyylisäännöissä viitata luokkanimen avulla o dokumentissa useita ko. luokkaan kuuluvia elementtejä <p class="insertti"> Tämän tyyppisille tekstipaloille halutaan määritellä oma tyylinsä, siksi sille on määritelty luokkanimi, jonka avulla sille voi kohdistaa muotoilusääntöjä css tiedostosta. </code> Luokan elementteihin viitataan käyttäen pistettä, esimerkiksi tyylisäännössä.insertti: font style:italics; class [W3C] [W3C non normative] [MDN] [W3School] accesskey määrittää yhden tai useampia näppäimistö oikoteitä elementin aktivoimiseksi contenteditable määrää voiko elementin sisältöä muokata contextmenu dir draggable dropzone hidden lang spellcheck style tabindex title translate liittää elementille konteksisensitiivisen ponnahdusvalikon määrittää tekstin kirjoitussuunnan (left to right, right to left tai jätetään ohjelmallisesti määriteltäväksi) määrittää voiko elementtiä raahata vai ei määrittää miten raahattavaa kohdetta käsitellään jos se tiputetaan elementin päälle mahdollistaa elementin piilottamisen ts. kääntämisen pois näkyvistä kertoo elementin kirjoittamisessa käytetyn kielen Muut globaalit attribuutit määrää suoritetaanko elementin tekstisisällölle automaattinen oikeinkirjoitustarkistus mahdollistaa CSS sääntöjen kirjoittamisen elementin sisään (sääntö kohdistuu silloin vain ko. elementtiin) määrittää, että elementti voi saada fokuksen, ja missä järjestyksessä selaus tapahtuu liittää elementtiin tooltip tyyppistä lisäinformaatiota (älä sekoita <title> elementtiin) määrittää, käännetäänkö elementin (ja sen lasten sisältämä) teksti, kun sivusta tehdään lokasoitu versio, koskee myös attribuutteja ja niiden sisältöä
HTML dokumentissa voi olla vain yksi otsikko osa määrittelee koko dokumenttia koskevia yleisiä tietoja <base> <link> <script> <style> <title> <meta> <base> <link> oletuspolku dokumentissa viitatuille linkeille, dokumentissa saa olla vain yksi <base> elementti määrittää mistä dokumentissa käytetty resurssi löytyy <script> esittelee sivulla käytetyt selainpuolen ohjelmat <style> <title> <meta> määrittää tekstin kirjoitussuunnan (left to right, right to left tai jätetään ohjelmallisesti määriteltäväksi) dokumentin otsikko, joka tulee näkyviin selaimessa sivun (välilehden) otsikkona määrittelee sellaisia metatietoja, joita muiden meta elementtien avulla ei saa määrittellyksi (esim. merkistökoodaus, avainsanoja hakukoneillle, sisällön kuvaus)
dokumentin sisältö kirjoitetaan <body> elementin sisään, runko osassa o määritellään dokumentin rakenne o ryhmitellään dokumentin sisältö o merkitään tekstin semanttiset osat WWW sivun elinaika voi olla pitkä o saatetaan tulevaisuudessa katsella hyvinkin erilaisissa olosuhteissa o laitteen näytön koko voi vaihdella pienestä taskulaitteesta todella isoon paneelinäyttöön o renderöinti voi olla paitsi visuaalista, vaikkapa auditiivista (ruudunlukija) tai kosketukseen perustuvaa (braille näytöt) o kuka tietää millaisia laitteita tulevaisuus tuo tullessaan Sivun semanttisen sisällön tunnistaminen auttaa tekemään kuhunkin ympäristöön osuvamman ja selkeämmän tukinnan
Elementit dokumentin rungossa välittävät dokumentin osien o semanttisen roolin, merkityksen o ei oteta kantaa siihen, miten sisältö renderöidään selaimen ikkunassa, tai jonkun muun laitteen näytöllä / avulla Asiakasohjelman (user agent, selain) on tärkeätä tietää mikä renderöitävän tekstin merkitys dokumentissa on o ruudunlukija saattaa esimerkiksi lukea otsikot hitaammin tai erisävyisellä äänellä kuin muu teksti o selaimet voivat käyttää semanttista merkkausta apunaan luodessaan selaustoimintoja, ruudunlukijan voi pyytää lukemaan vain otsikot, hyppäämään yhteystietoihin, menemään suoraan alaviitteeseen, jne. o verkossa toimivat robottiohjelmat käyttävät semanttista merkkausta hyväkseen - esim. hakukoneet voivat tarjota merkkausta hyväkseen käyttäen sivustosta selkeän, sivuston rakennetta kuvaavan pikalinkkikokoelman o W3C outline algoritmin määritys : http://www.w3.org/tr/html5/sections.html#outline rakenne Dokumentin jakaminen semanttisesti merkityksellisiin osiin <address>, <h1>..<h6>, <hgroup> <section>, <article>, <aside>, <header>, <footer>, <nav>
Ennen otsikot olivat ainoa tapa jäsentää dokumentin rakennetta: <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf 8" /> <title>dokumentin rakenteen määrittely</title> </head> http://www.sis.uta.fi/~jwt/14/esim/03 01 a dokumentin rakenne.html <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> <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf 8" /> <title>dokumentin rakenteen määrittely</title> </head> <body> <h1>1 Otsikko</h1> <h1>2 Otsikko</h1> > <section> <h1> 2.1 Otsikko</h1> > <section> <h1>2.1.1 Otsikko</h1> > </section> <section> <h1>2.1.2 Otsikko</h1> </section> </section> <section> <h1>2.2 Otsikko</h1> <section> <h1>2.2.1 Otsikko</h1> </section> </section> </body> http://www.sis.uta.fi/~jwt/14/esim/03 01 b dokumentin rakenne.html <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf 8" /> <title>dokumentin rakenteen määrittely</title> </head> <body> <h1>1 Otsikko</h1> <h1>2 Otsikko</h1> > <section> <h2> 2.1 Otsikko</h2> <section> <h3>2.1.1 Otsikko</h3> </section> <section> <h3>2.1.2 Otsikko</h3> </section> </section> <section> <h2>2.2 Otsikko</h2> <section> <h3>2.2.1 Otsikko</h3> </section> </section> </body> http://www.sis.uta.fi/~jwt/14/esim/03 01 c dokumentin rakenne.html
Viimeinen edellisistä (ainankin tällä hetkellä) suositeltu tapa o ruudunlukijat eivät (toistaiseksi) jäsennä otsikkotasoja dokumentin osien sisältä, vaan turvautuvat suoraan käytettyyn <h1>..<h6> elementtiin o Bruce Lawson: Headings in HTML5 and accessibility, http://brucelawson.co.uk./2009/headings in html 5 and accessibility/ o HTML5 Doctor: The section element, http://html5doctor.com/the sectionelement/). Yksinkertaistaa myös otsikoiden muotoilua o eri tasoiset otsikoi voi edelleen muotoilla suoraan määrittämättä sen tasoa section hierarkiassa Saattaa aluksi tuntua monimutkaiselta o on kuitenkin HTML5 versiossa yksikäsitteisesti määritelty o Geoffrey Sneddonin HTML5 Outliner (http://gsnedders.html5.org/outliner/) Dokumentin semanttisessa jäsentelyssä nojataan <h1>..<h6> elementteihin seuraava ei ole suositeltavaa <body> <h1>pääotsikko</h1> <h2>tarkentava aliotsikko</h2>... koska <h2> ei aloita uutta alilukua <h1> ja <h2> itse asiassa muodostavat otsikon yhdessä o tulisi käyttää <hgroup> elementtiä <body> <hgroup> <h1>pääotsikko</h1> <h2>tarkentava aliotsikko</h2> </hgroup>...
rakennetta <address> <h1>.. <h6> <header> <section> <article> <footer> <nav> sisältää yhteystiedot; jos elementin äiti on body elementti, yhteystiedot ovat koko sivua koskevat yhteystiedot otsikot tasoilla 1... 6; selainten html tulkit saattavat luoda otsikoiden avulla automaattisen sisällysluettelon sivusta sitoo osan alussa osan sisältöön johdattelevia tietoja yhtenäiseksi alkunimiöksi määrittelee dokumentin hierarkisen rakenteen, voi muutenkin määritellä dokumentin temaattisen osan ( sektion ) jolla on oma otsikkonsa osa dokumenttia, joka muodostaa oman kokonaisuutensa (lehtiartikkeli, blogi, tms. itsenäisesti julkaistavissa oleva) alatunnisteenomaista tietoa siihen osaan dokumenttia, jonka sisässä elementti sijaitsee elementin avulla merkataan ne elementit, joita käytetään navigointiin sivun eri osien välillä sisällön <div> <p> <hr> <br> <pre> <blockquote> <figure> <figcaption> <ol> <ul> <li> <dl> <dt> <dd> Näitä elementtejä käytetään dokumentin sisällön erilaiseen ryhmittelyyn, kuten o jakamiseen kappaleiksi, o dokumentin jakamiseen temaattisiin osiin o listoihin tai o muihin jollain tavalla oman kokonaisuutensa muodostaviin osiin Esitetään oletusarvoisesti omana lohkonaan, ts. ne erotetaan muusta sisällöstä rivinvaihdoin Kukin elementti kuvaa sen roolia dokumentin rakenteessa o <div> elementti poikkeus, sen avulla ei kuvata merkitystä
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ä. Sallittu sisältö: oflow sisältö, jota voi edeltää oyksi tai useampi <style> elementti Sallitut attribuutit: globaalit attribuutit Sallittu äiti elementti: elementti, joka voi saada flowsisältöä <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] <p> <hr> <br> <pre> sisällön kappale (erotettuna rivinvaihdoin ympäristöstään) sisällön temaattinen vaihdos (ei siis välttämättä viiva ) edustaa rivinvaihtoa esimuotoiltua tekstiä, jossa tekstin rakenne esitetään suoraan sellaisenaan <blockquote> muusta lähteestä lainattu tekstisisältö <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. <figcaption> elementin seliteteksti
LISTAT (<body> sisällönryhmittelyä) <ul> <li> järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä listan rivi <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> <ul> <li> <ol> LISTAT (2) (<body> sisällönryhmittelyä) järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä listan rivi järjestetty lista, ts. lista, jonka rivien järjestyksellä on merkitystä (rivien järjestyksen vaihtaminen muuttaisi listan merkitystä) <ol> <li>listan eka rivi, edessä numero 1</li> <li>listan toka rivi, edessä numero 2 <! </li> ei tänne > <ol type="i" start="10" reversed> <! < roomalaiset numerot > <li>alilistan eka rivi</li> <li>alilistan toka rivi</li> <li>alilistan kolmas rivi</li> </ol> </li> <! toka rivi suljetaan täällä > <li>kolmas rivi, edessä numero 3</li> </ol>
LISTAT (3) (<body> sisällönryhmittelyä) <ul> <li> <ol> <dl> <dt> <dd> järjestämätön lista, ts. lista, jonka rivien järjestyksen vaihtaminen ei muuttaisi listan merkitystä listan rivi järjestetty lista, ts. lista, jonka rivien järjestyksellä on merkitystä (rivien järjestyksen vaihtaminen muuttaisi listan merkitystä) määrittelylista (description list), ts. lista, jossa annetaan kuvauksia termeille, käsitteille, tms <dl> listan termi, käsite, tms. listassa kuvaus tai arvo määriteltävälle termille tai käsitteelle <dl> <dt>termi A</dt> <dd>tässä selitys termille A</dd> <dt>termi B</dt> <dd>tässä selitys termille B</dd> </dl> <span> <em> <strong> <a> <small> <s> <cite> <q> <dfn> <abbr> <time> <code> <var> <samp> <kbd> <sub> <sup> <i> <b> <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> Ennen oli mahdollista määrittää muotoilukomentoja oesimerkiksi lihavoida <b> elementtiä käyttäen HTML5:ssä ei enää ole muotoiluun liittyviä elementtejä otekstinosia, sanaryhmiä, sanoja tai jopa yksittäisiä merkkejä voi edelleenkin merkata omerkkaus on kuitenkin aina semanttinen omerkattavaan tekstinosaan siis liittyy aina jokin semanttinen arvo, ts. jokin merkitys <span> on poikkeus
Geneerinen phrasing elementti, joka kapseloi tekstiä jolle sinällään ei ole annettu merkitystä. Käytetään apuna merkitsemään tekstinosa, johon halutaan vaikuttaa CSSsäännöillä (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öä <p> dropzone="<span class="default">copy</span>" "move" "link </p> [W3C] [W3C non normative] [MDN] [W3School] Molemmat tarkoittavat jonkinlaista tekstinosan korostusta o saavat aikaan (useimmissa selaimissa) lihavoinnin tai kursivoinnin o niitä ei pitäisi käyttää ajatellen näiden muotoilujen aikaansaamista Elementin <strong> sisään kapseloidaan erityisen tärkeä tekstinosa o se, miten tärkeä tekstinosa eri ympäristöissä (graafisesti, tai esim. äänenä) vaihtelee asiakasohjelmasta riippuen. Elementin <em> sisään kapseloidaan tekstinosa jota halutaan painottaa o kyse on enemmänkin kielellisestä painotuksesta, ei niinkään tekstinosan tärkeydestä o lauseiden: Ensi kesänä menen Ruotsiin töihin tai Ensi kesänä menen Ruotsiin töihin merkitys on erilainen. o tulisi käyttää <em> elementtiä painotuksen ilmaisemiseen, ei <strong> elementti o vastaava logiikka pätee muihinkin tekstitason elementteihin:
Linkit esitellään <a href= arvo > elementin avulla href attribuutin arvo kertoo siirtymiskohteen o o kertoo mistä osoitteesta selaimen sivulle haetaan sisältö osoite voi olla 1. suhteellinen (osoite samalla palvelimella oleviin tiedostoihin) 2. sivun sisäinen siirtymä 3. Absoluuttinen Linkki samalla palvelimella olevalle sivulle o osoite on hakemistopolku tiedostoon, tulkitaan viittaavan sivusta lähtien o polussa käytetään - hakemistojen (kansioiden) nimiä ja - pseudohakemistonimä.. avulla (yksi taso rakenteessa ylöspäin) <a href="../esimerkit/index.html"> <a href="kuvat/taulu.jpg"> <a href="../../index.html"> o viimeinen linkki viittaa - kaksi hakemistotasoa ylemmäs - index.html dokumenttiin - nimen voisi jättää pois, koska se on joka tapauksessa oletus: <a href="../../ >
Kohta dokumentissa (johon halutaan siirtyä) o merkitään id attributin avulla Viitattaessa o tunnus kirjoitetaan muun osoitteen perään # merkin jälkeen <h1 id= luku 1">1 Luku</h1> <p> Lorem ipsum... </p>..... <a href="#luku 1">Luvun 1 alkuun</a>.. Osoite muodostuu o href attribuutin arvona jokin uri osoite o tiedonsiirtoprotokolla voi muukin, kuin www sivu o alussa annetaan tiedonsiirtoprotokollan nimi http, https, ftp, mailto, ldap, file, news, gopher tai telnet o esimerkiksi <a href="mailto:asiaspalvelu@yritys.fi">asiakaspalvelu@yritys.fi</a>
Protokollan jälkeen palvelimen osoite o esim. //www.sis.uta.fi Mahdollisesti palvelimen tietoliikenneportti o tarpeen antaa vain, mikäli se on eri kuin käytettävän protokollan oletus o esimerkiksi http oletus on :80, ftp protokolla :20 sivun osoitteesta palvelimella mahdollisesta elementin tunnuksesta sivun sisällä <a href= https://developer.mozilla.org/en US/docs/URIs_and_URLs >URI ja URL</a> <a href= http://www.sis.uta.fi/~jwt/13/sisalto.html >luennot</a> <a href= http http://www.sis.uta.fi/~jwt/13/sisalto.html#luku_3 6 >linkit</a> <a href= http://www.sanakirja.org/ >ilmainen sanakirja</a> viimeisessä esimerkissä tiedostonimi puuttuu, noudetaan o oletustiedosto index.html, index.php, index.pl, index.asp, jos näitä ei löydy o hakemiston sisällysluettelo (jos annettu oikeudet, ja ellei oikeuksia sen näyttämiseen o virheilmoitus, jos näyttäminen estetty ja oletustiedostoa ei ole Esimerkin vuoksi katsaus kaikkiin <a> elementin attribuutteihin Mahdolliset attribuutit: href, target, hreflang, media, rel, type syntaksi: <a target="_blank" "_self" "_parent" "_top"> Määrittelee mihin linkin osoitteessa oleva sisältö avataan _blank: uuteen selaimeen tai välilehteen _self: samaan selaimen osaan jossa linkki itse sijaitsee _parent: samaan selaimen osaan missä äiti elementti sijaitsee _top: jos linkki iframe:n sisällä, rakenteen ylimmälle tasolle aukaise <a href="osoite" target="_blank">linkki</a> uuteen välilehteen aukaise <a href="osoite" target="_self">linkki</a> tähän ikkunaan aukaise <a href="osoite" target="_parent">linkki</a> äitielementtiin aukaise <a href="osoite" target="_top">linkki</a> koko ikkunaan [W3C] [W3C non normative] [MDN] [w3school]
syntaksi: <a hreflang="language subtag"> Hyperlinkin osoittaman dokumentin kieli o lista käytössä olevista tunnisteista löytyy osoitteesta: http://www.iana.org/assignments/language subtag registry <a href="http://www.sis.uta.fi/~jwt/13/sisalto.html" hreflang="fi">html5 kurssi</a> [W3C] [W3C non normative] [MDN] [W3School] syntaksi: <a media="arvo"> Millä laitteella dokumentti on suunniteltu esitettäväksi o ts. mille laitteelle optimoitu o arvo voi olla jokin mediakyselyn antama mediatyyppi (media query) o + esitysympäristöä tarkentavia mediapiirteitä (media features). o mediatyyppivaihtoehtoja ovat tällä hetkellä - all, aural, braille, handheld, projection, print, screen, tty ja tv o valikoima laajennee laitteistojen kehittyessä - min width on esimerkki mediapiirteistä (media features) <a href="url" media="screen and (min width: 320px) >linkki</a> [W3C] [W3C non normative] [MDN] [w3school]
syntaksi: <a rel= "void" "alternate" "author" "bookmark" "help" "license" "next" "nofollow" "noreferrer" "prefetch" "prev" "search" "tag"> Kuvaa viittaava dokumentin ja linkitetyn dokumentin (href) keskinäisen suhteent. mille laitteelle optimoitu <a href="osoite" rel="next">seuraava luku</a> [W3C] [W3C non normative] [MDN] [w3school] syntaksi: <a type="ei negatiivinen luku"> Kertoo linkattavan dokumentin esitysmuodon, ns. MIME tyypin otällä hetkellä tieto on tiedotuksenomainen otulevaisuudessa sitä saatetaan käyttää eri tavoin - selain saattaisi esim lisätä pienen kaiutinikonin audio/wav linkkiin - MIME tyypit on esitelty IANAn sivuilla: http://www.iana.org/assignments/media types.. tässä asiaa <a href="url" type="image/png">havainnollistava kuva</a> osoittaa.. [W3C] [W3C non normative] [MDN] [w3school]
tekstitason <small> <s> <cite> <q> <dfn> <abbr> <time> <code> pienellä painettua tekstiä, kuten esimerkiksi lakiteksti tai huomautukset 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) 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ä jostain muusta lähteestä lainattu teksti merkkaa kohdan, jossa termi määritellään merkkaa lyhenteen tai akronyymin; jos elementillä on title attribuutti, sen tulee sisältää lyhenteen selitys. merkkaa joko kellonajan (24 tuntinen) tai päiväyksen; aika tai päiväys annetaan datetime attribuutin arvona (ohjelmat voivat käyttää hyväkseen tätä ohjelmallisesti luettavissa olevaa esitystä) merkkaa tekstinosan ohjelmakoodiksi tekstitason <var> <samp> <kbd> <sub> <sup> <i> <b> merkkaa muuttujan matemaattisessa lausekkeessa tai ohjelmakoodissa merkkaa tekstinosan ohjelman tulosteeksi. merkkaa tekstinosan joka kuvaa käyttäjän antamaa syötettä merkkaa alaviitteen, ts. osan tekstiä, jonka halutaan tulostuvan rivin perusviivaa alemmas ja muuta tekstiä pienemmällä merkkaa yläviitteen, ts. osan tekstiä, jonka halutaan tulostuvan korkeammalle ja muuta tekstiä pienemmällä 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) 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 (esimerkiksi hakusana artikkelissa, dokumentin abstrakti tai henkilön nimi lehtiartikkelissa)
tekstitason <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> 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 takia (voidaan esimerkiksi käyttää kiinan kielessä henkilön nimen alleviivaukseen tai merkkaamaan tekstinosaa, jossa on kirjoitusvirhe) merkkaa tekstinosan, joka merkitään tai korostetaan viittaustarkoituksessa, ts. sen oletetaan olevan tärkeätä jossain toisessa kontekstissa Ruby merkkien (itä aasialaisin merkein kirjoitettu) ääntämisohje, käytetään yhdessä <rt> elementin kanssa sisältää Ruby merkkien (itä aasialainen merkistö) ääntämisohjeen elementti, jonka avulla näytetään teksti (tyypillisesti sulkeet) selaimissa, jotka eivät tue Ruby merkkejä. merkkaa tekstinosan, joka on kaksisuuntaista tekstinkirjoitussuunnan (länsimainen/arabia); suunnan voi määrätä dir attribuutilla (normaalisti attribuutin oletusasrvo on ltr, mutta tässä yhteydessä oletusarvo on auto, ts. attribuutin puuttuessa suunta päätellään tekstiosan sisällön perusteella automaattisesti) muuttaa (käyttäen dir attribuuttia) tekstin oletuskirjoitussuunnan halutuksi Muuttaa (käyttäen dir attribuuttia) tekstin oletuskirjoitussuunnan halutuksi. Sallittu sisältö: phrasing sisältö Sallitut attribuutit: o globaalit attribuutit o dir Sallittu äiti elementti: elementti, joka voi saada phrasing sisältöä <p> Uskotko, että "eno Kimmo, pese se pommikone" on panlindromi? Kokeillaan. Kirjoitettuna oikealta vasemmalle se on: <bdo dir="rtl"> eno Kimmo, pese se pommikone </bdo> </p> JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto [W3C] [W3C non normative] [MDN] [W3School]