Zkratka na hlavní stranu: Alt + Shift + horní 2(ě)
Linkedin FB e-mail Google Plus Twitter

Hledat na tomto webu

 
 

Osobní blog
Soukromý, neprofesní mikroblog.
Článek č. 156

 


HTML: Nepárové elementy (a něco o historii HTML jazyka a historii základní konstrukce webů)

HTML5 validátor mi vytknul, že používám lomítko na konci nepárových tagů (<hr />, <input />, apod.).

A odkázal mě na toto vysvětlení:

"
Trailing slashes directly preceded by unquoted attribute values

Consider the following two cases for marking up an img element for the image at http://www.example.com/logo.svg:

• img element without trailing slash:
<img alt=SVG src=http://www.example.com/logo.svg>

• img element with trailing slash:
<img alt=SVG src=http://www.example.com/logo.svg/>

In the first case (without the trailing slash), http://www.example.com/logo.svg becomes the value of the src attribute in the DOM, as expected.

However, in the second case (with the trailing slash), http://www.example.com/logo.svg/ unexpectedly becomes the value of the src attribute in the DOM — which breaks display of the image. See https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=10856 for a live demo of that problem.

And that’s why the HTML standard states that trailing slashes should be used only with caution — to avoid cases like the one above, where the trailing slash can unexpectedly become part of an attribute value.
"

Takže nejen, že se považuje za nenormální psát správně pečlivě <hr />, a má se nově psát postaru <hr>,
ony se dokonce nemusejí u atributů psát uvozovky!


///////////////////////////////////////////////
// Kontext; úvod odsunutý dozadu;
// historické okénko; něco o vývoji (X)HTML jazyka;
// vysvětlení pro kodéry, kteří začínali až s HTML5 a nepamatují, co bylo před ním:
///////////////////////////////////////////////


Když se kódovalo v HTML4 nebo starším, vypadal HTML kód strašně.

Mj. proto, že visuální formátování, které dnes řešíme pomocí CSS, se dříve běžně psalo přímo v HTML kódu.

A tím nemyslím atribut style="" obsahující uvnitř sebe CSS kód, jak to v některých případech běžně děláme i dnes – na tom nevidím nic špatného, pokud je k takovému lokálnímu zápisu CSS kódu rozumný důvod.

Mám tím na mysli jednak HTML tagy určené k formátování, jako např. <b> a <i> pro tučné písmo (bold) a kurzívu (italic) nebo jako <font>,
a jednak atributy HTML tagů např. pro určení barvy.

Nejsem na HTML4 nijak zvláštní odborník, i když ho pamatuji, protože v něm jsem pracoval jen když jsem začínal, a tehdy jsem ještě, coby začátečník, tehdy ještě samouk, protože ve škole jsme tehdy ještě tvorbu webu neměli, používal WYSIWYG editor, čili editor, který připomínal textový procesor. HTML(4) kód jsem někdy přímo ve zdroji editoval, ale nebyl to tehdy můj běžný postup.

A pak přišlo XHTML.

Konkrétně: Po HTML4 přišlo XHTML1.
HTML dokument měl být současně platný XML dokument.

V XHTML zůstaly jen sémantické značky, zmizely čistě visuální tagy a parametry, jejichž funkci povinně převzalo CSS. V HTML4 už bylo CSS také, ale používali ho jen feinschmeckeři; běžně se visuální formátování řešilo visuálními HTML elementy a atributy.
PDA zakoupené jako fungl nové v roce 2003 mělo webový prohlížeč, který CSS zcela ignoroval, web zobrazoval jen na základě HTML nebo XHTML kódu.

V XHTML tak místo <b> a <i> zůstaly už jen <strong> a <em>, což je trochu něco jiného, protože to nese sémantické sdělení např. pro robota fulltextového vyhledávače, že jde o důležitou část textu.

V mém osobním případě XHTML přišlo současně s dalšími dvěma změnami oproti HTML:
Učil jsem se ho nikoliv jako samouk, učil jsem se ho jako student VŠ.
Psal jsem ho a dodnes píši jako zdrojový kód.

(I když samoučná tvorba webů v HTML ve WYSIWYG mi určitě dala velmi slušný základ, zkušenosti, pochopení základních principů;
a už tehdy jsem usiloval o přístupnost v rámci možností,
a dokonce i o responsivitu, ač to slovo ještě neexistovalo, protože to tehdy byla "přizpůsobivost".
A součástí přístupnosti byla i sémantika, i když jsem to slovo tehdy asi ještě neznal; i v HTML4 ve WYSIWYG bylo možné např. vyplňovat atributy "alt" u obrázků.)

S krásným čistým XHTML 1.0 coby nástupcem nepřehledného chaotického HTML4 kódu tedy přišel řád a pořádek.
Větší důraz na sémantiku; očištění od visuálních vlastností webu.
A v případě některých kodérů i přechod od WYSIWYG editoru k psaní zdrojového kódu, což také souviselo s vytěsněním visuálních definic do kaskádového CSS, takže ta souvislost s rozdílem mezi HTML a XHTML tam je.

A součástí toho řádu a pořádku bylo i to, že nepárové elementy, jako např. <br /> nebo <img /> se povinně začaly psát s koncovým lomítkem. Aby se vědělo, že tam ten element končí, že to není jeho začátek, a že se někde dál za dalším textem nemá hledat jeho konec.
Dává to smysl:

<p>Náchodský zámeček vršku kulatého, <br />
a už mě má milá vezou, vezou z něho.</p>

Element <p> (odstavec) začíná tagem <p> a končí tagem </p>.

Element <br /> (odřádkování) začíná a končí tímto jedním nepárovým tagem, je přímo v něm a nikam dál nepokračuje.

Dává to smysl.

XHTML 1.0 existovalo ve třech verzích: Strict, Transitional, Frameset.

Nejpřísnější a nejčistší byla verze strict.
Zbylé dvě nabízely jakýsi kompromis mezi starým nepořádným řešením a novým pořádným řešením, a sloužily pro snadnější přechod, jak ostatně napovídá slovo "transitional".
Verze "frameset" dokonce ještě umožňovala používání rámů.



Odbočka: Co byly rámy?

Rámy (frames) sloužily k poskládání webové stránky z více HTML souborů.
Typicky proto, aby se menu editovalo v jednom souboru, a ten se pak použil všude. Totéž hlavička webu a novinky.
Unikátní obsah dané stránky se pak zobrazoval v největším z rámů.
Šlo o jakýsi statický include, přímo v HTML, v prohlížeči, bez jakéhokoliv programování dynamického chování.

Framy částečně skončily s příchodem XHTML,
ale z praktického "tržního" (pragmatického) hlediska si myslím, že byly zabity fulltextovými vyhledávači (Googlem).
Protože fulltextový vyhledávač přivedl uživatele přímo do zdrojového souboru s unikátním obsahem konkrétní podstránky, určeného pro zobrazení v největším rámu. Uživatel, který přišel přes fulltextový vyhledávač, tak neviděl ostatní rámy, tedy např. menu, nadpis, apod.

Funkci framů převzalo PHP, resp. PHP a SQL. I když jak se člověk přeučoval ze staré technologie na novou, tak si poradil i s čistým PHP bez SQL, pouhou PHP funkcí include(), s ošetřením (kontrolou požadavku) např. pomocí pole array, aby nepovolil vložit kde co.
Ale SQL databáze pak samozřejmě přinesla obrovskou další přidanou hodnotu.
"Pak" ve smyslu když se ji člověk naučil a začal používat při programování webů. Sama SQL technologie je s námi už dlouho.

Po visuální stránce (více sloupců; menu vlevo; novinky a nástroje vpravo) byly rámy nahrazeny CSS kódem.
Stejně tak byl CSS kódem nahrazen tehdy častý tabulkový layout – rozložení definované pomocí neviditelných tabulek, což bylo sémanticky špatně, ale vycházelo to z tehdejších možností. Byl to způsob, jak dostat např. menu doleva bez použití rámů; v jednom HTML souboru.

Jazyk CSS nám dal mj. možnost "float".
Float vytvoří sloupce, s možností responsivního (přizpůsobivého) nakódování, pro přechod z např. 3sloupcového zobrazení na např. 1sloupcové např. na mobilu nebo např. 2sloupcové např. na starším PC nebo na tabletu, resp. při malém monitoru a horším zraku. V době publikování tohoto článku toto vše vidíte na tomto webu.

A vidíte zde i použití pevné výšky elementu s vertikálním scrollováním téhož elementu (billboardy s novinkami), které také vytvářejí jakousi náhradu/iluzi rámů za užití validního responsivního technicky ideálního CSS.
Resp., toto řešení zobrazení novinek v malém listovacím obdélníčku nahrazuje/imituje nikoliv klasické velké rámy, ale malé rámy iframe.
Malé rámy iframe (inline frame) pro vložení jiné stránky coby malého obdélníčku někam dovnitř do stránky jsou dosud podporovány i v rámci HTML5.

Praktické využití iframe spočívá ve snadném statickém vložení průběžně aktualizovaných informací z jiné stránky (typicky z jiné domény, od jiného provozovatele, z externí služby), čistě kódováním v HTML, bez programování.
Pomocí elementu <iframe> si např. můžete vložit na web moje zobrazení českých a polských meteorologických výstrah pro Náchod a Meziměstí, dostupné na meteo.adamek.cz.

Ale samostatné scrollování pro jednotlivé rámy měly i klasické velké rámy pro definici layoutu (rozložení) stránky.



Konec odbočky k rámům (frames),
vracíme se k historii (X)HTML:



Po XHTML 1.0 ve třech verzích přísnosti (čistoty kódu) přišlo XHTML 1.1.
To je ještě o trochu přísnější než XHTML 1.0 Strict, ale nemá už žádný slovní dodatek, je to prostě XHTML 1.1, nejpřísnější ze všech běžně používaných XHTML, s nejčistším kódem.

V XHTML 1.1 mám v době publikování tohoto článku stále ještě nakódován i tento web, jehož součástí je tento blog.

Připravováno bylo (vzniklo) i XHTML 2, ale nezaznamenal jsem, že by se někdy prakticky začalo používat.

A pak přišel šok:
Sekvence HTML 4, XHTML 1.0, XHTML 1.1 najednou nepokračovala standardem XHTML 2, jak se předpokládalo;
místo toho nastal skok zpět v podobě HTML 5, které je standardem dodnes.

Nutno uznat, že HTML 5 přineslo nové možnosti pro sémantiku.
Na tomto webu, běžícím stále ještě v XHTML, ty nové sémantické elementy částečně nahrazuji sémantickými mikroformáty.

(Krom toho přineslo i nové možnosti pro dynamickou práci s vektorovou grafikou přímo v prohlížeči,
a tak společně s CSS a JS tato trojice nahradila dřívější technologii flash.)

HTML 5 není špatné, je dobré.
Používám ho u všech nových projektů, je to jasná volba, je to standard; je to dobrý standard.

Ale ta čistota kódu...
Ta je trochu slabší.

HTML 5 přineslo skok zpět v tom, že vrátilo toleranci lajdáckých zápisů <br> místo <br />. Diletantství. Lenost.
Vždyť stejně v editoru zdrojového kódu stačí stisknout Ctrl+Enter, a je to tam, tak to lomítko nikoho nezdrží.
U dalších elementů už to může být jinak, ty už jsou psány ručně častěji, ale to lomítko vnáší do kódu řád, pořádek, čistotu.

A teď... teď validátor dokonce začal upřednostňovat starý (cca před přelomem tisíciletí) lajdácký zápis <br> bez lomítka
před novým (cca po přelomu tisíciletí) pořádným zápisem s lomítkem.
Což o to, že jde o návrat o cca čtvrt století zpět (teoreticky), resp. o cca 15 let zpět (prakticky), by zrovna mně až tolik nevadilo.

Ale že jde o návrat od pořádku a pečlivosti k lajdáctví, lenosti, diletantství a chaosu, to mi vadí.

Tohle není normální.
Svět se zbláznil.

 

  


Líbil se Vám článek?


Zpětná vazba – hlasování

Hlasy se na serveru připočítají k počitadlům pro tento článek, např. kolikrát tento článek někoho pobavil a kolikrát tento článek někomu pomohl.

Neukládají se jednotlivá hlasování (vzájemná kombinace hlasů, datum, čas, ani jiné údaje).
Proto nemá smysl odesílat prázdný hlas, nemělo by se co k čemu přičíst.

 

Ve Vašem prohlížeči nebude uložena žádná informace (cookies) o tom, že už jste hlasovali.
- Ve Vašem prohlížeči tedy nebude vidět, jak jste hlasovali.
- Kdykoliv budete moci hlasovat znovu, pokud Vám článek opakovaně pomůže (pobaví Vás, potěší, …).
- Pokud Vás právě u jednoho počítače sedí více, mohou postupně hlasovat další lidé.

Počítám člověkohlasy, nikoliv lidi.
Tedy kolikrát článek někomu pomohl,
nikoliv kolika lidem pomohl
.

Třikrát potěšeného jednoho čtenáře počítám stejně jako tři různé jednou potěšené čtenáře.

Každý má do budoucna neomezený počet hlasů.
Když zapomenete, že jste pro tento článek už hlasovali, nevadí – když Vám někdy v budoucnu bude např. užitečný znovu, tak mu znovu pošlete hlas, že Vám byl užitečný.

Můžete si zvolit 1 až N možností

Štítky, labels, kategorie, témata, tagy, hashtagy

(ve vývoji)
 
#historical-technology   #science-technology   #electro-ict    
#languages  
 

Skok nahoru na: Navigační menu
(klávesová zkratka Alt + Shift + horní „5”)

Zaujala Vás tato stránka?

  • Přidat do záložek (Ctrl+D)
  • Sdílet odkaz (vysílačka)Skok nahoru na:
  • Vytisknout (Ctrl+P)
  • Citovat podle ČSN ISO 690

    Tuto stránku

    ADÁMEK, Martin. Osobní blog: Soukromý, neprofesní mikroblog. . Martin Adámek [online]. Náchod / Meziměstí [cit. 2022-12-01]. Dostupné z: https://www.adamek.cz/blog

    Celý web

    ADÁMEK, Martin. Martin Adámek [online]. Náchod / Meziměstí [cit. 2022-12-01]. Dostupné z: https://www.adamek.cz

 

 
 

Národní kulturní dědictví

WebArchiv – Stránky archivovány Národní knihovnou ČR Tyto stránky jsou pravidelně archivovány Národní knihovnou ČR pro svou kulturní, vzdělávací, vědeckou, výzkumnou nebo jinou informační hodnotu za účelem dokumentace autentického vzorku českého webu. Jsou součástí kolekce českých webových stránek, které NK ČR hodlá dlouhodobě uchovávat a zpřístupňovat pro budoucí generace. Jejich záznam je součástí České národní bibliografie a katalogu NK ČR.  

 

 
 

Pro rozptýlení

Po roce od promoce se setkali dva bývalí spolužáci:
-„Člověče, když pomyslím na to, jaký jsem já inženýr, tak se normálně bojím jít k doktorovi!”

 

Pro zamyšlení

Historie je učitelkou života.
[Marcus Tullius Cicero]