Good practice: CSS, tekstbrowsers en HR

[Verwijderd]

Beste iedereen,

Ik vraag mij af wat een good practice is omtrent het volgende.

Wat ik wil, is dat mijn websites volledig bruikbaar blijven in zelfs de meest eenvoudige browser, zoals een tekstbrowser als Lynx. Met volledig bruikbaar bedoel ik dan, dat alle aangeboden informatie eenvoudig te benaderen is en dat de opmaak zelfs in een pure ASCII omgeving duidelijk is.

Om bepaalde websiteonderdelen te scheiden in een browser die geen CSS ondersteunt, wil ik nu gebruik gaan maken van de HR-tag. In de CSS stylesheet zal ik deze HR-tag onzichtbaar maken ( hr { display: none; } ), omdat de andere styling deze scheidingslijn overbodig maakt, maar de lijn krijgt een duidelijke functie in het geval dat CSS ondersteuning ontbreekt.

Mijn vraag is nu of dit een good practice is, oftewel een valide oplossing. En zo nee: wat zijn de alternatieven?

[gertvdijk]

Wat het meest belangrijk is, is om de HTML opmaak zoveel mogelijk semantisch correct te houden. div-jes alleen gebruiken voor pagina onderdelen en HR elementen om een duidelijke scheiding aan te geven. UL/OL en LI elementen voor opsommingen etc etc.
Gewoon even uitzoeken waar de standaard HTML elementen daadwerkelijk voor zijn bedoeld en ze dan ook zo gebruiken. Vervolgens zoveel mogelijk met de CSS proberen om het er netjes uit te laten zien.
Ow en jouw voorbeeld met het HR element gebruik ik ook vaak

[ Voor 6% gewijzigd door gertvdijk op 25-06-2007 09:22 ]

[Alex Picard]

Hier is een mooi voorbeeld dat goed werkt in tekstbrowsers en er ook netjes uit ziet:
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/

[Verwijderd]

gertvdijk schreef op maandag 25 juni 2007 @ 09:21:
Wat het meest belangrijk is, is om de HTML opmaak zoveel mogelijk semantisch correct te houden. div-jes alleen gebruiken voor pagina onderdelen en HR elementen om een duidelijke scheiding aan te geven. UL/OL en LI elementen voor opsommingen etc etc.
Gewoon even uitzoeken waar de standaard HTML elementen daadwerkelijk voor zijn bedoeld en ze dan ook zo gebruiken. Vervolgens zoveel mogelijk met de CSS proberen om het er netjes uit te laten zien.
Ow en jouw voorbeeld met het HR element gebruik ik ook vaak

Goed uitgangspunt wat mij betreft . Op zich wordt de HR-tag op deze manier gebruikt waarvoor deze is bedoeld: het scheiden van secties op één pagina. Maar in deze specifieke situatie is het geen onderdeel van de eigenlijke layout, maar meer een soort van plan B. En is het in die context ook valide. Maar ik denk, dat het dat wel is.

[Verwijderd]

Alex Picard schreef op maandag 25 juni 2007 @ 09:26:
Hier is een mooi voorbeeld dat goed werkt in tekstbrowsers en er ook netjes uit ziet:
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/

Thanks! Ik zag dat zij inderdaad ook gebruik maken van de HR-tag die in de stylesheetmodus onzichtbaar wordt gemaakt.

[OkkE]

In mijn ogen een valide oplossing. Afhankelijk van hoe je de scheiding in browsers met CSS wilt doen, zou je zelfs je HR gewoon kunnen stijlen.

Overgens vind ik de navigatie in een UL/OL, titels in Hx, teksten in P, quotes in Blockquote, etc. belangrijker als de scheiding. Maar, het is zeker een mooie toevoeging. Persoonlijk gebruik ik de HR niet vaak; een nieuwe heading geeft in mijn ogen vaak genoeg scheiding aan.

[Verwijderd]

OkkE schreef op maandag 25 juni 2007 @ 09:32:
In mijn ogen een valide oplossing. Afhankelijk van hoe je de scheiding in browsers met CSS wilt doen, zou je zelfs je HR gewoon kunnen stijlen.

Overgens vind ik de navigatie in een UL/OL, titels in Hx, teksten in P, quotes in Blockquote, etc. belangrijker als de scheiding. Maar, het is zeker een mooie toevoeging. Persoonlijk gebruik ik de HR niet vaak; een nieuwe heading geeft in mijn ogen vaak genoeg scheiding aan.

Mee eens, meestal maakt de CSS styling de HR overbodig, omdat je doormiddel van kaders, regelafstanden, margins en dergelijke voldoende mogelijkheden hebt om scheidingen duidelijk aan te brengen. Het gaat mij persoonlijk dan ook puur om het aanbrengen van een scheiding, wanneer de CSS stylesheet niet wordt toegepast (zoals in de tekstbrowser Lynx). Hierbij moet je denken aan een scheiding tussen bijvoorbeeld de header, het menu, de content en de footer.

(Menu's realiseer ik overigens ook altijd met behulp van het UL element. Ook dat leidt namelijk weer tot een mooi resultaat in een tekstbrowser .)

[crisp]

Ik gebruik ook HR op die manier: onzichtbaar in visuele browsers maar gebruikt als afscheiding tussen secties voor non-visuele browsers.

Note overigens dat HTML4 geen enkele semantiek toekent aan het element zelf en het puur een presentationeel element is:

quote: http://www.w3.org/TR/html401/present/graphics.html#h-15.3

The HR element causes a horizontal rule to be rendered by visual user agents.

HTML5 herdefinieerd de betekenis van het element en maakt het wel semantisch:

quote: http://www.whatwg.org/spe...section-prose.html#the-hr

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.