HTML5

Novajxoj: Sekciaj elementoj

Laux mi la plej grava novajxo en HTML5 estas la abundo de novaj elementoj por indiki diversspecajn sekciojn de pagxo. Antauxe oni uzis por organizi kaj grupi partojn de la enhavo unu solan elementon: div, kiu per si mem nenion ajn signifas, krom tion, ke la enaj elementoj kaj tekstoj iel kunapartenas. div plu ekzistas en HTML5 (kiel lasta elturnigxo), sed nun oni uzu en plej multaj tiaj okazoj anstatauxe iun el la novaj signifohavaj elementoj main, article, section, nav, aside, header kaj footer.

main

La elemento main reprezentas la cxefan enhavon de la pagxo. Gxi principe entenu tion, kio estas unika por gxuste tiu pagxo, kontraste al partoj, kiuj ripetigxas en pluraj pagxoj (ekz. navigaciaj ligiloj, kopirajtaj informoj, emblemo de TTT-ejo, flanka panelo, sercxilo k.s.).

main-elemento rajtas aperi nur unu fojon en pagxo. Gxi ne rajtas esti ene de article, aside, footer, header aux nav.

Se la enhavo de pagxo konsistas el pli ol unu memstara verkajxo, oni povas dividi la enhavon de main pere de la cxi-poste klarigitaj sekciaj elementoj.

article

La elemento article reprezentas memstaran verkajxon, kiu principe estas sendepende distribuebla aux reuzebla. Tio povas esti ekzemple artikolo en magazino aux gazeto, afisxo en forumo, blogajxo, komento de leganto aux simile. article povas konsisti el diversaj sekcioj, vidu section.

En relative simpla pagxo, article ne estas necesa. Oni povas simple meti la enhavon en main-elementon. Sed se la enhavo estas kompleksa, se gxi traktas plurajn apartajn temojn, en pluraj memstaraj verkajxoj (ekz. diversaj artikoloj en gazeto aux blogo), tiam oni povas uzu plurajn article-elementojn ene de main. Uzi unu solan article-elementon ne estas eraro, sed estas plej ofte superflua komplikajxo.

article-elemento ankaux povas en si enhavi aliajn article-elementojn. Tiaj enaj article-elementoj tiam reprezentas aliajn principe memstarajn verkajxojn, kiuj tamen rilatas al la ekstera article. Ekzemple, se cxefa/ekstera article estas blogajxo, eventualaj komentoj de legantoj, povas aperi kiel apartaj article-elementoj ene de tiu blogajxo.

section

section-elemento reprezentas sekcion de dokumento, artikolo aux simile. section normale havas titolon indikitan ekzemple de h1-elemento (aux h2, h3 k.t.p.). Tiaj sekcioj povas esti ekzemple cxapitroj, numerataj partoj de scienca artikolo aux simile. La cxefa pagxo de TTT-ejo povas ekzemple esti tiamaniere dividita en sekciojn por enkonduko, novajxoj, kontaktinformoj k.s.

Kiam povus esti sencohave distribui la koncernan enhavon memstare aliloke, tiam plej versxajne la elemento article estas pli uzinda.

La section-elemento ne estas gxenerala enhavujo. Kiam oni bezonas ian grupigan elementon nur por povi aldoni apartan stilon aux simile, tiam uzindas anstatauxe la elemento div. Bona gvidlinio estas, ke la elemento section tauxgas nur, se estus sencohave aperigi gxin (t.e. gxian titolon) en eventuala enhavotabelo.

aside

aside-elemento reprezentas pagxoparton kun enhavo, kiu iel periferie rilatas al la cetera enhavo de la pagxo, kaj kiu povas esti rigardata kiel aparta de la cxefa enhavo. En presitaj dokumentoj tia periferia enhavo ofte aperas en flanka (ofte borderita) kesto.

Tauxgaj uzoj por aside povas esti ekzemple sekcio kun anoncoj, grupoj de nav-elementoj apartaj de la cxefa enhavo aux apartigitaj citajxoj nenecesaj por la cxefa enhavo.

Se la koncerna enhavo havas la karakteron de parentezajxo, kiu principe estas parto de la cxefa enhavo (sed malpli grava), tiam aside ne estas la gxusta elekto. aside ankaux ne estas tauxga por notoj (piednotoj), kun klarigoj de io en la cxefa enhavo.

Praktika ekzemplo de la novaj sekciaj elementoj

Jen ekzemplo de tuta pagxo, kiu uzas cxiujn cxi-antauxe klarigitajn sekciajn elementojn en pli-malpli tipa maniero:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eo" lang="eo">
<head>
    <meta charset="UTF-8"/>
    <title>Simpla ekzemplo de HTML5</title>
    <link rel="stylesheet" href="simpla_ekzemplo_sekciaj_elementoj.css"/>
</head>
<body>

<nav>
  <ul>
      <li><a href="aliapagho.html">Alia pagxo (neekzistanta)</a></li>
      <li><a href="triapagho.html">Tria pagxo (same neekzistanta)</a></li>
  </ul>
</nav>

<main>

  <header>
    <h1>Simpla ekzemplopagxo kun sekciaj elementoj</h1>
    <p>Bonvenon al tiu cxi senenhava pagxo</p>
  </header>

  <article>

    <h1>Titolo de la artikolo</h1>

    <section>

      <h2>La unua sekcio</h2>

      <p>Iom da enhavo.</p>

   </section>

    <section>

      <header>
        <h2>La dua sekcio</h2>
        <p>Kiu ecx havas subtitolon</p>
      </header>

      <p>Pli da enhavo.</p>

    </section>

  </article>

  <aside><p>Cetere indas scii, ke ...</p></aside>

  <footer>
    <p>Kopirajto © neniu</p>
    <p><a href="kontakto.html">Kontakti neniun</a></p>
  </footer>

</main>

</body>
</html>

Jen ligilo al pagxo kun tiu ekzempla HTML-kodo. Tiu demonstra pagxo havas stilfolion, kiu aldonas iom da margxenoj, borderoj k.t.p., kaj kiu aldone videbligas la nomojn de la cxefaj sekciaj elementoj (almenaux en modernaj TTT-legiloj). En vera uzo oni kompreneble uzus tute alian prezentostilon. Atentu, ke tiu ekzemplopagxo bone prezentigxas nur en modernaj TTT-legiloj. Legu kiel solvi tiajn problemojn tuj cxi-poste.

Problemoj en malnovaj TTT-legiloj!

La novaj sekciaj elementoj estas tre uzindaj, cxar ili ebligas multe pli klare indiki la strukturon de pagxo, sed bedauxrinde ekzistas gravaj problemoj pri ili en malnovaj TTT-legiloj. Legiloj kreitaj antaux ol HTML5 estis ellaborita ne konas tiujn novajn elementojn, kaj ne scias, kiel trakti ilin. Kiam TTT-legilo renkontas tute nekonatan elementon en HTML-kodo, gxi povas diversmaniere reagi. Iuj legiloj agas kvazaux la markiloj de la elemento tute ne ekzistus, nur prezentante la enhavon. Aliaj misinterpretas la elementojn diversmaniere kauxzante strangan prezenton. Ofte maleblas stiligi tiajn nekonatajn elementojn en malnovaj legiloj. Stilfolia kodo, kiu celas influi la prezenton de main, article, section k.t.p. povas esti tute ignorata.

Konkrete kaj praktike temas pri problemoj en la legiloj Esplorilo 6, Esplorilo 7, Fajrovulpo 2 kaj (la malofte uzata) Camino 1. Fajrovulpo 2 estas preskaux malaperinta, kaj Camino 1 estas apenaux uzata de iu ajn. (Tiuj du legiloj estas interne praktike unu sama programo.) Sed Esplorilo 6 kaj 7 estas ankoraux uzataj de suficxe multaj homoj. Sume cxirkaux 20% el la Interretanoj ankoraux (en Junio 2011) uzas ilin, sed tiu procentajxo povas esti multe pli alta aux multe malpli alta en iuj landoj.

Diversaj aliroj kaj elturnigxoj

Unu parton de la problemo de malnovaj legiloj oni povas suficxe facile solvi: La malnovaj legiloj ne scias, ke la novaj nekonataj sekciaj elementoj estas t.n. blokaj elementoj, t.e. elementoj, kiuj en normala prezentado formas blokon kun linirompo antauxe kaj linirompo poste. Nekonataj elementoj ordinare traktigxas auxtomate kiel ne-blokaj, t.e. kiel partoj de kuranta teksto sen rompo de linio.

Por eviti tion oni simple aldonu al sia stilfolio la jenon:

main, article, section, nav, aside, header, footer { display: block; }

Tio instruas al cxiuj legiloj, kiuj ankoraux ne scias tion, ke la koncernaj elementoj estu prezentataj bloke.

Sed tio ne solvas la problemojn en cxiuj legiloj. Esplorilo 6 kaj 7 tute ignoras tiun stilregulon (cxar la koncernaj elementoj ne ekzistas laux Esplorilo 6 kaj 7).

Jen kelkaj eblaj aliroj:

  1. Ignori la problemon: Uzantoj de malnovaj legiloj kulpigu sin mem. Pli bonaj TTT-legiloj estas facile troveblaj, kostas neniom, kaj estas rapide instaleblaj.
  2. Uzi Javaskripton: Ekzistas tre facile uzebla Javaskripta solvo, kiu kvazaux magie riparas la problemon en Esplorilo 6 kaj Esplorilo 7.
  3. Eviti la problemajn elementojn: Oni povas provizore uzi div-elementojn anstataux la novaj sekciaj elementoj, gxis la problemaj TTT-legiloj estos malaperintaj aux almenaux suficxe maloftaj, por ke oni povu ilin ignori.
1. Ignori la problemon

Se oni scias, ke preskaux cxiuj vizitantoj de la koncerna TTT-ejo uzas modernajn TTT-legilojn, oni povas tute bone elekti tiun cxi aliron. Tiuj, kiuj uzas malmodernajn legilojn, kredeble jam iom alkutimigxas al tio, ke ne malmultaj pagxoj nuntempe prezentigxas fusxe, kaj espereble tiuj vizitantoj konscias, ke ili mem kulpas, cxar ili uzas tute eksdatajn programojn.

Sed multaj pagxofarantoj ne povas tiel facilanime trakti siajn vizitantojn. Eble ili ecx enspezas monon per siaj TTT-ejoj, kaj do ne povas forpusxi eventualajn klientojn, nur por povi uzi la plej fresxdatajn tehxnikajn mojosajxojn.

2. Uzi Javaskripton

Plej multaj uzantoj de HTML5 elektas la Javaskriptan elturnigxon: Ekzistas jam pretaj Javaskriptaj programoj, kiujn oni povas elsxuti kaj ekuzi en siaj pagxoj (menciindas precipe html5shiv kaj Modernizr, kiu faras ankaux multon alian utilan kaj interesan). Tiuj programoj auxtomate instruas al Esplorilo 6 kaj 7 pri la ekzisto de la novaj elementoj, kaj tiel ebligas ilian uzadon.

La problemo estas, ke iuj homoj malsxaltis la uzon de Javaskripto en siaj TTT-legiloj (eble cxar ili trovas Javaskripton gxena aux ecx riska). Por tiuj homoj la Javaskripta solvo tute ne efikas. Se pagxo jam pro alia kialo dependas de Javaskripto (eble cxar gxi estas pli simila al programo ol al ordinara TTT-pagxo), tiam tio ne estas problemo, sed estas iom strange dependigi de Javaskripto pagxon, kiu per si mem estas tute statika kaj simpla, kaj kiu nur prezentas tekstajn informojn sen vera interagado. Cxu la novaj HTML5-luksajxoj vere valoras tian prezon?

Unu kontrauxargumento estas, ke tiaj homoj, kiuj emas malsxalti Javaskripton, plej ofte ankaux zorge gxisdatigas siajn TTT-legilojn, kaj do tre malversxajne uzas ekzemple Esplorilon 6 aux 7. Kontrauxkontrauxargumento estas, ke gxuste uzantoj de Esplorilo 6 plej bezonas malsxalti Javaskripton, cxar tiu malnovega legilo estas tre malsekura, precipe kiam Javaskripto estas aktiva!

En la nuna TTT Javaskripto farigxas cxiam pli kaj pli grava, kaj eble baldaux apenaux plu havos sencon viziti TTT-pagxojn sen aktiva Javaskripto. Fakte multaj HTML5-istoj rezonas tiamaniere. Eble ili pravas.

3. Eviti la problemajn elementojn

La plej singarda aliro estas provizore rezigni pri la problemaj elementoj. Oni povas uzi HTML5-on sen nepre jam nun uzi la novajn sekciajn elementojn. Oni povas unue nur simpligi sian dokumentotipan deklaron, ekzuzante tiun de HTML5, kaj fruktuzi kelkajn aliajn pli sekurajn partojn de HTML5. Iam poste, kiam la mondo estos pli matura, oni povos iom post iom enkonduki pliajn partojn de HTML5.

Tiuj, kiuj elektas tian aliron, plej ofte uzas anstataux article, section, nav k.t.p. div-elementojn kun aldona class-atributo, kiu indikas, kian HTML5-elementon la div-o reprezentas:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eo" lang="eo">
<head>
    <meta charset="UTF-8"/>
    <title>Simpla ekzemplo de HTML5</title>
    <link rel="stylesheet" href="simpla_ekzemplo_sekciaj_elementoj.css"/>
</head>
<body>

<div class="nav">
  <ul>
      <li><a href="aliapagho.html">Alia pagxo (neekzistanta)</a></li>
      <li><a href="triapagho.html">Tria pagxo (same neekzistanta)</a></li>
  </ul>
</div>

<div class="main">

  <div class="header">
    <h1>Simpla ekzemplopagxo kun <em>surogataj</em> sekciaj elementoj</h1>
    <p>Bonvenon al tiu cxi senenhava pagxo</p>
  </div>

  <div class="article">

    <h1>Titolo de la artikolo</h1>

    <div class="section">

      <h2>La unua sekcio</h2>

      <p>Iom da enhavo.</p>

   </div>

    <div class="section">

      <div class="header">
        <h2>La dua sekcio</h2>
        <p>Kiu ecx havas subtitolon</p>
      </div>

      <p>Pli da enhavo.</p>

    </div>

  </div>

  <div class="aside"><p>Cetere indas scii, ke ...</p></div>

  <div class="footer">
    <p>Kopirajto © neniu</p>
    <p><a href="kontakto.html">Kontakti neniun</a></p>
  </div>

</div>

</body>
</html>

Jen ligilo al pagxo kun tiu ekzempla HTML-kodo.

Kiam la brila estonteco iam alvenos, estos relative facile auxtomate transformi tian singardan HTML5-kodon en pli modernan kun la veraj sekciaj elementoj tie, kie la class-atributoj indikas, ke ili devus esti. Oni tiam ankaux povos suficxe rapide modifi lauxe sian CSS-kodon, anstatauxigante .main per main, .article per article, .nav per nav k.t.p.

Hibrida varianto

Se oni kapablas tion arangxi, oni povas servi plene modernan HTML5-on al modernaj legiloj, kaj singardan div-ecan surogatan HTML5-on al malnovaj legiloj. Sed tiam oni devas tion iel programi en la servilo. Gxuste tian solvon mi praktikas en tiu cxi TTT-ejo. Se oni vizitas tiujn cxi pagxojn per moderna TTT-legilo, tiam la HTML-kodo estas plena je main, article, section, nav k.t.p. Sed se oni vizitas per ekzemple Esplorilo 7, tiam oni ricevas la saman kodon kun div-oj kaj respondaj class-atributoj anstatauxe. Tiamaniere mi evitas dependigi miajn pagxojn de Javaskripto. Sed tia solvo vere ne estas facile arangxebla. La ebloj multe dependas de tio, kiaj programadaj rimedoj estas haveblaj en la koncerna servilo, kaj de oniaj scioj pri servilaj agordado kaj programado.

Nova maniero uzi sekciajn titolojn

La elementoj article kaj section normale cxiam havu titolon (alie oni plej versxajne devus uzi alian elementon, ekzemple div, nav, header, footer aux aside). Por titoloj oni uzu iun el la elementoj h1, h2, h3, h4, h5 kaj h6. Laux la gxisnunaj principoj la plej supra nivelo havu h1-titolon, kaj ties subsekcioj havu h2-titolojn, kaj ties eventualaj subsubsekcioj havu h3-titolojn, kaj tiel plu gxis la plej profunda (kaj suficxe malofta) nivelo kun h6-titoloj.

Oni tute rajtas kaj povas plu uzi titolojn laux tiu logika principo, sed en HTML5 oni povas ankaux uzi ilin laux alia principo:

En HTML5 la hierarhxio de sekcioj estu normale indikata de section-elementoj (kaj article, nav k.t.p.), kaj se oni cxiam uzas tiajn elementojn, oni povas por la cxefa titolo de cxiu sekcio cxiam uzi nur h1-elementojn!

Jen ekzemplo de la tradicia stilo:

<article>
 <h1>Pomoj</h1>
 <p>Pomoj estas fruktoj.</p>
 <section>
  <h2>Gusto</h2>
  <p>Ili gustas mirinde.</p>
  <section>
   <h3>Dolcxeco</h3>
   <p>Rugxaj pomoj estas pli dolcxaj ol verdaj pomoj.</p>
  </section>
 </section>
 <section>
  <h2>Koloro</h2>
  <p>Pomoj havas diversajn kolorojn.</p>
 </section>
</article>

Jen ligilo al pagxo kun tiu ekzempla HTML-kodo sen stifolio: “Sekcioj kun tradicistilaj titoloj”.

Jen la samo kun titoloj laux la nova uzomaniero:

<article>
 <h1>Pomoj</h1>
 <p>Pomoj estas fruktoj.</p>
 <section>
  <h1>Gusto</h1>
  <p>Ili gustas mirinde.</p>
  <section>
   <h1>Dolcxeco</h1>
   <p>Rugxaj pomoj estas pli dolcxaj ol verdaj pomoj.</p>
  </section>
 </section>
 <section>
  <h1>Koloro</h1>
  <p>Pomoj havas diversajn kolorojn.</p>
 </section>
</article>

Jen ligilo al pagxo kun tiu ekzempla HTML-kodo plus stilfolio: “Sekcioj kun novstilaj titoloj”.

Jen ligilo al pagxo kun tiu ekzempla HTML-kodo sen stifolio: “Sekcioj kun novstilaj titoloj”.

La nova uzomaniero havas du gravajn avantagxojn:

  1. Se oni volas rearangxi la sekciojn de teksto, oni ne bezonas sxangxi la titolajn elementojn, sed povas simple movi la koncernajn section-elementojn (kaj ties enhavon inkluzive de la h1-titolo) al nova loko, kiu tute bone povas esti en tute alia nivelo de la sekcia hierarhxio.
  2. Oni povas uzi kiom ajn da niveloj de subsekcioj: La titolaj elementoj ne elcxerpigxas, cxar oni uzas cxiam nur h1-titolojn.

Noto: En XHTML 2.0, kiu neniam estis finfarita, oni ecx forigis la elementojn h1 - h6, kaj enkondukis anstatauxe nur unu gxeneralan elementon h. Tia drasta sxangxo estus la ideala solvo, sed HTML5 celas esti kiom eble kongrua kun malnova HTML kaj XHTML, kaj tial oni elektis anstatauxe la solvon klarigitan cxi-antauxe.

Stilfolio estas bezonata

La nunaj TTT-legiloj scias, kiamaniere prezenti la titolajn elementojn h1 - h6. Ordinare h1-elementoj prezentigxas kiel tre grandaj, kaj la aliaj niveloj de titoloj estas sinsekve malpli grandaj. Oni povas tion sxangxi lauxplacxe per stilfolio, sed ankaux pagxo sen stilfolio prezentigxas kun titoloj diversgrandaj laux la nivelo. Sed ankoraux (en Junio 2011) nur kelkaj el la plej novaj TTT-legiloj auxtomate prezentas h1-titolojn en diversaj grandoj depende de la nivelo de la sekcio. En aliaj legiloj cxiuj h1-elementoj prezentigxas defauxlte tute same! Tial, se oni elektas la novan uzomanieron kun cxiam nur h1-elementoj (por cxefaj titoloj), tiam oni prefere aldonu stilfolion, kiu difinas malsamajn prezentojn laux la nivelo, ekzemple jene:

h1 { font-size: 300%; font-weight: bold;}
article h1 {font-size: 250%; }
section h1 {font-size: 200%;}
section section h1 {font-size: 170%;}
section section section h1 {font-size: 140%; }
section section section section h1 {font-size: 120%; }
section section section section section h1 {font-size: 110%; }
section section section section section section h1 {font-size: 105%; }
section section section section section section section h1 {font-size: 100%;}

Al la sekva parto, ”Novajxoj: Sxangxitaj elementoj”