HTML-Tipps, um Ihren Code semantisch zu gestalten

HTML-Semantik scheint ein alltägliches Problem zu sein. Google liefert Ihnen viele Artikel zur Semantik. Warum brauchen wir semantische Tags? Ich denke, dass jedes Tag in HTML seine eigene spezifische Bedeutung hat, und Semantik bedeutet, dass wir geeignete Tags an geeigneten Stellen verwenden, um es für Menschen und Maschinen (unter Maschinen können Browser und Suchmaschinen verstanden werden) einfacher zu machen, es auf einen Blick zu verstehen. Wenn meine Erklärung nicht klar genug ist, googeln Sie sie bitte.

Wie verwendet man das richtige Etikett am richtigen Ort?

Dies ist eine einfache Logik des Verständnisses. Beispielsweise werden die Tags h1~h6 für Titel verwendet; ul für ungeordnete Listen; ol für Listen mit Inhalt; dl zum Definieren von Listen; em- und strong-Tags werden zur Hervorhebung verwendet ... Um es ganz deutlich zu sagen: Jede englische Interpretation eines HTML-Tags bestimmt dessen Semantik (später in diesem Artikel werde ich eine Vergleichstabelle der englischen Interpretationen häufig verwendeter HTML-Tags als Referenz einfügen).

Was ist sowohl für Menschen als auch für Maschinen klar?

Die beste Methode, um zu prüfen, ob eine HTML-Seite semantisch ist, besteht darin, den CSS-Link von der Seite zu entfernen, um zu sehen, ob die Seitenstruktur in Ordnung ist und die Seite noch lesbar ist. Warum können wir das sagen? Jeder weiß, dass Browser Standardstile haben (es wird empfohlen, die Web Developer Tools von Chrome für Chrome zu verwenden).   Plugin oder Firefox Web Developer   Plugin), z. B. h1~h6, gibt es Standardstile für Fett/abnehmende Schriftgröße, obere und untere Ränder, ul, ol, dl haben Standardaufzählungszeichen, strong hat standardmäßig einen Fettstil ... Daher kann ein semantisch wohlgeformtes HTML für dieselbe Seite auch dann noch eine gute Leistung erbringen, wenn das Seiten-CSS entfernt wird.

Ein weiterer Punkt ist, dass eine gute semantische Kodierung suchmaschinenfreundlicher ist. Suchmaschinen-Spider erkennen Ihr CSS nicht, aber sie können HTML-Tags erkennen.

Hier ist ein einfaches Beispiel:

Anhand der einfachen Beispiele oben und des Effektdiagramms ohne CSS-Definition sollten Sie den Unterschied zwischen den beiden verstehen. Wenn Sie HTML5 lernen, sind Kopfzeile, Fußzeile, Seitenleiste, Artikel und andere Elemente allesamt neu hinzugefügte semantische Tags.
Die Semantisierung der HTML-Codierung ist ein Schritt in Richtung hochwertiger Front-End-Entwicklung. Sie bedeutet eine bessere Einhaltung von Webstandards und sorgt auch dafür, dass Ihre Seite nach dem Entfernen des Stils in Ordnung bleibt. Für eine detailliertere Einführung in die Semantisierung können Sie selbst danach googeln oder Adams „The Way to Practice Web Front-end Development“ lesen.   Kapitel 3.
Anhang: Chinesisch-englische Vergleichstabelle der Tag-Semantik

Lassen Sie mich Folgendes hinzufügen

1. Was ist HTML-Semantik?

Durch die Auswahl geeigneter HTML-Tags können Entwickler eleganteren Code einfacher lesen und schreiben und Browser-Crawlern und Maschinen gleichzeitig eine gute Analyse ermöglichen.

2. Warum Semantisierung?

Damit die Seite auch im nackten Zustand, also ohne CSS, gut aussieht, kann die Seite auch eine gute Inhalts- und Codestruktur aufweisen.
Benutzererfahrung: Beispielsweise werden Titel und Alt verwendet, um Substantive oder Bildinformationen zu erklären, und Label-Tags werden flexibel verwendet;
Gut für SEO: Durch die Herstellung einer guten Kommunikation mit Suchmaschinen können Crawler mehr gültige Informationen erfassen: Crawler verlassen sich auf Tags, um den Kontext und die Gewichtung jedes Schlüsselworts zu bestimmen.
Erleichtert die Analyse durch andere Geräte (wie Bildschirmleseprogramme, Leseprogramme für Blinde und Mobilgeräte), um Webseiten auf sinnvolle Weise darzustellen;
Die Erleichterung der Teamentwicklung und -wartung sowie die Verbesserung der Lesbarkeit der Semantik sind wichtige Trends im nächsten Schritt für Webseiten. Teams, die den W3C-Standards folgen, befolgen alle diesen Standard, um die Differenzierung zu verringern.

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

1. Verwenden Sie möglichst wenig semantisch bedeutungslose Tags wie beispielsweise „div“ und „span“.
2. Wenn die Semantik nicht offensichtlich ist und Sie entweder div oder p verwenden können, versuchen Sie, p zu verwenden, da p standardmäßig über einen oberen und unteren Abstand verfügt, was für die Kompatibilität mit speziellen Terminals von Vorteil ist.
3. Verwenden Sie keine reinen Stil-Tags und Tags, die von der Spezifikation nicht unterstützt werden, wie z. B.: b, font, u, center, strike, menu usw. Verwenden Sie stattdessen CSS-Einstellungen.
4. Text, der hervorgehoben werden muss, kann in Strong- oder Em-Tags eingefügt werden (Standardformate des Browsers, verwenden Sie sie nicht, wenn Sie sie mit CSS angeben können). Der Standardformatstil von Strong ist fett (verwenden Sie nicht b) und von Em ist kursiv (verwenden Sie nicht i);
5. Wenn Sie eine Tabelle verwenden, verwenden Sie „caption“ für den Titel, „thead“ für die Kopfzeile, „tbody“ für den Hauptteil und „tfoot“ für die Fußzeile. Die Tabellenüberschrift und die allgemeinen Zellen sollten unterschieden werden; die Tabellenüberschrift verwendet th und die Zellen verwenden td;
6. Die Formularfelder sollten mit Fieldset-Tags umschlossen werden und der Zweck des Formulars sollte mit Legend-Tags erklärt werden;
7. 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 kann der Beschreibungstext der entsprechenden Eingabe zugeordnet werden.
8. Lassen Sie die Attribute bestimmter Tags nicht weg. Das Alt-Attribut des <img>-Tags wird als Ersatztext verwendet, wenn das Bild nicht normal angezeigt werden kann. Das Titelattribut des <a>-Tags kann als erklärende Information verwendet werden und wird als Eingabeaufforderung angezeigt, wenn die Maus darüber bewegt wird.

Eine Interviewfrage von Yahoo:

<P>Was ich schreibe, ist kein HTML, sondern Einsamkeit. <br><br> Ich sagte:<br>Sei nicht besessen von mir, ich bin nur eine Legende

Zu den Problemen gehören:

1. Der Unterschied zwischen den HTML- und XHTML-Standards besteht darin, dass XHTML eine strenge Struktur hat, Tags geschlossen werden müssen, einzelne Tags durch Hinzufügen von / am Ende geschlossen werden müssen und Tags klein geschrieben sein müssen.
2. Trennung von Struktur und Stil. Verwenden Sie nicht <br/>, um den Stil zu steuern. Gestalten Sie die Struktur sinnvoll. Fügen Sie jedem Absatz ein p für Zeilenumbrüche hinzu. Der Stil muss mit CSS implementiert werden.
3. Verwenden Sie Tags sinnvoll und achten Sie auf die Semantik von Tags. Abkürzungen können mit <abbr> gekennzeichnet werden, „ich“ mit <cite> und zitierte Redeinhalte mit <q>.

//Die Codereferenz lautet wie folgt
<p>Was ich schreibe, ist kein <abbr title="Hypertext Markup Language">HTML</abbr>, sondern Einsamkeit. </p>
<p><cite>Ich</cite> sagte: <q>Sei nicht besessen von mir, ich bin nur eine Legende</q></p>

Oben finden Sie ausführliche Informationen zu HTML-Techniken zur Semantisierung Ihres Codes. Weitere Informationen zur HTML-Semantisierung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!