HTML5

Novajhoj: Shanghitaj elementoj

Pluraj elementoj, kiuj ekzistis jam antaue en HTML4 kaj XHTML 1.0, estas en HTML5 iel redifinitaj au shanghitaj en notinda maniero:

Shanghoj, kiuj koncernas formularojn, estas traktataj aparte.

a

Antaue la elemento a, per kiu oni indikas ligilojn, estis uzebla nur kiel nebloka elemento, t.e. ene de kuranta teksto, ekzemple jene:

<p>Teksto teksto. <a href="alia_pagho">io</a>, <a href="plia_pagho.html"><em>io alia</em></a>.</p>

Nun, en HTML5, oni povas same bone uzi ghin por marki blokajn elementojn au ech grupojn de blokaj elementoj kiel ligilojn. Jen ekzemplo:

<a href="alia_pagho.html">
  <h1>Titolo</h1>
  
  <p>Teksto...</p>
  
  <p>Pli da teksto...</p>
</a>

Tie la h1-titolo kaj la du sekvantaj p-alineoj kune estas unu sola ligilo al alia_pagho.html.

Dua ekzemplo:

<aside>

 <h1>Diversaj aferoj</h1>

 <a href="pri_diversaj_aferoj.html">
  <section>
   <h1>Titolo</h1>
   <p>Teksto</p>
  </section>
 </a>
 
 <a href="io_alia.html">
  <section>
   <h1>Alia titolo</h1>
   <p>Teksto</p>
  </section>
 </a>

</aside>

Tie la aside-elemento enhavas du ligilojn, chiu el kiuj konsistas el tuta section-elemento kun diversa enhavo.

Tia uzo de ligiloj fakte jam delonge funkcias en TTT-legiloj, sed estis antaue formale erara. Ekde HTML5 tia uzo estas tute lauregula.

Grave: Bedaurinde en iuj (ne chiam tute malnovaj) legiloj iaj uzoj de a-elementoj chirkau blokaj elementoj povas kauzi strangajn problemojn. Oni do zorge testu la praktikan rezulton en diversaj legiloj (precipe en Esplorilo kaj en Fajrovulpo antau versio 4).

Grave: Oni atentu, ke ligiloj tamen ne povas enhavi aliajn ligilojn, nek interagajn elementojn kiel button au formularajn elementojn, kiuj estas alklakeblaj. Oni ankau atentu, ke oni ne rajtas meti a-elementon rekte chirkau elementoj, kiuj nur eblas ene de tabeloj (tbody, thead, caption, tr, td, th...) kaj ankau ne rekte chirkau li-elementoj, dt-elementoj kaj dd-elementoj.

Novaj atributoj de a-elementoj

a-elementoj nun povas havi la novajn atributojn ping kaj media, kaj krome HTML5 permesas che a-elementoj la atributon target, kiu ne ekzistas en HTML 4 Strict, nek en XHTML 1.0 Strict, nek en XHTML 1.1 (sed kiu ja ekzistas en ekzemple HTML 4 Transitional kaj XHTML 1.0 Transitional):

  • En ping-atributo oni povas aperigi url-ojn (adresojn) de lokoj, kiuj deziras ricevi informon, kiam iu aktivigas la koncernan ligilon. Ekzemple:

    <a
  href="pagho.html"
  ping="http://example.com http://www.example.net"
>ligiloteksto</a>

    Se iu alklakas tiun ligilon, la TTT-legilo provas iri al la pagho pagho.html, kaj sendas samtempe noticon pri tio al la du TTT-ejoj example.com kaj www.example.net - se la TTT-legilo scias, kiel la nova ping-atributo devas funkcii. Tio ebligas registri, kiel homoj uzas la ligilojn de pagho. Tion oni longe faris en diversaj aliaj manieroj, ekzemple per Javaskripto. La nova ping-atributo espereble helpos unuecigi tian registradon, kaj aldone ebligos al uzantoj, kiuj ne shatas tian registradon, agordi siajn TTT-legilojn tiel, ke la ping-atributo ne efiku.

    Se ping-atributo enhavas pli ol unu adreson, estu spacetoj inter la adresoj.

  • En media-atributo oni povas indiki, por kiaj medioj taugas la ligita disponajho (pagho, dokumento k.s.). Ekzemple:

    <a
  href="http://example.org/index.html"
  media="screen"
>dokumento che example.org</a>

    Tie la media-atributo indikas, ke la enhavo de pagho.html taugas (nur) por ekrana uzo (”screen" = “ekrano”). Aliaj ebloj estas “print” (= presado), “projection” (= projekciado) kaj multo alia. La tuta kampo de tiaj mediaj indikoj, kiuj estas uzataj precipe en stilfolioj, estas sufiche kompleksa kaj mi ne klarigos tiun apartan temon chi tie. Chiuokaze la indikoj en tiaj media-atributoj de a-elementoj estas nure konsilaj. Lau mia scio ankorau neniuj TTT-legiloj uzas ilin en ia ajn maniero.

  • En target-atributo oni povas indiki nomon de fenestro au folio, en kiu la ligita dokumento estu montrata:

    <a
  href="http://example.org/index.html"
  media="screen"
  target="_blank"
>dokumento che example.org</a>

    Tie la target-atributo indikas, ke la enhavo de pagho.html estu prezentata en nova fenestro au folio. Oni povas uzi _blank (= nova fenestro/folio), _self (= la sama fenestro/folio), _parent (= la patra fenestro/folio), au _top (= la plej supra fenestro/folio en la hierarhhio super la nuna) au ian ajn arbitran nomon, kiu ne komencighas per la signo "_". Tiam, se fenestro/folio kun tia nomo jam ekzistas, ghi estos uzata, alie nova fenestro/folio kun tia nomo estos kreita kaj uzata.

i, b, small, s, u

La elementoj i, b, small, s, u havas en antauaj versioj de HTML kaj XHTML nure aspektan signifon. Ili nenion diras pri tio, kia estas la enhavo. Aspekton oni normale indiku nur per stilfolio, ne per HTML. Tial kelkaj el tiuj elementoj ech forestas en la “striktaj” variantoj de antauaj (X)HTML-versioj, kaj tiuj, kiuj tamen ankorau ekzistis, estis rigardataj kiel evitindaj (de puremuloj). Oni ech supozis, ke iam chiuj tiuj elementoj tute malaperos.

Sed en HTML5 oni anstataue decidis konservi tiujn kvin elementojn donante al ili efektivajn signifojn ne nur aspektajn, kio signifas, ke nun ankau puremaj HTML-istoj povas ilin uzadi senhonte.

i

La elemento i en HTML5 reprezentas tekston, kiu estas en alia vocho au modalo, au kiu estas alimaniere apartigita de la ordinara teksto, char ghi estas iel alikvalita. Tio povas ekzemple esti Latinscienca nomo de besto au kreskajho, tehhnika termino, idiomajho el alia lingvo, au io simila. (Se la teksto estas en alia lingvo, tiu lingvo estu aldone indikita per la atributoj lang kaj xml:lang.) La malnova signifo de i estis kursiva stilo. Latinsciencaj nomoj, fakaj terminoj, fremdlingvajhoj k.t.p. estas ofte kursive presataj. Rimarku, ke i-elemento ne indikas, ke la teksto estas emfazata au grava.

Jen kelkaj ekzemploj.

Scienca Latina nomo:

<p>Gruo (<i lang="la" xml:lang="la">Grus</i>) estas genro de migrantaj birdoj.</p>

Speciala faka termino:

<p>En partikla fiziko <i>spino</i> estas nombro indikanta la transformadan karakteron de ondokampo.</p>

Scenejaj instrukcioj al aktoroj en teatra manuskripto:

<p>ANNA <i class="instrukcio">(oscede)</i>: Morgau estos alia tago de laboro. Ni iru dormi.</p>

<p>CEZARO <i class="instrukcio">(pente)</i>: pardonu min. Mi estas tro sovagha, sed vi estas mia. <i class="instrukcio">(Li kaptas shiajn manojn, kaj kisas ilin. Poste, li longe rigardas ilin, kaj rimarkas la mankon de la ringo.)</i> Kion vi faris kun la ringo? Chu vi ghin detiris por ricevi chi tie viron?..</p>

<p>ANNA: <i class="instrukcio">(furioze)</i>: Bruto!</p>

Estas ofte konsilinde per class-atributo distingi diversajn uzojn de i-elementoj. Tia estas ekzemple class="instrukcio" en la chi-antaua ekzemplo.

Jen ligilo al pagho kun chiuj tiuj ekzemploj de la i-elemento.

Oni ne forgesu, ke ekzistas aliaj elementoj, kiuj ordinare prezentighas kursive, kaj kiuj ofte estas la ghusta elekto: em, cite, dfn. Se oni nepre volas kursivan presenton, sed neniu el tiuj elementoj taugas, kaj se ankau la indikitaj signifoj de la i-elemento ne trafas, tiam oni povas uzi la elementon span kun indiko pri kursiva prezento en stilfolio.

b

La elemento b reprezentas tekston, al kiu oni volas altiri la atenton pro ia utilocelo sen indiki ion pri plia graveco (vidu strong) kaj sen esprimi ion pri alternativa vocho au modalo (vidu i). Tio povas esti ekzemple shlosilvortoj en dokumenta resumo, produktonomoj en recenzo, interagaj vortoj en tekstobaza programo au ludo, au enkonduka alineo/frazo de (gazeta) artikolo, de chapitro au simile (precipe se tiu enkonduko pli-malpli resumas la chefajn punktojn de la tuta artikolo/chapitro). La malnova signifo de b estis grasa stilo. La chi-antaue indikitaj uzoj de b estas ofte grase presataj. Rimarku, ke b-elemento ne indikas, ke la teksto estas emfazata au grava.

Jen kelkaj ekzemploj.

Shlosilvortoj en resumo de scienca studo:

<p>Tiu chi studo prezentas novan analizon de la <b>sintakso</b> de <b>pighinoj</b> kaj <b>kreolaj lingvoj</b> kun speciala atento al <b>verboj</b> kaj ties <b>aspektoj</b>.</p>

Interagaj vortoj en tekstobaza ludo:

<p>Vi eniras en tunelon. Via <b>glavo</b> subite ekbrilas arde. Stranga <b>besto</b> movighas en malhela angulo.</p>

Enkonduka alineo de gazeta artikolo:

<h1>Komediistoj senkomediaj</h1>

<p><b>Chu, au kiam, okazos en Britio referendumo pri akcepto au neakcepto de la euro ankorau ne certas.</b></p>

<p>Daure hezitas la brita chefministro Tony Blair, kiu ajne pli favoras la euron ol sia potenca kaj respektata ministro pri financoj, Gordon Brown. [...]</p>

Jen ligilo al pagho kun chiuj tiuj ekzemploj de la b-elemento.

Oni ne forgesu, ke ekzistas aliaj elementoj, kiuj ordinare prezentighas grase, kaj kiuj ofte estas la ghusta elekto: strong, h1 - h6. Se oni nepre volas grasan presenton, sed neniu el tiuj elementoj taugas, kaj se ankau la indikitaj signifoj de la b-elemento ne trafas, tiam oni povas uzi la elementon span kun indiko pri grasa prezento en stilfolio.

Iom simila al b estas la nova elemento mark.

small

La elemento small reprezentas tiajn flankajn komentojn, kiajn oni ofte presas malgrandlitere. Temas tipe pri formalaj juraj deklaroj pri neado de respondeco, leghaj limigoj, kopirajtaj informoj k.s. La elemento small ne malemfazas au malgravigas tekston markitan per em au strong. (Se oni volas indiki, ke teksto ne estas emfazata au grava, oni simple ne uzu respektive em kaj strong.) Oni ne uzu small por longaj tekstoj, nek por pluraj alineoj, sekcioj au listoj. small estas celita por konciza teksto.

Jen ekzemplo:

<footer>
  <p>
    Verkis la artikolon Iu Neniuulo.
    <small>
      La teksto disponeblas lau la permesilo Krea Komunajho
      Atribuite-Samkondiche 3.0 Neadaptita.
    </small>
  </p>
</footer>

Jen ligilo al pagho kun tiu ekzemplo de la small-elemento.

s

La elemento s reprezentas enhavon, kiu ne plu estas ghusta au trafa. La malnova signifo de s estis trastrekita stilo. La chi-antaue indikita uzo de s estas ofte indikita per trastrekita teksto. s ne estas uzinda por marki redaktojn de dokumentoj. Por montri, ke teksto estas forigita el dokumento, oni uzu anstataue la del-elementon.

En la sekva ekzemplo la vendoprezo estas markita kiel ne plu valida, char la koncerna varo havas novan prezon:

<p>
  <cite>La Antaughardeno</cite>:
  nova nemaltrafinda suspensa romano verkita de Stefano Letr!
  </p>

  <p>
    <s><strong>200 euroj!</strong></s>
  </p>

  <p>
    <strong>Nun je rabatita prezo: nur 2 euroj</strong>
    <small>(sendokostoj aldonighos)</small>!
  </p>

Jen ligilo al pagho kun tiu ekzemplo de la s-elemento.

u

La elemento u reprezentas tekston kun ia neartikulaciata, sed eksplicite montrata ne-teksta prinotado, precipe se la konvencia maniero tion indiki en presita teksto estas substrekado (kio estas la malnova signifo de la u-elemento). La precipaj uzokazoj por u estas markado de propraj nomoj en China teksto (substrekado estas iafoje tiucele uzata en la China) kaj indikado de misliterumita teksto (ofte montrata per substrekado en diversaj programoj).

En plej multaj okazoj alia elemento estas uzinda por la koncerna celo, ekzemple em por akcentado, b au mark por shlosilaj vortoj au frazoj, cite por librotitoloj, kaj i por shiponomoj en Okcidentlingva teksto. Por eksplicita teksta prinotado la elemento ruby povas esti la ghusta elekto.

En la sekva Chinlingva ekzemplo, kiu signifas “Mi venas el Germanujo”, la China nomo de Germanujo estas markita kiel propra nomo:

<p lang="zh" xml:lang="zh">
  我来自<u>德国</u>.
</p>

Jen ligilo al pagho kun tiu ekzemplo de la u-elemento.

em, strong

La roloj kaj signifoj de la du elementoj em kaj strong estas subtile shanghitaj en HTML5:

La elemento em antaue (en HTML 4 kaj XHTML 1.0/1.1) estis difinita kiel emfazo. En HTML5 la difino de em estas shanghita al akcenta (elparola) emfazo, kiu povas shanghi la sencon.

La elemento strong antaue (en HTML 4 kaj XHTML 1.0/1.1) estis difinita kiel forta emfazo. En HTML5 la difino de strong estas shanghita al forta graveco. (Indikado au neindikado de graveco ne shanghas la efektivan sencon de la teksto.)

Antaue strong estis pli forta varianto de em. Tiu ligo inter la du elementoj estas nun forigita. Se oni volas ech pli fortan akcentan emfazon, oni uzu em-elementon ene de alia em-elemento. Se oni volas pli fortan gravecon, oni uzu strong-elementon ene de alia strong-elemento. En ekstremaj okazoj oni povas uzi ech pli da em-elementoj au strong-elementoj kune.

Jen kelkaj ekzemploj.

Elparola emfazo indikas la celitan sencon:

<p><em>Katoj</em> estas dolchaj bestoj. (Kontraste al <em>hundoj</em>.)</p>

<p>Katoj estas <em>dolchaj</em> bestoj. (Ili ne estas <em>malicaj</em>.)</p>

Diversaj gradoj de averta graveco:

<p><strong>Atentu:</strong> Tiu chi kaverno estas danghera.
<strong>Evitu la anasojn.</strong> Prenu chian ajn oron, kiun vi trovos.
<strong><strong>Sed ne tushu la diamantojn</strong>, char
ili estas eksplodemaj kaj <strong>detruos chion ajn ene de dekmetra 
distanco.</strong></strong> Vi estas avertita.</p>

Jen ligilo al pagho kun chiuj tiuj ekzemploj de la em-elemento kaj la strong-elemento, kaj kun stilfolio, kiu malsame aspektigas du gradojn de graveco.

hr

La elemento hr reprezentas aline-nivelan (t.e. situantan inter alineoj kaj alinesimilaj elementoj, do ne ene de kuranta teksto) temoshanghon, ekzemple scenoshanghon en rakonto, au transiron al alia temo ene de sekcio de referenca libro.

Iasence hr similas al fermado de unu sekcio kaj malfermado de nova sekcio (do al ekzemple </section> <section>). hr estas uzebla, kiam temas pri du malsamaj temoj, kiuj tamen trovighas ene de unu sekcio, kaj kiam oni bezonas iel aparte signali la interrompon de la temofluo. Oftaj prezentoj de tiaj interrompoj en presita teksto estas ekzemple horizontala linio (la malnova signifo de hr), grupo de steletoj (sur aparta linio), grafikajheto au simile.

Jen kelkaj ekzemploj:

<section>

  <h1>Komunikado</h1>
  
  <p>Ekzistas diversaj metodoj de komunikado. Tiu chi sekcio diskutas
  kelkajn el la pli gravaj metodoj uzataj en la projekto.</p>
  
  <hr class="linio"/>
  
  <p>Komunikadaj shtonoj ofte estas paraj. Ili havas misterajn ecojn::</p>
  
  <ul>
   <li>Ili povas transigi pensojn en du direktoj post aktivigo,
   se ili uzighas solaj.</li>
   <li>Kiam uzataj kune kun alia komunikilo, ili povas transigi 
   ies konscion en alian korpon.</li>
   <li>Se ambau shtonoj uzighas kune kun alia komunikilo, 
   la konscioj de la du korpoj intershanghighas.</li>
  </ul>
  
  <hr class="steletoj"/>

  <p>Radiaparatoj uzas la elektromagnetan spektron kun metraj 
  kaj pli vastaj ondolongoj</p>
  
  <hr class="steletoj"/>
  
  <p>Signalotorchoj uzas la nanometran parton de la
  elektromagneta spektro.</p>
 
 </section>
 
 <section>

  <h1>Manghajhoj</h1>
  
  <p>La manghajhoj de la projekto estas porciumataj:</p>
  
  <dl>
   <dt>Terpomoj</dt>
   <dd>po du en tago</dd>
   <dt>Supo</dt>
   <dd>po unu bovlo en tago</dd>
  </dl>
  
  <hr class="grafikajho"/>
  
  <p>La kuiradon plenumas pluraj kuiristoj lau fiksita skemo.</p>

</section>

Jen ligilo al pagho kun chiuj tiuj ekzemploj de la hr-elemento, kaj kun stilfolio, kiu proponas diversajn aspektojn de la hr-elementoj lau ties class-atributoj.

Grave: Se oni deziras horizantalan linion, ornamajn steletojn au simile, sed se tiu ornamajho ne esprimas teman interrompon, tiam oni ne uzu hr-elementon, sed bildon (img-elementon) au div-elementon kun laucelaj stiloreguloj (borderon, fonbildon...).

cite

La elemento cite reprezentas titolon de verko (ekzemple libro, artikolo, eseo, poemo, partituro, kanto, manuskripto, filmo, televidajho, ludo, skulptajho, pentrajho, teatrajho, opero, muzikalo, ekspozicio, raporto pri jura kazo, k.t.p.). Tio povas esti verko, kiun oni citas au detale referencas, au kiun oni nur pase mencias.

cite ne estu uzata por marki personajn nomojn. Tio estas grava diferenco kompare kun antauaj versioj de HTML kaj XHTML, kie tia uzo estis ebla. Iafoje la elemento b povas esti ghusta por nomoj, ekzemple en klachartikolo, kie la nomoj de famuloj estas shlosilvortoj prezentindaj kun aparta atentokapta stilo. Alifoje, se aparta prezento estas bezonata, oni povas uzi la elementon span kun stilfoliaj prezentoreguloj.

Jen ekzemplo de tipa uzo de cite:

<p>Mia favorata libro estas <cite>La Antaughardeno</cite> de Stefano Letr.
Mia favorata bildstriajho estas <cite>La sercho por la Bona Etoso</cite> de Arnaud Torras.
Mia favorata muzikajho estas <cite>Sen ghu’</cite> de Kore.</p>

Jen malpli tipa, sed tute ghusta ekzemplo:

<p>Lau la Vikipedia artikolo <cite>Kore</cite>, kiel ghi estis redaktita en Majo 2011, la grupo Kore konsistas el ses muzikistoj.</p>

Jen tamen ekzemplo de neghusta uzo de cite, kie la elemento cite enhavas multe pli ol efektivan titolon de verko:

<!-- Ne imitu tiun chi kodon, char ghi estas ekzemplo de misuzo! -->
<p>Lau <cite>la Vikipedia artikolo Kore</cite>, kiel ghi estis redaktita en Majo 2011, la grupo Kore konsistas el ses muzikistoj.</p>

En bibliografioj oni uzu cite nur por la efektiva titolo de la koncerna verko:

<p>Zamenhof, L. L.: <cite>Fundamento de Esperanto</cite>. 9a eldono kun enkondukoj, notoj kaj lingvaj rimarkoj de <span xml:lang="fr" lang="fr">A[ndré] Albault</span>. Esperantaj Francaj Eldonejoj, <span xml:lang="fr" lang="fr">Marmande</span>, Francujo, 1963.</p>

Por citajhoj oni ne uzu cite, sed q:

<!-- Ne imitu tiun chi kodon, char ghi estas ekzemplo de misuzo! -->
<p><cite>Tio chi estas erara!</cite>, diris Jano.</p>

Ankau la jeno estas erara (char cite ne taugas por nomo de persono):

<!-- Ne imitu tiun chi kodon, char ghi estas ekzemplo de misuzo! -->
<p><q>Tio chi ankorau estas erara!</q>, diris <cite>Jano</cite>.</p>

Jen ghusta markado de tiaj ekzemploj:

<p><q>Tio chi estas ghusta</q>, diris Jano.</p>

Kiel menciighis chi-antaue, la elemento b povas esti tauga por marki personajn nomojn, kiam ili rolas kiel shlosilvortoj en iaj tekstospecoj:

<p>Kaj tiam <b>Jano</b> diris: <q>Tio chi povas esti ghusta, en klachartikolo, eble!</q>.</p>

Jen ligilo al pagho kun chiuj chi-antauaj ekzemploj de la cite-elemento, kaj ankau kun chiuj rilataj eraraj ekzemploj.

dl

La elemento dl reprezentas liston de grupoj de nomoj (dt-elementoj) kaj ties valoroj (dd-elementoj). Tipe temas pri terminoj kaj ties difinoj, sed dl-listo ankau povas esti listo de ecoj kaj ties statoj, demandoj kaj ties respondoj, kaj aliaj similajhoj. Sed en HTML5 dl-listoj ne estu uzataj por marki dialogojn (tio eblis en antauaj versioj de HTML kaj XHTML).

Jen tipa ekzemplo de bona uzo de dl:

<dl>
  <dt>kalkulilo</dt>
  <dd>Rimedo por plenumi aritmetikajn operaciojn, kiu
  neprigas intervenon de manipulisto je chiu pasho de la
  kalkulado.</dd>

  <dt>abako</dt>
  <dd>Kalkulilo, konsistanta el globetoj trairitaj de
  stangetoj, sur kiuj ili estas shoveblaj.</dd>

  <dt>komputilo</dt>
  <dd>Automata rimedo por prilabori datumojn per
  operacioj indikataj per programo.</dd>
</dl>

Dialogojn oni povas marki en diversaj manieroj (sed ne per dl-elementoj). Jen unu eblo:

<p><b>ANNA</b> <i class="instrukcio">(oscede)</i>: Morgau estos alia tago de laboro. Ni iru dormi.</p>

<p><b>CEZARO</b> <i class="instrukcio">(pente)</i>: pardonu min. Mi estas tro sovagha, sed vi estas mia. <i class="instrukcio">(Li kaptas shiajn manojn, kaj kisas ilin. Poste, li longe rigardas ilin, kaj rimarkas la mankon de la ringo.)</i> Kion vi faris kun la ringo? Chu vi ghin detiris por ricevi chi tie viron?..</p>

<p><b>ANNA</b>: <i class="instrukcio">(furioze)</i>: Bruto!</p>

Jen ligilo al pagho kun la chi-antaua ekzemplo de la dl-elemento, kaj ankau la jhusa ekzemplo de dialogo.

address

La elemento address, kies enhavo estu kontaktinformoj (adreso au simile de la kreinto/repondeculo de la enhavo) kaj nenio alia, nun validas por la koncerna article-elemento, en kiu address trovighas. Se address ne estas en article-elemento, ghi validas por la tuta pagho.

Al la sekva parto, “Novajhoj: Aldonitaj elementoj”