[RFC] Document over HTML, CSS en semantiek

[chem]

Omdat ik hetzelfde verhaal echt al tig keer hebt uitgelegd; en jullie volgens mij ook… heb ik een documentje in elkaar gezet met een why-to. Hierin probeer ik uit te leggen wat semantisch html is; waarom je het zou willen gebruiken; een paar kleine praktijkvoorbeelden; en de voordelen ervan.

Te vinden op... http://home.parse.nl/~michiel/semantiek.html

Graag hoor ik kritiek, commentaar en tips. Zou je dit doorgeven aan iemand, in plaats van het uit te leggen? Waarom wel, of niet? Mis ik iets?

[twit]

Zit zeer netjes in elkaar. Ik moet eerlijk toegeven dat ik zelf weinig verstand van dit hele gebeuren heb en de laatste keer dat ik iets met HTML deed ik ook nog tabellen gebruikte. Toch hoorde ik overal meer en meer over het werken met CSS en semantiek en ik moet zeggen dat dit overzicht het voor mij in weinig woorden een stuk duidelijker heeft weten te maken.

[ValHallASW]

Misschien is het nog een idee ergens een verband te leggen met LaTeX; bij LaTeX werk je in principe op dezelfde manier als semantisch html: de TeX-file heeft alleen de inhoud in zich, de layout wordt door een losse file geregeld (waar bij TeX dan meestal de standaard wordt gebruikt, gebruik je bij HTML natuurlijk CSS )

Bij HTML heb ik sowiso nooit tables gebruikt voor layout; lang geleden heb ik ooit eens iets gemaakt, maar daar geen tables, maar frames
Ondertussen al een hele tijd niets meer gemaakt, maar ben van plan weer actief bezig te gaan om css goed onder de knie te krijgen

Verder lof voor je verhaal, maar een punt zou ik veranderen: je haalt react.nl aan als voorbeeld, en daarna zeg je:

We gaan hier geen concrete code geven (dat kan je zelf opzoeken),

ik ben bang dat je met die opmerking lezers zult afschrikken. IMO kan je beter juist wél aangeven welke code het over gaat, of je moet in het geheel geen codevoorbeelden geven in je document. Let wel, just $0.02

[chem]

Al bij de eerste paragraaf over HTML zat ik al over LaTeX te denken; misschien een idee maar dan wordt het verhaal wel nóg langer.

De reden om geen concrete code neer te zetten, is omdat ik vind dat de gebruiker dat zelf moet bedenken. Ik heb de intro aangepast zodat duidelijker is dat ik enkel mensen wil uitleggen waarom je semantisch HTML en CSS wil gebruiken - en niet hoe.
En omdat ik weet dat men toch wil weten wat dat meer inhoudt dan "tags gebruiken" heb ik die voorbeelden toegevoegd.

Ik heb bij bv de heading-als-logo expliciet geen voorbeeld gebruikt omdat er meer wegen naar Rome zijn, en de juiste is persoonlijk.

[faabman]

Je spreekt bij semantiek en html over het markeren van content, ik zou zelf liever praten over toekennen van meta informatie (informatie over informatie).

Bij de voordelen, op eenvoudigere wijze aparte stylesheets voor verschillende mediatypes zoals scherm / print / etc.

Denk dat sommige passages en begrippen misschien net even wat te ver gaan voor web-knutselaars die dit door dit document overgehaald moeten worden om over te stappen op semantische html....

links die misschien ook leuk zijn
http://www.digital-web.com/articles/building_to_standards/

[ Voor 10% gewijzigd door faabman op 09-04-2005 22:13 ]

[We Are Borg]

Ziet er goed uit chem, al denk ik wel dat je opmerkingen gaat krijgen m.b.t. tot je XHTML en mime keuze Tegenwoordig woeden daar ook veel discussies over

[crisp]

Ik vind het jammer dat je in het document als voorbeeld verwijst naar http://www.react.nl die allerminst valideert en waar toch weer voor een deel een tabel wordt gebruikt voor layout

[ Voor 4% gewijzigd door crisp op 09-04-2005 23:52 ]

[Osiris]

crisp schreef op zaterdag 09 april 2005 @ 23:51:
Ik vind het jammer dat je in het document als voorbeeld verwijst naar http://www.react.nl die allerminst valideert en waar toch weer voor een deel een tabel wordt gebruikt voor layout

offtopic:

En nog ranziger ook qua code. Niet alleen semantiek (table), maar 't beweert XHTML te zijn, terwijl het niet eens valid HTML 4.01 is volgens mij

[crisp]

We Are Borg schreef op zaterdag 09 april 2005 @ 22:38:
Ziet er goed uit chem, al denk ik wel dat je opmerkingen gaat krijgen m.b.t. tot je XHTML en mime keuze Tegenwoordig woeden daar ook veel discussies over

En dat natuurlijk
waarschijnlijk gaat de helft van de styles ook niet werken bij een XHTML mimetype omdat XHTML case-sensitive is...

Verder ben ik het niet eens met je argumentatie om XHTML te gebruiken. Het punt dat je aanhaalt, xmlHttpRequest, is ook geen reden aangezien je met xmlHttpRequest ook gewoon HTML kan binnenhalen.
Een belangrijke reden om juist geen XHTML te gebruiken is wanneer je geen wellformedness kan garanderen omdat je backend niet XML-based is. React is een schoolvoorbeeld: de RML-parser kan geen wellformedness garanderen, en dus is XHTML juist af te raden.
Het target-attribuut bestaat ook in HTML 4 Strict niet, dus dat is ook al geen verschil.
De zaken die naast de (kleine) syntax verschillen juist wel afwijken, en voor een webinterface eerder een nadeel zijn dan een voordeel (geen loose-errorcorrection, namespaces, incremential load, geen document.write() en innerHTML mogelijk in JS, canvas in CSS) noem je juist weer niet. XHTML gebruiken maar geen rekening houden met deze zaken is verkeerd aanleren, en dat zou je juist willen voorkomen.

Ik zou zeggen: lees je eens in over de pro's en cons van XHTML en ga daar wat dieper op in in je document, of laat het gewoon weg want XHTML heeft niets met semantiek te maken.


Oh ja, verder is het een goed en duidelijk document

nog 1 opmerking dan: je gebruikt hier en daar het woord 'tags' waar je eigenlijk 'elementen' bedoelt

[ Voor 48% gewijzigd door crisp op 10-04-2005 01:00 ]

[Verwijderd]

ondanks de kritiek: voor mij toch een heldere bevestiging dat ik toch op de goede weg was: merci!

[crisp]

Verwijderd schreef op zondag 10 april 2005 @ 00:30:
ondanks de kritiek: voor mij toch een heldere bevestiging dat ik toch op de goede weg was: merci!

Er word juist gevraagd om kritiek, dus waarom zouden we dat dan niet geven?
Maar zoals gezegd; het is een helder document en de message is duidelijk. Als het voor jou een bevestiging is dan denk ik dat het in ieder geval z'n doel bereikt

[Jigs]

Hey,

Wat een geweldig document. Serieus. Een vriend van mij is hier ook al een hele tijd mee bezig en ik zie echt de voordelene ervan in. Het lijkt een beetje MVC achtig.
Een linkje die bij dit verhaal aansluit:

http://www.csszengarden.com/

[chem]

crisp schreef op zaterdag 09 april 2005 @ 23:51:
Ik vind het jammer dat je in het document als voorbeeld verwijst naar http://www.react.nl die allerminst valideert en waar toch weer voor een deel een tabel wordt gebruikt voor layout

Mjah, dat is idd wel jammer; ik wil eigenlijk verwijzen naar een klant van ons; maar die is nog niet over naar de nieuwe site. Zodra dat gebeurt werk ik het wel bij
Owh, en de ranzigheid van react.nl komt door de gebruikte html-editor van IE en copy/paste vanuit word enzo... ik moet echt een ander voorbeeld zoeken

Het media-gebeuren van CSS vind ik vooral een voordeel van CSS; het heeft weinig te maken met semantische HTML. Het is wel iets om op te merken, ik ga er een plaatsje voor verzinnen.

Het XHTML verhaal; dit heb ik toegevoegd omdat de overstap relatief klein is, maar aan de andere kant... ik ga eerst zelf weer eens de boeken in

iig ben ik blij dat er 2 mensen zijn die het verhaal nu wat beter snappen, dat was wel de bedoeling

[ Voor 5% gewijzigd door chem op 10-04-2005 11:26 ]

[AtleX]

Ik was zelf ook bezig met een artikel hierover, maar die van jou is veel beter . Ik neem aan dat linken wel toegestaan is?

En nog even een kleine opmerking, je linkt naar dit document over het besparen van bandbreedte, en zelf noem je het ook nog als een voordeel:

De voordelen op een rijtje.

* Kleinere HTML bestanden

Maar zelf propageer je het 'verstoppen' van data in je HTML :

Daarnaast zijn er elementen die in de normale weergave helemaal niet naar voren komen; zo is de heading-1 "React.nl" helemaal niet terug te vinden in de gestijlde versie.

Dan haal je een hoop onzin eruit (Opmaak, etc) en stop je het in een aparte stylesheet, maar zelf stop je wel rommel in je source.

[ Voor 3% gewijzigd door AtleX op 10-04-2005 12:12 ]

[chem]

Dat is geen rommel imho; dat is precies wat ik probeer duidelijk te maken. Ik plaats ook uit gewoonte een heading voor een ul met linkjes met bv "hoofdnavigatie" erin. Die zet ik emt de CSS weer uit, maar screenreaders etc. snappen veel beter wat die lijst nou betekend/inhoudt.

Daarbij is die tekst zo'n klein aandeel ten opzichte van een webpagina in table-html dat ik het geen probleem vind

---

ik heb trouwens de React.nl verwijzing weggehaald en er nl.tv van gemaakt; daar zit nog maar 1 validatiefoutje in en dat tackle ik maandag wel

Daarbij is het imho een mooier voorbeeld.

ps, je mag er heus wel naar linken hoor

[ Voor 5% gewijzigd door chem op 10-04-2005 12:19 ]

[RAJH]

offtopic:
Je link naar nl.tv linkt naar
http://nl/tv/nltv/

edit:

Nu alleen nog even de / weghalen achter http://nl.tv/nltv/

anders krijg je namelijk een error te zien

"Undefined action "" requested"

[ Voor 53% gewijzigd door RAJH op 10-04-2005 15:39 ]

[chem]

offtopic:
fixed, tnx