HTML5

HTML
	HTML kaj HTML5 HTML5-aj video kaj aŭdio; ; Dinamika HTML; XHTML XHTML MP kaj C-HTML; ; Signokodoj; Dokumenta objektaro; Krozila objektaro; Tiparfamilio; HTML-redaktilo; HTML-elemento; HTML-kadroj; HTML-skriptado; Krozila aranĝmotoro; Kongruema reĝimo kaj Normokongrua reĝimo; Stilfolioj; Unikodo kaj HTML; W3C kaj WHATWG; Koloroj por TTT;
	v • d • r

HTML5
dosierformo • marklingvo • Rekomendo de la Konsorcio de la Tut-Tera Teksaĵo • specification edition vd
Dum	28-a de oktobro 2014 - nekonata/nuntempe
TTT	Oficiala retejo
	v • d • r

HTML5^[2] estas sur tekstoj bazanta marklingvo por la strukturigo kaj semantika etiketado de enhavoj, kiel tekstoj, bildoj kaj ligiloj en dokumentoj.

Ĝi estas la plej nova versio de la hiperteksta marklingvo HTML, kiu ankoraŭ estas evoluigata. Ĝi estu posteulo de HTML4. Kaj ĝi anstataŭigas la dokumentojn priskribajn normojn HTML 4.01, XHTML 1.0 kaj DOM HTML Level 2. HTML5 jam povis esti uzata de modernaj foliumiloj antaŭe, kvankam ĝi nur en 2014 atingis statuson de rekomendo (angle Recommendation).

Ĝi ofertas kelkajn novajn funkciojn, kiel ekzemple video, audio, loka konservejo kaj dinamikaj 2D- kaj 3D-grafikoj, kiuj de HTML4 ne rekte estas subtenataj, tiel ke ĝis nun devas esti uzataj kromprogramoj^[3] (angle plug-in).

Estiĝo kaj statuso

Konsorcio de la Tut-Tera Teksaĵo (angle W3C) planis plu evoluigi XHTML 1.0 al XHTML 2 surbaze de XML kaj jam komencis prilabori tion. Sed la produktejoj de diversaj foliumiloj proponis daŭrigi la evoluigon de HTML. Ili eĉ iniciatis apartan laborgrupon, nome Laborgrupo pri TTT-a Hiperteksta Aplikaĵa Tekniko (angle WHATWG). En 2006 W3C fondis propran laborgrupon por HTML5.

Meze de 2009 W3C sciigis, ke ekde la fino de la jaro la evoluigo de XHTML 2 ne plu estos daŭrigata.^[4]

Ekde oktobro 2014 HTML5 havas statuson de rekomendo (angle Recommendation).^[5] Tamen diversaj trajtoj jam estas uzeblaj per modernaj foliumiloj. En malnovaj foliumiloj eĉ aranĝeblas surekranigo de la novaj elementoj de HTML5 per ĝavaskriptoj aŭ aliaj trukoj.

Strukturo de HTML5

Simpla dokumento

Simpla dokumento havas la jenan bazan strukturon:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eo" lang="eo">
<head>
  <meta charset="UTF-8"/>
  <title>Ekzempla titolo</title>
</head>
<body>
 Saluton, mondo!
</body>
</html>

Komparo kun HTML 4 kaj XHTML

Tre grava malsamo inter HTML 4 resp. XHTML kaj HTML5 estas la dokumento-speca deklaro. Ĝi estas pli simpla, sed ĝi devas stari je la komenco de la dokumento^[6]^[7]:

<!DOCTYPE html>

Ĉiuj modernaj foliumiloj jam komprenas ĝin kaj ŝaltas al la normokongrua reĝimo. Krome la uskleco malgravas^[7].

La malnova HTML 4.01 ja bezonas deklaracion al DTD-referenco, ĉar ĝi baziĝas sur SGML.^[7] Sed tio ne necesas en HTML5, ĉar ĝi ne baziĝas sur SGML kaj tial ne bezonas tian referencon.^[7]

XHTML baziĝas sur XML. Ĝi estas pli strikta, tiel ke ĉiuj etikedoj nur povas esti notataj minuskle kaj ĉiuj atributoj devas havi valoron. Krome ĉiuj elementoj devas esti fermataj, eĉ tiuj, kiuj en HTML ne havas fermantan parton, ekzemple anstataŭ <hr> en XHTML notendas <hr />. En HTML5 eblas la notado laŭ la maniero de HTML aŭ XHTML, ĉar tie ambaŭ variantoj estas validaj.

Novaj elementoj

En HTML5 estas difinataj kelkaj novaj elementoj, per kiuj eblas aranĝi certajn strukturojn de la paĝo pli semantike ol per la elemento <div>io</div>. La jenaj elementoj estas novaj:^[8]^[9]

<section> - por enhave interrilataj partoj
<nav> - por naviga parto
<article> - por memstara enhavero aŭ artikolo
<aside> - por kromaj informoj
<header> - por kaplinia parto
<footer> - por piedlinia parto
<main> - por la ĉefa enhavo (Ĝi estu uzata nur unufoje en paĝo.)

En 2011 ankoraŭ estis aldonita <hgroup> por grupoj de titoloj.^[10] Sed en 2014 ĝi ne plu apartenas al HTML5.^[8]^[9]

Krome estas aldonitaj multrimedaj elementoj, nome <video> kaj <audio>, kiuj ebligas senetendilan surekranigon en la foliumiloj.^[8]^[9] Modernaj foliumiloj, kiel ekzemple Firefox, Chrome, Safari kaj Opera, sed eĉ Interreta Esplorilo 9, subtenas la elementojn. Bedaŭrinde oni ankoraŭ ne interkonsentis pri unusola formato por la koncernaj dosieroj.

Plia nova elemento estas <canvas>.^[8]^[9] Per skriptoj kaj CSS sur ĝi povas aperi bildoj kaj animacioj.^[11]

Per la elemento <wbr> eblas aranĝi disigon de vortoj.^[8]^[9] Tio tamen nur estas surekranigata de foliumiloj, se la bezonata spaco ne sufiĉas por la teksto.

Por bildaj galerioj, diagramoj, fotoj kaj bildoj kun priskriboj uzeblas la novaj elementoj <figure> kaj <figcaption>^[8]^[9], kiuj estas uzataj kun la jam pli longe ekzistanta <img>-elemento. Ĉe tio <figure> povas enhavi eĉ pli ol unu bildon. Por kodekzemploj <figure> kaj <figcaption> estas uzataj kune kun <pre> kaj <code>.^[12]^[13]

Por tekstaj markigoj estas uzebla la elemento <mark>.^[8]^[9] En kelkaj modernoj foliumiloj ĝi normale ricevas helflavan fonon.

En Interretaj Esploriloj ĝis la versio 8 la novaj elementoj normale ne estas rekte formatigeblaj per CSS. Oni devas fakte "krei" ilin per ĝavaskripto. Por Interreta Esplorilo 9 tia skripto ne plu estas bezonata.

Pliaj trajtoj de elementoj

Kelkaj elementoj ricevas pliajn trajtojn aŭ valorojn de atributoj.

La elemento <input> nun havas pliajn valorojn ĉe sia type-atributo.^[8]^[14]

tel - aranĝas keston por telefonnumero;
search - aranĝas serĉan keston;
url - aranĝas keston por retpaĝara adreso;
email - aranĝas keston por retpoŝta adreso;
date - aranĝas kalendaran folion por elekti daton;
time - aranĝas elektilon por tempo, sen tempozono;
number - aranĝas numeran elektilon, kun restriktoj;
range - aranĝas elektilon por numero, kies ekzakta valoro malgravas;
color - aranĝas kolorelektilon;

La paĝaro w3schools.com mencias pliajn valorojn^[14], kiuj ne troviĝas en la paĝoj de w3c.org.^[8]^[15]

datetime - aranĝas elektilon por dato kaj tempo, kun tempozono;
datetime-local - aranĝas elektilon por la loka dato kaj tempo;
month - aranĝas elektilon por monatoj kaj jaro, sen tempozono;
week - aranĝas elektilon por semajno kaj jaro.

Bedaŭrinde la kongrueco de la foliumiloj ankoraŭ ne estas tre bona.

Forigitaj elementoj

Kelkaj elementoj el HTML 4.01 estas forigataj en HTML5.^[16]

<frame>, <frameset> kaj <noframes>
<font> kaj <basefont> - iliaj funkcioj estas realigebla pli bone per CSS.
<acronym> - nun por mallongigoj estu uzata nur <abbr>
<big>, <strike>, <center> kaj <tt> - la formatoj estu difinataj per CSS.
<applet> - estu anstataŭigata per <object>.
<dir> - estu anstataŭigata per <ul>.

Pli kompleksa ekzemplo

La sekva ekzemplo montru la uzadon de kelkaj novaj elementoj.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eo" lang="eo">
<head>
  <meta charset="UTF-8"/>
  <title>Ekzempla titolo</title>
</head>
<body>
 <header>Kaplinio</header>
 <nav>Navigejo</nav>
 <section>
    <article>
      <h1>Simpla dokumento kun novaj elementoj</h1>
      <p>Ĉi tiu dokumento povas esti formatigata per CSS.</p>
    </article>
 </section>
 <footer>Piedlinio</footer>
</body>
</html>

Notoj

↑ Paĝo pri la HTML5-emblemo angle
↑ Henri Sivonen (10-a de septembro 2009). Spelling HTML5 (angle). The WHATWG Blog. Alirita 31-a de majo 2012. “What’s the right way to spell “HTML5”? The short answer is: “HTML5” (without a space).”.
↑ Termino en Komputeko
↑ XHTML 2 Working Group Expected to Stop Work End of 2009 (angle).
↑ HTML5.
↑ The Doctype. Differences from HTML4. Alirita 22-a de aŭgusto 2014.
↑ ^7,0 ^7,1 ^7,2 ^7,3 HTML5 <!DOCTYPE> Declaration (angle). Alirita 22-a aŭgusto 2014.
↑ ^8,0 ^8,1 ^8,2 ^8,3 ^8,4 ^8,5 ^8,6 ^8,7 ^8,8 New elements (angle). Differences from HTML4. Alirita 4-a de decembro 2014.
↑ ^9,0 ^9,1 ^9,2 ^9,3 ^9,4 ^9,5 ^9,6 HTML5 New Elements (angle). Alirita 4-a de decembro 2014.
↑ Vidu Laborenz sub Literaturo
↑ Priskribo de skripto, kiel oni povas manipuli canvas-elementon germane
↑ The figure element (angle). Alirita 3-a de decembro 2014.
↑ Ekzemploj sub Teknikaj detaloj de Esperanta Societo
↑ ^14,0 ^14,1 Informoj pri la novaj valoroj de type kaj la kongrueco de foliumiloj Arkivigite je 2014-08-21 per la retarkivo Wayback Machine angle
↑ States of the type attribute (angle). Alirita 4-a de decembro 2014.
↑ Kompleta listo de forigitaj elementoj angle

Literaturo

Jeninnifer Niederst Robbins. (2014) HTML5 kurz & gut (germane). Köln: O'Reilly Verlag. ISBN 978-3-95561-656-4.
Kai Laborenz. (2011) CSS Das umfassende Handbuch (germane). Bonn: Galileo Press, p. 39–42 ("HTML 4, HTML5 oder XHTML?"), 42–47 ("HTML5 und CSS"), 789–792 ("HTML5–Elemente"). ISBN 978-3-8362-1725-5.

Eksteraj ligiloj

Kategorio HTML5 en la Vikimedia Komunejo (Multrimedaj datumoj)

[1] Paĝo pri la HTML5-emblemo angle

[2] Henri Sivonen (10-a de septembro 2009). Spelling HTML5 (angle). The WHATWG Blog. Alirita 31-a de majo 2012. “What’s the right way to spell “HTML5”? The short answer is: “HTML5” (without a space).”.

[3] Termino en Komputeko

[4] XHTML 2 Working Group Expected to Stop Work End of 2009 (angle).

[5] HTML5.

[6] The Doctype. Differences from HTML4. Alirita 22-a de aŭgusto 2014.

[w3schools.com-7] 7,0 ^7,1 ^7,2 ^7,3 HTML5 <!DOCTYPE> Declaration (angle). Alirita 22-a aŭgusto 2014.

[novaj-w3c-8] 8,0 ^8,1 ^8,2 ^8,3 ^8,4 ^8,5 ^8,6 ^8,7 ^8,8 New elements (angle). Differences from HTML4. Alirita 4-a de decembro 2014.

[novaj-9] 9,0 ^9,1 ^9,2 ^9,3 ^9,4 ^9,5 ^9,6 HTML5 New Elements (angle). Alirita 4-a de decembro 2014.

[10] Vidu Laborenz sub Literaturo

[11] Priskribo de skripto, kiel oni povas manipuli canvas-elementon germane

[12] The figure element (angle). Alirita 3-a de decembro 2014.

[13] Ekzemploj sub Teknikaj detaloj de Esperanta Societo

[w3schools-type-14] 14,0 ^14,1 Informoj pri la novaj valoroj de type kaj la kongrueco de foliumiloj Arkivigite je 2014-08-21 per la retarkivo Wayback Machine angle

[15] States of the type attribute (angle). Alirita 4-a de decembro 2014.

[16] Kompleta listo de forigitaj elementoj angle

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]