Auszeichnungssprache - Titel

Auszeichnungssprache - Titel
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“ von 123WORDPRESS.COM zurückzukehren.
Zurück: Kapitel 1 Liste <br />Originalquelle
Standardisierte Designlösungen – Auszeichnungssprachen und Stilhandbücher
Lösungen für Webstandards Das Markup- und Style-Handbuch
Teil 1: Machen Sie sich mit dem Markup vertraut
Kapitel 2 Titel
Überblick:
Nicht nur, dass alle Webseiten Titel benötigen, sie können bei korrekter Auszeichnung auch viel zum Design und zur Benutzerfreundlichkeit einer Webseite beitragen.
Was das Erscheinungsbild betrifft, ist der Titel einer Webseite normalerweise in einer größeren Schriftgröße gehalten und kann eine andere Farbe oder Schriftart als der Hauptteil des Textes haben. Der Zweck des Titels besteht darin, „das im folgenden Abschnitt behandelte Thema kurz zu beschreiben“, wie vom W3C beschrieben – einen Überblick über die verschiedenen Absätze innerhalb der Webseite zu geben.
Wie erstellen Sie einen Seitentitel, der die zu präsentierenden Informationen optimal nutzt? In diesem Abschnitt sehen wir uns mehrere gängige Ansätze zur Titelerstellung an. Wir versuchen, den für Sie hilfreichsten zu finden, und verwenden dann einige CSS-Tipps und -Tricks, um den besten Ansatz zu verfeinern.
Wie erstellt man am besten einen Dokumenttitel?
Bevor wir diese Frage beantworten, gehen wir davon aus, dass wir den Titel oben im Dokument platzieren möchten. Sehen wir uns drei Möglichkeiten an, um einen ähnlichen Effekt zu erzielen.
Methode A: Ist das sinnvoll?
<span class="heading">Super cooler Seitentitel</span>
Obwohl das <span>-Tag in manchen Situationen praktisch ist, ist es für Seitentitel nicht sehr aussagekräftig. Der einzige Vorteil dieser Methode besteht darin, dass wir einen CSS-Stil für die Überschriftenklasse angeben können, damit der Text wie ein Titel aussieht.
.Überschrift {
Schriftgröße: 24px;
Schriftstärke: fett;
Farbe: blau;
}
Jetzt werden alle mit der Überschriftenklasse markierten Überschriften größer, fetter und blauer. Toll, oder? Aber was passiert, wenn jemand diese Seite mit einem Browser besucht, der kein CSS unterstützt?
Was passiert beispielsweise, wenn wir die CSS-Stile in eine externe Stylesheet-Datei einfügen, die von älteren Browsern nicht unterstützt wird – oder was passiert, wenn ein Screenreader die Seite einem Benutzer mit Behinderung vorliest? Benutzer, die die Seite auf diese Weise aufrufen, sehen (oder hören) den Unterschied zwischen den Überschriften und dem Fließtext nicht.
Die Annotation-Methode class="heading" beschreibt kurz die Bedeutung des Tag-Inhalts, aber <span> ist nur ein Allzweckcontainer, der nur den Standardanzeigestil der meisten Browser ändert.
Wenn Suchmaschinen diese Seite crawlen, überspringen sie das <span>-Tag, als wäre es nicht vorhanden, und erhöhen nicht das Gewicht der möglicherweise darin enthaltenen Schlüsselwörter. Weitere Informationen zur Beziehung zwischen Suchmaschinen und Seitentiteln finden Sie weiter unten in diesem Abschnitt.
Da das <span>-Tag ein Inline-Element ist, müssen wir den Inhalt von Methode A normalerweise in einen anderen Container auf Blockebene wie <p> oder <div> einfügen, damit er eine eigene Zeile einnimmt. Dadurch wird viel unnötiger Code generiert. Selbst wenn Sie den erforderlichen Container hinzufügen, zeigen Browser, die CSS nicht unterstützen, den Text weiterhin in seiner ursprünglichen Form an, sodass Benutzer keinen Unterschied zwischen dem Titel und dem Textkörper erkennen können.
Vorherige Seite 1 2 3 4 5 Nächste Seite Mehr lesen

<<:  Grundlagen und Beispiele zur TypeScript-Aufzählung

>>:  Automatisches Laden des Kernelmodul-Overlayfs-Vorgangs beim CentOS-Start

Artikel empfehlen

Einige Frontend-Grundlagen (HTML, CSS) aus der Praxis

1. Die Div-CSS-Maushandform ist Cursor:Zeiger; 2. ...

Installation und Daemon-Konfiguration von Redis unter Windows und Linux

# Installations-Daemon-Konfiguration für Redis un...

Detaillierte Erläuterung der vier Transaktionsisolationsebenen in MySQL

Die Testumgebung dieses Experiments: Windows 10+c...

So konfigurieren Sie NAS unter Windows Server 2019

Vorwort Dieses Tutorial installiert die neuste Ve...

Vue-Plugin-Fehler: Auf dieser Seite wurde Vue.js erkannt. Problem gelöst

Das Vue-Plugin meldet einen Fehler: Vue.js wurde ...

Vue erhält Token zur Implementierung des Beispielcodes für die Token-Anmeldung

Die Idee hinter der Verwendung eines Tokens zur L...

Welche Wissenssysteme brauchen Webdesigner?

Produktdesigner sind mit komplexen und großen Fert...

So begrenzen Sie die Anzahl der Datensätze in einer Tabelle in MySQL

Inhaltsverzeichnis 1. Lösung auslösen 2. Partitio...

Tiefgreifendes Verständnis der angegebenen IE-Browser-Rendering-Methode

<meta http-equiv="X-UA-kompatibel" c...

WeChat Mini-Programm: Position des Videofeuers zufällig

In diesem Artikel wird der spezifische Code zur z...

So deaktivieren Sie Anzeigen in der Terminal-Willkommensnachricht in Ubuntu Server

Wenn Sie die neueste Ubuntu Server-Version verwen...

Interpretation des Moduls zum Lastenausgleich mit nginx

Inhaltsverzeichnis Zwei Module zur Verwendung von...

Probleme bei der Ausführungsreihenfolge von AND und OR in SQL-Anweisungen

Frage Beim Schreiben von Datenbank-SQL ist mir ge...

So konvertieren Sie MySQL-Bin-Log-Protokolldateien in SQL-Dateien

mysqlbinlog-Version anzeigen mysqlbinlog -V [--ve...

So beheben Sie den abnormalen Fehler ERROR: 2002 in MySQL

Kürzlich ist beim Starten von MySQL ein Fehler au...