Semantisches Verständnis von HTML

1. Was ist HTML-Semantik?

Basierend auf der Struktur des Inhalts (Inhaltssemantik) erleichtert die Auswahl geeigneter Tags (Codesemantik) Entwicklern das Lesen und Schreiben von eleganterem Code, während Browser-Crawler und Maschinen ihn gut analysieren können.

2. Warum Semantik?

• Um eine gute Inhaltsstruktur und Codestruktur auf der Seite ohne CSS darzustellen: um beim nackten Betrieb gut auszusehen
• Benutzererfahrung: Titel und Alt werden beispielsweise verwendet, um Substantive oder Bildinformationen zu erklären, und die flexible Verwendung von Label-Tags;
Förderlich für SEO: Eine gute Kommunikation mit Suchmaschinen hilft Crawlern, effektivere Informationen zu crawlen: Crawler verlassen sich auf Tags, um den Kontext und die Gewichtung jedes Schlüsselworts zu bestimmen
• Komfortables Parsen für andere Geräte (z. B. Screenreader, Blindreader, mobile Geräte), um Webseiten auf sinnvolle Weise darzustellen
• Es ist einfacher für die Teamentwicklung und -wartung und die Semantik ist besser lesbar. Dies ist ein wichtiger Trend im nächsten Schritt von Webseiten, die alle diesem Standard folgen, was die Differenzierung verringern kann.

3. Worauf sollten Sie beim Schreiben von HTML-Code achten?

Verwenden Sie so wenige unsemantische Tags div und span wie möglich

Wenn die Semantik nicht offensichtlich ist, können Sie entweder div oder p verwenden. Versuchen Sie, p zu verwenden, da p standardmäßig einen oberen und unteren Abstand hat, was für die Kompatibilität mit speziellen Terminals von Vorteil ist
Verwenden Sie keine reinen Stil-Tags wie b, Schriftart, u usw., sondern verwenden Sie stattdessen CSS-Einstellungen.
Text, der hervorgehoben werden muss, kann in die Tags strong oder em eingefügt werden (Browser-Standardstile, wenn Sie sie mit CSS angeben können, verwenden Sie sie nicht. Der Standardstil von strong ist fett (verwenden Sie nicht b). , und em ist kursiv (verwenden Sie nicht i );
Wenn Sie eine Tabelle verwenden, verwenden Sie caption für den Titel, thehead für die Kopfzeile, tbody für den Hauptteil und tfoot für das Ende. Tabellenüberschriften sollten von gewöhnlichen Zellen unterschieden werden. Verwenden Sie th für Tabellenüberschriften und td für Zellen
• Die Formularfelder sollten mit Fieldset-Tags umschlossen sein und das Legenden-Tag sollte verwendet werden, um den Zweck des Formulars zu beschreiben
• Der Beschreibungstext, der jedem Eingabe-Tag entspricht, muss das Label-Tag verwenden. Durch Festlegen des ID-Attributs für die Eingabe und Festlegen von for=someld im Label-Tag wird der Beschreibungstext mit der entsprechenden Eingabe verknüpft.
• 4. Welche neuen semantischen Tags zu HTML5 hinzugefügt werden, beschreiben Sie bitte im Detail.

　Sehen Sie sich den Blog dieses Front-End-Masters an.