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.

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.

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 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>

<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>

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

<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>

<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>

<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>

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