HTML5

Novaĵoj: Sekciaj elementoj

Laŭ mi la plej grava novaĵo en HTML5 estas la abundo de novaj elementoj por indiki diversspecajn sekciojn de paĝo. Antaŭe 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 elturniĝo), sed nun oni uzu en plej multaj tiaj okazoj anstataŭe iun el la novaj signifohavaj elementoj main, article, section, nav, aside, header kaj footer.

main

La elemento main reprezentas la ĉefan enhavon de la paĝo. Ĝi principe entenu tion, kio estas unika por ĝuste tiu paĝo, kontraste al partoj, kiuj ripetiĝas en pluraj paĝoj (ekz. navigaciaj ligiloj, kopirajtaj informoj, emblemo de TTT-ejo, flanka panelo, serĉilo k.s.).

main-elemento rajtas aperi nur unu fojon en paĝo. Ĝi ne rajtas esti ene de article, aside, footer, headernav.

Se la enhavo de paĝo konsistas el pli ol unu memstara verkaĵo, oni povas dividi la enhavon de main pere de la ĉi-poste klarigitaj sekciaj elementoj.

article

La elemento article reprezentas memstaran verkaĵon, kiu principe estas sendepende distribuebla aŭ reuzebla. Tio povas esti ekzemple artikolo en magazino aŭ gazeto, afiŝo en forumo, blogaĵo, komento de leganto aŭ simile. article povas konsisti el diversaj sekcioj, vidu section.

En relative simpla paĝo, article ne estas necesa. Oni povas simple meti la enhavon en main-elementon. Sed se la enhavo estas kompleksa, se ĝi traktas plurajn apartajn temojn, en pluraj memstaraj verkaĵoj (ekz. diversaj artikoloj en gazeto aŭ blogo), tiam oni povas uzu plurajn article-elementojn ene de main. Uzi unu solan article-elementon ne estas eraro, sed estas plej ofte superflua komplikaĵo.

article-elemento ankaŭ povas en si enhavi aliajn article-elementojn. Tiaj enaj article-elementoj tiam reprezentas aliajn principe memstarajn verkaĵojn, kiuj tamen rilatas al la ekstera article. Ekzemple, se ĉefa/ekstera article estas blogaĵo, eventualaj komentoj de legantoj, povas aperi kiel apartaj article-elementoj ene de tiu blogaĵo.

section

section-elemento reprezentas sekcion de dokumento, artikolo aŭ simile. section normale havas titolon indikitan ekzemple de h1-elemento (aŭ h2, h3 k.t.p.). Tiaj sekcioj povas esti ekzemple ĉapitroj, numerataj partoj de scienca artikolo aŭ simile. La ĉefa paĝo de TTT-ejo povas ekzemple esti tiamaniere dividita en sekciojn por enkonduko, novaĵoj, kontaktinformoj k.s.

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

La section-elemento ne estas ĝenerala enhavujo. Kiam oni bezonas ian grupigan elementon nur por povi aldoni apartan stilon aŭ simile, tiam uzindas anstataŭe la elemento div. Bona gvidlinio estas, ke la elemento section taŭgas nur, se estus sencohave aperigi ĝin (t.e. ĝian titolon) en eventuala enhavotabelo.

aside

aside-elemento reprezentas paĝoparton kun enhavo, kiu iel periferie rilatas al la cetera enhavo de la paĝo, kaj kiu povas esti rigardata kiel aparta de la ĉefa enhavo. En presitaj dokumentoj tia periferia enhavo ofte aperas en flanka (ofte borderita) kesto.

Taŭgaj uzoj por aside povas esti ekzemple sekcio kun anoncoj, grupoj de nav-elementoj apartaj de la ĉefa enhavo aŭ apartigitaj citaĵoj nenecesaj por la ĉefa enhavo.

Se la koncerna enhavo havas la karakteron de parentezaĵo, kiu principe estas parto de la ĉefa enhavo (sed malpli grava), tiam aside ne estas la ĝusta elekto. aside ankaŭ ne estas taŭga por notoj (piednotoj), kun klarigoj de io en la ĉefa enhavo.

Praktika ekzemplo de la novaj sekciaj elementoj

Jen ekzemplo de tuta paĝo, kiu uzas ĉiujn ĉi-antaŭe 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 paĝo (neekzistanta)</a></li>
      <li><a href="triapagho.html">Tria paĝo (same neekzistanta)</a></li>
  </ul>
</nav>

<main>

  <header>
    <h1>Simpla ekzemplopaĝo kun sekciaj elementoj</h1>
    <p>Bonvenon al tiu ĉi senenhava paĝo</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 eĉ 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 paĝo kun tiu ekzempla HTML-kodo. Tiu demonstra paĝo havas stilfolion, kiu aldonas iom da marĝenoj, borderoj k.t.p., kaj kiu aldone videbligas la nomojn de la ĉefaj sekciaj elementoj (almenaŭ en modernaj TTT-legiloj). En vera uzo oni kompreneble uzus tute alian prezentostilon. Atentu, ke tiu ekzemplopaĝo bone prezentiĝas nur en modernaj TTT-legiloj. Legu kiel solvi tiajn problemojn tuj ĉi-poste.

Problemoj en malnovaj TTT-legiloj!

La novaj sekciaj elementoj estas tre uzindaj, ĉar ili ebligas multe pli klare indiki la strukturon de paĝo, sed bedaŭrinde ekzistas gravaj problemoj pri ili en malnovaj TTT-legiloj. Legiloj kreitaj antaŭ 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, ĝi povas diversmaniere reagi. Iuj legiloj agas kvazaŭ la markiloj de la elemento tute ne ekzistus, nur prezentante la enhavon. Aliaj misinterpretas la elementojn diversmaniere kaŭzante 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 preskaŭ malaperinta, kaj Camino 1 estas apenaŭ uzata de iu ajn. (Tiuj du legiloj estas interne praktike unu sama programo.) Sed Esplorilo 6 kaj 7 estas ankoraŭ uzataj de sufiĉe multaj homoj. Sume ĉirkaŭ 20% el la Interretanoj ankoraŭ (en Junio 2011) uzas ilin, sed tiu procentaĵo povas esti multe pli alta aŭ multe malpli alta en iuj landoj.

Diversaj aliroj kaj elturniĝoj

Unu parton de la problemo de malnovaj legiloj oni povas sufiĉe 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 antaŭe kaj linirompo poste. Nekonataj elementoj ordinare traktiĝas aŭtomate 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 ĉiuj legiloj, kiuj ankoraŭ ne scias tion, ke la koncernaj elementoj estu prezentataj bloke.

Sed tio ne solvas la problemojn en ĉiuj legiloj. Esplorilo 6 kaj 7 tute ignoras tiun stilregulon (ĉar la koncernaj elementoj ne ekzistas laŭ 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 kvazaŭ magie riparas la problemon en Esplorilo 6 kaj Esplorilo 7.
  3. Eviti la problemajn elementojn: Oni povas provizore uzi div-elementojn anstataŭ la novaj sekciaj elementoj, ĝis la problemaj TTT-legiloj estos malaperintaj aŭ almenaŭ sufiĉe maloftaj, por ke oni povu ilin ignori.
1. Ignori la problemon

Se oni scias, ke preskaŭ ĉiuj vizitantoj de la koncerna TTT-ejo uzas modernajn TTT-legilojn, oni povas tute bone elekti tiun ĉi aliron. Tiuj, kiuj uzas malmodernajn legilojn, kredeble jam iom alkutimiĝas al tio, ke ne malmultaj paĝoj nuntempe prezentiĝas fuŝe, kaj espereble tiuj vizitantoj konscias, ke ili mem kulpas, ĉar ili uzas tute eksdatajn programojn.

Sed multaj paĝofarantoj ne povas tiel facilanime trakti siajn vizitantojn. Eble ili eĉ enspezas monon per siaj TTT-ejoj, kaj do ne povas forpuŝi eventualajn klientojn, nur por povi uzi la plej freŝdatajn teĥnikajn mojosaĵojn.

2. Uzi Javaskripton

Plej multaj uzantoj de HTML5 elektas la Javaskriptan elturniĝon: Ekzistas jam pretaj Javaskriptaj programoj, kiujn oni povas elŝuti kaj ekuzi en siaj paĝoj (menciindas precipe html5shiv kaj Modernizr, kiu faras ankaŭ multon alian utilan kaj interesan). Tiuj programoj aŭtomate instruas al Esplorilo 6 kaj 7 pri la ekzisto de la novaj elementoj, kaj tiel ebligas ilian uzadon.

La problemo estas, ke iuj homoj malŝaltis la uzon de Javaskripto en siaj TTT-legiloj (eble ĉar ili trovas Javaskripton ĝena aŭ eĉ riska). Por tiuj homoj la Javaskripta solvo tute ne efikas. Se paĝo jam pro alia kialo dependas de Javaskripto (eble ĉar ĝi estas pli simila al programo ol al ordinara TTT-paĝo), tiam tio ne estas problemo, sed estas iom strange dependigi de Javaskripto paĝon, kiu per si mem estas tute statika kaj simpla, kaj kiu nur prezentas tekstajn informojn sen vera interagado. Ĉu la novaj HTML5-luksaĵoj vere valoras tian prezon?

Unu kontraŭargumento estas, ke tiaj homoj, kiuj emas malŝalti Javaskripton, plej ofte ankaŭ zorge ĝisdatigas siajn TTT-legilojn, kaj do tre malverŝajne uzas ekzemple Esplorilon 6 aŭ 7. Kontraŭkontraŭargumento estas, ke ĝuste uzantoj de Esplorilo 6 plej bezonas malŝalti Javaskripton, ĉar tiu malnovega legilo estas tre malsekura, precipe kiam Javaskripto estas aktiva!

En la nuna TTT Javaskripto fariĝas ĉiam pli kaj pli grava, kaj eble baldaŭ apenaŭ plu havos sencon viziti TTT-paĝojn 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 anstataŭ 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 paĝo (neekzistanta)</a></li>
      <li><a href="triapagho.html">Tria paĝo (same neekzistanta)</a></li>
  </ul>
</div>

<div class="main">

  <div class="header">
    <h1>Simpla ekzemplopaĝo kun <em>surogataj</em> sekciaj elementoj</h1>
    <p>Bonvenon al tiu ĉi senenhava paĝo</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 eĉ 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 paĝo kun tiu ekzempla HTML-kodo.

Kiam la brila estonteco iam alvenos, estos relative facile aŭtomate 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 ankaŭ povos sufiĉe rapide modifi laŭe sian CSS-kodon, anstataŭigante .main per main, .article per article, .nav per nav k.t.p.

Hibrida varianto

Se oni kapablas tion aranĝi, 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. Ĝuste tian solvon mi praktikas en tiu ĉi TTT-ejo. Se oni vizitas tiujn ĉi paĝojn 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 anstataŭe. Tiamaniere mi evitas dependigi miajn paĝojn de Javaskripto. Sed tia solvo vere ne estas facile aranĝebla. 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 ĉiam havu titolon (alie oni plej verŝajne devus uzi alian elementon, ekzemple div, nav, header, footeraside). Por titoloj oni uzu iun el la elementoj h1, h2, h3, h4, h5 kaj h6. Laŭ la ĝisnunaj principoj la plej supra nivelo havu h1-titolon, kaj ties subsekcioj havu h2-titolojn, kaj ties eventualaj subsubsekcioj havu h3-titolojn, kaj tiel plu ĝis la plej profunda (kaj sufiĉe malofta) nivelo kun h6-titoloj.

Oni tute rajtas kaj povas plu uzi titolojn laŭ tiu logika principo, sed en HTML5 oni povas ankaŭ uzi ilin laŭ alia principo:

En HTML5 la hierarĥio de sekcioj estu normale indikata de section-elementoj (kaj article, nav k.t.p.), kaj se oni ĉiam uzas tiajn elementojn, oni povas por la ĉefa titolo de ĉiu sekcio ĉiam 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>Dolĉeco</h3>
   <p>Ruĝaj pomoj estas pli dolĉaj ol verdaj pomoj.</p>
  </section>
 </section>
 <section>
  <h2>Koloro</h2>
  <p>Pomoj havas diversajn kolorojn.</p>
 </section>
</article>

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

Jen la samo kun titoloj laŭ la nova uzomaniero:

<article>
 <h1>Pomoj</h1>
 <p>Pomoj estas fruktoj.</p>
 <section>
  <h1>Gusto</h1>
  <p>Ili gustas mirinde.</p>
  <section>
   <h1>Dolĉeco</h1>
   <p>Ruĝaj pomoj estas pli dolĉaj ol verdaj pomoj.</p>
  </section>
 </section>
 <section>
  <h1>Koloro</h1>
  <p>Pomoj havas diversajn kolorojn.</p>
 </section>
</article>

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

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

La nova uzomaniero havas du gravajn avantaĝojn:

  1. Se oni volas rearanĝi la sekciojn de teksto, oni ne bezonas ŝanĝi 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 hierarĥio.
  2. Oni povas uzi kiom ajn da niveloj de subsekcioj: La titolaj elementoj ne elĉerpiĝas, ĉar oni uzas ĉiam nur h1-titolojn.

Noto: En XHTML 2.0, kiu neniam estis finfarita, oni eĉ forigis la elementojn h1 - h6, kaj enkondukis anstataŭe nur unu ĝeneralan elementon h. Tia drasta ŝanĝo estus la ideala solvo, sed HTML5 celas esti kiom eble kongrua kun malnova HTML kaj XHTML, kaj tial oni elektis anstataŭe la solvon klarigitan ĉi-antaŭe.

Stilfolio estas bezonata

La nunaj TTT-legiloj scias, kiamaniere prezenti la titolajn elementojn h1 - h6. Ordinare h1-elementoj prezentiĝas kiel tre grandaj, kaj la aliaj niveloj de titoloj estas sinsekve malpli grandaj. Oni povas tion ŝanĝi laŭplaĉe per stilfolio, sed ankaŭ paĝo sen stilfolio prezentiĝas kun titoloj diversgrandaj laŭ la nivelo. Sed ankoraŭ (en Junio 2011) nur kelkaj el la plej novaj TTT-legiloj aŭtomate prezentas h1-titolojn en diversaj grandoj depende de la nivelo de la sekcio. En aliaj legiloj ĉiuj h1-elementoj prezentiĝas defaŭlte tute same! Tial, se oni elektas la novan uzomanieron kun ĉiam nur h1-elementoj (por ĉefaj titoloj), tiam oni prefere aldonu stilfolion, kiu difinas malsamajn prezentojn laŭ 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, ”Novaĵoj: Ŝanĝitaj elementoj”