XHTML Strukturering 1: Brug af XHTML til at omstrukturere webstedet

En af titlerne, vi har skrevet til denne sektion, var: 'XHTML: Enkle regler, lette retningslinjer.' En af grunde til dette er, at reglerne og retningslinjerne, der diskuteres i denne sektion, er enkle og lette at forstå. En anden grund er, at en simpel og let at forstå WEB-designbog, ligesom de nye gratis varer i supermarkeder, kan tiltrække opmærksomhed og stimulere interessen, og opmuntre folk til at prøve.

Jeg håber virkelig, at indholdet i denne sektion kan inspirere dig og opmuntre dig til at prøve. Hvorfor siger jeg det? Fordi når du har fat i de enkle og lette principper, der er beskrevet i dette kapitel, vil du begynde at reflektere over måden, websider fungerer, og begynde at ændre måden, du bygger dem på. Men jeg håber ikke, at du kun vil omskrive koden. Jeg håber, at du virkelig kan tænke og arbejde på en anden måde.

På den anden side er det sandelig XHTMLs virkelige betydning at omstrukturere.

I dette kapitel vil vi undersøge mekanismen og betydningen af strukturerede mærker. Hvis du er i færd med at integrere website-standarder i dine udviklingsprojekter, kan du måske finde indholdet i dette kapitel lidt bekendt. Men selv for erfarne fagfolk i dette område kan finde overraskende opdagelser i dette kapitel.

Opsummering af XHTML-regler

Det er hurtigt og smertefrit at konvertere traditionel HTML til XHTML 1.0, så længe du følger nogle enkle regler og retningslinjer. Uanset om du har brugt HTML før eller ej, vil det ikke forhindre dig i at bruge XHTML.

  • Brug passende dokumenttype-deklarationer og navnerum.
  • Brug meta-elementet til at deklarere indholdstypen.
  • Brug små bogstaver til at skrive alle elementer og egenskaber.
  • Brug citationstegn omkring værdierne for alle egenskaber.
  • Tildel værdier til alle egenskaber.
  • Luk alle mærker.
  • Brug mellemrum og skråstreg til at lukke tomme mærker.
  • Undgå at skrive dobbelt understreg i kommentarer.
  • Sørg for at bruge mindre end tegn og og-tegn som < og &

Unicode og andre tegnsæt

Standard tegnsæt for XML, XHTML og HTML 4.0-dokumenter er Unicode, en standard defineret af Unicode-alliancen. Unicode er et omfattende tegnsæt, der giver hvert tegn en bestemt unik numerisk værdi, uanset platform, program og sprog. Unicode er også det, der kommer nærmest en universel alfabet, selvom det ikke er en alfabet, men et sæt numeriske kortlægningsplaner.

Selvom Unicode er webdokumenternes standard tegnsæt, kan udviklere frit vælge andre tegnsæt, der bedre passer til deres behov. For eksempel bruger websider i USA og Vesteuropa ofte ISO-8859-1 (Latin-1) koding, mens Kinas nationalstandard er gb2312.

Mærk dokumenter for at udtrykke semantik, ikke for at style

Husk: Brug CSS så meget som muligt til layout. I verden af webstandarder er XHTML-mærker uafhængige af præsentation, de har kun med dokumentstruktur at gøre.

Strukturerede dokumenter kan kommunikere så meget semantik som muligt til browsere, uanset om de er på en håndholdt enhed eller en moderne desktop grafisk browser. Strukturerede dokumenter kan kommunikere visuelt semantik til brugere, selv i gamle browsere eller i moderne browsere, hvor brugeren har slået CSS fra.

Ikke alle websider kan straks afvise HTML-tabeller som layout. CSS' opfinder, W3C, konverterede først deres officielle hjemmeside til CSS-layout i november 2002. Selvom de mest faste standardister ikke altid fuldstændigt adskiller præsentation fra struktur, var det ikke muligt i XHTML 1. Men nu kan vi tage et stort skridt mod dette ideal ved at adskille præsentation fra struktur (eller data fra design), hvilket også kan gavne traditionelle kombinerede layouts.

Her er nogle tips, der kan hjælpe dig med at tænke mere struktureret:

Farver inden for overskriften

I grammatiske skoler blev de fleste af os tvunget til at skrive artikler i en standard overskriftsstruktur. Nu som designere kan vi afvige frit fra overskriftsstrukturernes begrænsninger og tage et spring ud i det fri område af unik personlig udtryksfrihed (måske vores brochurer og kommercielle websteder er ikke så unikke og personlige endnu). Men mindst vil vi ikke blive generet af overskriftsstrukturerne længere.

Ifølge HTML skal vi strukturerer indholdet i en organiseret hierarki. I perioder, hvor browsere ikke understøttede CSS, kunne vi ikke levere salgsparat layout samtidig med at vi opnåede dette. Men i dag, når vi kan gennemføre vores design uden kompromis, har vi mulighed for at levere dokumenter med en god indre struktur.

Når du markerer tekst til brug på nettet eller når du konverterer eksisterende dokumenter til websider, tænk over disse punkter i den traditionelle overskriftsstruktur.

<h1>Mit emne</h1>
<p>Introducerende tekst</p>
<h2>Supplerende opfattelse</h2>
<p>Relateret tekst</p>

Undgå også at bruge afskaffede HTML-elementer som <font>, eller usemantiske elementer som <br />, til at simulere ikke-eksisterende logiske strukturer.

F.eks. undgå dette:

Mit emne<br /><br />
Introducerende tekst<br /><br />
Supplerende opfattelse<br /><br />
Relateret tekst<br />

Brug elementer baseret på deres betydning, ikke deres udseende

Nogle af os er faldet i en dårlig vane, når vi kun har brug for stor skrift, bruger vi h1, eller når vi har brug for en punktumløkke foran, bruger vi li. Som vi diskuterede i de tidligere kapitler, er browserne altid vant til at pålægge designegenskaber til HTML-elementer. Vi er alle vant til at tro, at h1 betyder stor skrift, og li betyder punkt, eller blockquote betyder indrykning af tekst. De fleste af os bruger stadig strukturerede elementer til at simulere visuelle effekter, når vi skriver HTML.

På samme måde, hvis designeren ønsker, at alle titler skal have samme skriftstørrelse, vil hun sætte alle titler til h1, selvom det ikke giver nogen struktureret semantik.

Dette er hovedoverskriften, når jeg organiserer teksten efter en opsummeringsformat.
Dette er ikke hovedoverskriften, men jeg håber, at den bruger samme skrift som den ovenstående, men jeg ved ikke, hvordan jeg bruger CSS.
Dette er ikke en titel. Men jeg håber, at teksten på siden bruger samme skrift, for at opnå det,
Hvis jeg forstår CSS, kan jeg opnå dette design uden at forstyrre dokumentets struktur.

Vi skal lægge vores små trick til side og begynde at bruge dem baseret på deres semantik, ikke på deres udseende. Faktisk kan h1 blive, hvad du vil have det til at være. Gennem CSS kan h1 blive en ikke-fet, lille, romersk skrift, mens p-tekst kan blive en fed, stor skrift, og li kan have ingen punkter (du kan bruge små katter eller hunde eller virksomhedens logo i PNG, GIF eller JPEG-billeder i stedet) osv.

Fra i dag af skal vi bruge CSS til at bestemme elementers udseende. Vi kan endda ændre deres udseende baseret på deres placering på siden eller i stedet. CSS kan fuldstændigt adskille visuel præsentation fra struktur og giver dig mulighed for at formatere ethvert element efter din foretrukne stil.

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;
	{}

Hvorfor gør du det? Formålet med dette er at opnå en brandiseret udseende og følelse i grafiske browsere, samtidig med at dokumentets struktur bevares i tekstbrowsere, trådløse enheder og HTML-formaterede e-mails.

Vi ønsker ikke at tale mere om CSS-teknologi i kapitlet om XHTML. Vi ønsker kun at vise, at dokumentstruktur og visuel præsentation er to helt forskellige ting, og at strukturerede elementer skal bruges til at konvertere tekst, ikke til at pålægge visuelle effekter.

Brug strukturerede elementer i stedet for meningsløst affald

Da mange HTML-debattører har glemt eller aldrig har kendt til HTML og XHTML's formål med at overføre struktureret betydning, bruger de disse mærker til at indsætte lister på denne måde:

Projekt ét<br />
Projekt to<br />
Projekt tre<br />

Overvej at bruge numeriske eller bullets-lister i stedet:

<ul>
<li>Projekt ét</li>
<li>Projekt to</li>
<li>Projekt tre</li>
</ul>

"Men li giver mig en prik, og jeg har ikke brug for en prik!" Måske vil du sige. Ifølge kapitlet ovenfor gør CSS ingen antagelser om, hvordan elementer skal se ud. Det venter på, at du fortæller det, hvordan du ønsker dem at se ud. Afsluttende prikker er CSS' mest grundlæggende evne. Den har evnen til at lade lister se ud som almindelig tekst, men også som grafiske navigationsmenuer med fuld omvendelseseffekt.

Brug derfor listeemner til at markere lister. På samme måde brug strong i stedet for b, em i stedet for i, osv. Under de fleste desktopbrowsere's standardindstillinger er strong's visningseffekt den samme som b, og em og i er den samme, og du kan også skabe den ønskede visuelle effekt uden at ødelægge dokumentets struktur.

Selvom CSS ikke gør nogen antagelser om, hvordan elementer skal vises, gør browsere mange antagelser, og vi har endnu ikke mødt en browser, der viser strong som noget andet end fed tekst (medmindre det er instrueret af en designer til at vise det på en anden måde). Hvis du er bekymret for, at en ukendt browser ikke vil vise strong som fed tekst, kan du skrive denne CSS-regel:

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

Visuelle elementer og struktur

Webstandard kræver ikke kun, hvilken teknologi vi bruger, men også hvordan vi bruger disse teknologier. Brug XHTML til at skrive mærker, og brug CSS til at håndtere en del eller hele layouten, gør ikke nødvendigvis webstedet mere brugervenligt og lettere, og sparer ikke nødvendigvis så meget bredbånd. Som vi brugte teknologierne i tidlig tid, kan XHTML og CSS også blive misbrugt og overdrivet. Langsom XHTML og langsom HTML vil også spilde brugerens bredbånd og tid. Langsom overdrivet CSS kan ikke fuldstændigt erstatte det visuelle HTML-kode; dette er kun en dårlig ting, der erstatter en anden.