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.

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 Yahoo aŭ Bing 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.

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

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

<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>
    Ŝajnas, ke la <code>object</code>-elemento
    (kun puzloludo en Flaŝ-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 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