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, header aŭ nav.

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.

nav

nav-elemento reprezentas sekcion de paĝo, kiu enhavas “navigaciajn” ligilojn al aliaj paĝoj aŭ al partoj de la sama paĝo. Ne ĉiu ajn grupo de tiaj ligiloj bezonas esti en nav-elemento. La uzocelo de nav estas ĉefaj sekcioj de navigaciaj ligiloj. Ofte en la piedo de paĝo aŭ artikolo oni metas listeton de ligiloj al diversaj rilataj paĝoj, kiel paĝo kun uzopermesilo, la ĉefa paĝo de la TTT-ejo, paĝo kun kopirajtaj informoj k.s. En tiaj okazoj ordinare pli taŭgas la elemento footer, sed ankaŭ nav povas esti uzata.

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.

header

header-elemento reprezentas kapon, grupon de enkondukaj aŭ navigaciaj helpiloj.

Se tia enkonduka materialo konsistas sole el titolo (h1, h2, h3 ...), tiam ne necesas meti tian titolon ene de header-elemento. Simpla h1 aŭ simile tute sufiĉas. Sed se la enkonduka materialo konsistas el tia titolo plus pliaj elementoj, tiam tiu tuto ordinare estu ene de header.

footer

footer-elemento reprezentas piedon de la plej proksima supra sekcio (section, article) aŭ de la tuta paĝo (body). footer tipe enhavas informojn pri tiu sekcio aŭ paĝo, ekzemple la nomon de la verkinto, ligilojn al rilataj dokumentoj, kopirajtajn informojn k.s.

Granda footer povas siavice konsisti el pluraj sekcioj (section-elementoj) kiel apendicoj, indekso, longa kolofono, detalaj permesilaj informoj k.s.

Kontaktinformoj pri la aŭtoro aŭ redaktinto de paĝo aŭ sekcio aperu unuavice en address-elemento, kiu tamen povas laŭbezone esti parto de footer.

footer-elementoj ne nepre devas aperi ĉe la fino de sekcio aŭ artikolo, kvankam plej ofte estas tiel.

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.

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

<!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>

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, footer aŭ aside). 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.

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%;}