Strukturierung von XHTML 2: Fallstudie: Die strukturierten Markups von W3school

Unter keinen Umständen überspringe diesen Abschnitt. Das Lesen dieses Kapitels verbessert deine Fähigkeiten, macht deine Webseite schlanker und gibt dir eine klarere Vorstellung von den Unterschieden zwischen Markierung und Design. Die in diesem Kapitel vorgestellten Ideen sind leicht zu erlernen, können jedoch die Leistung der Website erheblich verbessern und die Benutzerfreundlichkeit des Designs, der Erstellung und des Updates der Webseite erhöhen.

In diesem Abschnitt lernst du, wie man logische und komprimierte Markierungen schreibt, die dir die Möglichkeit geben, den Bandbreitenverkehr um etwa 50% zu reduzieren, während du die Last und den Druck auf den Server verringerst und die Ladezeit der Website reduzierst. Durch das Entfernen jener Elemente und das Ändern jener schlechten Gewohnheiten, die keinen Nutzen haben, können wir das genannte Ziel erreichen.

Diese schlechten Gewohnheiten quälen viele Sites im Netz, insbesondere diejenigen, die CSS-Code mit einer hauptsächlich tabellenbasierten Layout kombinieren. Diese Methode ist umständlich und ineffizient, selbst für Designer, die in anderen Bereichen erfahren sind. Gleichzeitig ist die Wahrscheinlichkeit dieses Problems gleich, sei es für Sites, die Code von Hand schreiben, oder für Sites, die mit sichtbaren Editortools wie Dreamweaver und GoLive erstellt werden.

Dieser Abschnitt stellt diese häufigen Fehler vor, damit Sie sie erkennen und verhindern können und lernen, wie man sie korrigiert. Wir erläutern das einzigartige Identifikatorattribut (id) im Detail und zeigen, wie es Ihnen ermöglicht, äußerst komprimierte XHTML-Code zu schreiben, ob Sie eine gemischte Layout oder eine reine CSS-Layout erstellen.

Muss jeder Element strukturiert sein?

Wie wir im vorherigen Abschnitt erwähnt haben, kann jeder Element strukturiert werden, CSS kann eine geordnete oder unordnete Liste in eine vollständige Navigationleiste umwandeln, die auch umgekehrte Schaltflächeneffekte hat. Der Inhalt des Dokuments kann mit gewöhnlichen Elementen markiert werden, die durch spezifische strukturierte Attributmarken angezeigt werden, die ihre semantische Rolle im Website-Design angeben.

Wir haben im Jahr 2006 die erste chinesische Testversion von CodeW3C.com erstellt und haben von Anfang an CSS für die Layout verwendet und XHTML, um das Dokument zu strukturieren. Jeder dieser Elemente ist strukturiert, von Überschriften bis zu Listen und Absätzen. Sie können auf jeder Seite von CodeW3C die umgekehrten Effekte der Startseiten- und der Zweiniveau-Menü-Schaltflächen sehen. Hier ist der XHTML-Code für diese beiden Komponenten:

<div id="header"><h1><a href="/">codew3c Online-Tutorial</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML-Anleitung">HTML-Anleitung</a></li>
<li id="x"><a href="/x.asp" title="XML-Anleitung">XML-Anleitung</a></li>
<li id="b"><a href="/b.asp" title="Browser Skript">Browser Skript</a></li>
<li id="s"><a href="/s.asp" title="Server-Skripte">Server-Skripte</a></li>
<li id="d"><a href="/d.asp" title="dot net-Tutorial">dot net-Tutorial</a></li>
<li id="m"><a href="/m.asp" title="Multimedia-Tutorial">Multimedia-Tutorial</a></li>
<li id="w"><a href="/w.asp" title="Webseitenhandbuch">Webseitenhandbuch</a></li>
</ul>
</div>

div, id und andere Helfer

Wenn es korrekt verwendet wird, kann div ein guter Helfer für strukturierte Markierungen sein, und id ist ein erstaunliches kleines Werkzeug, das Ihnen die Fähigkeit gibt, äußerst komprimierte XHTML zu schreiben und geschickt CSS zu nutzen, sowie komplexe und fein gestaltete Verhaltensweisen durch den Standard-Dokumentobjektmodus (DOM) zum Site hinzuzufügen.

Die W3C definiert div in ihrem neuesten XHTML2-Entwurf wie folgt im XHTML-Strukturmodell:

Das div-Element bietet durch die Kombination mit den Attributen id, class und role eine allgemeine Mechanik, um zusätzlichen Struktur in das Dokument einzufügen. Dieses Element definiert keine Stilmerkmale für den Inhalt. Daher kann der Ersteller durch die Kombination dieses Elements mit Stilentwürfen, xml:lang und Attributen die XHTML an seine eigenen Bedürfnisse und Vorlieben anpassen.

div ist die Abkürzung für division. Division bedeutet Teilung, Bereich, Gruppierung. Zum Beispiel, wenn Sie eine Reihe von Links zusammenfassen, bilden Sie eine Division des Dokuments.

Allgemeine Mechanik zur Strukturierung bestätigen

Jeder, der HTML schreibt, ist mit gängigen Elementen wie Absätzen und Überschriften vertraut, aber einige mögen die div nicht so gut kennen. In der Beschreibung von W3C können wir den Schlüssel zum Verständnis des div-Elements finden, "eine allgemeine Mechanik zur Strukturierung."

Auf der Startseite dieser Website haben wir die Liste derTutorial-Verzeichnisse in einem div verpackt, da das Tutorial-Verzeichnis nicht Teil eines Elements des Textkörpers ist. Der h2-Element markiert den Titel jedes Tutorials, während der ul-Listenelement die detaillierte Liste jedes Tutorials markiert. Aber im größeren und spezifischeren Sinne spielt dieses Tutorial-Verzeichnis eine strukturierte Rolle, nämlich die Rolle eines Zweinavigationskomponenten. Um diese Rolle zu betonen, verwenden wir den id "navsecond", um diesen div zu kennzeichnen.

<div id="navsecond">
<h2>HTML-Tutorial</h2>
<ul>
<li><a href="/html/index.asp" title="HTML-Tutorial">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML-Tutorial">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS-Tutorial">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP-Tutorial">TCP/IP</a></li>
</ul>
<h2>XML-Tutorial</h2>
<ul>
<li><a href="/xml/index.asp" title="XML-Tutorial">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL-Sprache">XSL</a></li>
... ...
... ...
</div>

Sie können jeden Namen verwenden. "Gladys" und "orangebox" entsprechen beide vollständig den Namensregeln von XHTML. Aber semantische oder meta-strukturierte Namen sind am besten (d.h. Namen, die die Funktionen der darin enthaltenen Elemente erklären).

Wenn der Kunde entscheidet, blau zu verwenden, fühlst du dich sehr dumm, wenn du einen Teil der Website "orangebox" (orange Box) nennst. In folgendem Fall fühlst du dich noch dümmer, wenn du nur sechs Monate vor der endgültigen Lieferung anfängst, Stile zu justieren und dich nicht erinnern kannst, dass "Gladys" (weiblicher Vorname) für die Navigationszone, die Seitenleiste oder das Suchfeld steht.

Daher hilft es, id als "menu", "content" oder "searchform" zu kennzeichnen, dich daran zu erinnern. Weiterhin bedeutet Markierung nicht das Design, eine gut strukturierte Seite kann formatiert werden, wie du es wünschst. Das Ergebnis ist, dass du, ob du reinen CSS-Layout oder einen Mischlayout verwendest, die Gewohnheit, mit präsentationsbezogenen Markups zu denken und zu arbeiten, vollständig ablegen wirst.

id Gegenüber class

Die id-Attribut ist in XHTML nicht neu; das class-Attribut oder der div-Element sind ebenfalls nicht neu. Beide können auf die Zeit des HTML zurückverfolgt werden. Das id-Attribut zuweist einem Element einen eindeutigen Namen. Jeder Name kann nur auf der zugewiesenen Seite verwendet werden. (Zum Beispiel, wenn deine Seite einen div mit dem id "content" enthält, dann kann kein anderer div oder andere Elemente diesen Namen verwenden. Im Gegensatz dazu kann das class-Attribut mehrmals in einer Seite verwendet werden (zum Beispiel können fünf Absätze in der Seite den Namen "small" oder "footnote" tragen). Die folgenden Markierungen helfen, die Unterschiede zwischen id und class zu verdeutlichen:

<div id="searchform">Komponenten des Suchformulars werden hier platziert. Dies
eine spezielle Abteilung der Seite.</div>
<div class="blogentry">
   <h2>Heutiger Blog-Beitrag</h2>
   <p>Hier wird der Blog-Inhalt platziert.</p>
   <p>Hier ist ein weiterer Abschnitt des Blog-Inhalts.</p>
   <p>Genau wie es auf einer Seite viele Absätze geben kann, ist dies auch
   Es könnten viele Einträge in einem Blog vorhanden sein. Eine Blog-Seite könnte
   Es gibt mehrere Instanzen der Klasse "blogentry" (oder jede andere
   class).</p>
</div>
<div class="blogentry">
   <h2>Heutiger Blog-Beitrag</h2>
   <p>Tatsächlich sind wir hier inside eines anderen div mit der Klasse
   "blogentry."</p>
   <p>Es vermehren sich wie Kaninchen.</p>
   <p>Wenn auf dieser Seite zehn Blog-Beiträge vorhanden sind, könnte es
   Es gibt auch zehn divs mit der Klasse "blogentry".</p>
</div>

In diesem Beispiel wird das div mit dem Namen searchform verwendet, um den Bereich der Suchformularseite zu verpacken, und das div mit der Klasse "blogentry" wird verwendet, um jeden Artikel-Eingang im Blog zu verpacken. Auf der Seite gibt es nur ein Suchformular, daher haben wir uns entschieden, dieses einzigartige Komponente mit dem id zu kennzeichnen. Der Blog hat jedoch viele Artikel-Eingänge, daher wird die Klasse in diesem Fall verwendet. Ebenso haben Nachrichten-Websites oft mehrere div, deren Klasse "newsitem" oder ähnliches genannt werden kann.

Nicht jede Website benötigt jedoch div. Blog-Websites können einfach h1, H2 und H2-Titel sowie <p>-Absätze verwenden, genauso wie Nachrichten-Websites. Wir zeigen hier das div mit der Klasse blogentry, um Ihnen zu demonstrate, dass Sie in einer HTML-Dokument mehrmals eine Klasse verwenden können, aber nur einmal ein id.

Theorie der Klettbandnotizen

Denken Sie daran, das id-Attribut als Klettbandnotiz zu betrachten, das kann hilfreich sein. Ich habe eine Notiz auf dem Kühlschrank, um mich daran zu erinnern, Milch zu kaufen, und eine andere auf dem Telefon, um mir zu erinnern, einem Kunden anzurufen, der seine Rechnung verspätet gezahlt hat. Und noch eine, die auf dem Aktenordner liegt, um mich daran zu erinnern, dass ich die Rechnungen bis zum 15. dieses Monats bezahlen muss.

id auch zur Markierung spezieller Bereiche in Dokumenten verwenden, um Ihnen zu zeigen, welche Bereiche eine besondere Behandlung benötigen. In diesem Punkt ist das id-Attribut ähnlich wie eine Klettbandnotiz. Um eine so genannte spezielle Behandlung zu ermöglichen, müssen Sie mehrere Regeln in einer Stilebene oder einige Zeilen Code in einer JavaScript-Datei verwenden. Zum Beispiel können Sie in Ihrer CSS-Datei spezifische Regeln haben, die nur für Elemente im div mit dem Namen searchform gelten.

Wenn ein id-Attribut als ein magnetisches Ding (Magnet) in einer Reihe spezifischer CSS-Regeln verwendet wird, wird es als CSS-Selector bezeichnet. Es gibt vieleErstellen von SelectorenMethode, aber id ist sehr einfach zu verwenden und hat viele Anwendungen.

Die Kraft von id

Die id-Eigenschaft ist unglaublich mächtig. Sie hat folgende Fähigkeiten:

  • Als Selector für Style-Sheets, um die Möglichkeit zu schaffen, komprimierte minimierte XHTML zu erstellen.
  • Als Ziel des Hypertexts, um den überholten Attribut name zu ersetzen.
  • Als Methode zur Lokalisierung spezifischer Elemente aus Skripten, die auf DOM basieren.
  • Als Name eines Objektelements.
  • Als ein Werkzeug für allgemeine Verarbeitung (general purpose processing) (im Beispiel von W3C, "wird als Werkzeug zur Domänenidentifikation verwendet, wenn Daten von HTML-Seiten in Datenbanken extrahiert oder HTML-Dokumente in andere Formate konvertiert werden.")

Regeln für id

Der Wert von id muss mit einem Buchstaben oder Unterstrich beginnen; er darf nicht mit einer Zahl beginnen. Obwohl der W3C-Validator diesen Fehler nicht erfassen wird, wird er von XML-Parsern erfasst. Darüber hinaus müssen der Name und der Wert von id, wenn sie mit JavaScript in einem Formular verwendet werden, als gültige JavaScript-Variablen sein. Leerzeichen und Bindestriche, insbesondere Bindestriche, sind nicht erlaubt. Nicht nur das, die Verwendung von Unterstrichen in class- oder id-Namen ist keine gute Idee, da dies durch die Einschränkungen in CSS2.0 (und einigen Browsern) begrenzt ist.

Semantische Markierungen und Zugänglichkeit

Nun haben wir bereits die vielseitig verwendeten XHTML-Elemente (insbesondere div und id) besprochen, lassen Sie uns einen Beispiel aus der Startseite dieser Website betrachten. Zunächst sollten wir uns das Menü an der Kopfzeile ansehen:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML-Anleitung">HTML-Anleitung</a></li>
<li id="x"><a href="/x.asp" title="XML-Anleitung">XML-Anleitung</a></li>
<li id="b"><a href="/b.asp" title="Browser Skript">Browser Skript</a></li>
<li id="s"><a href="/s.asp" title="Server-Skripte">Server-Skripte</a></li>
<li id="d"><a href="/d.asp" title="dot net-Tutorial">dot net-Tutorial</a></li>
<li id="m"><a href="/m.asp" title="Multimedia-Tutorial">Multimedia-Tutorial</a></li>
<li id="w"><a href="/w.asp" title="Webseitenhandbuch">Webseitenhandbuch</a></li>
</ul>
</div>

Wir haben sieben Links, jeder Link wird einem id zugeordnet, um das entsprechende Inhalt zu korrespondieren: Zum Beispiel entspricht der id h dem HTML-Tutorial, usw. Diese Links sind in einem Element namens menu verpackt, das den Zweck dieser Liste kennzeichnet - eine Menüliste, und der äußere div namens navfirst wird verwendet, um diesen Abschnitt (section) in der Seite zu kennzeichnen, um ihn von Elementen wie Hauptinhalt (maincontent), Seitenleiste (sidebar) und Füße (footer) zu unterscheiden.

Die Elemente div und ul bieten eine reale Struktur, d.h. sie kennzeichnen die Funktion des Inhalts (Navigationsleiste) und seine Position im Dokument (Position des Dokumentkopfes auf der Seite). Im Gegensatz dazu kann eine traditionelle Tabellenlayout keine semantischen Informationen über die Daten liefern und verbraucht leicht das Dreifache der Bandbreite.

Bitte beachten Sie, dass diese Markierungen keine img-Tags enthalten und daher keine Eigenschaften wie width, height, background oder border etc. betreffen. Sie verwenden auch keine Tabellenzellen und betreffen daher keine damit verbundenen Eigenschaften. Sie sind sehr sauber und kompakt und bieten alle Informationen, die erforderlich sind, um sie zu verstehen.

Durch die Kombination mit CSS bieten diese Markierungen dem Besucher der Website eine zuverlässige und schnell ladende Anordnung. Gleichzeitig wird die Möglichkeit geschaffen, eine flexiblere und vielfältigere Optik für die Besucher zu schaffen. Und in einem Umfeld ohne CSS können unsere gut strukturierten Markierungen den gesamten Inhalt ohne jeglichen Durcheinander bereitstellen.

A scharfsinniger Leser hat vielleicht bereits bemerkt, dass der Text, der im a-Element enthalten ist, nicht vom Browser angezeigt wird. Dies ist auch auf die perfekte Zusammenarbeit zwischen strukturierten Markern und CSS zurückzuführen, die es uns ermöglicht, durch einige Zeilen CSS-Regeln eine Auslösemechanik zu definieren. Wenn der Benutzer einen grafischen Browser verwendet, sehen sie schöne Navigationsbuttons, und wenn der Benutzer einen reinen Textleser verwendet, erhalten sie auch den gesamten Text. Auf diese Weise ist der Inhalt für alle Benutzer gleich.

Und da die Markups keine Bilder und Tabellenzellen enthalten, kann dieses Navigationskomponente von jeder Seite innerhalb der Website ohne Änderung der Struktur verwendet werden und ihm verschiedene visuelle Effekte verleiht. Kurz gesagt, durch Modularisierung des Codes erhöhen wir die Wiederverwendbarkeit des Codes.