HTML5
Novajxoj: Sxangxitaj elementoj
Pluraj elementoj, kiuj ekzistis jam antauxe en HTML4 kaj XHTML 1.0, estas en HTML5 iel redifinitaj aux sxangxitaj en notinda maniero:
Sxangxoj, kiuj koncernas formularojn, estas traktataj aparte.
a
Antauxe 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 gxin por marki blokajn elementojn aux ecx 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, cxiu el kiuj konsistas el tuta section
-elemento kun diversa enhavo.
Tia uzo de ligiloj fakte jam delonge funkcias en TTT-legiloj, sed estis antauxe formale erara. Ekde HTML5 tia uzo estas tute lauxregula.
Grave: Bedauxrinde en iuj (ne cxiam tute malnovaj) legiloj iaj uzoj de a
-elementoj cxirkaux blokaj elementoj povas kauxzi strangajn problemojn. Oni do zorge testu la praktikan rezulton en diversaj legiloj (precipe en Esplorilo kaj en Fajrovulpo antaux versio 4).
Grave: Oni atentu, ke ligiloj tamen ne povas enhavi aliajn ligilojn, nek interagajn elementojn kiel button
aux formularajn elementojn, kiuj estas alklakeblaj. Oni ankaux atentu, ke oni ne rajtas meti a
-elementon rekte cxirkaux elementoj, kiuj nur eblas ene de tabeloj (tbody
, thead
, caption
, tr
, td
, th
...) kaj ankaux ne rekte cxirkaux 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 cxe 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 pagxo
pagho.html
, kaj sendas samtempe noticon pri tio al la du TTT-ejojexample.com
kajwww.example.net
- se la TTT-legilo scias, kiel la novaping
-atributo devas funkcii. Tio ebligas registri, kiel homoj uzas la ligilojn de pagxo. Tion oni longe faris en diversaj aliaj manieroj, ekzemple per Javaskripto. La novaping
-atributo espereble helpos unuecigi tian registradon, kaj aldone ebligos al uzantoj, kiuj ne sxatas tian registradon, agordi siajn TTT-legilojn tiel, ke laping
-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 tauxgas la ligita disponajxo (pagxo, dokumento k.s.). Ekzemple:<a href="http://example.org/index.html" media="screen" >dokumento cxe example.org</a>
Tie la
media
-atributo indikas, ke la enhavo depagho.html
tauxgas (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 suficxe kompleksa kaj mi ne klarigos tiun apartan temon cxi tie. Cxiuokaze la indikoj en tiajmedia
-atributoj dea
-elementoj estas nure konsilaj. Laux mia scio ankoraux neniuj TTT-legiloj uzas ilin en ia ajn maniero. -
En
target
-atributo oni povas indiki nomon de fenestro aux folio, en kiu la ligita dokumento estu montrata:<a href="http://example.org/index.html" media="screen" target="_blank" >dokumento cxe example.org</a>
Tie la
target
-atributo indikas, ke la enhavo depagho.html
estu prezentata en nova fenestro aux folio. Oni povas uzi_blank
(= nova fenestro/folio),_self
(= la sama fenestro/folio),_parent
(= la patra fenestro/folio), aux_top
(= la plej supra fenestro/folio en la hierarhxio super la nuna) aux ian ajn arbitran nomon, kiu ne komencigxas per la signo "_". Tiam, se fenestro/folio kun tia nomo jam ekzistas, gxi 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 antauxaj 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 ecx forestas en la “striktaj” variantoj de antauxaj (X)HTML-versioj, kaj tiuj, kiuj tamen ankoraux ekzistis, estis rigardataj kiel evitindaj (de puremuloj). Oni ecx supozis, ke iam cxiuj tiuj elementoj tute malaperos.
Sed en HTML5 oni anstatauxe decidis konservi tiujn kvin elementojn donante al ili efektivajn signifojn ne nur aspektajn, kio signifas, ke nun ankaux puremaj HTML-istoj povas ilin uzadi senhonte.
i
La elemento i
en HTML5 reprezentas tekston, kiu estas en alia vocxo aux modalo, aux kiu estas alimaniere apartigita de la ordinara teksto, cxar gxi estas iel alikvalita. Tio povas ekzemple esti Latinscienca nomo de besto aux kreskajxo, tehxnika termino, idiomajxo el alia lingvo, aux 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, fremdlingvajxoj k.t.p. estas ofte kursive presataj. Rimarku, ke i
-elemento ne indikas, ke la teksto estas emfazata aux 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>: Morgaux estos alia tago de laboro. Ni iru dormi.</p>
<p>CEZARO <i class="instrukcio">(pente)</i>: pardonu min. Mi estas tro sovagxa, sed vi estas mia. <i class="instrukcio">(Li kaptas sxiajn manojn, kaj kisas ilin. Poste, li longe rigardas ilin, kaj rimarkas la mankon de la ringo.)</i> Kion vi faris kun la ringo? Cxu vi gxin detiris por ricevi cxi 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 cxi-antauxa ekzemplo.
Jen ligilo al pagxo kun cxiuj tiuj ekzemploj de la i
-elemento.
Oni ne forgesu, ke ekzistas aliaj elementoj, kiuj ordinare prezentigxas kursive, kaj kiuj ofte estas la gxusta elekto: em
, cite
, dfn
. Se oni nepre volas kursivan presenton, sed neniu el tiuj elementoj tauxgas, kaj se ankaux 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 vocxo aux modalo (vidu i
). Tio povas esti ekzemple sxlosilvortoj en dokumenta resumo, produktonomoj en recenzo, interagaj vortoj en tekstobaza programo aux ludo, aux enkonduka alineo/frazo de (gazeta) artikolo, de cxapitro aux simile (precipe se tiu enkonduko pli-malpli resumas la cxefajn punktojn de la tuta artikolo/cxapitro). La malnova signifo de b
estis grasa stilo. La cxi-antauxe indikitaj uzoj de b
estas ofte grase presataj. Rimarku, ke b
-elemento ne indikas, ke la teksto estas emfazata aux grava.
Jen kelkaj ekzemploj.
Sxlosilvortoj en resumo de scienca studo:
<p>Tiu cxi studo prezentas novan analizon de la <b>sintakso</b> de <b>pigxinoj</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> movigxas en malhela angulo.</p>
Enkonduka alineo de gazeta artikolo:
<h1>Komediistoj senkomediaj</h1>
<p><b>Cxu, aux kiam, okazos en Britio referendumo pri akcepto aux neakcepto de la euxro ankoraux ne certas.</b></p>
<p>Dauxre hezitas la brita cxefministro Tony Blair, kiu ajne pli favoras la euxron ol sia potenca kaj respektata ministro pri financoj, Gordon Brown. [...]</p>
Jen ligilo al pagxo kun cxiuj tiuj ekzemploj de la b
-elemento.
Oni ne forgesu, ke ekzistas aliaj elementoj, kiuj ordinare prezentigxas grase, kaj kiuj ofte estas la gxusta elekto: strong
, h1
- h6
. Se oni nepre volas grasan presenton, sed neniu el tiuj elementoj tauxgas, kaj se ankaux 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, legxaj limigoj, kopirajtaj informoj k.s. La elemento small
ne malemfazas aux malgravigas tekston markitan per em
aux strong
. (Se oni volas indiki, ke teksto ne estas emfazata aux grava, oni simple ne uzu respektive em
kaj strong
.) Oni ne uzu small
por longaj tekstoj, nek por pluraj alineoj, sekcioj aux listoj. small
estas celita por konciza teksto.
Jen ekzemplo:
<footer>
<p>
Verkis la artikolon Iu Neniuulo.
<small>
La teksto disponeblas laux la permesilo Krea Komunajxo
Atribuite-Samkondicxe 3.0 Neadaptita.
</small>
</p>
</footer>
s
La elemento s
reprezentas enhavon, kiu ne plu estas gxusta aux trafa. La malnova signifo de s
estis trastrekita stilo. La cxi-antauxe 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 anstatauxe la del
-elementon.
En la sekva ekzemplo la vendoprezo estas markita kiel ne plu valida, cxar la koncerna varo havas novan prezon:
<p>
<cite>La Antauxgxardeno</cite>:
nova nemaltrafinda suspensa romano verkita de Stefano Letr!
</p>
<p>
<s><strong>200 euxroj!</strong></s>
</p>
<p>
<strong>Nun je rabatita prezo: nur 2 euxroj</strong>
<small>(sendokostoj aldonigxos)</small>!
</p>
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 Cxina teksto (substrekado estas iafoje tiucele uzata en la Cxina) 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
aux mark
por sxlosilaj vortoj aux frazoj, cite
por librotitoloj, kaj i
por sxiponomoj en Okcidentlingva teksto. Por eksplicita teksta prinotado la elemento ruby
povas esti la gxusta elekto.
En la sekva Cxinlingva ekzemplo, kiu signifas “Mi venas el Germanujo”, la Cxina nomo de Germanujo estas markita kiel propra nomo:
<p lang="zh" xml:lang="zh">
我来自<u>德国</u>.
</p>
em
, strong
La roloj kaj signifoj de la du elementoj em
kaj strong
estas subtile sxangxitaj en HTML5:
La elemento em
antauxe (en HTML 4 kaj XHTML 1.0/1.1) estis difinita kiel emfazo. En HTML5 la difino de em
estas sxangxita al akcenta (elparola) emfazo, kiu povas sxangxi la sencon.
La elemento strong
antauxe (en HTML 4 kaj XHTML 1.0/1.1) estis difinita kiel forta emfazo. En HTML5 la difino de strong
estas sxangxita al forta graveco. (Indikado aux neindikado de graveco ne sxangxas la efektivan sencon de la teksto.)
Antauxe strong
estis pli forta varianto de em
. Tiu ligo inter la du elementoj estas nun forigita. Se oni volas ecx 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 ecx pli da em
-elementoj aux strong
-elementoj kune.
Jen kelkaj ekzemploj.
Elparola emfazo indikas la celitan sencon:
<p><em>Katoj</em> estas dolcxaj bestoj. (Kontraste al <em>hundoj</em>.)</p>
<p>Katoj estas <em>dolcxaj</em> bestoj. (Ili ne estas <em>malicaj</em>.)</p>
Diversaj gradoj de averta graveco:
<p><strong>Atentu:</strong> Tiu cxi kaverno estas dangxera.
<strong>Evitu la anasojn.</strong> Prenu cxian ajn oron, kiun vi trovos.
<strong><strong>Sed ne tusxu la diamantojn</strong>, cxar
ili estas eksplodemaj kaj <strong>detruos cxion ajn ene de dekmetra
distanco.</strong></strong> Vi estas avertita.</p>
hr
La elemento hr
reprezentas aline-nivelan (t.e. situantan inter alineoj kaj alinesimilaj elementoj, do ne ene de kuranta teksto) temosxangxon, ekzemple scenosxangxon en rakonto, aux 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 trovigxas 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), grafikajxeto aux simile.
Jen kelkaj ekzemploj:
<section>
<h1>Komunikado</h1>
<p>Ekzistas diversaj metodoj de komunikado. Tiu cxi sekcio diskutas
kelkajn el la pli gravaj metodoj uzataj en la projekto.</p>
<hr class="linio"/>
<p>Komunikadaj sxtonoj ofte estas paraj. Ili havas misterajn ecojn::</p>
<ul>
<li>Ili povas transigi pensojn en du direktoj post aktivigo,
se ili uzigxas solaj.</li>
<li>Kiam uzataj kune kun alia komunikilo, ili povas transigi
ies konscion en alian korpon.</li>
<li>Se ambaux sxtonoj uzigxas kune kun alia komunikilo,
la konscioj de la du korpoj intersxangxigxas.</li>
</ul>
<hr class="steletoj"/>
<p>Radiaparatoj uzas la elektromagnetan spektron kun metraj
kaj pli vastaj ondolongoj</p>
<hr class="steletoj"/>
<p>Signalotorcxoj uzas la nanometran parton de la
elektromagneta spektro.</p>
</section>
<section>
<h1>Mangxajxoj</h1>
<p>La mangxajxoj 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 laux fiksita skemo.</p>
</section>
Grave: Se oni deziras horizantalan linion, ornamajn steletojn aux simile, sed se tiu ornamajxo ne esprimas teman interrompon, tiam oni ne uzu hr
-elementon, sed bildon (img
-elementon) aux div
-elementon kun lauxcelaj stiloreguloj (borderon, fonbildon...).
cite
La elemento cite
reprezentas titolon de verko (ekzemple libro, artikolo, eseo, poemo, partituro, kanto, manuskripto, filmo, televidajxo, ludo, skulptajxo, pentrajxo, teatrajxo, opero, muzikalo, ekspozicio, raporto pri jura kazo, k.t.p.). Tio povas esti verko, kiun oni citas aux detale referencas, aux kiun oni nur pase mencias.
cite
ne estu uzata por marki personajn nomojn. Tio estas grava diferenco kompare kun antauxaj versioj de HTML kaj XHTML, kie tia uzo estis ebla. Iafoje la elemento b
povas esti gxusta por nomoj, ekzemple en klacxartikolo, kie la nomoj de famuloj estas sxlosilvortoj 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 Antauxgxardeno</cite> de Stefano Letr.
Mia favorata bildstriajxo estas <cite>La sercxo por la Bona Etoso</cite> de Arnaud Torras.
Mia favorata muzikajxo estas <cite>Sen gxu’</cite> de Kore.</p>
Jen malpli tipa, sed tute gxusta ekzemplo:
<p>Laux la Vikipedia artikolo <cite>Kore</cite>, kiel gxi estis redaktita en Majo 2011, la grupo Kore konsistas el ses muzikistoj.</p>
Jen tamen ekzemplo de negxusta uzo de cite
, kie la elemento cite
enhavas multe pli ol efektivan titolon de verko:
<!-- Ne imitu tiun cxi kodon, cxar gxi estas ekzemplo de misuzo! -->
<p>Laux <cite>la Vikipedia artikolo Kore</cite>, kiel gxi 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 citajxoj oni ne uzu cite
, sed q
:
<!-- Ne imitu tiun cxi kodon, cxar gxi estas ekzemplo de misuzo! -->
<p><cite>Tio cxi estas erara!</cite>, diris Jano.</p>
Ankaux la jeno estas erara (cxar cite
ne tauxgas por nomo de persono):
<!-- Ne imitu tiun cxi kodon, cxar gxi estas ekzemplo de misuzo! -->
<p><q>Tio cxi ankoraux estas erara!</q>, diris <cite>Jano</cite>.</p>
Jen gxusta markado de tiaj ekzemploj:
<p><q>Tio cxi estas gxusta</q>, diris Jano.</p>
Kiel menciigxis cxi-antauxe, la elemento b
povas esti tauxga por marki personajn nomojn, kiam ili rolas kiel sxlosilvortoj en iaj tekstospecoj:
<p>Kaj tiam <b>Jano</b> diris: <q>Tio cxi povas esti gxusta, en klacxartikolo, eble!</q>.</p>
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 ankaux povas esti listo de ecoj kaj ties statoj, demandoj kaj ties respondoj, kaj aliaj similajxoj. Sed en HTML5 dl
-listoj ne estu uzataj por marki dialogojn (tio eblis en antauxaj 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 cxiu pasxo de la
kalkulado.</dd>
<dt>abako</dt>
<dd>Kalkulilo, konsistanta el globetoj trairitaj de
stangetoj, sur kiuj ili estas sxoveblaj.</dd>
<dt>komputilo</dt>
<dd>Auxtomata 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>: Morgaux estos alia tago de laboro. Ni iru dormi.</p>
<p><b>CEZARO</b> <i class="instrukcio">(pente)</i>: pardonu min. Mi estas tro sovagxa, sed vi estas mia. <i class="instrukcio">(Li kaptas sxiajn manojn, kaj kisas ilin. Poste, li longe rigardas ilin, kaj rimarkas la mankon de la ringo.)</i> Kion vi faris kun la ringo? Cxu vi gxin detiris por ricevi cxi tie viron?..</p>
<p><b>ANNA</b>: <i class="instrukcio">(furioze)</i>: Bruto!</p>
address
La elemento address
, kies enhavo estu kontaktinformoj (adreso aux simile de la kreinto/repondeculo de la enhavo) kaj nenio alia, nun validas por la koncerna article
-elemento, en kiu address
trovigxas. Se address
ne estas en article
-elemento, gxi validas por la tuta pagxo.
head
La elemento head
ne plu rajtas enhavi la elementon object
.
La elemento head
normale devas enhavi title
-elementon (nur unu). title
tamen rajtas foresti, se la koncerna pagxo estas enhavo de iframe
-elemento, aux se la title
-informoj estas provizataj ekster la pagxo pere de pli alta protokolo, ekzemple se la HTML-kodo estas uzata ene de retposxta mesagxo. Tiam la informoj, kiuj respondas al title
, trovigxas en la tem-linio de la retposxta mesagxo.