Auszeichnungssprache – Titel_HTML/Xhtml_Webseitenproduktion

Standardisierte Designlösungen – Markup Language and Style Handbook
Web Standards Solutions Das Markup and Style Handbook
Teil 1: Machen Sie sich mit Markup vertraut, beginnend mit der Markup-Syntax
Kapitel 2 Titel
Übersicht:
Alle Webseiten benötigen nicht nur Titel, sondern können bei korrekter Markierung auch zum Webdesign und zur Benutzerfreundlichkeit beitragen. Ganz schön Wenige.
Was das Erscheinungsbild angeht, verwendet der Titel einer Webseite normalerweise eine größere Schriftgröße und kann eine andere Farbe oder Schriftart als der Haupttext verwenden. Die Funktion des Titels besteht darin, „das besprochene Thema kurz zu beschreiben“. In den folgenden Kapiteln beschreibt das W3C es so: Eine Zusammenfassung jedes Absatzes auf einer Webseite anzeigen.
Wie erstelle ich einen Seitentitel, um die Informationen, die wir anzeigen möchten, am effektivsten zu nutzen? In diesem Kapitel besprechen wir Wir werden mehrere häufig verwendete Methoden zur Titelverarbeitung untersuchen und versuchen, eine davon zu finden, die für uns am hilfreichsten ist. Anschließend werden wir einige CSS-Tipps und -Tricks verwenden, um die beste Methode zu finden So erstellen Sie einen Dokumenttitel: Was ist ein guter Weg?
Bevor wir diese Frage beantworten, gehen wir davon aus, dass wir jetzt den Titel oben im Dokument platzieren, und schauen wir uns drei Möglichkeiten an, um einen ähnlichen Effekt zu erzielen.
Methode A: Macht es Sinn?
Super Cool Page Title
Obwohl die -Tag wird in einigen Fällen verwendet. Es ist ein praktisches Tag, aber für den Seitentitel bedeutet es nicht viel. Der einzige Vorteil dieser Methode besteht darin, dass wir einen CSS-Stil für die Überschriftenklasse angeben können Text sieht aus wie ein Titel.
.heading {
Schriftgröße: 24px; Schriftstärke: fett;
Farbe: blau;
}

Jetzt werden alle mit der Überschrift „Klasse“ gekennzeichneten Titel größer, dicker und blauer, was aber passiert, wenn jemand mit einem Browser auf diese Seite zugreift, der kein CSS unterstützt. Wenn wir beispielsweise Fügen Sie den CSS-Stil in einer externen Stylesheet-Datei ein, die der Browser nicht unterstützt – oder was passiert, wenn ein Bildschirmleser die Seite für Benutzer mit Behinderungen vorliest? Benutzer, die auf diese Weise auf die Seite zugreifen, können sie nicht sehen (hören). ) Der Unterschied besteht darin, dass Annotationsmethoden wie
class="heading" nur die Bedeutung des Tag-Inhalts beschreiben, aber Ändern Sie den Standardanzeigestil.
Wenn die Suchmaschine diese Seite crawlt, überspringt sie das Tag , als ob es nicht vorhanden wäre, und erhöht nicht die Gewichtung der darin enthaltenen Schlüsselwörter. Dies wird später in diesem Kapitel näher erläutert.
Da es sich bei dem -Tag um ein Inline-Element handelt, müssen wir den Inhalt größtenteils in ein anderes einfügen Container auf Blockebene, zum Beispiel

, damit er eine eigene Zeile einnimmt. Selbst wenn Sie die erforderlichen Container hinzufügen, wird dies nicht unterstützt CSS zeigt den Text weiterhin in seiner ursprünglichen Form an, damit Benutzer ihn sehen können. Es gibt keinen Unterschied zwischen dem Titel und dem Text.
                                                                        #p#

Methode B: Kombination von P und B

Super cooler Seitentitel

Methode B verwendet das Absatz-Tag, das uns die gewünschte Elementanzeige auf Blockebene ermöglicht, und das -Tag macht den Text fett (in den meisten Browsern) – aber wenn wir wichtige Titel auf diese Weise markieren , wir haben immer noch mit dem gleichen Mangel an semantischen Ergebnissen zu kämpfen Im Gegensatz zu Methode A wird der Text in den meisten Browsern immer noch fett dargestellt, auch wenn ihm die Definition des CSS-Stils fehlt Wie beim -Tag erhöhen Suchmaschinen jedoch nicht die Gewichtung des Schlüsselworts für fetten Text innerhalb des Absatzes.

Es ist schwierig, Stile hinzuzufügen.
p- und b-Tags verhindern, dass wir diesem Titel einen anderen Stil verleihen als anderen Absätzen. Vielleicht möchten wir den Titel auf einzigartige Weise hervorheben und dem Seiteninhalt Definition und Struktur hinzufügen – aber mit After verwenden wir diese Methode, um ihn fett erscheinen zu lassen , wir haben keine Möglichkeit, diese Dinge zu tun.
Methode C: Stil und Substanz

Super Cool Page Title
Haha , hier kommt unser guter Freund: Titel-Tags gibt es von Anfang an, aber viele Webdesigner nutzen sie immer noch nicht konsequent. Bei richtiger Verwendung können Titel-Tags einen Ankerpunkt für den Seiteninhalt bieten Flexible, indizierbare und stilveränderbare Struktur. Aus Sicht der Tags selbst werden Sie von ihrer Einfachheit begeistert sein. Man kann sogar sagen, dass diese Methode einige Bytes einsparen kann die ersten beiden Methoden, die ignoriert werden können, aber jedes kleinere Byte ist eine Änderung.

stellen jeweils sechs Überschriftenebenen dar, von der wichtigsten

bis zur unwichtigsten; sie sind selbst Elemente auf Blockebene und können ohne zusätzlichen Container abgeschlossen werden . Eine Zeile, einfach und effizient – ​​das beste Werkzeug für diesen Job.
Einfach zu definierende Stile
Weil das

-Tag eine eindeutige Bedeutung hat, im Gegensatz zu Das

-Tag wird im Text mehrfach verwendet, sodass wir ihm mithilfe von CSS verschiedene Stile hinzufügen können (wir werden es in diesem Kapitel unter „Weitere Techniken“ ausführlich besprechen).
Noch wichtiger ist, auch ohne Wenn Sie Stildefinitionen hinzufügen, sieht der Titel-Tag eindeutig wie ein Titel aus. Der Browser verwendet große Schriftarten und Fettschrift, um den Inhalt von

darzustellen. Auch wenn alle Stildefinitionen von der Seite entfernt werden, können Sie die Struktur weiterhin sehen des Dokuments, da der richtige Titel-Tag die Bedeutung des Inhalts beschreibt, nicht die Präsentationsmethode (Abbildung 2-1)

Abbildung 2-1: Verwendung von Titel-Tags nach der Trennung von den Stilen Seite Inhalt
Screenreader, PDAs, Mobiltelefone und andere visuelle und nicht-visuelle Browser können den Inhalt des Title-Tags ebenfalls erkennen und korrekt verarbeiten und so seine Bedeutung gegenüber anderen Inhalten auf der Seite hervorheben die CSS nicht unterstützen (oder nicht unterstützen können), denken nicht, dass es etwas Besonderes ist.
Ärgerliche Standardstile
In der Geschichte des Webdesigns vermeiden Designer einfach die Verwendung von Titel-Tags denn ohne Stil sehen Titel-Tags wie Monster aus, und einige von ihnen vermeiden die Verwendung von

, oder verwenden Sie stattdessen eine kleinere Schriftgröße und eine höhere Beschriftung Titel-Tag.
Es gibt jedoch einen wichtigen Punkt, der hervorgehoben werden muss, indem wir den Stil dieser Titel-Tags leicht an unsere eigenen Vorlieben anpassen. Beispielsweise muss

Etwas, das die Hälfte des Bildschirms einnimmt. Später werde ich zeigen, wie Sie einfach CSS-Stile verwenden, um Titel-Tags zu definieren, um Ihre Angst vor

zu überwinden.
Freundlich für Suchmaschinen
Das ist der größte Vorteil von Suchmaschinen. Fettgedruckte Schriftarten in -Tags bedeuten für Suchmaschinen nicht viel viel Zeit, aber es kann Suchmaschinen dabei helfen, Ihre Seite zu indizieren und Benutzern das Auffinden Ihrer Seite zu erleichtern.
Suchmaschinenroboter legen großen Wert auf den Inhalt im Titel-Tag. Vielleicht möchten Sie ein paar Schlüsselwörter anhäufen Nachdem sie die Tags