HTML5

Novajxoj: Aldonitaj elementoj

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

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

figure, figcaption

La elemento figure reprezentas ilustrajxon, 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 gxi senprobleme povas esti movata ekzemple al la flanko de pagxo aux al aparta pagxo aux al apendico.

Komence aux fine de figure-elemento oni povas uzi la elementon figcaption, kiu reprezentas apudskribon (titoleton) de la koncerna figure. Cxiu 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 mangxante vinberojn"/>
  <figcaption>Ilustrajxo 1: Nia kato Tini tre sxatas vinberojn</figcaption>
</figure>

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

<figure>
  <img
  src="tini_vinberoj.jpg"
  alt="Tini staras sur tablo mangxante vinberojn"/>
  <figcaption>Ilustrajxo 1: Nia kato Tini tre sxatas vinberojn</figcaption>
</figure>

figure povas aperi ankaux 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>Ilustrajxo 2: Niaj katoj tre sxatas fruktojn kaj berojn</figcaption>
  
  <img src="tini_vinberoj.jpg"
  alt="Tini staras sur tablo mangxante 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 ilustrajxo aux 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 gxin 
la kortusxan poemon <cite>Ho mia kor’</cite>, kiu finigxas jene:</p>

<blockquote>
  <p>Ho, mia kor'! Post longa laborado<br/>
  cxu mi ne venkos en decida hor'?<br/>
  Suficxe! trankviligxu 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 gxusta elemento.

Jen ligilo al pagxo kun la cxi-antauxaj ekzemploj de la figure-elemento, kaj ankaux la jxusa ekzemplo sen figure - la ekzemploj estas enmetitaj en pli vastan (suficxe sensencan) enhavon.

time

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

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

<p>Georgo Vasxington 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 naskigxdato de Vasxington tamen sekvas la Julian kalendaron, kiu validis, kiam li naskigxis.

Jen ekzemplo kun horo:

<article>
  <h1>Sensacia novajxo</h1>
  <p>Hodiaux 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 antaux la indiko de horo en la atributo datetime aperas la litero T. Post gxi aperas la litero Z. La T signifas simple, ke tie komencigxas la horo. La Z signifas, ke la uzata horzono estas UTC (la Universala Tempo Kunordigita, antauxe nomata GMT aux la Grenvicxa horzono). Sed ankaux eblas uzi aliajn horzonojn. Vidu la detalajn regulojn pri tiaj cxi datoj kaj horoj.

Rimarku ankaux la atributon pubdate (kiu estas t.n. bulea atributo). Per gxi 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, aux de la tuta pagxo (se la time-elemento ne estas ene de article). Ene de cxiu article rajtas aperi maksimume unu tia time-elemento kun indiko pri pubdate. Simile cxiu pagxo povas havi maksimume unu tian time-elementon, kiu montras ties publikigodaton. Se cxeestas la atributo pubdate, la time-elemento devas esprimi daton, kaj rajtas esprimi ankaux horon. Se forestas la atributo pubdate, la time-elemento devas esprimi aux daton aux horon aux ambaux. (La esprimita dato-horo aperu aux en la datetime-atributo, aux rekte en la enhavo de la time-elemento, sed cxiam laux 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, cxu precize, cxu malprecize. Tiu enhavo estas tio, kio aperas por ordinaraj legantoj de la teksto:

<p>Ni rekontigxis 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 matenmangxas 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 aux horo ne estas precize indikebla, do ekzemple ne por “iam en la pasinta jarcento”, “la lastan someron”, “la frua parto de la Mezepoko” aux “iu vintro cxirkaux la jaro 250”.

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

Grave: Datoj antaux 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 sxangxita).

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

Precizaj reguloj pri datoj kaj horoj de time-elementoj

Nura dato

La valoro de time-elemento povas esti nura dato. Gxi 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 almenaux 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 ankaux devas lauxi 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. Gxi devas indiki horon kaj minuton kaj povas indiki ankaux sekundon. La sekundo povas havi unu aux 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 komencigxu 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 aux 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. Gxi devas konsisti el dato laux la cxi-antauxaj klarigoj plus la litero T plus horo laux la cxi-antauxaj 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. Gxi devas konsisti el dato laux la cxi-antauxaj klarigoj plus la litero T plus horo laux la cxi-antauxaj 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) aux 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 antaux 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 gxia koncerno en alia kunteksto.

Kiam mark estas uzata en citajxo aux en tekstobloko aparte referencata en la ordinara teksto, tiam mark esprimas elstarigon, kiu ne cxeestis origine, sed kiu nun estas ekzamenata aux interesa en maniero antauxe ne konsiderata.

Kiam mark uzigxas en ordinara parto de dokumento, gxi indikas tekstoparton, kiu estas elstarigita pro sia supozata koncerneco laux 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 regxido, kiu vidis, ke el sxia busxo eliris <mark>kelke</mark>
  da perloj kaj <mark>kelke</mark> da diamantoj, petis sxin,
  ke sxi diru al li, de kie tio cxi venas.</p>
</blockquote>

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

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

mark kredeble estos multe uzata, kiam oni venas al TTT-pagxo pere de sercxo cxe Guglo aux simila servo. Tiam mark povas indiki tiajn vortojn, kiuj kongruas kun la uzata sercxesprimo. Jen ekzemplo:

<p><mark class="trafo">Katoj</mark> estas tre dolcxaj bestoj, kiuj sxatas esti karesataj. Mia <mark class="trafo">kato</mark> surprize ofte mangxas berojn kaj fruktojn. Tio estas laux mi tre nekutima.</p>

La pagxo normale ne havas mark-elementojn cxe la vorto ”kato(j)”, sed cxi-foje tamen ricevis tiajn markojn, cxar la vizitanto venis al la pagxo post sercxado de tiuj vortoj cxe Yahoo aux Bing aux simila TTT-ejo. Tial tiu vorto estas cxi-okaze aparte interesa por la koncerna vizitanto.

Jen ligilo al pagxo kun la cxi-antauxaj ekzemploj de la mark-elemento; se via TTT-legilo konas la novan elementon mark, gxi 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, cxiam sen enhavo.

En la sekva ekzemplo uzigxas nenormala longega vorto (kunigo de pluraj vortoj). Por certigi, ke la teksto estu gxuste 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>tigracxo!”</p>

Noto: Kelkaj TTT-legiloj jam delonge komprenas kaj gxuste interpretas la markon wbr, kiu estis inventita de Netscape jam antaux multaj jaroj. Sed nur ekde HTML5 wbr estas lauxnorma elemento. Aliaj TTT-legiloj, ecx suficxe novaj, gxin tamen ne regas.

Jen ligilo al pagxo kun la cxi-antauxa ekzemplo de la wbr-elemento; se via TTT-legilo konas la novan elementon, gxi espereble rompos la vorton, se la spaco ne suficxas (la alineoj estas per stilregulo aparte mallargxigitaj por akcenti la bezonon de linirompoj).

bdi

La elemento bdi reprezentas tekston, kiu estu izolita de la cxirkauxa teksto por la celo de dudirekta tekstoprezentado. bdi povas iafoje esti uzinda, kiam oni miksas plurajn skribosistemojn, kiuj havas malsaman skribodirekton (dedekstre-maldekstren aux demaldekstre-dekstren), kaj precipe, kiam la tekstodirekto de iu tekstoparto estas nekonata (ekzemple cxar la enhavo povas varii). bdi-elemento povas havi la atributon dir, kies valoro povas esti ltr = “demaldekstre-dekstren”, rtl = “dedekstre-maldekstren” aux auto = “auxtomate”. La defauxlta valoro estas auto. bdi neniam heredas indikon pri tekstodirekto de la patra teksto. Por gxuste uzi bdi necesas zorge informigxi pri la kompleksega temo de diversdirekta teksto en mikslingvaj dokumentoj. Oni krome atentu, ke nur tre modernaj legiloj kapablas gxuste prezenti tiajn dokumentojn, kaj oni aparte notu, ke ankoraux (en Junio 2011) neniu TTT-legilo (laux mia scio) scias gxuste 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 prezentigxas kune kun la nombro de afisxoj, per kiun cxiu uzanto kontribuis. En unu loko aperas Araba nomo (Araba skribo iras dedekstre maldekstren). Se oni ne uzus bdi-elementon por la Araba nomo, gxi konfuzus la prezentadon: La dupunkto kaj la cifero “3” tiam mise aperus (en modernaj TTT-legiloj) apud la vorto “uzanto” anstataux apud la vorto “afisxoj”, kie gxi devas esti:

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

Jen ligilo al pagxo kun la cxi-antauxa ekzemplo de la bdi-elemento; se via TTT-legilo konas la elementon bdi kaj se gxi scias bone trakti tekston kun miksita direkteco, gxi eble gxuste prezentos tiun ekzemplon.

ruby, rt, rp

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

Rubentipaj klarigoj estas uzataj precipe en la Japana kaj la Cxina por elparolaj klarigoj de (maloftaj) Cxinaj signoj. La klarigoj aperas ordinare super la koncernaj signoj (aux dekstre, se la cxefa teksto iras desupre malsupren). (En la Japana tiaj klarigoj nomigxas furigana.)

Ene de ruby-elemento aperas kaj la klarigata teksto kaj la rilataj klarigoj, notetoj aux 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 Cxina kun klarigoj per bopomo-skribo:

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

Jen ekzemplo de ruby-teksto en la Cxina 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 antaux 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 Cxinajn signojn kiel klarigajn notetojn de alfabeta Korea skribo:

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

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

Jen ligilo al pagxo kun la cxi-antauxaj 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 uzigxas 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 ecx 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-pagxojn. Tiucele oni uzadis gxis nun precipe aldonajn kromprogramojn bazitajn cxefe sur Flasxo (Flash). video kaj audio espereble forigos la bezonon de kromprogramoj por filmoj kaj sonoj en TTT-pagxoj.

La temo de video kaj audio estas kompleksa, kaj mi pritraktos gxin cxi tie nur tre suprajxe. Ankoraux ne cxiuj TTT-legiloj regas tiujn elementojn, kaj krome ne cxiuj TTT-legiloj allasas cxiujn specojn de filmoj kaj sondosieroj.

Antauxe oni uzis por tiaj cxi 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 gxi estas rekonata kiel oficiala parto de HTML.

video

La elemento video reprezentas film(et)on (kiu ofte enhavas ankaux 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>
    Sxajnas, ke la <code>video</code>-elemento
    (kun filmo en WEBM-formo, OGG-formo aux MP4-formo)
    ne funkcias en via TTT-legilo.
    Vi povas anstatauxe elsxuti la filmon:
      <a href="video.webm">video.webm</a>
      aux
      <a href="video.mp4">video.mp4</a>.
  </p>
</video>

Jen ligilo al pagxo kun la cxi-antauxa ekzemplo de video. Tute povas esti, ke en via TTT-legilo la filmo ne montrigxos, cxar ankoraux ne cxiuj 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 gxi 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 largxon 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, pauxzigi, haltigi k.s.

video-elementoj povas havi ankaux 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 anstataux la filmo, kiam la filmo ne estas ludigata, ekzemple: poster="filmbildo.png"
autoplay
bulea atributo, kiu indikas, ke la TTT-legilo auxtomate ekludigu la filmon: autoplay="autoplay"
loop
bulea atributo, kiu indikas, ke la TTT-legilo auxtomate reludigu la filmon, kiam gxi atingas la finon: loop="loop"
muted
bulea atributo, kiu indikas, ke la sono de la filmo estu dekomence malsxaltita (sed sxaltebla de la uzanto): muted="muted"

audio

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

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

Jen ligilo al pagxo kun la cxi-antauxa ekzemplo de audio. Tute povas esti, ke en via TTT-legilo la sono ne auxdigxos, cxar ankoraux ne cxiuj 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 gxi 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, pauxzigi, haltigi k.s.

audio-elementoj povas havi ankaux 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 auxtomate ekludigu la sonon: autoplay="autoplay"
loop
bulea atributo, kiu indikas, ke la TTT-legilo auxtomate reludigu la sonon, kiam gxi atingas la finon: loop="loop"
muted
bulea atributo, kiu indikas, ke la sono estu dekomence malsxaltita (sed sxaltebla 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-pagxon. Origine object estis inventita kaj favorata de la TTT-legilo Esplorilo, kaj farigxis 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 ambaux kune por ebligi enkorpigadon de filmoj k.s. en HTML-pagxojn. Nun en HTML5 ambaux elementoj, iom redunde, estas normaj. En la praktiko oni uzas tiujn cxi elementojn precipe por filmoj, sonoj kaj por Flasxajxoj (kreitaj per Flash).

embed

La elemento embed estas cxiam 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 cxiam indikata pere de src-atributo. Ne eblas indiki diversajn alternativajn versiojn (tio eblas cxe video kaj ankaux cxe object). La montritaj atributoj width, height, src kaj type funkcias same kiel cxe video.

Jen ligilo al pagxo kun la cxi-antauxa 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 Flasxo:

<object width="400" height="267"
  data="AS2_PuzzleGame.swf"
  type="application/x-shockwave-flash">
  <p>
    Sxajnas, ke la <code>object</code>-elemento
    (kun puzloludo en Flasx-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 cxe 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 aux almetindaj, tute dependas de la speco de objekto.

Jen ligilo al pagxo kun la cxi-antauxa 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, auxtomate uzas embed anstataux 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 pagxo kun la cxi-antauxa ekzemplo de object kaj embed kune.

video, embed kaj object kune

Ankaux video povas havi enan alternativan enhavon. Sekve oni povas krei ecx tri-nivelan arangxon kun embed ene de object ene de video. Jen tia superprudenta, sed suficxe komplika arangxo 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 pagxo kun la cxi-antauxa ekzemplo de video, object kaj embed kune.

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

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

canvas

La elemento canvas reprezentas kanvason, sur kiu eblas per programo, t.e. per Javaskripto, desegni aux pentri ion, ekzemple grafikajxon, diagramon, movigxantan ornamajxon aux ion alian (kio ankaux povas sxangxigxi, eble interage). canvas per si mem estas sensenca. Oni devas gxin manipuli per Javaskripto por doni al gxi 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 cxi pagxoj. 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 pagxo kun la cxi-antauxa ekzemplo de canvas kaj kun Javaskripta kodo, kiu ion desegnas sur tiu canvas-o.

Rimarkindas, ke sur canvas oni desegnas aux pentras bilderojn. Alternativo al canvas estas vektora grafiko pere de SVG-elementoj, sed ankaux SVG estas temo iom troa por tiuj cxi pagxoj.

command, details, summary

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

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

Al la sekva parto, “Novajxoj: Forigitaj elementoj”