Einführung in semantische XHTML-Tags

Einführung in semantische XHTML-Tags
Der erste Punkt ist, dass Menschen die Semantik von Inhalten durch visuelle Unterteilung beurteilen können, während Suchmaschinen nur Code sehen. Suchmaschinen können die Semantik von Inhalten nur über Tags ermitteln. Früher habe ich Suchmaschinen nicht viel Aufmerksamkeit geschenkt, aber jetzt merke ich langsam etwas darüber, denn ein großer Teil des Seitenverkehrs kommt von Suchmaschinen. Um die Seite so suchmaschinenfreundlich wie möglich zu gestalten, müssen wir die Tags so semantisch wie möglich gestalten.

In der Vergangenheit dachte ich aufgrund meiner oberflächlichen Kenntnisse der Webentwicklung, dass man zum Schreiben einer guten, standardkonformen Seite nur Struktur und Präsentation trennen und keine Tags wie Tabelle und Schriftart verwenden müsse. Was die Verwendung von Divs auf der gesamten Seite angeht, dachte ich, dass es kein Problem darstellt, da CSS sehr leistungsfähig ist. Allerdings haben alle Tags ihre eigene Semantik. Die Semantik einiger Tags ist unten aufgeführt:

div-Semantik: Division (Trennung)

Span-Semantik: Span (Bereich)

ol Semantik: Sortierte Liste

ul-Semantik: Ungeordnete Liste (ungeordnete Liste)

li-Semantik: Listenelement

…………

Wenn Sie die Tag-Semantik und Standardstile ignorieren und div für alle Tags verwenden, können Sie tatsächlich Seiten mit guten visuellen Effekten schreiben, solange Sie CSS flexibel verwenden. In diesem Fall werden zwar die visuellen Anforderungen erfüllt, die gesamte Seite weist jedoch keinerlei Semantik auf und kann von Suchmaschinen dennoch nicht verstanden werden. Denken Sie also daran:

Der Schlüssel liegt in der Struktur (HTML), und der Stil (CSS) wird verwendet, um die Struktur zu ändern. Daher müssen Sie zuerst das HTML festlegen, die Tags bestimmen und dann das entsprechende CSS auswählen.

Im Allgemeinen verfügen alle Tags über einen Standardstil. Eine einfache Möglichkeit, zu beurteilen, ob die Semantik eines Webseiten-Tags gut ist, besteht darin, den Stil zu entfernen und zu prüfen, ob die Struktur der Webseite gut organisiert und geordnet ist und ob sie noch lesbar ist.

Darüber hinaus ist das h-Tag erwähnenswert. Die Semantik des h-Tags ist Titel, und Suchmaschinen reagieren sensibler auf dieses Tag, insbesondere auf h1 und h2. Für eine semantisch einwandfreie Seite sollten die h-Tags vollständig, ordentlich und ohne Lücken sein. Mit anderen Worten müssen wir h1, h2, h3, h4 folgendermaßen nach unten drücken, anstatt h1, h3, h4 und h2 auslassen. Für eine gut strukturierte Webseite kann das h-Tag die Gliederung einer Webseite organisieren.

<<:  Eine kurze Einführung in MySQL InnoDB ReplicaSet

>>:  Zusammenfassung der Methode von React zum Erstellen von Komponenten

Artikel empfehlen

CentOS 6.5 i386 Installation MySQL 5.7.18 ausführliches Tutorial

Die meisten Leute kompilieren MySQL und legen es ...

Detaillierte Erläuterung des Falls des JavaScript-Upload-Dateilimitparameters

Projektszenario: 1. Einschränkungen beim Hochlade...

Detaillierte Erklärung der Lösung für das zu langsame Docker-Compose

Es gibt nur eine Lösung: die Quelle ändern! Die Q...

So vergessen Sie das Root-Passwort in Mysql8.0.13 unter Windows 10

1. Stoppen Sie zuerst den MySQL-Dienst Öffnen Sie...

Drei gängige Stilselektoren in HTML-CSS

1: Tag-Selektor Der Tag-Selektor wird für alle Ta...

Der Unterschied zwischen MySQL-Datenbankhost 127.0.0.1 und localhost

Viele meiner Freunde haben möglicherweise ein Pro...

CSS zum Erzielen eines Animationseffekts der Tik Tok-Abonnementschaltfläche

Ich habe mir vor einiger Zeit Tik Tok angesehen u...

Grafisches Tutorial zur Installation von JDK1.8 unter CentOS7.4

Schritte zur Linux-Installation von JDK1.8 1. Übe...

Detaillierte Beschreibung allgemeiner Ereignisse und Methoden von HTML-Text

Veranstaltungsbeschreibung onactivate: Wird ausgel...

Tipps zum Implementieren mehrerer Rahmen in CSS

1. Mehrere Grenzen[1] Hintergrund: Box-Shadow, Um...

So konfigurieren Sie nginx+php+mysql in Docker

Verstehen Sie zunächst eine Methode: Aufrufen ein...

Eine kurze Diskussion über JavaScript-Drosselung und Anti-Shake

Inhaltsverzeichnis Drosselung und Anti-Shake Konz...

43 Webdesign-Fehler, auf die Webdesigner achten sollten

Dies ist ein Artikel über die Benutzerfreundlichk...

So erstellen Sie einen pptpd-Dienst in Alibaba Cloud Ubuntu 16.04

1. Um ein PPTP-VPN aufzubauen, müssen Sie Port 17...