XHTML-Strukturierung I: Webseiten mit XHTML neu strukturieren

Einmal war der Titel dieses Abschnitts: „XHTML: Einfache Regeln, einfache Anweisungen.“ Einer der Gründe ist, dass die hier diskutierten Regeln und Anweisungen einfach und leicht verständlich sind. Ein weiterer Grund ist, dass ein einfaches und leicht verständliches Web-Design-Buch, wie die neuen kostenlosen Waren im Supermarkt, obwohl häufig vorkommend, die Aufmerksamkeit auf sich zieht und das Interesse weckt, und Menschen ermutigt, es auszuprobieren.

Ich hoffe wirklich, dass der Inhalt dieses Abschnitts Ihr Interesse weckt und Sie ermutigt, es auszuprobieren. Warum? Weil Sie, wenn Sie die einfachen und leicht verständlichen Prinzipien dieses Kapitels beherrschen, die Art und Weise, wie Webseiten funktionieren, neu überdenken und anfangen, sie auf eine andere Weise zu bauen, werden. Ich möchte jedoch nicht, dass Sie nur den Code neu schreiben. Ich möchte, dass Sie wirklich auf eine andere Weise denken und arbeiten.

Andererseits ist die Umstrukturierung die wahre Bedeutung von XHTML.

In diesem Kapitel werden wir die Mechanismen und Bedeutungen der strukturierten Markierungen untersuchen. Wenn Sie Standards für Ihre Entwicklungsprojekte integrieren, könnten Sie den Inhalt dieses Kapitels als vertraut empfinden. Aber selbst für alte Hasen gibt es hier Überraschungen.

Kurzübersicht über die XHTML-Regeln

Die Umwandlung von traditionellem HTML in XHTML 1.0 ist schnell und schmerzlos, solange Sie einige einfache Regeln und Anweisungen befolgen. Egal, ob Sie HTML verwendet haben oder nicht, es wird Sie nicht daran hindern, XHTML zu verwenden.

  • Verwenden Sie die richtige Dokumenttypdeklaration und den Namensraum.
  • Verwenden Sie das meta-Element, um den Inhaltstyp zu deklarieren.
  • Verwenden Sie alle Elemente und Attribute in Kleinbuchstaben.
  • Verwenden Sie Anführungszeichen für alle Attributwerte.
  • Zuerst alle Attribute zu Werten zuweisen.
  • Schließen Sie alle Tags.
  • Verwenden Sie Leerzeichen und Schrägstriche, um leere Tags zu schließen.
  • Vermeiden Sie es, doppelte Unterstriche in Anmerkungen zu verwenden.
  • Stellen Sie sicher, dass das Untergewissens- und das Und-Zeichen als < und & dargestellt werden.

Unicode und andere Zeichensätze

Die Standard-Zeichensätze für XML-, XHTML- und HTML 4.0-Dokumente sind Unicode, ein Standard, der von der Unicode-Allianz definiert wurde. Unicode ist ein umfassendes Zeichensatzsystem, das jedem Zeichen eine spezifische und eindeutige Nummer zuweist, unabhängig vom Plattform, Programm und Sprache. Unicode ist auch das, was uns am nächsten an einer universellen Alphabet kommt, obwohl es nicht ein Alphabet ist, sondern ein System aus numerischen Mapping-Plänen.

Obwohl Unicode die Standard-Zeichensatz für Web-Dokumente ist, können Entwickler frei andere Zeichensätze wählen, die besser zu ihren Bedürfnissen passen. Zum Beispiel verwenden Websites in den USA und Europa oft die Kodierung ISO-8859-1 (Latin-1), während die nationale Norm in der Volksrepublik China gb2312 ist.

Markieren Sie Dokumente für Semantik, nicht für Stile

Denken Sie daran: Verwenden Sie CSS so weit wie möglich für das Layout. In der Welt der Web-Standard, hat das XHTML-Markup nichts mit der Darstellung zu tun, es betrifft nur die Dokumentstruktur.

Gut strukturierte Dokumente können so viel Semantik wie möglich an Browser übermitteln, egal ob der Browser auf einem Handheld-Computer oder einem modischen Desktop-Grafikbrowser läuft. Gut strukturierte Dokumente können visuelle Semantik an Benutzer übermitteln, selbst in alten Browsern oder in modernen Browsern, in denen der Benutzer CSS deaktiviert hat.

Nicht jeder Standort kann sofort die HTML-Tabelle-Layouts abwerfen. Der Erfinder von CSS, das W3C, hat erst im November 2002 seine eigene Website in ein CSS-Layout umgewandelt. Aber selbst für hartnäckige Normenverfechter ist es nicht immer möglich, Darstellung und Struktur vollständig zu trennen, zumindest nicht in XHTML 1. Aber jetzt können wir einen großen Schritt in diese Richtung unternehmen, indem wir Darstellung und Struktur trennen (oder Daten von Design trennen), selbst gemischte traditionelle Layouts können davon profitieren.

Hier sind einige Tipps, die Ihnen helfen können, durch eine strukturiertere Art des Denkens voranzukommen:

Farben im Gliederung

In der Grammatikschule wurden die meisten von uns gezwungen, Artikel in der Standard Gliederungsform zu schreiben. Jetzt, als Designer, können wir uns so frei von den Einschränkungen der Gliederung befreien und mutig in den Bereich der freien individuellen Ausdrucksfreiheit eintauchen (vielleicht sind unsere Broschüren und Business-Websites noch nicht so einzigartig und persönlich). Aber mindestens werden wir nicht mehr von der Gliederung behindert.

Tatsächlich sollten wir den Inhalt nach HTML strukturiert in organisierte Hierarchien gliedern. In der Zeit, in der Browser CSS nicht unterstützen, konnten wir dies nicht gleichzeitig mit der Bereitstellung eines für den Verkauf verfügbaren Layouts erreichen. Aber heute haben wir die Fähigkeit, unsere Designs ohne Abstriche umzusetzen und gleichzeitig gut strukturierte Dokumente zu liefern.

Wenn Sie Texte kennzeichnen, die für das Netzwerk bestimmt sind, oder wenn Sie bestehende Textdokumente in Webseiten umwandeln, denken Sie bitte an diese Einträge der traditionellen Gliederung.

<h1>Mein Thema</h1>
<p>Einführende Texte</p>
<h2>Zusätzliche Ansicht</h2>
<p>Verwandte Texte</p>

Vermeiden Sie gleichzeitig das Verwenden von abgelehnten HTML-Elementen wie <font> oder unsinnvollen Elementen wie <br />, um nicht existierende logische Strukturen zu simulieren.

Z.B. nicht so tun:

<font size="7">Mein Thema</font><br />
Einführende Texte<br /><br />
<font size="6">Zusätzliche Ansicht</font><br />
Verwandte Texte<br />

Verwenden Sie Elemente nach ihrem Sinn und nicht nach ihrem Aussehen.

Einige von uns sind in eine schlechte Angewohnheit gefallen, h1 zu verwenden, wenn wir nur einen großen Texttext benötigen, oder li, wenn wir vorne einen Punkt benötigen. Wie wir im vorherigen Kapitel besprochen haben, sind Browser immer daran gewöhnt, Designeigenschaften auf HTML-Elemente zu übertragen. Wir sind daran gewöhnt, zu denken, dass h1 groß gedruckte Schrift bedeutet, und li bedeutet Punkte, oder blockquote bedeutet eingerückter Text. Die meisten von uns verwenden strukturierte Elemente, um Darstellungseffekte zu simulieren und HTML durcheinander zu schreiben.

Genauso, wenn ein Designer möchte, dass alle Überschriften die gleiche Schriftgröße haben, wird er alle Überschriften auf h1 setzen, auch wenn das keine strukturierte Semantik hat.

Das ist der Haupttitel, wenn ich den Text nach dem Schema organisiere.
Das ist hiermit kein Haupttitel, aber ich möchte, dass er die gleiche Schriftart wie der obere Titel verwendet, aber ich weiß nicht, wie ich CSS verwenden soll.
Das ist hiermit kein Titel. Aber ich möchte, dass der Text auf der Seite die gleiche Schriftart verwendet, um das zu erreichen, was ich will.
Wenn ich CSS verstehe, kann ich diesen Design erreicht ohne die Struktur des Dokuments zu stören.

Wir müssen unsere kleinen Tricks beiseite legen und sie anstatt ihres Erscheinungsbildes nach semantischen Merkmalen der Elemente verwenden. Tatsächlich kann h1 so aussehen, wie Sie es wünschen. Mit CSS kann h1 ein nicht fett gedrucktes kleines römisches Schriftarten werden, während der p-Text fett und groß gedruckt sein kann, und li kann ohne Punkte sein (oder Sie können PNG, GIF oder JPEG-Bilder von kleinen Katzen, Hunden oder Firmensymbolen verwenden).

Ab heute werden wir CSS verwenden, um das Aussehen der Elemente zu bestimmen. Wir können sogar ihr Aussehen ändern, je nachdem, wo sie auf der Seite oder im Site stehen. CSS kann das Erscheinungsbild vollständig von der Struktur trennen und es Ihnen ermöglichen, alle Elemente nach Ihrem Geschmack zu formatieren.

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

Warum machst du das? Das Ziel ist es, eine markante Optik und ein Gefühl in grafischen Browsern zu erhalten, während die Struktur des Dokuments in Textbrowsern, mobilen Geräten und HTML-eingeschriebenen E-Mails erhalten bleibt.

Wir möchten im Kapitel über XHTML nicht mehr über CSS-Techniken erzählen. Wir möchten nur zeigen, dass Dokumentstruktur und visuelle Darstellung zwei vollkommen verschiedene Dinge sind und strukturierte Elemente sollten verwendet werden, um Text zu transformieren, nicht um Anzeigeeffekte zu erzwingen.

Verwende strukturierte Elemente anstatt sinnfreier Müll

Da wir vergessen haben oder nicht wissen, dass der Zweck von HTML und XHTML darin besteht, strukturierte Bedeutung zu vermitteln, verwenden viele HTML-Kritiker diese Tags, um Listen einzufügen:

Projekt eins<br />
Projekt zwei<br />
Projekt drei<br />

Überlege dir, geordnete oder unordentliche Listen anstatt dessen zu verwenden:

<ul>
<li>Projekt eins</li>
<li>Projekt zwei</li>
<li>Projekt drei</li>
</ul>

"Aber li gibt mir einen Punkt, und ich brauche keinen Punkt!" Vielleicht wirst du so sagen. Nach dem obigen Kapitel macht CSS keine Annahmen über das erwartete Aussehen von Elementen. Es wartet darauf, dass du ihm sagst, wie du die Elemente sehen möchtest. Das Schließen des Punktes ist eine der grundlegenden Fähigkeiten von CSS. Es hat die Fähigkeit, Listen so aussehen zu lassen, als wären sie normaler Text, oder sie so aussehen zu lassen, als wären sie ein grafischer Navigationsleiste mit vollständigen umgekehrten Effekten.

Verwende daher Listelemente, um Listen zu kennzeichnen. Ähnlich wie, verwende strong anstelle von b und em anstelle von i, usw. In den Standardkonfigurationen der meisten Desktop-Browser ist die Anzeige von strong und b identisch, sowie von em und i, und du kannst gleichzeitig die erwartete visuelle Wirkung erzeugen, ohne die Dokumentstruktur zu beeinträchtigen.

Obwohl CSS keine Annahmen über die Anzeige von Elementen macht, machen Browser viele Annahmen und wir haben noch keinen Browser gefunden, der strong anders als fett anzeigt (außer wenn der Designer CSS verwendet, um eine andere Anzeige zu veranlassen). Falls du befürchtest, dass ein unbekannter Browser strong nicht fett anzeigt, kannst du so eine CSS-Regel schreiben:

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

Visuelle Elemente und Struktur

Web-Standard erfordert nicht nur, welche Technologien wir verwenden, sondern auch, wie wir diese Technologien verwenden. Die Verwendung von XHTML zur Erstellung von Markups und die Verwendung von CSS zur Verarbeitung eines Teils oder ganzer Layouts macht die Website nicht unbedingt benutzerfreundlicher und leichter, und spart möglicherweise nicht so viel Bandbreite. Wie wir in den frühen Technologien verwendet haben, können XHTML und CSS auch falsch und missbraucht werden. Langsame XHTML und lange HTML verschwenden die Bandbreite und Zeit der Benutzer. Langsame und übertriebene CSS können das Darstellungscodes von HTML nicht vollständig ersetzen; das ist nur ein schlechter Ersatz für ein schlechtes Ding.