XHTML Structuring 1: Gebruik XHTML om websites te herstructureren

The title we once wrote for this section was: 'XHTML: Simple rules, easy guidelines.' One reason is that the rules and guidelines discussed in this section are simple and easy. Another reason is that a simple and easy WEB design book, like the new free goods in the supermarket, although common, can effectively attract people's attention, such things can stimulate people's interest and encourage people to try.

I really hope that the content of this section can stimulate your interest and encourage you to try. Why do I say that? Because once you master the simple and easy concepts contained in this chapter, you will rethink the way web pages work and start to change the way you build them. However, I do not want you to just rewrite the code. I hope you can truly think and work in a different way.

On the other hand, restructuring is the true meaning of XHTML.

In this chapter, we will study the mechanisms and meanings of structured markup. If you are integrating web standards into your development project, you may find some familiar content in this chapter. However, even the veterans in this field will find unexpected gains from this chapter.

Summary of XHTML rules

Converting traditional HTML to XHTML 1.0 is quick and painless, as long as you follow some simple rules and guidelines. Whether you have used HTML before or not, it will not hinder you from using XHTML.

  • Use appropriate document type declarations and namespaces.
  • Use the meta element to declare your content type.
  • Write all elements and attributes in lowercase.
  • Enclose all attribute values in quotes.
  • Assign values to all attributes.
  • Close all tags.
  • Close empty tags with spaces and slashes.
  • Do not write double underscores in comments.
  • Ensure that the less than and ampersand symbols are represented as < and &

Unicode en andere character sets

De standaard character set voor XML, XHTML en HTML 4.0-documenten is Unicode, een standaard gedefinieerd door de Unicode-Alliantie. Unicode is een uitgebreide character set die elk karakter een specifieke unieke nummer toekent, ongeacht platform, programma en taal. Unicode is ook het dichtst bij een universele alfabet, hoewel het geen alfabet is, maar een set nummermappingsmethoden.

Hoewel Unicode de standaard character set voor web-documenten is, kunnen ontwikkelaars vrijelijk kiezen voor andere character sets die beter bij hen passen. Bijvoorbeeld, websites in de Verenigde Staten en West-Europa gebruiken vaak ISO-8859-1 (Latin-1) encoding, terwijl de nationale norm in de Volksrepubliek China gb2312 is.

Markeer documenten voor semantiek, niet voor stijl

Onthoud: gebruik CSS maximaal voor lay-out. In de wereld van web-standaarden zijn XHTML-markeringen niet gerelateerd aan presentatie, het gaat alleen om de structuur van het document.

Een goed gestructureerd document kan zoveel semantiek mogelijk overbrengen aan de browser, of de browser zich op een handheld computer bevindt of een moderne desktop grafische browser. Een goed gestructureerd document kan visuele semantiek overbrengen aan de gebruiker, zelfs in oude browsers of in moderne browsers waar de gebruiker CSS heeft uitgeschakeld.

Niet elke site kan onmiddellijk HTML-tabellen Lay-out verlaten. De uitvinder van CSS, W3C, heeft pas in november 2002 zijn officiële website omgezet naar CSS-lay-out. Hoewel zelfs koppige standaardisten niet altijd de presentatie volledig van de structuur scheiden, was dit ten minste niet mogelijk in XHTML 1. Maar nu kunnen we een belangrijke stap zetten naar dit ideaal, door de presentatie van de structuur te scheiden (of de data van het ontwerp te scheiden), zelfs gemengde traditionele lay-outs kunnen hiervan profiteren.

Hier zijn enkele tips die je kunnen helpen om op een meer gestructureerde manier na te denken:

Kleuren binnen de titelvermelding

In de grammaticaschool werden de meeste van ons gedwongen om artikelen te schrijven in de standaard titelvermeldingsindeling. Nu zijn we ontwerpers en kunnen we ons veel vrijer bevrijden van de beperkingen van de titelvermelding, en durven we ons in het veld van de vrijheid van unieke persoonlijke expressie te storten (misschien zijn onze folder en commerciële sites nog niet zo uniek en persoonlijk). Maar ten minste zullen we niet meer last hebben van de titelvermelding.

In feite zouden we, volgens HTML, de inhoud moeten structureren in georganiseerde hiërarchieën. In de tijd dat browsers CSS niet ondersteunden, konden we dit niet bereiken terwijl we een verkooptbare lay-out leverden. Maar vandaag de dag, terwijl we onze ontwerpen zonder compromis implementeren, hebben we de mogelijkheid om documenten met een goed ingebouwde structuur te leveren.

Wanneer je tekst markeert die je wilt gebruiken voor het web, of wanneer je een bestaand tekstbestand omzet naar een webpagina, gebruik dan deze traditionele titelvermeldingen om na te denken.

<h1>Mijn thema</h1>
<p>Inleidend tekst</p>
<h2>Aanvullende opmerking</h2>
<p>Gerelateerde tekst</p>

Bovendien, vermijd het gebruik van afgekeurde HTML-elementen zoals <font>, of onsemantische elementen zoals <br />, om niet bestaande logische structuren te simuleren.

Bijvoorbeeld, vermijd dit niet:

<font size="7">Mijn thema</font><br />
Inleidend tekst<br /><br />
<font size="6">Aanvullende opmerking</font><br />
Gerelateerde tekst<br />

Gebruik elementen op basis van hun betekenis, niet op basis van hun uiterlijk

Sommigen van ons zijn in een slechte gewoonte vervallen, zoals het gebruiken van h1 wanneer we alleen een grote lettergrootte nodig hebben, of het gebruiken van li wanneer we een puntteken vooraf moeten plaatsen. Net zoals we in het vorige hoofdstuk hebben besproken, zijn browsers altijd gewend om ontwerpeigenschappen op HTML-elementen toe te passen. We zijn allemaal gewend om te denken dat h1 een grote letter betekent, en li betekent een punt, of dat blockquote een ingesprongen tekst betekent. De meeste van ons gebruiken nog steeds gestructureerde elementen om het weergave-effect te simuleren in HTML.

Op dezelfde manier, als een ontwerper hoopt dat alle titels dezelfde lettergrootte gebruiken, zal ze alle titels instellen op h1, zelfs als dit geen structurale semantiek impliceert.

<h1>Dit is de hoofdtitel, zoals ik de tekst heb georganiseerd volgens de opzet.</h1>
<h1>Dit is geen hoofdtitel, maar ik hoop dat het dezelfde lettertypes gebruikt als de bovenstaande titel, maar ik weet niet hoe ik CSS moet gebruiken.</h1>
<h1>Dit is absoluut geen titel. Maar ik hoop dat de tekst op de pagina dezelfde lettertypes gebruikt, zodat ik het kan bereiken dat ik hoop te bereiken.
Als ik CSS begrijp, kan ik deze ontwerpwens bereiken zonder de structuur van het document te verstoren.</h1>

We moeten onze kleine trucs opzij zetten en beginnen met het gebruiken van CSS op basis van de semantiek van de elementen, niet op basis van hoe ze eruitzien. In feite kan een h1 worden wat je maar wilt. Door CSS kan een h1 een niet-gevulde, kleine Romeinse letter zijn, terwijl p-tekst een vet, grote letter kan zijn, en li kan zonder punten zijn (of je kunt kleine katten en honden of een bedrijfslogo in PNG, GIF of JPEG formaat gebruiken in plaats van een puntdash).

Vanaf vandaag gaan we CSS gebruiken om het uiterlijk van elementen te bepalen. We kunnen zelfs hun uiterlijk veranderen op basis van hun positie op de pagina of in de site. CSS kan de weergave volledig van de structuur onttrekken en staat je toe om elke element naar wens te formatteren met de stijl die je graag gebruikt.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

Waarom zou je dit doen? Het doel hiervan is om een merkbevorderend uiterlijk en gevoel te krijgen in grafische browsers, terwijl de structuur van het document wordt behouden in tekstbrowsers, draadloze apparaten en HTML-formattede e-mails.

We willen geen extra CSS-technieken bespreken in het hoofdstuk over XHTML. We willen alleen laten zien dat documentstructuur en visuele expressie twee volledig verschillende dingen zijn, en dat gestructureerde elementen moeten worden gebruikt om tekst te transformeren, niet om visuele effecten op te leggen.

Gebruik gestructureerde elementen in plaats van onbeduidende rommel

Omdat we het hebben vergeten of we zelfs niet weten voor welk doel HTML en XHTML worden gebruikt om gestructureerde betekenis over te brengen, gebruiken veel HTML-argumentatoren tags om lijsten in te voegen:

Item één<br />
Item twee<br />
Item drie<br />

Overweeg om in plaats van dat te gebruiken geordende of ongeordende lijsten:

<ul>
<li>Item één</li>
<li>Item twee</li>
<li>Item drie</li>
</ul>

"Maar li geeft me een stip, en ik heb geen stip nodig!" Misschien zeg je zo. Volgens het vorige hoofdstuk maakt CSS geen aannames over het verwachte uiterlijk van elementen. Het wacht op je om het te vertellen wat je verwacht van het uiterlijk van de elementen. Het sluiten van stippen is een van de meest basis capaciteiten van CSS. Het heeft de mogelijkheid om lijsten eruit te laten zien alsof ze geen tekst zijn, maar ook om lijsten eruit te laten zien als een grafische navigatiebalk met een volledige omgekeerde effect.

Gebruik daarom lijstelementen om lijsten te markeren. Op soortgelijke wijze, gebruik strong in plaats van b, en em in plaats van i, enz. In de meeste standaard desktopbrowsers heeft de weergave van strong dezelfde effecten als b, en em dezelfde effecten als i, en kun je ook de gewenste visuele effecten creëren zonder de structuur van het document te verstoren.

Hoewel CSS geen aannames maakt over de weergave van enige element, maken browsers veel aannames en hebben we nog nooit een browser gevonden die strong weergeeft als iets anders dan vet gedrukte letters (tenzij het door een ontwerper met CSS is aangegeven om op een andere manier te worden weergegeven). Als je je zorgen maakt dat een onbekende browser strong niet als vet gedrukte letters weergeeft, kun je deze CSS-regel schrijven:

strong {
	font-weight: bold;
	font-style: normal;
	{}

Visual Elements and Structure

Web standards not only require us to use what technology, but also to comply with the way these technologies are used. Using XHTML to write markup and using CSS to handle part or all of the layout does not necessarily make the site more accessible and lighter, nor does it save how much bandwidth. Just like the technologies we used in the early days, XHTML and CSS can also be misused and overused. Long-winded XHTML and long-winded HTML will both waste bandwidth and time of users. Long-winded excessive CSS cannot completely replace the presentation of HTML code; this is just a bad thing being replaced by another bad thing.