Weglaten HTML-tags en gedrag browser

donderdag 16 november 2006 22:45

Devver

Pixelated

Verwijderd schreef op donderdag 16 november 2006 @ 22:10:
[...]
Mini-minimale positieve bijdrage.

Mijn ervaringen zijn juist dat het expliciet opgeven van optionele elementen en tags het renderen versnelt, hoewel dat verschil echt minimaal is en dus pas bij grote documenten meetbaar is.

Voor degenen die zeggen dat het weglaten van optionele elementen of tags bad practice is: hoe vaak gebruiken jullie <tbody> in een table?
'Verminkt' of 'mall-formed' is het al helemaal niet aangezien het volledig volgens specificatie is.

Verder heb ik zelf nog nooit een compatibility-tabel gezien mbt dit punt dus ik kan je helaas niet aan een link helpen. Ik ben zelf ook wel benieuwd overigens maar ik denk dat het inderdaad voornamelijk oudere browsers zal betreffen. Sommige browsers (o.a. IE6/7 en Firefox 2.0) hebben overigens nog wel eens problemen als je de <body>-tag weglaat:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>foo</title>
<div id="foo"></div>
<script type="text/javascript">
var wtf = document.getElementById('foo');
if (wtf)
    alert('found!');
else
    alert('wtf?');
</script>

[ Voor 4% gewijzigd door crisp op 16-11-2006 22:49 ]

Intentionally left blank

Acties:

Verwijderd

Topicstarter

Voutloos schreef op donderdag 16 november 2006 @ 22:38:
[...]
Het is een analogie. Ik haal wat elementen weg, want onze 'browsers' zijn toch slim genoeg om de klinkers in te vullen. Toch merk je dat het niet sneller leest. En als je minder bedreven bent in de Nederlandse taal (of een bepaalde browser minder goed is in het interpreteren van slecht gestructureerde HTML), zal de boodschap ook minder goed overkomen.

Ik begrijp je helemaal, hoewel ik de vergelijking tussen klinkers en optionele -legaal weg te halen- tags niet echt zie. Dat het zo slecht gestructureerde HTML wordt snap ik al helemaal niet.

Vandaar dat ik ook zo ontzettend graag op die pagina terecht wil komen om te bekijken welke browsers er nou daadwerkelijk onder lijden. En de specs dus ook niet gehoorzamen.

[...]
Ik wil je graag helpen, maar ik ben dus van mening dat ik je meer help door uit te leggen waarom je dit niet moet gaan doen. Maar goed, als je niet open staat voor andere meningen houd ik me verder wel afzijdig.

Dat sta ik zeker wel. Maar om dat nu van 5 verschillende mensen meerdere keren te horen in precies dezelfde vorm.. No hard feelings.

donderdag 16 november 2006 23:07

Acties:

donderdag 16 november 2006 23:47

Devver

Pixelated

Verwijderd schreef op donderdag 16 november 2006 @ 22:45:
[...]
Vandaar dat ik ook zo ontzettend graag op die pagina terecht wil komen om te bekijken welke browsers er nou daadwerkelijk onder lijden. En de specs dus ook niet gehoorzamen.

Er is geen enkele browser die HTML4.01 volledig geimplementeerd heeft

Intentionally left blank

Acties:

Verwijderd

Topicstarter

crisp schreef op donderdag 16 november 2006 @ 23:07:
[...]

Er is geen enkele browser die HTML4.01 volledig geimplementeerd heeft

Nee, maar je begrijpt m'n punt?

donderdag 16 november 2006 23:53

Acties:

Osiris

Verwijderd schreef op donderdag 16 november 2006 @ 21:36:
Mag ik vragen waarom je dit wilt weten?? In principe moet je namelijk elke tag sluiten.
http://w3schools.com/tags/default.asp kan je wel wat vinden over tags welke optioneel zijn. Bijvoorbeeld: http://w3schools.com/tags/tag_option.asp, hier zie je dat de sluit tag </option> optioneel () is in HTML.

Tja, w3schools... In 't "begin" vond ik die site 1337, tof en dacht ik dat ze 't altijd wel bij het rechte eind hebben. Tegenwoordig vind ik 't maar een stelletje prutsers.

Kijk de <p>-tag maar eens. Zie jij iets over het optioneel zijn van de sluit-tag? Nee? Ik ook niet... En tóch is in HTML de sluittag van de <p> optioneel...

vrijdag 17 november 2006 00:29

Acties:

vrijdag 17 november 2006 00:35

Devver

Pixelated

Verwijderd schreef op donderdag 16 november 2006 @ 23:47:
[...]
Nee, maar je begrijpt m'n punt?

Ja en nee. Ten eerste praat je waarschijnlijk over dode browsers waar (hopelijk) niemand meer rekening mee hoeft te houden. Desalniettemin heeft het wel mijn interesse. Ten tweede ben ik niet echt voorstander van het echte minimalisme qua HTML-syntax, maar ik schuw het zelf ook niet - voornamelijk boolean attributes schrijf ik veelal nog in minimized format.

Ik ben er ook niet echt rouwig om dat browsers de NET SHORTTAG feature niet geimplementeerd hebben (dat is ook een belangrijke reden dat XHTML syntax vandaag de dag 'werkt' in HTML parsers). Daarmee kan je echt minimalistische HTML schrijven:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<title/valid HTML!/
<h1/Dit is valid HTML/
<p/Of geloof je dat niet?

Intentionally left blank

Acties:

vrijdag 17 november 2006 14:13

Waarom zou je de <html>, <head> en <body> tags weg willen laten? Het is een kleine moeite om ze in te tikken (als je geen applicatie gebruikt die deze al voor je invult zoals Dreamweaver)..

Omdat het kan, omdat het valideert, omdat het werkt (meestal

, zie voorbeeld Crisp), omdat het niet strikt noodzakelijk is.

Die opmerkingen over verminkte HTML etc. vind ik overdreven. Met headers geef je aan dat een document HTML is, dus <html> heb je niet nodig. En een strikt onderscheid tussen <head> en <body> is niet noodzakelijk omdat je browser weet dat een <title>, <meta> en <link> niet hoeven worden weergegeven. En als je inhoud in je <head> plaatst wordt het ook gewoon weergegeven, dus veel nut heeft het ook niet op dat gebied.

Met volgorde en enters is het ook klaarhelder waar de content begint. Natuurlijk kan je die structuur weergeven met <head> en <body>, maar ik vind het geen bad practise om een minimalistisch beleid aan te houden en deze tags te schrappen. Mits het niet ten koste gaat van het overzicht en de werking van een website.

crisp schreef op vrijdag 17 november 2006 @ 00:29:
Daarmee kan je echt minimalistische HTML schrijven:
HTML:
1
(...)

Hadden ze in de Acid 2 test moeten stoppen

[ Voor 10% gewijzigd door Blaise op 17-11-2006 00:40 ]

Acties:

Boelie-Boelie

Van minimale HTML weet ik alleen dat Anne van Kesteren zich ermee bezig hield, zie bijv. de source van Limpid en zijn persoonlijke site, maar ik kan er eigenlijk niet een bijpassend artikeltje bij vinden.

[ Voor 5% gewijzigd door Boelie-Boelie op 17-11-2006 14:14 ]

Cogito ergo dubito

vrijdag 17 november 2006 15:45

Acties:

Verwijderd

Op mijn website heb ik in de HTML-versie de head- en body-tag weggelaten. Waarom? Omdat het kan

. De html-tag heb ik laten staan, puur om daar het lang-attribuut op te kunnen zetten.

Voor de XHTML-versie heb ik de head- en body-tag uiteraard wel laten staan. Dit is volgens de DTD verplicht en in tegenstelling tot HTML worden deze elementen niet impliciet opgenomen in het DOM.

Omdat ik server-side veel met XML en XSLT werk sluit ik alle andere elementen wel expliciet af. Als ik met alleen HTML werk laat ik sluittags voor de elementen p en li wel regelmatig weg. Niet omdat het handig is, maar omdat ik wel houd van minimale en enigszins opmerkelijke doch correcte markup

.

Met browser-ondersteuning heb ik geen problemen. Eindelijke eens iets dat nagenoeg overal werkt zoals het hoort.

vrijdag 17 november 2006 15:52

Acties:

vrijdag 17 november 2006 16:21

Devver

Pixelated

Verwijderd schreef op vrijdag 17 november 2006 @ 15:45:
De html-tag heb ik laten staan, puur om daar het lang-attribuut op te kunnen zetten.

Laat dan in ieder geval wel de end-tag van je HTML-element weg

Intentionally left blank

Acties:

Verwijderd

crisp schreef op vrijdag 17 november 2006 @ 15:52:
Laat dan in ieder geval wel de end-tag van je HTML-element weg

Daar zeg je wat! Leuk idee, ik heb het gelijk aangepast.

vrijdag 17 november 2006 17:54

Acties:

vrijdag 17 november 2006 19:28

Je kan de taal ook in een http-header aangeven:

code:

1	Content-Language: nl

Acties:

vrijdag 17 november 2006 20:03

je kan ook alleen tekst of 1 plaatje in je html document zetten. erg snel, en weinig tags

Maar wat een nutteloze discussie, beetje expres standaarden nog meer verpesten.
Misschien dat MS het kan waarderen

Als je denkt dat je document sneller geladen(parse+render) wordt door de helft weg te laten en veel error correctie door de browser te laten uitvoeren....

[ Voor 37% gewijzigd door apokalypse op 17-11-2006 19:43 ]

Acties:

Verwijderd

apokalypse schreef op vrijdag 17 november 2006 @ 19:28:
Als je denkt dat je document sneller geladen(parse+render) wordt door de helft weg te laten en veel error correctie door de browser te laten uitvoeren....

Het punt is juist dat je je wel aan de specificaties houdt. Sluittags die optioneel zijn zijn altijd impliciet te plaatsen. Voorbeeld: een p-element mag geen block-level elementen bevatten. Komt een browser een block-level element tegen, dan wordt het p-element gesloten. Dat is eenduidig vastgelegd.

Dat het niet sneller rendert ben ik met je eens. Maar dat is ook niet mijn punt, en ik denk van de meeste mensen in dit topic niet

vrijdag 17 november 2006 20:05

Acties:

Verwijderd

Topicstarter

apokalypse schreef op vrijdag 17 november 2006 @ 19:28:je kan ook alleen tekst of 1 plaatje in je html document zetten. erg snel, en weinig tags

Maar wat een nutteloze discussie, beetje expres standaarden nog meer verpesten.
Misschien dat MS het kan waarderen

Alles is gewoon volgens de standaarden hoor.

Dat jij daar geen weet van hebt is een tweede.

Als je denkt dat je document sneller geladen(parse+render) wordt door de helft weg te laten en veel error correctie door de browser te laten uitvoeren....

Error correctie? Leg dat eens uit.

vrijdag 17 november 2006 20:33

Acties:

vrijdag 17 november 2006 20:36

Verwijderd schreef op vrijdag 17 november 2006 @ 20:05:
[...]
Alles is gewoon volgens de standaarden hoor. Dat jij daar geen weet van hebt is een tweede.

ja <option, <meta misschien, maar niet dingen zoals <body, <head etc

Error correctie? Leg dat eens uit.

zie:

Komt een browser een block-level element tegen, dan wordt het p-element gesloten.

Dat het niet sneller rendert ben ik met je eens. Maar dat is ook niet mijn punt, en ik denk van de meeste mensen in dit topic niet

dat vat ik niet. Wat dan? te lui om specificaties te onthouden/leren?

Acties:

Verwijderd

Topicstarter

apokalypse schreef op vrijdag 17 november 2006 @ 20:33:
[...]

ja <option, <meta misschien, maar niet dingen zoals <body, <head etc

Dat mag zeker wel. Je kent zelf de specificaties niet. Raar om dat anderen kwalijk te nemen trouwens.

vrijdag 17 november 2006 20:43

Acties:

vrijdag 17 november 2006 20:44

Dat het niet sneller rendert ben ik met je eens. Maar dat is ook niet mijn punt, en ik denk van de meeste mensen in dit topic niet

Het is niet zo dat je pagina merkbaar sneller wordt gerenderd door optione sluittags te gebruiken. Ik merk totaal geen verschil in renderingspeed bij twee test-codument met 10.000 <p> tags, bij het ene document wel allemaal afgesloten en bij de andere niet. Het staat gewoon meteen pats-boem op mijn scherm.

dat vat ik niet. Wat dan? te lui om specificaties te onthouden/leren?

http://www.w3.org/TR/html401/struct/global.html#h-7.3

[ Voor 13% gewijzigd door Blaise op 17-11-2006 20:45 ]

Acties:

vrijdag 17 november 2006 20:48

Verwijderd schreef op vrijdag 17 november 2006 @ 20:36:
[...]
Dat mag zeker wel. Je kent zelf de specificaties niet. Raar om dat anderen kwalijk te nemen trouwens.

bij xthml niet.

Maar ok dat is niet precies html.

Maar het sluiten van tags, Zoals <li, ik vind het raar als je dit niet wilt sluiten om 1 of andere reden.

trouwes:

HTML:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
  <title></title>
</head>
</html>

dit is niet correct volgens de w3c validator, alhoewel dat niet 100% ligt aan het ontbreken van de body tag

[ Voor 72% gewijzigd door apokalypse op 17-11-2006 21:11 ]

Acties:

vrijdag 17 november 2006 21:52

Blaise schreef op vrijdag 17 november 2006 @ 20:43:
[...]
Het is niet zo dat je pagina merkbaar sneller wordt gerenderd door optione sluittags te gebruiken. Ik merk totaal geen verschil in renderingspeed bij twee test-codument met 10.000 <p> tags, bij het ene document wel allemaal afgesloten en bij de andere niet. Het staat gewoon meteen pats-boem op mijn scherm.

Ik heb wel een leuke test gedaan. Een groot html document in quirksmode en strictmode en dan de tijd testen.

Zoals je weet gebruikt quirksmode meer error correctie (voor de foute html bestanden).
alles als gemiddelden van veel testen.
de html documenten staan in de cache.
test in IE6.

tijden voor parsen:
beide rond de 0.17 sec

tijd voor parsen+renderen:
quirksmode: 2.1s
strictmode: 0.35s

dit was inderdaad een groot document, maar er is wel degelijk een verschil!

Acties:

Verwijderd

Topicstarter

apokalypse schreef op vrijdag 17 november 2006 @ 20:44:
[...]

bij xthml niet.

Maar ok dat is niet precies html.

Maar het sluiten van tags, Zoals <li, ik vind het raar als je dit niet wilt sluiten om 1 of andere reden.

Nee, inderdaad. We hadden het over HTML. Waarom zou je het sluiten als het toch niet hoeft?

zaterdag 18 november 2006 00:09

Acties:

zaterdag 18 november 2006 00:23

Ik heb wel een leuke test gedaan. Een groot html document in quirksmode en strictmode en dan de tijd testen.
(...)
dit was inderdaad een groot document, maar er is wel degelijk een verschil!

Waarom haal je er steeds dingen bij die er niets mee te maken hebben? Het niet gebruiken van optionele sluittags heeft niks met IE in quirksmode te maken. Het is gewoon valid HTML en IE blijft gewoon in standards compliance mode.

Acties:

Olaf van der Spek

Ik laat </td> en </tr> ook altijd weg. Ik heb er nog geen problemen mee gehad.

zaterdag 18 november 2006 18:22

Acties:

T-MOB

Tsja, ook al staat iets netjes beschreven in de standaard, dat wil niet zeggen dat het overal goed geimplementeerd is. In sommige gevallen gaat het impliciet sluiten van tags gewoon fout.
Firefox verslikt zich bijvoorbeeld grandioos in onderstaande formuliertjes:

HTML:

<div>
<form method="post" action="#">
 <p>
  <label for="ip1">label</label>
  <input type="text" name="foo" id="ip1">
  <input type="submit" value="submit">
 </form>

<form method="post" action="#">
 <p>
  <label for="ip2">label</label>
  <input type="text" name="foo" id="ip2">
  <input type="submit" value="submit">
 </form>
</div>

Wordt in FF's DOM:

HTML:

<div>
 <form method="post" action="#">
  <p>
   <label for="ip1">label</label>
   <input name="foo" id="ip1" type="text">
   <input value="submit" type="submit">
 
 </p><form method="post" action="#">
 <p>
  <label for="ip2">label</label>
  <input name="foo" id="ip2" type="text">
  <input value="submit" type="submit">
</p></form></form></div>

Het heeft me ooit twee uur gekost om uit te zoeken waarom de boel verkeerd werd gepost. Had ik de <p>'s gelijk zelf afgesloten dan had ik nergens last van gehad...

Regeren is vooruitschuiven

zaterdag 18 november 2006 18:39

Acties:

Olaf van der Spek

T-MOB schreef op zaterdag 18 november 2006 @ 18:22:
Firefox verslikt zich bijvoorbeeld grandioos in onderstaande formuliertjes:

Waar moet die </p> dan en volgens welke regel zou die daar moeten?

zondag 19 november 2006 02:05

Acties:

sQuarecoW

In een <p> kan toch helemaal geen block element??

zondag 19 november 2006 12:15

Acties:

T-MOB

Olaf van der Spek schreef op zaterdag 18 november 2006 @ 18:39:
[...]
Waar moet die </p> dan en volgens welke regel zou die daar moeten?

Die </p> staat daar wat mij betreft prima, alleen had </form> volgens mij niet moeten verplaatsen. Blijkbaar wordt <p> wel afgesloten als er een nieuw <form> wordt geopend, maar niet wanneer het form wordt gesloten waar de paragraph een descendant van is. Ik zou verwachten dat de resulterende DOM van mijn eerste stukje code er zo uit zou zien:

HTML:

<div>
<form method="post" action="#">
 <p>
  <label for="ip1">label</label>
  <input type="text" name="foo" id="ip1">
  <input type="submit" value="submit">
 </p>
</form>

<form method="post" action="#">
 <p>
  <label for="ip2">label</label>
  <input type="text" name="foo" id="ip2">
  <input type="submit" value="submit">
 </p>
</form>
</div>

Hoe dan ook is het niet mijn bedoeling om dit stukje code door te zagen over wat er precies correct is. Mijn punt is dat het weglaten van niet verplichte sluittags kan leiden tot onverwachte bugs omdat browsers blijkbaar verschillende methoden gebruiken om te bepalen waar een sluittag moet komen te staan. Mocht Firefox het in het voorbeeld hierboven correct doen, dan doet de rest van de browsers het incorrect... Verschillen die je kunt voorkomen door een paar extra bytes aan sluittags mee te sturen.

Regeren is vooruitschuiven

zondag 19 november 2006 18:36

Acties: