HTML5

Simpla HTML5

En la cetero de tiu cxi pagxaro mi klarigis kiel uzi poliglotan HTML5, t.e. kiel verki HTML5-pagxojn, 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 pagxojn nur laux la sintaksaj reguloj de HTML. Tio signifas, ke ili povas multon skribi en pli simpla maniero. Cxi 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 aux prilabori viajn pagxojn, vi tute bone povas uzi tiajn simpligojn. Viaj pagxoj estos tute lauxnormaj.

Malplenaj elementoj ne bezonas finan /-signon

Elementoj, kiuj cxiam 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 cxian ajn usklecon. La marko span povas skribigxi kiel SPAN, Span, SpaN k.t.p. La atributo class povas skribigxi kiel CLASS, Class, CLass k.t.p. lauxplacxe. Tamen plej multaj preferas aux uzi cxiam minusklojn, aux cxiam 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 cxeeesto de la atributonomo suficxas. Tio estas tre ofta en la praktiko. Iuj ecx ne scias, ke ankaux eblas skribi valoron. La valoro cxiuokaze povas nur esti malpleno aux teksto egala al la nomo de la atributo (ambaux 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 aux iun el la jenaj signoj: " ' ` = < >

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

<VIDEO width=640 height=360 controls
  title="Tiu cxi filmo estas tre bona!">
  <SOURCE SRC=video.webm TYPE=video/webm />
  <SOURCE SRC=video.ogg TYPE=video/ogg />
  <P>
    Sxajnas, ke la <code>video</code>-elemento
    (kun filmo en WEBM-formo aux OGG-formo)
    ne funkcias en via TTT-legilo.
    Vi povas anstatauxe elsxuti la filmon:
      <a href=video.webm>video.webm</a>
      aux
      <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 cxeesti, cxar 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 cxe la title-atributo. Ili necesas, cxar la valoro enhavas spacetojn.

Noto: Se oni uzas citilojn ene de atributa valoro, oni devas iom atenti: Se ene de la valoro uzigxas simpla citilo, ', tiam oni devas uzi duoblajn citilojn, ", antaux kaj post la valoro, kaj inverse. Ekzemple <p title="Strange'">, aux <p title='Strange"'>. Sed oni ankaux povas uzi en la valoro la simbolan signonomon &quot; anstataux ".

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>

Ankaux aliloke oni ne bezonas uzi la atributon xml:lang por indiki lingvon. Suficxas 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 cxiam. Forlasado de komenca marko ne signifas, ke la elemento ne ekzistas. La komenco de elemento povas esti indikata de la kunteksto.

Jen listo de cxiuj okazoj, en kiuj markoj povas esti forlasataj (se vi trovas la liston de reguloj malfacile memorebla, vi simple cxiam uzu cxiujn tiuj markojn, kio cxiuokaze 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, aux 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 aux komento.
  • La komenca marko de body-elemento povas esti ellasata, se la elemento estas malplena, aux se la unua afero ene de la body-elemento ne estas spacosigno aux komento, krom se la unua afero ene de la body-elemento estas script-elemento aux 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, aux 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 aux dd-elemento.
  • La fina marko de dd-elemento povas esti ellasata, se la dd-elementon tuj sekvas alia dd-elemento aux dt-elemento, aux 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 aux ul, aux 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 aux rp-elemento, aux 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 aux rt-elemento, aux 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, aux 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, aux se gxin tuj sekvas optgroup-elemento, aux 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 antauxa elemento ne estas alia colgroup-elemento, kies fina marko estas ellasita. (Gxi 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 aux 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 antauxa elemento ne estas tbody-elemento, thead-elemento aux tfoot-elemento, kies fina marko estas ellasita. (Gxi 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 aux tfoot-elemento, aux 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, aux 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, aux 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 aux th-elemento, aux 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 aux td-elemento, aux 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, montrigxas, ke tute kompleta kaj lauxregula HTML5-dokumento povas aspekti ekzemple jene:

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

Tie la apero de title-elemento auxtomate subkomprenigas head-elementon, cxar 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 auxtomate kreas ankaux body-elementon, cxar 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 aux nur mallonge uzota pagxo, tia HTML-kodo povas tamen esti akceptebla.

Al la sekva parto, “Pliaj informoj pri HTML5”