HTML5

Novajhoj: Aldonitaj elementoj

Krom la sekciaj elementoj, kiujn mi jam klarigis, aperis ankau multaj aliaj novaj elementoj en HTML5. En tiu chi parto mi klarigos la jenajn novajn elementojn:

Novaj elementoj, kiuj uzighas en formularoj, estas traktataj aparte.

figure, figcaption

La elemento figure reprezentas ilustrajhon, diagramon, foton, kodekzemplon k.s., kiu ne havas fiksitan lokon ene de la ordinara enhavo, sed kiu ordinare estas iel referencata en la ordinara enhavo. La enhavo de figure estu tia, ke ghi senprobleme povas esti movata ekzemple al la flanko de pagho au al aparta pagho au al apendico.

Komence au fine de figure-elemento oni povas uzi la elementon figcaption, kiu reprezentas apudskribon (titoleton) de la koncerna figure. Chiu figure povas enhavi nur unu figcaption.

Jen kelkaj ekzemploj de tipa uzo de figure kaj figcaption:

<figure>
  <img
  src="tini_vinberoj.jpg"
  alt="Tini staras sur tablo manghante vinberojn"/>
  <figcaption>Ilustrajho 1: Nia kato Tini tre shatas vinberojn</figcaption>
</figure>

Tiu ilustrajho povas akompani tekston, kiu temas pri la vivo en hejmo kun katoj. Ne tre gravas ekzakte kie en la artikolo tiu ilustrajho prezentighas (sube, supre, meze, flanke, en aparta bildopagho...).

<figure>
  <img
  src="tini_vinberoj.jpg"
  alt="Tini staras sur tablo manghante vinberojn"/>
  <figcaption>Ilustrajho 1: Nia kato Tini tre shatas vinberojn</figcaption>
</figure>

figure povas aperi ankau sen figcaption:

<figure>
  <img src="zamenhof.jpg"
  alt="Duonkalva viro kun okulvitroj kaj banto,
  kaj kun Esperanta stelo sur la jaka refaldo" 
  title="L.L. Zamenhof"/>
</figure>

figure-elemento povas enhavi pli ol unu bildon:

<figure>
  <figcaption>Ilustrajho 2: Niaj katoj tre shatas fruktojn kaj berojn</figcaption>
  
  <img src="tini_vinberoj.jpg"
  alt="Tini staras sur tablo manghante vinberojn"/>
  
  <img src="tami_pomo.jpg"
  alt="Tami staras sur planko ludante per pomo"/>
</figure>

Jen ekzemplo, en kiu poemo aperas en figure:

<figure>
  <p>Ho, mia kor', ne batu maltrankvile,<br/>
  el mia brusto nun ne saltu for!<br/>
  Jam teni min ne povas mi facile,<br/>
  ho, mia kor'!</p>
  <figcaption><cite>Ho mia kor’</cite>
  (la unua strofo). L. L. Zamenhof, 1859 - 1917</figcaption>
</figure>

Tiu poemekzemplo povas ekzemple akompani tekston, kiu temas pri Zamenhof.

Se ilustrajho au simila enhavopeco apartenas nepre al certa loko en la enhavo, tiam oni ne uzu figure nek figcaption:

<p>Kiam Zamenhof publikigis la Unuan Libron, li enmetis en ghin 
la kortushan poemon <cite>Ho mia kor’</cite>, kiu finighas jene:</p>

<blockquote>
  <p>Ho, mia kor'! Post longa laborado<br/>
  chu mi ne venkos en decida hor'?<br/>
  Sufiche! trankvilighu de l' batado,<br/>
  ho, mia kor'!</p>
</blockquote>

Oni ne povas formovi la poemostrofon de la blockquote-elemento aliloken sen detrui la enhavon. Sekve figure ne estas la ghusta elemento.

Jen ligilo al pagho kun la chi-antauaj ekzemploj de la figure-elemento, kaj ankau la jhusa ekzemplo sen figure - la ekzemploj estas enmetitaj en pli vastan (sufiche sensencan) enhavon.

time

La elemento time reprezentas daton au horon au ambau kune. La celo de time estas helpi al automata (mashina) rekonado de datoj kaj horoj, ekzemple por registri kaj pritrakti eventojn en kalendaro. La koncerna dato/horo devas esti esprimita lau certaj reguloj, au en la enhavo de la elemento, au - plej ofte - per la atributo datetime.

Jen ekzemplo de time kun indiko de dato (sed sen horo):

<p>Georgo Vashington estis naskita <time datetime="1731-02-11">la dudek duan de Februaro de la jaro mil sepcent tridek dua</time>.</p>

Oni aparte rimarku tie la nekongruon inter la teksta dato kaj la dato en datetime. La kialo de la nekongruo estas, ke la dato de time nepre devas sekvi la Gregorian kalendaron. La kutime citata naskighdato de Vashington tamen sekvas la Julian kalendaron, kiu validis, kiam li naskighis.

Jen ekzemplo kun horo:

<article>
  <h1>Sensacia novajho</h1>
  <p>Hodiau okazis al mi io tute nekredebla. [...]</p>
  <footer>
    Publikigita <time pubdate="pubdate" 
    datetime="2011-05-09T16:30Z">09.05.2011 16:30</time>.
  </footer>
</article>

En tiu ekzemplo antau la indiko de horo en la atributo datetime aperas la litero T. Post ghi aperas la litero Z. La T signifas simple, ke tie komencighas la horo. La Z signifas, ke la uzata horzono estas UTC (la Universala Tempo Kunordigita, antaue nomata GMT au la Grenvicha horzono). Sed ankau eblas uzi aliajn horzonojn. Vidu la detalajn regulojn pri tiaj chi datoj kaj horoj.

Rimarku ankau la atributon pubdate (kiu estas t.n. bulea atributo). Per ghi oni povas montri, ke la koncerna dato-horo estas la publikiga dato-horo de la koncerna article, se la time-elemento aperas ie ene de article-elemento, au de la tuta pagho (se la time-elemento ne estas ene de article). Ene de chiu article rajtas aperi maksimume unu tia time-elemento kun indiko pri pubdate. Simile chiu pagho povas havi maksimume unu tian time-elementon, kiu montras ties publikigodaton. Se cheestas la atributo pubdate, la time-elemento devas esprimi daton, kaj rajtas esprimi ankau horon. Se forestas la atributo pubdate, la time-elemento devas esprimi au daton au horon au ambau. (La esprimita dato-horo aperu au en la datetime-atributo, au rekte en la enhavo de la time-elemento, sed chiam lau la rigoraj reguloj por tiaj datoj-horoj.)

Se la dato (kaj horo) estas rigore esprimita per datetime-atributo, la enhavo de la time-elemento povas esprimi la samon en ajna maniero, chu precize, chu malprecize. Tiu enhavo estas tio, kio aperas por ordinaraj legantoj de la teksto:

<p>Ni rekontighis la unuan fojon en <time datetime="2001-12-31T23:59:59+01:00">la Silvestra balo</time> de IS.</p>

Jen ekzemplo kun nuraj horoj:

<p>Plej ofte mi matenmanghas je <time datetime="12:00">tagmezo</time> kaj iras labori je <time>23:15</time>.</p>

Grave: Oni ne uzu time, se la koncerna dato au horo ne estas precize indikebla, do ekzemple ne por “iam en la pasinta jarcento”, “la lastan someron”, “la frua parto de la Mezepoko” au “iu vintro chirkau la jaro 250”.

Grave: Por datoj antau la enkonduko de la Gregoria kalendaro oni au tute rezignu pri time-elementoj (tio estas rekomendata de la HTML5-normo), au oni estu tre zorgema pri la rekalkulado al Gregoriaj datoj. Tia kalkulado povas esti tre malfacila, interalie char la Gregoria kalendaro estis enkondukita je malsamaj momentoj en diversaj landoj.

Grave: Datoj antau la jaro 1 de la Gregoria kalendaro ne estas esprimeblaj per time-elemento (en la nuna versio de HTML5 - eble iam en estonta versio tio estos shanghita).

Noto: Lau la HTML5-normo time-elemento povas esti malplena, ekzemple <time datetime="2009-08-30T07:13Z"></time>. La ideo estas, ke la TTT-legiloj tiam automate aldonu enhavon en formo tauga por la koncerna uzanto (en ties lingvo, lau la agordoj de la programo). Tiam tamen legiloj, kiuj ne scias automate tion fari, precipe malnovaj legiloj, montras nenion ajn, kio plej ofte estas tre nedezirinda. Fakte ghuste nun, en Junio 2011, neniu TTT-legilo povas tion automate fari.

Precizaj reguloj pri datoj kaj horoj de time-elementoj

Nura dato

La valoro de time-elemento povas esti nura dato. Ghi devas indiki jaron, monaton kaj tagon. Inter la jaro kaj la monato, kaj inter la monato kaj la tago estu la signo -.

La jaro devas esti esprimata per almenau kvar ciferoj. La minumuma valoro estas 0001. Ekzemple: 2011, 1983, 0012, 123456.

La monato devas esti esprimata per du ciferoj. La minumuma valoro estas 01 (= Januaro). La maksimuma valoro estas 12 (= Decembro).

La tago devas esti esprimata per du ciferoj. La minumuma valoro estas 01. La maksimuma valoro estas 31 (sed la maksimumo ankau devas laui la nombron de tagoj en la koncerna monato kaj la koncerna jaro).

Ekzemploj:

2011-06-09
la 9a de Junio de la jaro 2011 K.E. (= la Komuna Eraro, “post Kristo”)
0011-02-28
la 28a de Februaro de la jaro 11 K.E.
345678-01-01
la 1a de Januaro de la jaro 345678 K.E.
Nura horo

La valoro de time-elemento povas esti nura horo. Ghi devas indiki horon kaj minuton kaj povas indiki ankau sekundon. La sekundo povas havi unu au pli da decimaloj. Inter la horo kaj la minuto, kaj inter la minuto kaj la eventuala sekundo, estu la signo :. Eventualaj decimaloj de la sekundo komencighu per decimala punkto (.).

La horo devas esti esprimata per du ciferoj, kaj devas sekvi la 24-horan sistemon. La minuma valoro estas 00. La maksimuma valoro estas 23.

La minutoj devas esti esprimata per du ciferoj. La minimuma valoro estas 00. La maksimuma valoro estas 59.

La sekundo devas esti esprimata per du ciferoj plus eventuala decimala punkto kaj sekvantaj decimaloj. La minimuma valoro estas 00. La maksimuma valoro estas 59.9999.... (Supersekundoj, 60 au 61, ne povas esti indikitaj.)

Ekzemploj:

12:01
la 12a horo kaj unu minuto
00:01:59
1 minuto kaj 59 sekundoj post noktomezo
21:00:34.54321
34,54321 sekundoj post la 21a horo
Loka dato kaj horo

La valoro de time-elemento povas esti loka dato kaj horo. Ghi devas konsisti el dato lau la chi-antauaj klarigoj plus la litero T plus horo lau la chi-antauaj klarigoj. Horzono ne estas esprimata.

Ekzemploj:

2011-06-09T12:00
la 12a horo de la 9a de Junio de la jaro 2011 K.E.
0011-02-28T15:14:13
14 minutoj kaj 13 sekundoj post la 15a horo de la 28a de Februaro de la jaro 11 K.E.
345678-01-01T00:00:01.1111
1,1111 sekundoj post noktomezo de la 1a de Januaro de la jaro 345678 K.E.
Tuttera dato kaj horo

La valoro de time-elemento povas esti tuttera dato kaj horo. Ghi devas konsisti el dato lau la chi-antauaj klarigoj plus la litero T plus horo lau la chi-antauaj klarigoj plus indiko de horzono

Horzono povas esti indikata de la litero Z por la horzono UTC. Alie la horzona indiko konsistu el la signo + (pluso) au la signo - (minuso) kaj la diferenco kompare kun la horzono UTC. La diferenco konsistu el la horo kun du ciferoj (00 - 23), la signo : kaj la minutoj kun du ciferoj (00 - 59). La minimuma horzona valoro estas -23:59. La maksimuma horzona valoro estas +23:59.

Ekzemploj:

2011-06-09T12:00Z
la 12a horo de la 9a de Junio de la jaro 2011 K.E. en la horzono UTC
0011-02-28T15:14:13+01:00
14 minutoj kaj 13 sekundoj post la 15a horo de la 28a de Februaro de la jaro 11 K.E. en la horzono unu horon antau UTC
345678-01-01T00:00:01.1111-05:37
1,1111 sekundoj post noktomezo de la 1a de Januaro de la jaro 345678 K.E. en la horzono kvin horojn kaj 37 minutojn post UTC

mark

La elemento mark reprezentas tekston, kiu estas aparte elstarigita por referenca celo, pro ghia koncerno en alia kunteksto.

Kiam mark estas uzata en citajho au en tekstobloko aparte referencata en la ordinara teksto, tiam mark esprimas elstarigon, kiu ne cheestis origine, sed kiu nun estas ekzamenata au interesa en maniero antaue ne konsiderata.

Kiam mark uzighas en ordinara parto de dokumento, ghi indikas tekstoparton, kiu estas elstarigita pro sia supozata koncerneco lau la aktuala agado de la uzanto.

Jen ekzemplo de mark en citata teksto:

<p>Jen interesa ekzemplo el la Fundamento de Esperanto:</p>

<blockquote>
  <p>La reghido, kiu vidis, ke el shia busho eliris <mark>kelke</mark>
  da perloj kaj <mark>kelke</mark> da diamantoj, petis shin,
  ke shi diru al li, de kie tio chi venas.</p>
</blockquote>

<p>Rimarku la tiean uzon de la vorto “kelke”. Tio estas nuntempe tre malofta, eble ech arhhaika.</p>

En la Fundamento mem tiuj aperoj de “kelke” estis tute ordinaraj partoj de la teksto, sen speciala signifo au graveco, kaj sen aparta stilo.

mark kredeble estos multe uzata, kiam oni venas al TTT-pagho pere de sercho che Guglo au simila servo. Tiam mark povas indiki tiajn vortojn, kiuj kongruas kun la uzata serchesprimo. Jen ekzemplo:

<p><mark class="trafo">Katoj</mark> estas tre dolchaj bestoj, kiuj shatas esti karesataj. Mia <mark class="trafo">kato</mark> surprize ofte manghas berojn kaj fruktojn. Tio estas lau mi tre nekutima.</p>

La pagho normale ne havas mark-elementojn che la vorto ”kato(j)”, sed chi-foje tamen ricevis tiajn markojn, char la vizitanto venis al la pagho post serchado de tiuj vortoj che Yahoo au Bing au simila TTT-ejo. Tial tiu vorto estas chi-okaze aparte interesa por la koncerna vizitanto.

Jen ligilo al pagho kun la chi-antauaj ekzemploj de la mark-elemento; se via TTT-legilo konas la novan elementon mark, ghi espereble elstarigas por vi la tiel markitajn vortojn.

wbr

La elemento wbr reprezentas lokon, kie estas oportune enmeti linirompon je bezono (sen aldoni dividostrekon!). wbr estas malplena elemento, chiam sen enhavo.

En la sekva ekzemplo uzighas nenormala longega vorto (kunigo de pluraj vortoj). Por certigi, ke la teksto estu ghuste prezentata, kiam mankas spaco por tiu tuta vorto sur unu linio, oni enmetis plurajn wbr-elementojn:

<p>Li fingromontris al la tigro kaj kriis rapidege:
“neniam<wbr>ajn<wbr>neniel<wbr>ajn<wbr>vi<wbr>sukcesos<wbr>kapti<wbr>min<wbr>vi<wbr>stulta<wbr>malrapidega<wbr>tigracho!”</p>

Noto: Kelkaj TTT-legiloj jam delonge komprenas kaj ghuste interpretas la markon wbr, kiu estis inventita de Netscape jam antau multaj jaroj. Sed nur ekde HTML5 wbr estas launorma elemento. Aliaj TTT-legiloj, ech sufiche novaj, ghin tamen ne regas.

Jen ligilo al pagho kun la chi-antaua ekzemplo de la wbr-elemento; se via TTT-legilo konas la novan elementon, ghi espereble rompos la vorton, se la spaco ne sufichas (la alineoj estas per stilregulo aparte mallarghigitaj por akcenti la bezonon de linirompoj).

bdi

La elemento bdi reprezentas tekston, kiu estu izolita de la chirkaua teksto por la celo de dudirekta tekstoprezentado. bdi povas iafoje esti uzinda, kiam oni miksas plurajn skribosistemojn, kiuj havas malsaman skribodirekton (dedekstre-maldekstren au demaldekstre-dekstren), kaj precipe, kiam la tekstodirekto de iu tekstoparto estas nekonata (ekzemple char la enhavo povas varii). bdi-elemento povas havi la atributon dir, kies valoro povas esti ltr = “demaldekstre-dekstren”, rtl = “dedekstre-maldekstren” au auto = “automate”. La defaulta valoro estas auto. bdi neniam heredas indikon pri tekstodirekto de la patra teksto. Por ghuste uzi bdi necesas zorge informighi pri la kompleksega temo de diversdirekta teksto en mikslingvaj dokumentoj. Oni krome atentu, ke nur tre modernaj legiloj kapablas ghuste prezenti tiajn dokumentojn, kaj oni aparte notu, ke ankorau (en Junio 2011) neniu TTT-legilo (lau mia scio) scias ghuste trakti bdi-elementojn. Komparu kun la similcela elemento bdo, kiu estas pli malnova, kaj kiu sekve estas iom pli bone regata de TTT-legiloj.

Jen ekzemplo, en kiu nomoj de uzanto prezentighas kune kun la nombro de afishoj, per kiun chiu uzanto kontribuis. En unu loko aperas Araba nomo (Araba skribo iras dedekstre maldekstren). Se oni ne uzus bdi-elementon por la Araba nomo, ghi konfuzus la prezentadon: La dupunkto kaj la cifero “3” tiam mise aperus (en modernaj TTT-legiloj) apud la vorto “uzanto” anstatau apud la vorto “afishoj”, kie ghi devas esti:

<ul>
 <li>Uzanto <bdi>jcranmer</bdi>: 12 afishoj.</li>
 <li>Uzanto <bdi>hober</bdi>: 5 afishoj.</li>
 <li>Uzanto <bdi>إيان</bdi>: 3 afishoj.</li>
</ul>

Jen ligilo al pagho kun la chi-antaua ekzemplo de la bdi-elemento; se via TTT-legilo konas la elementon bdi kaj se ghi scias bone trakti tekston kun miksita direkteco, ghi eble ghuste prezentos tiun ekzemplon.

ruby, rt, rp

La elemento ruby servas por aldoni (interliniajn malgrandtipajn) elparolajn klarigojn, notetojn au glosojn al pecoj de kuranta (ne-bloka) teksto. Tia speco de klarigoj estas nomata ruben(tip)a (lau malnova Brita tipografiista jhargono, ruby, por tipo granda je 5,5 punktoj, nomata agate de Usonaj tipografiistoj).

Rubentipaj klarigoj estas uzataj precipe en la Japana kaj la China por elparolaj klarigoj de (maloftaj) Chinaj signoj. La klarigoj aperas ordinare super la koncernaj signoj (au dekstre, se la chefa teksto iras desupre malsupren). (En la Japana tiaj klarigoj nomighas furigana.)

Ene de ruby-elemento aperas kaj la klarigata teksto kaj la rilataj klarigoj, notetoj au glosoj. La klarigoj/notetoj/glosoj estu en rt-elementoj.

Jen ekzemplo de ruby-teksto en la Japana kun klarigoj per rondaj kanaoj:

<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

Jen ekzemplo de ruby-teksto en la China kun klarigoj per bopomo-skribo:

<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby>

Jen ekzemplo de ruby-teksto en la China kun Latinliteraj klarigoj Pinjinaj:

<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>

Kiel helpo al TTT-legiloj, kiuj ne bone regas ruby-elementojn, oni povas uzi rp-elementojn, kiuj enhavu krampojn antau kaj post la klariga teksto. Legiloj, kiuj regas ruby-on, ignoras la krampojn, dum legiloj, kiuj ne regas ruby-on, prezentas la krampojn. Jen Japana ekzemplo kun klarigoj per rondaj kanaoj:

<ruby>
  漢<rp> (</rp><rt>かん</rt><rp>)</rp>
  字<rp> (</rp><rt>じ</rt><rp>)</rp>
</ruby>

Alia stilo, ofta en la Korea lingvo, uzas Chinajn signojn kiel klarigajn notetojn de alfabeta Korea skribo:

<ruby>한자<rp>(</rp><rt>漢字</rt><rp>)</rp></ruby>

En ordinaraj Koreaj tekstoj tiaj klarigaj Chinaj signoj tamen plej ofte aperas simple interkrampe post la klarigata Korea teksto, do ne en vera rubentipa stilo.

Jen ligilo al pagho kun la chi-antauaj ekzemploj de ruby. Se via TTT-legilo ne regas ruby-ajn klarigojn, nur la ekzemploj kun rp-elementoj estas bone legeblaj. Por la Korea ekzemplo uzighas stilfoliaj reguloj, kiuj provas doni Korestilan aspekton al la ruby-aj klarigoj (t.e. la stilfolio provas nuligi la ordinaran efikon de la rt-elemento!).

video, audio, embed, object

La elementoj video kaj audio estas kredeble la plej vaste konataj kaj diskutataj novaj elementoj en HTML5. (Iafoje oni ech povas ricevi la impreson, ke HTML5 konsistas sole kaj nure el tiuj du novaj elementoj...) Tiuj elementoj ebligas enkorpigi filmojn (per video) kaj sondosierojn/sonfluojn (per audio) rekte en HTML5-paghojn. Tiucele oni uzadis ghis nun precipe aldonajn kromprogramojn bazitajn chefe sur Flasho (Flash). video kaj audio espereble forigos la bezonon de kromprogramoj por filmoj kaj sonoj en TTT-paghoj.

La temo de video kaj audio estas kompleksa, kaj mi pritraktos ghin chi tie nur tre suprajhe. Ankorau ne chiuj TTT-legiloj regas tiujn elementojn, kaj krome ne chiuj TTT-legiloj allasas chiujn specojn de filmoj kaj sondosieroj.

Antaue oni uzis por tiaj chi celoj la elementojn embed kaj object. El tiuj nur object estis oficiala parto de iu HTML-normo. La nenorma elemento embed tamen funkcias jam de longe en plej multaj TTT-legiloj. Ekde HTML5 ghi estas rekonata kiel oficiala parto de HTML.

video

La elemento video reprezentas film(et)on (kiu ofte enhavas ankau sonon). Jen tipa ekzemplo:

<video width="640" height="360" controls="controls">
  <source src="video.webm" type="video/webm"/>
  <source src="video.ogv" type="video/ogg"/>
  <source src="video.mp4" type="video/mp4"/>
  <p>
    Shajnas, ke la <code>video</code>-elemento
    (kun filmo en WEBM-formo, OGG-formo au MP4-formo)
    ne funkcias en via TTT-legilo.
    Vi povas anstataue elshuti la filmon:
      <a href="video.webm">video.webm</a>
      au
      <a href="video.mp4">video.mp4</a>.
  </p>
</video>

Jen ligilo al pagho kun la chi-antaua ekzemplo de video. Tute povas esti, ke en via TTT-legilo la filmo ne montrighos, char ankorau ne chiuj TTT-legiloj regas la elementon video.

Ene de tiu video-elemento aperas tri source-elementoj, kiuj indikas per src-atributo kaj type-atributo tri malsamajn versiojn de la filmo (en tri malsamaj formoj). La TTT-legilo elektas la unuan version, kiun ghi kapablas ludigi. Fine estas p-elemento kiel surogata enhavo uzota, se la TTT-legilo tute ne regas video-elementojn.

En la ekzemplo aperas tri atributoj de la video-elemento:

width
indikas per nombro de bilderoj la larghon uzotan por la filmo
height
indikas per nombro de bilderoj la alton uzotan por la filmo
controls
bulea atributo, kiu indikas, ke la TTT-legilo aldonu regilojn por la filmon startigi, pauzigi, haltigi k.s.

video-elementoj povas havi ankau diversajn aliajn atributojn. Jen kelkaj el ili:

src
indikas la ludigotan filmon, se oni ne uzas ena(j)n source-elemento(j)n por tiu celo: src="video.webm"
poster
indikas bildon, kiu estu montrata anstatau la filmo, kiam la filmo ne estas ludigata, ekzemple: poster="filmbildo.png"
autoplay
bulea atributo, kiu indikas, ke la TTT-legilo automate ekludigu la filmon: autoplay="autoplay"
loop
bulea atributo, kiu indikas, ke la TTT-legilo automate reludigu la filmon, kiam ghi atingas la finon: loop="loop"
muted
bulea atributo, kiu indikas, ke la sono de la filmo estu dekomence malshaltita (sed shaltebla de la uzanto): muted="muted"

audio

La elemento audio reprezentas sondosieron au sonfluon. Jen tipa ekzemplo:

<audio controls="controls">
  <source src="la_chielo.ogg" type="audio/ogg"/>
  <source src="la_chielo.mp3" type="audio/mpeg"/>
  <p>
    Shajnas, ke la <code>audio</code>-elemento
    (kun sono en OGG-formo au MP3-formo)
    ne funkcias en via TTT-legilo.
    Vi povas anstataue elshuti la sondosieron:
      <a href="la_chielo.ogg">la_chielo.ogg</a>
      au
      <a href="la_chielo.mp3">la_chielo.mp3</a>.
  </p>
</audio>

Jen ligilo al pagho kun la chi-antaua ekzemplo de audio. Tute povas esti, ke en via TTT-legilo la sono ne audighos, char ankorau ne chiuj TTT-legiloj regas la elementon audio.

Ene de tiu audio-elemento aperas du source-elementoj, kiuj indikas per src-atributo kaj type-atributo du malsamajn versiojn de la sono (en du malsamaj formoj). La TTT-legilo elektas la unuan version, kiun ghi kapablas ludigi. Fine estas p-elemento kiel surogata enhavo uzota, se la TTT-legilo tute ne regas audio-elementojn.

En la ekzemplo aperas unu atributo de la audio-elemento:

controls
bulea atributo, kiu indikas, ke la TTT-legilo aldonu regilojn por la sonon startigi, pauzigi, haltigi k.s.

audio-elementoj povas havi ankau diversajn aliajn atributojn. Jen kelkaj el ili:

src
indikas la ludigotan sonon, se oni ne uzas ena(j)n source-elemento(j)n por tiu celo: src="audio.ogg"
autoplay
bulea atributo, kiu indikas, ke la TTT-legilo automate ekludigu la sonon: autoplay="autoplay"
loop
bulea atributo, kiu indikas, ke la TTT-legilo automate reludigu la sonon, kiam ghi atingas la finon: loop="loop"
muted
bulea atributo, kiu indikas, ke la sono estu dekomence malshaltita (sed shaltebla de la uzanto): muted="muted"

embed, object

La elementoj embed kaj object esence plenumas la saman taskon: per ili eblas enkorpigi ion eksteran (bildon, sonon, filmon, ludon, interagan rimedon...) en HTML-paghon. Origine object estis inventita kaj favorata de la TTT-legilo Esplorilo, kaj farighis oficiala parto de HTML 4 kaj XHTML, dum embed estis inventita kaj favorata de la iama TTT-legilo Netscape (kaj restis neoficiala). De multaj jaroj oni uzadas ambau kune por ebligi enkorpigadon de filmoj k.s. en HTML-paghojn. Nun en HTML5 ambau elementoj, iom redunde, estas normaj. En la praktiko oni uzas tiujn chi elementojn precipe por filmoj, sonoj kaj por Flashajhoj (kreitaj per Flash).

embed

La elemento embed estas chiam malplena (simile al ekzemple la elemento img). Jen ekzemplo de embed uzata por aperigi puzloludon:

<embed width="400" height="267"
  src="AS2_PuzzleGame.swf" type="application/x-shockwave-flash"
/>

La koncerna enhavo estas chiam indikata pere de src-atributo. Ne eblas indiki diversajn alternativajn versiojn (tio eblas che video kaj ankau che object). La montritaj atributoj width, height, src kaj type funkcias same kiel che video.

Jen ligilo al pagho kun la chi-antaua ekzemplo de embed.

object

La elemento object funkcias simile al video kaj audio, sed uzas iom aliajn atributojn kaj enajn elementojn. Jen ekzemplo de object uzata por aperigi puzloludon kreitan per Flasho:

<object width="400" height="267"
  data="AS2_PuzzleGame.swf"
  type="application/x-shockwave-flash">
  <p>
    Shajnas, ke la <code>object</code>-elemento
    (kun puzloludo en Flash-formo)
    ne funkcias en via TTT-legilo.
  </p>
</object>

La koncerna enhavo estas indikata pere de data-atributo. La montritaj atributoj width, height, kaj type funkcias same kiel che video. Aldone oni povas per enaj param-elementoj doni pliajn parametrojn al la enkorpigata objekto: <param name="ianomo" value="iavaloro"/>. Kiaj parametroj estas eblaj, bezonataj au almetindaj, tute dependas de la speco de objekto.

Jen ligilo al pagho kun la chi-antaua ekzemplo de object.

object kaj embed kune

Pro tio, ke object permesas alternativan enhavon ene de si, oni ofte uzas enan embed-elementon, kiu provizas la saman objekton. TTT-legiloj, kiuj ne komprenas object, sed ja komprenas embed, automate uzas embed anstatau object:

<object
  width="400" height="267"
  data="AS2_PuzzleGame.swf"
  type="application/x-shockwave-flash">
  <embed width="400" height="267"
    src="AS2_PuzzleGame.swf" type="application/x-shockwave-flash"
  />
</object>

Jen ligilo al pagho kun la chi-antaua ekzemplo de object kaj embed kune.

video, embed kaj object kune

Ankau video povas havi enan alternativan enhavon. Sekve oni povas krei ech tri-nivelan aranghon kun embed ene de object ene de video. Jen tia superprudenta, sed sufiche komplika arangho por montri filmon, kiu kredeble devas iele funkcii en treege multaj TTT-legiloj:

<video width="640" height="360" controls="controls">
  <source src="video.webm" type="video/webm"/>
  <source src="video.ogv" type="video/ogg"/>
  <source src="video.mp4" type="video/mp4"/>
  <object
    width="640" height="360"
    data="video.webm"
    type="video/webm">
    <embed width="640" height="360"
      src="video.webm" type="video/webm"
    />
  </object>
</video>

Jen ligilo al pagho kun la chi-antaua ekzemplo de video, object kaj embed kune.

Tio estas iom komplika, sed tamen ankorau relative tolerebla kaj uzebla, sed se oni bezonas aldoni ankoarau pli da atributoj kaj parametroj al la filmo, tiam oni devas tiujn informojn iel ripeti en iom diversaj manieroj en chiu el tiuj tri niveloj, kio povas finfine rezultigi multe tro komplikan kodon. Espereble baldau tiaj ekstremaj aranghoj entute ne plu necesos.

Simila HTML-kodo eblas ankau kun audio kunlabore kun object kaj embed.

canvas

La elemento canvas reprezentas kanvason, sur kiu eblas per programo, t.e. per Javaskripto, desegni au pentri ion, ekzemple grafikajhon, diagramon, movighantan ornamajhon au ion alian (kio ankau povas shanghighi, eble interage). canvas per si mem estas sensenca. Oni devas ghin manipuli per Javaskripto por doni al ghi enhavon. Sed ene de canvas-elemento oni povas meti alternativan enhavon, kiu estas montrata, se la TTT-legilo ne regas canvas-on.

La uzo de canvas estas tre kompleksa kaj vasta temo, kiu koncernas precipe programadon per Javaskripto. Tio ne estas la temo de tiuj chi paghoj. Tial mi nur montras unu ilustran ekzemplon de canvas:

<canvas id="desegnejo" width="200" height="200">
  <p>Via TTT-legilo ne regas <code>canvas</code>-elementojn.</p>
</canvas>

Jen ligilo al pagho kun la chi-antaua ekzemplo de canvas kaj kun Javaskripta kodo, kiu ion desegnas sur tiu canvas-o.

Rimarkindas, ke sur canvas oni desegnas au pentras bilderojn. Alternativo al canvas estas vektora grafiko pere de SVG-elementoj, sed ankau SVG estas temo iom troa por tiuj chi paghoj.

command, details, summary

La tri elementoj command, details kaj summary estas celitaj por tiaj TTT-paghoj, kiuj pli similas al programoj ol al dokumentoj. La nunaj (en Junio 2011) TTT-legiloj (krom la plej freshaj versioj de la legilo Chrome) ankorau ne regas tiujn tri elementojn, kaj tial ili estas chi tie nur tre pase priskribataj:

command
reprezentas komandon, kiun la uzanto povas uzi; tia komando povas aperi en kunteksta menuo au sur ilobreto, kiel parto de menu-elemento, au ghi povas aperi en alia loko de la “pagho”
details
reprezentas malkovreblan fenestrajhon, pere de kiu la uzanto povas atingi pliajn informojn au pliajn regilojn
summary
reprezentas resumon, apudskribon au klarigeton por la resto de la enhavo de patra details-elemento

Al la sekva parto, “Novajhoj: Forigitaj elementoj”