HTML5

Novaĵoj: Aldonitaj elementoj

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

Novaj elementoj, kiuj uziĝas en formularoj, estas traktataj aparte.

figure, figcaption

La elemento figure reprezentas ilustraĵon, 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 ĝi senprobleme povas esti movata ekzemple al la flanko de paĝo aŭ al aparta paĝo aŭ al apendico.

Komence aŭ fine de figure-elemento oni povas uzi la elementon figcaption, kiu reprezentas apudskribon (titoleton) de la koncerna figure. Ĉiu 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 manĝante vinberojn"/>
  <figcaption>Ilustraĵo 1: Nia kato Tini tre ŝatas vinberojn</figcaption>
</figure>

Tiu ilustraĵo povas akompani tekston, kiu temas pri la vivo en hejmo kun katoj. Ne tre gravas ekzakte kie en la artikolo tiu ilustraĵo prezentiĝas (sube, supre, meze, flanke, en aparta bildopaĝo...).

<figure>
  <img
  src="tini_vinberoj.jpg"
  alt="Tini staras sur tablo manĝante vinberojn"/>
  <figcaption>Ilustraĵo 1: Nia kato Tini tre ŝatas vinberojn</figcaption>
</figure>

figure povas aperi ankaŭ 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>Ilustraĵo 2: Niaj katoj tre ŝatas fruktojn kaj berojn</figcaption>
  
  <img src="tini_vinberoj.jpg"
  alt="Tini staras sur tablo manĝante 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 ilustraĵo aŭ 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 ĝin 
la kortuŝan poemon <cite>Ho mia kor’</cite>, kiu finiĝas jene:</p>

<blockquote>
  <p>Ho, mia kor'! Post longa laborado<br/>
  ĉu mi ne venkos en decida hor'?<br/>
  Sufiĉe! trankviliĝu 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 ĝusta elemento.

Jen ligilo al paĝo kun la ĉi-antaŭaj ekzemploj de la figure-elemento, kaj ankaŭ la ĵusa ekzemplo sen figure - la ekzemploj estas enmetitaj en pli vastan (sufiĉe sensencan) enhavon.

time

La elemento time reprezentas daton aŭ horon aŭ ambaŭ kune. La celo de time estas helpi al aŭtomata (maŝina) rekonado de datoj kaj horoj, ekzemple por registri kaj pritrakti eventojn en kalendaro. La koncerna dato/horo devas esti esprimita laŭ certaj reguloj, aŭ en la enhavo de la elemento, aŭ - plej ofte - per la atributo datetime.

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

<p>Georgo Vaŝington 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 naskiĝdato de Vaŝington tamen sekvas la Julian kalendaron, kiu validis, kiam li naskiĝis.

Jen ekzemplo kun horo:

<article>
  <h1>Sensacia novaĵo</h1>
  <p>Hodiaŭ 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 antaŭ la indiko de horo en la atributo datetime aperas la litero T. Post ĝi aperas la litero Z. La T signifas simple, ke tie komenciĝas la horo. La Z signifas, ke la uzata horzono estas UTC (la Universala Tempo Kunordigita, antaŭe nomata GMT aŭ la Grenviĉa horzono). Sed ankaŭ eblas uzi aliajn horzonojn. Vidu la detalajn regulojn pri tiaj ĉi datoj kaj horoj.

Rimarku ankaŭ la atributon pubdate (kiu estas t.n. bulea atributo). Per ĝi 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, aŭ de la tuta paĝo (se la time-elemento ne estas ene de article). Ene de ĉiu article rajtas aperi maksimume unu tia time-elemento kun indiko pri pubdate. Simile ĉiu paĝo povas havi maksimume unu tian time-elementon, kiu montras ties publikigodaton. Se ĉeestas la atributo pubdate, la time-elemento devas esprimi daton, kaj rajtas esprimi ankaŭ horon. Se forestas la atributo pubdate, la time-elemento devas esprimi aŭ daton aŭ horon aŭ ambaŭ. (La esprimita dato-horo aperu aŭ en la datetime-atributo, aŭ rekte en la enhavo de la time-elemento, sed ĉiam laŭ 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, ĉu precize, ĉu malprecize. Tiu enhavo estas tio, kio aperas por ordinaraj legantoj de la teksto:

<p>Ni rekontiĝis 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 matenmanĝas 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 aŭ horo ne estas precize indikebla, do ekzemple ne por “iam en la pasinta jarcento”, “la lastan someron”, “la frua parto de la Mezepoko” aŭ “iu vintro ĉirkaŭ la jaro 250”.

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

Grave: Datoj antaŭ 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 ŝanĝita).

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

Precizaj reguloj pri datoj kaj horoj de time-elementoj

Nura dato

La valoro de time-elemento povas esti nura dato. Ĝi 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 almenaŭ 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 ankaŭ devas laŭi 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. Ĝi devas indiki horon kaj minuton kaj povas indiki ankaŭ sekundon. La sekundo povas havi unu aŭ 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 komenciĝu 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, 6061, 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. Ĝi devas konsisti el dato laŭ la ĉi-antaŭaj klarigoj plus la litero T plus horo laŭ la ĉi-antaŭaj 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. Ĝi devas konsisti el dato laŭ la ĉi-antaŭaj klarigoj plus la litero T plus horo laŭ la ĉi-antaŭaj 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) aŭ 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 antaŭ 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 ĝia koncerno en alia kunteksto.

Kiam mark estas uzata en citaĵo aŭ en tekstobloko aparte referencata en la ordinara teksto, tiam mark esprimas elstarigon, kiu ne ĉeestis origine, sed kiu nun estas ekzamenata aŭ interesa en maniero antaŭe ne konsiderata.

Kiam mark uziĝas en ordinara parto de dokumento, ĝi indikas tekstoparton, kiu estas elstarigita pro sia supozata koncerneco laŭ 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 reĝido, kiu vidis, ke el ŝia buŝo eliris <mark>kelke</mark>
  da perloj kaj <mark>kelke</mark> da diamantoj, petis ŝin,
  ke ŝi diru al li, de kie tio ĉi venas.</p>
</blockquote>

<p>Rimarku la tiean uzon de la vorto “kelke”. Tio estas nuntempe tre malofta, eble eĉ arĥaika.</p>

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

mark kredeble estos multe uzata, kiam oni venas al TTT-paĝo pere de serĉo ĉe Guglo aŭ simila servo. Tiam mark povas indiki tiajn vortojn, kiuj kongruas kun la uzata serĉesprimo. Jen ekzemplo:

<p><mark class="trafo">Katoj</mark> estas tre dolĉaj bestoj, kiuj ŝatas esti karesataj. Mia <mark class="trafo">kato</mark> surprize ofte manĝas berojn kaj fruktojn. Tio estas laŭ mi tre nekutima.</p>

La paĝo normale ne havas mark-elementojn ĉe la vorto ”kato(j)”, sed ĉi-foje tamen ricevis tiajn markojn, ĉar la vizitanto venis al la paĝo post serĉado de tiuj vortoj ĉe YahooBing aŭ simila TTT-ejo. Tial tiu vorto estas ĉi-okaze aparte interesa por la koncerna vizitanto.

Jen ligilo al paĝo kun la ĉi-antaŭaj ekzemploj de la mark-elemento; se via TTT-legilo konas la novan elementon mark, ĝi 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, ĉiam sen enhavo.

En la sekva ekzemplo uziĝas nenormala longega vorto (kunigo de pluraj vortoj). Por certigi, ke la teksto estu ĝuste 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>tigraĉo!”</p>

Noto: Kelkaj TTT-legiloj jam delonge komprenas kaj ĝuste interpretas la markon wbr, kiu estis inventita de Netscape jam antaŭ multaj jaroj. Sed nur ekde HTML5 wbr estas laŭnorma elemento. Aliaj TTT-legiloj, eĉ sufiĉe novaj, ĝin tamen ne regas.

Jen ligilo al paĝo kun la ĉi-antaŭa ekzemplo de la wbr-elemento; se via TTT-legilo konas la novan elementon, ĝi espereble rompos la vorton, se la spaco ne sufiĉas (la alineoj estas per stilregulo aparte mallarĝigitaj por akcenti la bezonon de linirompoj).

bdi

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

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

Jen ligilo al paĝo kun la ĉi-antaŭa ekzemplo de la bdi-elemento; se via TTT-legilo konas la elementon bdi kaj se ĝi scias bone trakti tekston kun miksita direkteco, ĝi eble ĝuste prezentos tiun ekzemplon.

ruby, rt, rp

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

Rubentipaj klarigoj estas uzataj precipe en la Japana kaj la Ĉina por elparolaj klarigoj de (maloftaj) Ĉinaj signoj. La klarigoj aperas ordinare super la koncernaj signoj (aŭ dekstre, se la ĉefa teksto iras desupre malsupren). (En la Japana tiaj klarigoj nomiĝas furigana.)

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

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

Jen ekzemplo de ruby-teksto en la Ĉina 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 antaŭ 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 Ĉinajn signojn kiel klarigajn notetojn de alfabeta Korea skribo:

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

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

Jen ligilo al paĝo kun la ĉi-antaŭaj 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 uziĝas 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 eĉ 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-paĝojn. Tiucele oni uzadis ĝis nun precipe aldonajn kromprogramojn bazitajn ĉefe sur Flaŝo (Flash). video kaj audio espereble forigos la bezonon de kromprogramoj por filmoj kaj sonoj en TTT-paĝoj.

La temo de video kaj audio estas kompleksa, kaj mi pritraktos ĝin ĉi tie nur tre supraĵe. Ankoraŭ ne ĉiuj TTT-legiloj regas tiujn elementojn, kaj krome ne ĉiuj TTT-legiloj allasas ĉiujn specojn de filmoj kaj sondosieroj.

Antaŭe oni uzis por tiaj ĉi 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 ĝi estas rekonata kiel oficiala parto de HTML.

video

La elemento video reprezentas film(et)on (kiu ofte enhavas ankaŭ 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>
    Ŝajnas, ke la <code>video</code>-elemento
    (kun filmo en WEBM-formo, OGG-formo aŭ MP4-formo)
    ne funkcias en via TTT-legilo.
    Vi povas anstataŭe elŝuti la filmon:
      <a href="video.webm">video.webm</a>
      aŭ
      <a href="video.mp4">video.mp4</a>.
  </p>
</video>

Jen ligilo al paĝo kun la ĉi-antaŭa ekzemplo de video. Tute povas esti, ke en via TTT-legilo la filmo ne montriĝos, ĉar ankoraŭ ne ĉiuj 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 ĝi 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 larĝon 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, paŭzigi, haltigi k.s.

video-elementoj povas havi ankaŭ 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 anstataŭ la filmo, kiam la filmo ne estas ludigata, ekzemple: poster="filmbildo.png"
autoplay
bulea atributo, kiu indikas, ke la TTT-legilo aŭtomate ekludigu la filmon: autoplay="autoplay"
loop
bulea atributo, kiu indikas, ke la TTT-legilo aŭtomate reludigu la filmon, kiam ĝi atingas la finon: loop="loop"
muted
bulea atributo, kiu indikas, ke la sono de la filmo estu dekomence malŝaltita (sed ŝaltebla de la uzanto): muted="muted"

audio

La elemento audio reprezentas sondosieron aŭ sonfluon. Jen tipa ekzemplo:

<audio controls="controls">
  <source src="la_chielo.ogg" type="audio/ogg"/>
  <source src="la_chielo.mp3" type="audio/mpeg"/>
  <p>
    Ŝajnas, ke la <code>audio</code>-elemento
    (kun sono en OGG-formo aŭ MP3-formo)
    ne funkcias en via TTT-legilo.
    Vi povas anstataŭe elŝuti la sondosieron:
      <a href="la_chielo.ogg">la_chielo.ogg</a>
      aŭ
      <a href="la_chielo.mp3">la_chielo.mp3</a>.
  </p>
</audio>

Jen ligilo al paĝo kun la ĉi-antaŭa ekzemplo de audio. Tute povas esti, ke en via TTT-legilo la sono ne aŭdiĝos, ĉar ankoraŭ ne ĉiuj 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 ĝi 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, paŭzigi, haltigi k.s.

audio-elementoj povas havi ankaŭ 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 aŭtomate ekludigu la sonon: autoplay="autoplay"
loop
bulea atributo, kiu indikas, ke la TTT-legilo aŭtomate reludigu la sonon, kiam ĝi atingas la finon: loop="loop"
muted
bulea atributo, kiu indikas, ke la sono estu dekomence malŝaltita (sed ŝaltebla 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-paĝon. Origine object estis inventita kaj favorata de la TTT-legilo Esplorilo, kaj fariĝis 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 ambaŭ kune por ebligi enkorpigadon de filmoj k.s. en HTML-paĝojn. Nun en HTML5 ambaŭ elementoj, iom redunde, estas normaj. En la praktiko oni uzas tiujn ĉi elementojn precipe por filmoj, sonoj kaj por Flaŝaĵoj (kreitaj per Flash).

embed

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

Jen ligilo al paĝo kun la ĉi-antaŭa 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 Flaŝo:

<object width="400" height="267"
  data="AS2_PuzzleGame.swf"
  type="application/x-shockwave-flash">
  <p>
    Ŝajnas, ke la <code>object</code>-elemento
    (kun puzloludo en Flaŝ-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 ĉe 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 aŭ almetindaj, tute dependas de la speco de objekto.

Jen ligilo al paĝo kun la ĉi-antaŭa 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, aŭtomate uzas embed anstataŭ 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 paĝo kun la ĉi-antaŭa ekzemplo de object kaj embed kune.

video, embed kaj object kune

Ankaŭ video povas havi enan alternativan enhavon. Sekve oni povas krei eĉ tri-nivelan aranĝon kun embed ene de object ene de video. Jen tia superprudenta, sed sufiĉe komplika aranĝo 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 paĝo kun la ĉi-antaŭa ekzemplo de video, object kaj embed kune.

Tio estas iom komplika, sed tamen ankoraŭ relative tolerebla kaj uzebla, sed se oni bezonas aldoni ankoaraŭ pli da atributoj kaj parametroj al la filmo, tiam oni devas tiujn informojn iel ripeti en iom diversaj manieroj en ĉiu el tiuj tri niveloj, kio povas finfine rezultigi multe tro komplikan kodon. Espereble baldaŭ tiaj ekstremaj aranĝoj entute ne plu necesos.

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

canvas

La elemento canvas reprezentas kanvason, sur kiu eblas per programo, t.e. per Javaskripto, desegni aŭ pentri ion, ekzemple grafikaĵon, diagramon, moviĝantan ornamaĵon aŭ ion alian (kio ankaŭ povas ŝanĝiĝi, eble interage). canvas per si mem estas sensenca. Oni devas ĝin manipuli per Javaskripto por doni al ĝi 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 ĉi paĝoj. 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 paĝo kun la ĉi-antaŭa ekzemplo de canvas kaj kun Javaskripta kodo, kiu ion desegnas sur tiu canvas-o.

Rimarkindas, ke sur canvas oni desegnas aŭ pentras bilderojn. Alternativo al canvas estas vektora grafiko pere de SVG-elementoj, sed ankaŭ SVG estas temo iom troa por tiuj ĉi paĝoj.

command, details, summary

La tri elementoj command, details kaj summary estas celitaj por tiaj TTT-paĝoj, kiuj pli similas al programoj ol al dokumentoj. La nunaj (en Junio 2011) TTT-legiloj (krom la plej freŝaj versioj de la legilo Chrome) ankoraŭ ne regas tiujn tri elementojn, kaj tial ili estas ĉi tie nur tre pase priskribataj:

command
reprezentas komandon, kiun la uzanto povas uzi; tia komando povas aperi en kunteksta menuo aŭ sur ilobreto, kiel parto de menu-elemento, aŭ ĝi povas aperi en alia loko de la “paĝo”
details
reprezentas malkovreblan fenestraĵon, pere de kiu la uzanto povas atingi pliajn informojn aŭ pliajn regilojn
summary
reprezentas resumon, apudskribon aŭ klarigeton por la resto de la enhavo de patra details-elemento

Al la sekva parto, “Novaĵoj: Forigitaj elementoj”