HTML5: Malsamoj inter versioj

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; Komparoj dokumenta marklingvo; de foliumiloj; aranĝmotoroj por HTML; HTML 5; Nenorma HTML; XHTML; ; ;
	v • d • r

Browse history interactively

[kontrolita revizio]

← Iru al antaŭa ŝanĝo Iru al sekvanta ŝanĝo →

Enhavo forigita Enhavo aldonita

VidaVikiteksto

Enteksta

Kiel registrite je 17:21, 21 aŭg. 2014

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 povas esti uzata de modernaj foliumiloj, kvankam ĝi ankoraŭ ne 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 Teĥniko (angle WHATWG). En 2006 W3C fondis propran laborgrupon por HTML5. La evoluigo de XHTML 2 ne plu estas daŭrigata.

Nuntempe (2012) HTML5 havas statuson de malneto (angle working draft). 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^[4]:

<!DOCTYPE html>

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

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

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:^[5]

<section> - por enhave interrilataj partoj
<nav> - por naviga parto
<article> - por memstara enhavero aŭ artikolo
<aside> - por kromaj informoj
<hgroup> - por grupo de titoloj
<header> - por kaplinia parto
<footer> - por piedlinia parto

Krome estas aldonitaj multrimedaj elementoj, nome <video> kaj <audio>, kiuj ebligas senetendilan surekranigon en la foliumiloj.^[5] 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>.^[5] Per skriptoj kaj CSS sur ĝi povas aperi bildoj kaj animacioj.^[6]

Per la elemento <wbr> eblas aranĝi disigon de vortoj.^[5] 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>^[5], kiuj estas uzataj kun la jam pli longe ekzistanta <img>-elemento. Ĉe tio <figure> povas enhavi eĉ pli ol unu bildon.

Por tekstaj markigoj estas uzebla la elemento <mark>.^[5] 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.^[7]

color - aranĝas kolorelektilon;
date - aranĝas kalendaran folion por elekti daton;
datetime - aranĝas elektilon por dato kaj tempo, kun tempozono;
datetime-local - aranĝas elektilon por la loka dato kaj tempo;
email - aranĝas keston por retpoŝta adreso;
month - aranĝas elektilon por monatoj kaj jaro, sen tempozono;
number - aranĝas numeran elektilon, kun restriktoj;
range - aranĝas elektilon por numero, kies ekzakta valoro malgravas;
search - aranĝas serĉan keston;
tel - aranĝas keston por telefonnumero;
time - aranĝas elektilon por tempo, sen tempozono;
url - aranĝas keston por retpaĝara adreso;
week - aranĝas elektilon por semajno kaj jaro.

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

Forigitaj elementoj

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

<frame>, <frameset> kaj <noframes>
<font> - ĝia funkcio estas realigebla pli bone per CSS.
<acronym> - nun por mallongigoj estu uzata nur <abbr>
<big>, <center> - la formatoj estu difinataj per CSS.

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
↑ ^4,0 ^4,1 ^4,2 ^4,3 HTML5 <!DOCTYPE> Declaration. Alirita 2012-05-31.
↑ ^5,0 ^5,1 ^5,2 ^5,3 ^5,4 ^5,5 ^5,6 HTML5 New Elements (angle). Alirita 2012-06-05.
↑ Priskribo de skripto, kiel oni povas manipuli canvas-elementon germane
↑ Informoj pri la novaj valoroj de type kaj la kompatibileco de foliumiloj angle
↑ Kompleta listo de forigitaj elementoj angle

Literaturo

Kai Laborenz. (2011) CSS (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

[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

[w3schools.com-4] 4,0 ^4,1 ^4,2 ^4,3 HTML5 <!DOCTYPE> Declaration. Alirita 2012-05-31.

[novaj-5] 5,0 ^5,1 ^5,2 ^5,3 ^5,4 ^5,5 ^5,6 HTML5 New Elements (angle). Alirita 2012-06-05.

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

[7] Informoj pri la novaj valoroj de type kaj la kompatibileco de foliumiloj angle

[8] Kompleta listo de forigitaj elementoj angle

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

@@ Linio 1: / Linio 1: @@
-{{redaktas|redaktanto=Tlustulimu}}
 {{HTML}}
 [[Dosiero:HTML5-logo.svg|eta|HTML5-emblemo de la [[World Wide Web Consortium|W3C]]<ref>[http://www.w3.org/html/logo/ Paĝo pri la HTML5-emblemo] {{ref-en}}</ref>]]