HTML5

Simpla HTML5

En la cetero de tiu ĉi paĝaro mi klarigis kiel uzi poliglotan HTML5, t.e. kiel verki HTML5-paĝojn, kiuj samtempe sekvas la sintaksajn regulojn de HTML kaj la sintaksajn regulojn de XML (= XHTML5). Sed plej multaj ne zorgas pri kongruo kun XML, kaj verkas siajn paĝojn nur laŭ la sintaksaj reguloj de HTML. Tio signifas, ke ili povas multon skribi en pli simpla maniero. Ĉi tie mi klarigos, kiaj simpligoj eblas, se oni ne zorgas pri XML. Se vi mem tute ne celas uzi iajn XML-ajn ilojn por krei aŭ prilabori viajn paĝojn, vi tute bone povas uzi tiajn simpligojn. Viaj paĝoj estos tute laŭnormaj.

Malplenaj elementoj ne bezonas finan /-signon

Elementoj, kiuj ĉiam estas malplenaj, kaj kiuj do ne povas havi veran finmarkon, devas en XHTML havi finan suprenstrekon, /, en la malferma marko, ekzemple <br/>. Tiuj finaj suprenstrekoj ne estas bezonataj en simpla HTML5 (sed ili ja estas permesataj).

Oni do povas skribi ekzemple jene:

<meta charset="UTF-8">

<br>

<hr>

<img src="bildo.png" alt="Teksto">

<input type="email" value="">

Libera uskleco de markonomoj kaj atributonomoj

Nomoj de markoj kaj atributoj povas en simpla HTML5 uzi ĉian ajn usklecon. La marko span povas skribiĝi kiel SPAN, Span, SpaN k.t.p. La atributo class povas skribiĝi kiel CLASS, Class, CLass k.t.p. laŭplaĉe. Tamen plej multaj preferas aŭ uzi ĉiam minusklojn, aŭ ĉiam majusklojn, sed tio estas pure estetika afero.

Simpligitaj buleaj atributoj

Buleaj atributoj povas esti skribataj kun nura atributonomo sen egalsigno kaj sen valoro en simpla HTML5. La nura ĉeeesto de la atributonomo sufiĉas. Tio estas tre ofta en la praktiko. Iuj eĉ ne scias, ke ankaŭ eblas skribi valoron. La valoro ĉiuokaze povas nur esti malpleno aŭ teksto egala al la nomo de la atributo (ambaŭ variantoj havas la saman signifon!). Jen kelkaj ekzemploj de elementoj kun buleaj atributoj skribitaj en tia minumimigita stilo:

<option value="1" selected>

<input type="checkbox" checked>

<form novalidate action="servo.php">[...]</form>

Atributovaloroj sen citiloj

La valorojn de atributoj oni povas plej ofte skribi sen citiloj, ekzemple class=iaklaso. Citiloj estas bezonataj en simpla HTML5, nur se la valoro enhavas spacosignon aŭ iun el la jenaj signoj: " ' ` = < >

Jen ekzemplo de video-elemento kun malmulta uzado de citiloj ĉe atributovaloroj (kaj kun libera uskleco ĉe nomoj de markoj kaj atributoj kaj kun minimumigita bulea controls-atributo):

<VIDEO width=640 height=360 controls
  title="Tiu ĉi filmo estas tre bona!">
  <SOURCE SRC=video.webm TYPE=video/webm />
  <SOURCE SRC=video.ogg TYPE=video/ogg />
  <P>
    Ŝajnas, ke la <code>video</code>-elemento
    (kun filmo en WEBM-formo aŭ OGG-formo)
    ne funkcias en via TTT-legilo.
    Vi povas anstataŭe elŝuti la filmon:
      <a href=video.webm>video.webm</a>
      aŭ
      <a href=video.ogg>video.ogg</a>.
  </P>
</VIDEO>

Grave: Rimarku la spacetojn post TYPE=video/webm kaj TYPE=video/webm. Tiuj spacetoj devas nepre ĉeesti, ĉar poste sekvas la signo / (suprenstreko), kiu indikas la finon de tiu elemento. Se oni ne metus tie spacetojn, la TTT-legiloj pensus, ke tiu lasta suprenstreko estas parto de la atributovaloro! Aliflanke tiaj fermaj suprenstrekoj en malplenaj elementoj estas tute libervolaj en simpla HTML5, kaj sekve plej multaj preferas la pli simplan formon <SOURCE SRC=video.webm TYPE=video/webm>.

La solaj neeviteblaj atributaj citiloj en tiu ekzemplo estas ĉe la title-atributo. Ili necesas, ĉar la valoro enhavas spacetojn.

Noto: Se oni uzas citilojn ene de atributa valoro, oni devas iom atenti: Se ene de la valoro uziĝas simpla citilo, ', tiam oni devas uzi duoblajn citilojn, ", antaŭ kaj post la valoro, kaj inverse. Ekzemple <p title="Strange'">, aŭ <p title='Strange"'>. Sed oni ankaŭ povas uzi en la valoro la simbolan signonomon &quot; anstataŭ ".

Neuzo de la atributoj xmlns kaj xml:lang

La html-elemento ne bezonas la atributojn xmlns kaj xml:lang en simpla HTML5. Sekve baza dokumentoskeleto povas aspekti jene:

<!DOCTYPE html>
<html lang=eo>
<head>
  <meta charset=UTF-8>
  <title>Ekzemplo</title>
</head>
<body>
...
</body>
</html>

Ankaŭ aliloke oni ne bezonas uzi la atributon xml:lang por indiki lingvon. Sufiĉas la atributo lang:

<p lang="eo">La Franco diris <span lang="fr">Bonjour!</span>.</p>

Ellaseblaj markoj

Simpla HTML5 permesas forlasi komencajn kaj finajn markojn en multaj okazoj, sed ja ne ĉiam. Forlasado de komenca marko ne signifas, ke la elemento ne ekzistas. La komenco de elemento povas esti indikata de la kunteksto.

Jen listo de ĉiuj okazoj, en kiuj markoj povas esti forlasataj (se vi trovas la liston de reguloj malfacile memorebla, vi simple ĉiam uzu ĉiujn tiuj markojn, kio ĉiuokaze estas konsilinda praktiko):

  • La komenca marko de html-elemento povas esti ellasata, se la unua afero ene de la html-elemento ne estas komento.
  • La fina marko de html-elemento povas esti ellasata, se la html-elementon ne tuj sekvas komento.
  • La komenca marko de head-elemento povas esti ellasata, se la elemento estas malplena, aŭ se la unua afero ene de la head-elemento estas elemento.
  • La fina marko de head-elemento povas esti ellasata, se la head-elementon ne tuj sekvas spacosigno aŭ komento.
  • La komenca marko de body-elemento povas esti ellasata, se la elemento estas malplena, aŭ se la unua afero ene de la body-elemento ne estas spacosigno aŭ komento, krom se la unua afero ene de la body-elemento estas script-elemento aŭ style-elemento.
  • La fina marko de body-elemento povas esti ellasata, se la body-elementon ne tuj sekvas komento.
  • La fina marko de li-elemento povas esti ellasata, se la elementon tuj sekvas alia li-elemento, aŭ se ne estas plua enhavo ene de la patra elemento.
  • La fina marko de dt-elemento povas esti ellasata, se la dt-elementon tuj sekvas alia dt-elemento aŭ dd-elemento.
  • La fina marko de dd-elemento povas esti ellasata, se la dd-elementon tuj sekvas alia dd-elemento aŭ dt-elemento, aŭ se ne estas plua da enhavo ene de la patra elemento.
  • La fina marko de p-elemento povas esti ellasata, se la p-elementon tuj sekvas iu el la elementoj address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, menu, nav, ol, p, pre, section, table aŭ ul, aŭ se ne estas plua enhavo ene de la patra elemento kaj la patra elemento ne estas a-elemento.
  • La fina marko de rt-elemento povas esti ellasata, se la rt-elementon tuj sekvas alia rt-elemento aŭ rp-elemento, aŭ se ne estas plua enhavo ene de la patra elemento.
  • La fina marko de rp-elemento povas esti ellasata, se la rp-elementon tuj sekvas alia rp-elemento aŭ rt-elemento, aŭ se ne estas plua enhavo ene de la patra elemento.
  • La fina marko de optgroup-elemento povas esti ellasata, se la optgroup-elementon tuj sekvas alia optgroup-elemento, aŭ se ne estas plua enhavo ene de la patra elemento.
  • La fina marko de option-elemento povas esti ellasata, se la option-elementon tuj sekvas alia option-elemento, aŭ se ĝin tuj sekvas optgroup-elemento, aŭ se ne estas plua enhavo ene de la patra elemento.
  • La komenca marko de colgroup-elemento povas esti ellasata, se la unua afero ene de la colgroup-elemento estas col-elemento, kaj se la tuj antaŭa elemento ne estas alia colgroup-elemento, kies fina marko estas ellasita. (Ĝi ne povas esti ellasata, se la elemento estas malplena.)
  • La fina marko de colgroup-elemento povas esti ellasata, se la colgroup-elementon ne tuj sekvas spacosigno or komento.
  • La fina marko de thead-elemento povas esti ellasata, se la thead-elementon tuj sekvas tbody-elemento aŭ tfoot-elemento.
  • La komenca marko de tbody-elemento povas esti ellasata, se la unua afero ene de la tbody-elemento estas tr-elemento, kaj se la tuj antaŭa elemento ne estas tbody-elemento, thead-elemento aŭ tfoot-elemento, kies fina marko estas ellasita. (Ĝi ne povas esti ellasata, se la elemento estas malplena.)
  • La fina marko de tbody-elemento povas esti ellasata, se la tbody-elementon tuj sekvas tbody-elemento aŭ tfoot-elemento, aŭ se ne estas plua enhavo ene de la patra elemento.
  • La fina marko de tfoot-elemento povas esti ellasata, se la tfoot-elementon tuj sekvas tbody-elemento, aŭ se ne estas plua enhavo ene de la patra elemento.
  • La fina marko de tr-elemento povas esti ellasata, se la tr-elementon tuj sekvas alia tr-elemento, aŭ se ne estas plua enhavo ene de la patra elemento.
  • La fina marko de td-elemento povas esti ellasata, se la td-elementon tuj sekvas alia td-elemento aŭ th-elemento, aŭ se ne estas plua enhavo ene de la patra elemento.
  • La fina marko de th-elemento povas esti ellasata, se la th-elementon tuj sekvas alia th-elemento aŭ td-elemento, aŭ se ne estas plua enhavo ene de la patra elemento.

Kompreneble, se oni bezonas aldoni atributojn al elemento, ties komenca marko ne povas foresti.

Se oni maksimume aplikas tiujn eblojn de ellasado de markoj, montriĝas, ke tute kompleta kaj laŭregula HTML5-dokumento povas aspekti ekzemple jene:

<!DOCTYPE html>
<title>Titolo</title>
<p>Teksto</p>

Tie la apero de title-elemento aŭtomate subkomprenigas head-elementon, ĉar title-elemento povas aperi nur ene de head, kaj la head-elemento siavice komprenigas la ekziston de html-elemento. La posta apero de p-elemento aŭtomate kreas ankaŭ body-elementon, ĉar p povas aperi nur ene de body. Kaj tiamaniere ni havas tute kompletan HTML5-dokumenton. Tia ekstrema eluzo de la ebloj subkomprenigi markojn normale ne estas konsilinda, sed iafoje, se temas pri malgrava aŭ nur mallonge uzota paĝo, tia HTML-kodo povas tamen esti akceptebla.

Al la sekva parto, “Pliaj informoj pri HTML5”