Was ist HTML-Semantik? Vorteile der HTML-Semantik (Zusammenfassung)

In diesem Kapitel erfahren Sie, was HTML-Semantik ist. Die Vorteile der HTML-Semantik (Zusammenfassung) haben einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Was ist HTML-Semantik?

Im Grunde dreht es sich um mehrere Haupt-Tags, wie Titel (H1~H6), Liste (li), Hervorhebung (starkes Geviert) usw.

Demnach Neben der Strukturierung 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.

Was sind die Vorteile der semantischen HTML-Struktur?

Wir wissen, dass HTML5 neue Tags wie

hat. HTML entwickelt sich in Richtung einer robusteren und semantischeren HTML-Struktur ist nicht so weit fortgeschritten wie HTML5, was auch einer der Gründe für den Tod von xhtml2 ist. Dies zeigt auch, dass die semantische HTML-Struktur der Entwicklungstrend von HTML ist.

1. Um eine gute Inhaltsstruktur und Codestruktur auf der Seite ohne CSS darzustellen: um beim nackten Laufen gut auszusehen

2. Benutzererfahrung: Titel und Alt werden beispielsweise verwendet, um Substantive oder Bildinformationen zu erklären, und die flexible Verwendung von Label-Tags ist für SEO von Vorteil: Stellen Sie eine gute Kommunikation mit Suchmaschinen her , was Crawlern hilft, effektivere Informationen zu erfassen: Crawler verlassen sich auf Tags, um den Kontext und die Gewichtung jedes Schlüsselworts zu bestimmen.

3. erleichtert das Parsen durch andere Geräte (z. B. Screenreader, Blindreader). , mobile Geräte) Das sinnvolle Rendern von Webseiten erleichtert die Teamentwicklung und -pflege und macht die Semantik besser lesbar. Dies ist ein wichtiger Trend im nächsten Schritt von Webseiten die den W3C-Standards folgen. Dieser Standard kann die Differenzierung verringern.

Worauf sollten Sie beim Schreiben von HTML-Code achten?

Verwenden Sie so wenig wie möglich die unsemantischen Tags div und span. Wenn die Semantik nicht offensichtlich ist, gilt Folgendes: Sie können div oder p verwenden. Versuchen Sie, p zu verwenden, da p standardmäßig einen oberen und unteren Abstand hat, was der Kompatibilität mit speziellen Terminals zugute kommt.

1. Verwenden Sie keine reinen Stil-Tags. B. b, Schriftart, u usw., verwenden Sie stattdessen CSS-Einstellungen.

2. Text, der hervorgehoben werden muss, kann in das Strong- oder Em-Tag eingefügt werden (Browser-Standardstil, wenn Sie ihn mit CSS angeben können, benötigen Sie diese nicht). Der Stil von „strong“ ist fett (verwenden Sie kein b), „em“ ist kursiv (ohne i); tbody für den Hauptteil und tfoot für den Schwanz. Tabellenüberschriften sollten von gewöhnlichen Zellen unterschieden werden. Verwenden Sie th für Tabellenüberschriften und td für Zellen.

3. Die Formularfelder sollten mit Fieldset-Tags umschlossen werden und zur Beschreibung sollte das Legenden-Tag verwendet werden der Zweck des Formulars;

4. Der Beschreibungstext, der jedem Eingabeetikett entspricht, muss das Etikettenetikett verwenden und das ID-Attribut für die Eingabe festlegen und for=someld im Etikett festlegen Label, der Beschreibungstext und die entsprechende Eingabe Relate.

HTML5 fügt neue semantische Tags hinzu
Eine der Neuerungen von HTML 5: Abschnitt „Semantische Tags“ Element-Tags.

7. Bevor HTML 5 herauskam, verwendeten wir Divs zur Darstellung von Seitenkapiteln, aber diese Divs hatten keine praktische Bedeutung. (Auch wenn wir die CSS-Stil-ID und -Klasse verwenden, um die Bedeutung dieses Inhalts zu beschreiben). Bei diesen Tags handelt es sich lediglich um Anweisungen, die wir dem Browser geben, um bestimmte Teile einer Webseite zu definieren. Aber jetzt sind diese Tags, die vorher keine „Bedeutung“ hatten, aufgrund des Aufkommens von HTML5 verschwunden. Dies ist, was wir normalerweise „Semantik“ nennen.

Sehen Sie sich das Bild unten an, ohne div-Tags für das Layout zu verwenden

W3C definiert diese semantischen Tags, die unsere Designziele manchmal nicht vollständig erfüllen können, genau wie das Formulieren Es ist unmöglich, dass ein Gesetz 100 Jahre lang unverändert bleibt, ganz zu schweigen davon, dass es erst vor nicht allzu langer Zeit erlassen wurde. Es ist unmöglich, dass sich diese semantischen Bezeichnungen an alle Designziele anpassen. Es ist nur bis zu einem gewissen Grad „universell“. Unser Ziel ist es, dem Crawler die wichtigen Dinge verständlich zu machen.

Fazit: Sie können div nicht nur wegen des HTML 5-Tags aufgeben. Alles hat seine einzigartige Rolle.

Knotenelement-Tags können unterteilt werden in: Abschnittselement-Tags, Textelement-Tags und Gruppierungselement-Tags, je nachdem, wo sie verwendet werden. Wir werden die neu hinzugefügten semantischen Tags in HTML5 separat erläutern und eine Zusammenfassung ihrer Verwendung geben .

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>

Das obige ist der detaillierte Inhalt vonWas ist HTML-Semantik? Vorteile der HTML-Semantik (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!