HTML5

Novajhoj: Sekciaj elementoj

Lau mi la plej grava novajho en HTML5 estas la abundo de novaj elementoj por indiki diversspecajn sekciojn de pagho. Antaue 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 elturnigho), sed nun oni uzu en plej multaj tiaj okazoj anstataue iun el la novaj signifohavaj elementoj main, article, section, nav, aside, header kaj footer.

main

La elemento main reprezentas la chefan enhavon de la pagho. Ghi principe entenu tion, kio estas unika por ghuste tiu pagho, kontraste al partoj, kiuj ripetighas en pluraj paghoj (ekz. navigaciaj ligiloj, kopirajtaj informoj, emblemo de TTT-ejo, flanka panelo, serchilo k.s.).

main-elemento rajtas aperi nur unu fojon en pagho. Ghi ne rajtas esti ene de article, aside, footer, header au nav.

Se la enhavo de pagho konsistas el pli ol unu memstara verkajho, oni povas dividi la enhavon de main pere de la chi-poste klarigitaj sekciaj elementoj.

article

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

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

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

section

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

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

La section-elemento ne estas ghenerala enhavujo. Kiam oni bezonas ian grupigan elementon nur por povi aldoni apartan stilon au simile, tiam uzindas anstataue la elemento div. Bona gvidlinio estas, ke la elemento section taugas nur, se estus sencohave aperigi ghin (t.e. ghian titolon) en eventuala enhavotabelo.

aside

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

Taugaj uzoj por aside povas esti ekzemple sekcio kun anoncoj, grupoj de nav-elementoj apartaj de la chefa enhavo au apartigitaj citajhoj nenecesaj por la chefa enhavo.

Se la koncerna enhavo havas la karakteron de parentezajho, kiu principe estas parto de la chefa enhavo (sed malpli grava), tiam aside ne estas la ghusta elekto. aside ankau ne estas tauga por notoj (piednotoj), kun klarigoj de io en la chefa enhavo.

Praktika ekzemplo de la novaj sekciaj elementoj

Jen ekzemplo de tuta pagho, kiu uzas chiujn chi-antaue 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 pagho (neekzistanta)</a></li>
      <li><a href="triapagho.html">Tria pagho (same neekzistanta)</a></li>
  </ul>
</nav>

<main>

  <header>
    <h1>Simpla ekzemplopagho kun sekciaj elementoj</h1>
    <p>Bonvenon al tiu chi senenhava pagho</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 ech 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 pagho kun tiu ekzempla HTML-kodo. Tiu demonstra pagho havas stilfolion, kiu aldonas iom da marghenoj, borderoj k.t.p., kaj kiu aldone videbligas la nomojn de la chefaj sekciaj elementoj (almenau en modernaj TTT-legiloj). En vera uzo oni kompreneble uzus tute alian prezentostilon. Atentu, ke tiu ekzemplopagho bone prezentighas nur en modernaj TTT-legiloj. Legu kiel solvi tiajn problemojn tuj chi-poste.

Problemoj en malnovaj TTT-legiloj!

La novaj sekciaj elementoj estas tre uzindaj, char ili ebligas multe pli klare indiki la strukturon de pagho, sed bedaurinde ekzistas gravaj problemoj pri ili en malnovaj TTT-legiloj. Legiloj kreitaj antau 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, ghi povas diversmaniere reagi. Iuj legiloj agas kvazau la markiloj de la elemento tute ne ekzistus, nur prezentante la enhavon. Aliaj misinterpretas la elementojn diversmaniere kauzante 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 preskau malaperinta, kaj Camino 1 estas apenau uzata de iu ajn. (Tiuj du legiloj estas interne praktike unu sama programo.) Sed Esplorilo 6 kaj 7 estas ankorau uzataj de sufiche multaj homoj. Sume chirkau 20% el la Interretanoj ankorau (en Junio 2011) uzas ilin, sed tiu procentajho povas esti multe pli alta au multe malpli alta en iuj landoj.

Diversaj aliroj kaj elturnighoj

Unu parton de la problemo de malnovaj legiloj oni povas sufiche 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 antaue kaj linirompo poste. Nekonataj elementoj ordinare traktighas automate 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 chiuj legiloj, kiuj ankorau ne scias tion, ke la koncernaj elementoj estu prezentataj bloke.

Sed tio ne solvas la problemojn en chiuj legiloj. Esplorilo 6 kaj 7 tute ignoras tiun stilregulon (char la koncernaj elementoj ne ekzistas lau 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 kvazau magie riparas la problemon en Esplorilo 6 kaj Esplorilo 7.
  3. Eviti la problemajn elementojn: Oni povas provizore uzi div-elementojn anstatau la novaj sekciaj elementoj, ghis la problemaj TTT-legiloj estos malaperintaj au almenau sufiche maloftaj, por ke oni povu ilin ignori.
1. Ignori la problemon

Se oni scias, ke preskau chiuj vizitantoj de la koncerna TTT-ejo uzas modernajn TTT-legilojn, oni povas tute bone elekti tiun chi aliron. Tiuj, kiuj uzas malmodernajn legilojn, kredeble jam iom alkutimighas al tio, ke ne malmultaj paghoj nuntempe prezentighas fushe, kaj espereble tiuj vizitantoj konscias, ke ili mem kulpas, char ili uzas tute eksdatajn programojn.

Sed multaj paghofarantoj ne povas tiel facilanime trakti siajn vizitantojn. Eble ili ech enspezas monon per siaj TTT-ejoj, kaj do ne povas forpushi eventualajn klientojn, nur por povi uzi la plej freshdatajn tehhnikajn mojosajhojn.

2. Uzi Javaskripton

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

La problemo estas, ke iuj homoj malshaltis la uzon de Javaskripto en siaj TTT-legiloj (eble char ili trovas Javaskripton ghena au ech riska). Por tiuj homoj la Javaskripta solvo tute ne efikas. Se pagho jam pro alia kialo dependas de Javaskripto (eble char ghi estas pli simila al programo ol al ordinara TTT-pagho), tiam tio ne estas problemo, sed estas iom strange dependigi de Javaskripto paghon, kiu per si mem estas tute statika kaj simpla, kaj kiu nur prezentas tekstajn informojn sen vera interagado. Chu la novaj HTML5-luksajhoj vere valoras tian prezon?

Unu kontrauargumento estas, ke tiaj homoj, kiuj emas malshalti Javaskripton, plej ofte ankau zorge ghisdatigas siajn TTT-legilojn, kaj do tre malvershajne uzas ekzemple Esplorilon 6 au 7. Kontraukontrauargumento estas, ke ghuste uzantoj de Esplorilo 6 plej bezonas malshalti Javaskripton, char tiu malnovega legilo estas tre malsekura, precipe kiam Javaskripto estas aktiva!

En la nuna TTT Javaskripto farighas chiam pli kaj pli grava, kaj eble baldau apenau plu havos sencon viziti TTT-paghojn 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 anstatau 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 pagho (neekzistanta)</a></li>
      <li><a href="triapagho.html">Tria pagho (same neekzistanta)</a></li>
  </ul>
</div>

<div class="main">

  <div class="header">
    <h1>Simpla ekzemplopagho kun <em>surogataj</em> sekciaj elementoj</h1>
    <p>Bonvenon al tiu chi senenhava pagho</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 ech 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 pagho kun tiu ekzempla HTML-kodo.

Kiam la brila estonteco iam alvenos, estos relative facile automate 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 ankau povos sufiche rapide modifi laue sian CSS-kodon, anstatauigante .main per main, .article per article, .nav per nav k.t.p.

Hibrida varianto

Se oni kapablas tion aranghi, 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. Ghuste tian solvon mi praktikas en tiu chi TTT-ejo. Se oni vizitas tiujn chi paghojn 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 anstataue. Tiamaniere mi evitas dependigi miajn paghojn de Javaskripto. Sed tia solvo vere ne estas facile aranghebla. 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 chiam havu titolon (alie oni plej vershajne devus uzi alian elementon, ekzemple div, nav, header, footer au aside). Por titoloj oni uzu iun el la elementoj h1, h2, h3, h4, h5 kaj h6. Lau la ghisnunaj principoj la plej supra nivelo havu h1-titolon, kaj ties subsekcioj havu h2-titolojn, kaj ties eventualaj subsubsekcioj havu h3-titolojn, kaj tiel plu ghis la plej profunda (kaj sufiche malofta) nivelo kun h6-titoloj.

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

En HTML5 la hierarhhio de sekcioj estu normale indikata de section-elementoj (kaj article, nav k.t.p.), kaj se oni chiam uzas tiajn elementojn, oni povas por la chefa titolo de chiu sekcio chiam 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>Dolcheco</h3>
   <p>Rughaj pomoj estas pli dolchaj ol verdaj pomoj.</p>
  </section>
 </section>
 <section>
  <h2>Koloro</h2>
  <p>Pomoj havas diversajn kolorojn.</p>
 </section>
</article>

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

Jen la samo kun titoloj lau la nova uzomaniero:

<article>
 <h1>Pomoj</h1>
 <p>Pomoj estas fruktoj.</p>
 <section>
  <h1>Gusto</h1>
  <p>Ili gustas mirinde.</p>
  <section>
   <h1>Dolcheco</h1>
   <p>Rughaj pomoj estas pli dolchaj ol verdaj pomoj.</p>
  </section>
 </section>
 <section>
  <h1>Koloro</h1>
  <p>Pomoj havas diversajn kolorojn.</p>
 </section>
</article>

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

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

La nova uzomaniero havas du gravajn avantaghojn:

  1. Se oni volas rearanghi la sekciojn de teksto, oni ne bezonas shanghi 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 hierarhhio.
  2. Oni povas uzi kiom ajn da niveloj de subsekcioj: La titolaj elementoj ne elcherpighas, char oni uzas chiam nur h1-titolojn.

Noto: En XHTML 2.0, kiu neniam estis finfarita, oni ech forigis la elementojn h1 - h6, kaj enkondukis anstataue nur unu gheneralan elementon h. Tia drasta shangho estus la ideala solvo, sed HTML5 celas esti kiom eble kongrua kun malnova HTML kaj XHTML, kaj tial oni elektis anstataue la solvon klarigitan chi-antaue.

Stilfolio estas bezonata

La nunaj TTT-legiloj scias, kiamaniere prezenti la titolajn elementojn h1 - h6. Ordinare h1-elementoj prezentighas kiel tre grandaj, kaj la aliaj niveloj de titoloj estas sinsekve malpli grandaj. Oni povas tion shanghi lauplache per stilfolio, sed ankau pagho sen stilfolio prezentighas kun titoloj diversgrandaj lau la nivelo. Sed ankorau (en Junio 2011) nur kelkaj el la plej novaj TTT-legiloj automate prezentas h1-titolojn en diversaj grandoj depende de la nivelo de la sekcio. En aliaj legiloj chiuj h1-elementoj prezentighas defaulte tute same! Tial, se oni elektas la novan uzomanieron kun chiam nur h1-elementoj (por chefaj titoloj), tiam oni prefere aldonu stilfolion, kiu difinas malsamajn prezentojn lau 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, ”Novajhoj: Shanghitaj elementoj”