HTML5

Simpla HTML5

En la cetero de tiu chi pagharo mi klarigis kiel uzi poliglotan HTML5, t.e. kiel verki HTML5-paghojn, 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 paghojn nur lau la sintaksaj reguloj de HTML. Tio signifas, ke ili povas multon skribi en pli simpla maniero. Chi 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 au prilabori viajn paghojn, vi tute bone povas uzi tiajn simpligojn. Viaj paghoj estos tute launormaj.

Malplenaj elementoj ne bezonas finan /-signon

Elementoj, kiuj chiam 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 chian ajn usklecon. La marko span povas skribighi kiel SPAN, Span, SpaN k.t.p. La atributo class povas skribighi kiel CLASS, Class, CLass k.t.p. lauplache. Tamen plej multaj preferas au uzi chiam minusklojn, au chiam 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 cheeesto de la atributonomo sufichas. Tio estas tre ofta en la praktiko. Iuj ech ne scias, ke ankau eblas skribi valoron. La valoro chiuokaze povas nur esti malpleno au teksto egala al la nomo de la atributo (ambau 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 au iun el la jenaj signoj: " ' ` = < >

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

<VIDEO width=640 height=360 controls
  title="Tiu chi filmo estas tre bona!">
  <SOURCE SRC=video.webm TYPE=video/webm />
  <SOURCE SRC=video.ogg TYPE=video/ogg />
  <P>
    Shajnas, ke la <code>video</code>-elemento
    (kun filmo en WEBM-formo au OGG-formo)
    ne funkcias en via TTT-legilo.
    Vi povas anstataue elshuti la filmon:
      <a href=video.webm>video.webm</a>
      au
      <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 cheesti, char 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 che la title-atributo. Ili necesas, char la valoro enhavas spacetojn.

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

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>

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

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

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

Tie la apero de title-elemento automate subkomprenigas head-elementon, char 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 automate kreas ankau body-elementon, char 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 au nur mallonge uzota pagho, tia HTML-kodo povas tamen esti akceptebla.

Al la sekva parto, “Pliaj informoj pri HTML5”