In früheren Tutorials im Web Page Teaching Network wurde mehrfach betont, dass man Webseiten-HTML-Dateien semantisch gestalten muss. Wir sollten die am besten geeigneten HTML- oder XHTML-Tags anhand der Struktur des HTML-Dokuments der Webseite auswählen und nicht anhand ihres Erscheinungsbilds. Verwenden Sie das P-Tag, um einen Absatz zu definieren, anstatt es für einen Zeilenumbrucheffekt zu verwenden. Wir verwenden h1-h6-Tags zum Markieren von Überschriften, anstatt sie zur Erzielung von Textgröße und Fettdruckeffekten zu verwenden.
Für einen Titel können wir beispielsweise h1 verwenden, um ihn zu definieren:
<h1>Schreiben Sie hier den Titeltext des Artikels</h1>
Anstatt es anders zu definieren:
<p style="font-size:16px; font-weight:bold;">Schreiben Sie hier den Titeltext des Artikels</p>
In früheren Artikeln im Web Teaching Network haben wir alle von XHTML1.0 zugelassenen Tags aufgelistet. Wir können auch feststellen, dass wir tatsächlich nur sehr wenige Element-Tags auswählen können. Wir sind uns aber auch klar darüber im Klaren, dass diese verfeinerten Elementmarkierungen auch klarere Bedeutungen haben. Wenn Sie wirklich nicht das richtige Element zum Markieren finden, können Sie die generischen div- und span-Tags verwenden.
Die Verwendung von div- und span-Tags auf Seiten ist ein neues Problem und wir neigen dazu, sie zu oft zu verwenden. Die notwendige und sinnvolle Verwendung von Divs kann die Struktur des Dokuments erheblich verbessern. Wenn Sie sich Ihr HTML-Dokument ansehen und feststellen, dass es viele Divs und Spans gibt, müssen Sie das Problem aus einer anderen Perspektive betrachten. Liegt ein Missbrauch vor? Gibt es bessere Marker als Ersatz? Wenn h1 den markierten Inhalt besser darstellen kann, müssen Sie p oder span aufgeben, um ihn zu definieren.
Vielleicht handelt es sich hier um ein Paar Widersprüche, und es fällt uns schwer, sie richtig zu nutzen, oder vielleicht bekommen wir überhaupt keine klare Antwort. Eines muss jedoch geklärt werden: Wir sollten dem Dokument eine klare logische Struktur geben und die Anwendung von Stilen erleichtern. Wir können uns div einfach als einen Container oder einen „Teil“ des Dokuments vorstellen. Wir verwenden zu viele Behälter, was kein kluges Muster ist. Und ein Container, der genau richtig und an einer angemessenen Position angebracht ist, kann dafür sorgen, dass das gesamte Dokument organisiert erscheint.
Der folgende Code ist sinnvoller und effektiver:
| Nachfolgend der zitierte Inhalt: <div id="header"> |