Was sind semantische HTML-Tags? Eine vollständige Liste gängiger semantischer HTML-Tags

<strong>1. Was sind semantische HTML-Tags?

Semantische Tags sollen Tags eine eigene Bedeutung verleihen.

<p>一行文字</p><span>一行文字</span>

Wie im obigen Code gezeigt, besteht einer der Unterschiede zwischen dem <code>p-Tag und dem <code>span-Tag darin, dass die Bedeutung des <code>p-Tags ist: Absatz. Das Tag <code>span hat keine eindeutige Bedeutung.

<h1>2. Vorteile semantischer Tags

<li>

Die Codestruktur ist klar, leicht lesbar und förderlich für die Teamentwicklung.

<li>

Komfortables Parsen durch andere Geräte (z. B. Bildschirmlesegeräte, Blindlesegeräte, mobile Geräte), um Webseiten semantisch darzustellen.

<li>

Gut für die Suchmaschinenoptimierung (SEO).

<h1>3. Gemeinsame semantische Tags

Daher sollten wir beim Schreiben der Seitenstruktur versuchen, semantische HTML-Tags zu verwenden

<li>

<code><title>: Der Hauptinhalt der Seite.

<li>

<code><hn>: h1~h6, hierarchische Titel, Koordination von <code><h1> und <code><title> ist förderlich für die Suchmaschinenoptimierung.

<li>

<code><ul>: Ungeordnete Liste.

<li>

<code><li>: geordnete Liste.

<li>

<code><header>: Die Kopfzeile enthält normalerweise das Website-Logo, die Hauptnavigation, seitenweite Links und ein Suchfeld.

<li>

<code><nav>: Markierungsnavigation, wird nur für wichtige Linkgruppen im Dokument verwendet.

<li>

<code><main>: Der Hauptinhalt der Seite, der nur einmal auf einer Seite verwendet werden kann. Wenn es sich um eine Webanwendung handelt, umgeben Sie deren Hauptfunktionen.

<li>

<code><article>: Definiert externen Inhalt, der vom Rest des Dokuments unabhängig ist.

<li>

<code><section>: Definieren Sie Abschnitte (Abschnitte, Abschnitte) im Dokument. Zum Beispiel Kapitel, Kopf- und Fußzeilen oder andere Teile des Dokuments.

<li>

<code><aside>: Definiert Inhalte über den Inhalt hinaus, in dem sie sich befinden. Zum Beispiel eine Seitenleiste, eine Reihe von Links zum Artikel, Werbung, benutzerfreundliche Links, verwandte Produktlisten usw.

<li>

<code><footer>: Fußzeile. Nur wenn das übergeordnete Element der Hauptteil ist, handelt es sich um die Fußzeile der gesamten Seite.

<li>

<code><small>: Kleinen Schrifteffekt anzeigen, Details angeben, Haftungsausschluss, Anmerkung, Signatur und Urheberrecht eingeben.

<li>

<code><strong>: Wie das Tag <code>em wird es zum Hervorheben von Text verwendet, hebt den Text jedoch stärker hervor.

<li>

<code><em>: Drücken Sie den Text als hervorgehobenen Inhalt aus, ausgedrückt in Kursivschrift.

<li>

<code><mark>: Verwenden Sie Gelb, um einen Teil des Textes hervorzuheben.

<li>

<code><figure>: Gibt unabhängige Flussinhalte (Bilder, Diagramme, Fotos, Code usw.) an (der Standardrand beträgt etwa 40 Pixel).

<li>

<code><figcaption>: Definiert den Titel des <code>figure-Elements, der an der Position des ersten oder letzten untergeordneten Elements des <code>figure-Elements platziert werden soll.

<li>

<code><cite>: Zeigt an, dass sich der enthaltene Text auf eine Referenz bezieht, beispielsweise auf den Titel eines Buches oder einer Zeitschrift.

<li>

<code><blockquoto>: Definieren Sie Blockreferenzen, die ihren eigenen Raum haben.

<li>

<code><q>: Kurzes Zitat (browserübergreifende Probleme, vermeiden Sie die Verwendung).

<li>

<code><time>: Das datetime-Attribut folgt einem bestimmten Format. Wenn dieses Attribut ignoriert wird, muss der Textinhalt in einem zulässigen Datums- oder Uhrzeitformat vorliegen.

<li>

<code><abbr>: Abkürzung oder Abkürzung.

<li>

<code><dfn>: Definitionsbegriffselement, das unmittelbar an die Definition angrenzen muss und im Beschreibungslisten-DL-Element verwendet werden kann.

<li>

<code><address>: Kontaktinformationen (E-Mail-Adresse, Link zur Kontaktseite) für den Autor, die relevante Person oder Organisation.

<li>

<code><del>: Inhalt entfernt.

<li>

<code><ins>: Inhalt hinzugefügt.

<li>

<code><code>: Tag-Code.

<li>

<code><meter>: Definiert eine skalare Messung innerhalb eines bekannten Bereichs oder Bruchwerts. (Internet Explorer unterstützt das Meter-Tag nicht)

<li>

<code><progress>: Definiert den laufenden Fortschritt (Prozess).

Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial