Sie müssen nicht jedes Mal div-Tags verwenden. Verwenden Sie diese semantischen HTML-Tags, um Ihre Website strukturierter und zugänglicher zu machen.

Vor der Einführung von semantischem HTML verwendeten Entwickler divs, um Inhalte anzuordnen. Div-Elemente haben keine eigene Bedeutung. Sie bieten nur eine Möglichkeit, Stile anzuwenden und Inhalte anzuordnen.

Das Wort semantisch bedeutet auf Bedeutung bezogen. Semantische HTML-Elemente beschreiben den Zweck ihres Inhalts. Sie geben Entwicklern, Benutzern, Suchmaschinen und Hilfstechnologien Bedeutung. Hier ist eine Liste beliebter semantischer HTML-Tags, die Sie in Ihrem nächsten Projekt verwenden können.

Was sind Divs?

In HTML ist das div-Element (Division) ein Container auf Blockebene. Sie verwenden ein div, um HTML-Elemente auf einer Webseite in Abschnitte zu gruppieren oder zu unterteilen. Die Syntax ist wie folgt:

<div>
div>

Vorteile der Verwendung semantischer HTML-Elemente gegenüber Divs

HTML5 führte semantische HTML-Elemente ein, um das Lesen von Code zu erleichtern. Semantische Elemente verleihen Webinhalten Bedeutung und Struktur.

instagram viewer

Sie machen Ihren Code für andere Entwickler verständlich. Sie erleichtern es Suchmaschinen auch, Ihre Inhalte zu finden und den Verkehr auf Ihre Website zu lenken. Hier sind einige semantische Elemente, die Sie in Ihrem verwenden können HTML- und CSS-Projekte.

1.

Der -Tag definiert den Header-Abschnitt eines Dokuments. Normalerweise enthält es das Site-Logo, die Navigation und den Titel der Seite. Es ist der Abschnitt, der oben auf einer Webseite angezeigt wird. Sie können die Kopfzeile nach Ihren Wünschen anpassen. Die Syntax ist wie folgt:

<Körper>
<Header>


<h1> Hi!h1>


<P>Ich bin ein HeaderP>


Header>
Körper>

2.

Der -Tag enthält die Navigationslinks für die Website. Dies können Menüs, Inhaltsverzeichnisse oder Indexe sein. Es wird normalerweise innerhalb der platziert Schild. Die Syntax ist wie folgt:

<Header>
<Navi>


<Ul>


<li>Meine Website verlinktli>


<li><Ahref="#"> HeimA>li>


<li ><Ahref="#"> Über uns A>li>


Ul>


Navi>


<h1>Das Obige ist ein Navigationsteil meiner Website.h1>
Header>

Im Browser sieht das so aus:

Sie können CSS-Layoutmodelle wie z CSS-Flexbox auszurichten

3.

Der -Tag enthält den Hauptinhalt der Webseite. Es trennt den Inhalt von Kopfzeile, Seitenleiste und Fußzeile. Der Hauptteil repräsentiert den dominierenden Inhalt der Abschnitt.

<Körper>
<Header>


<Titel> Website-Fakten Titel>


Header>


<hauptsächlich>


<P> Diese Website ist eine kurze Demonstration der Funktionsweise des Haupt-Tags.P>


<P> Es umschließt den Teil der Website mit nützlichen Inhalten.P>


hauptsächlich>


<Fusszeile>


<h3> Dies ist eine Fußzeile h3>


Fusszeile>
Körper>

Es erscheint so:

4.

Verwenden Sie die -Tag, um in sich geschlossene Abschnitte in einem Dokument oder einer Website zu definieren. Sie können sie beispielsweise verwenden, um Blogbeiträge, Zeitschriften oder Produktkarten zu strukturieren. Der -Element kann andere Elemente einschließen, einschließlich anderer Artikel, Abschnitte und Überschriften. Die beigefügten Elemente sollten sich auf das Thema des Artikels beziehen.

<Artikel>
<h1>Fremder als Fiktionh1>
<Artikel>


<h3>Einführungh3>


<P>Die in diesem Buch erzählten Ereignisse und Personen sind fiktiv.P>


Artikel>


<Artikel>


<h3>Kapitel einsh3>


<P> Der Tag war hell und die Sonne lachte vom HimmelP>


Artikel>
Artikel>

Es sieht so aus:

5.

Der -Tag enthält den Inhalt, der sich auf den Hauptinhalt bezieht. Verwenden Sie dieses Tag, um Seitenleisten für Zitate, Kommentare oder Rufe zu erstellen. hebt Informationen hervor, die der Leser übersehen könnte. Es hebt sich vom Rest des Inhalts ab.

html>
<html>


<Stil>


 Körper{


 Hintergrundfarbe:#abdbe3;


 }


 beiseite {


 Breite: 30 %;


 Polsterung links: 0,5 rem;


 Rand-links: 1rem;


 Biegung: links;


 Box-Schatten: Einschub 5px 0 5px -5px grün;


 Schriftstil: kursiv;


 Farbe Rot;


 }


 beiseite > p {


 Marge: 0,5 rem;


Stil>


<Körper>


<hauptsächlich>


<h1> Webervögelh1>


<P>Ploceidae ist eine Familie kleiner Sperlingsvögel. Viele von ihnen heißen Weber, Webervögel, Weberfinken und Bischöfe.P>


<beiseite>


<P>Königreich: Animalia
 Phylum chordataP>


beiseite>


<P>In den neuesten Klassifikationen ist Ploceidae eine Gruppe, schließt einige Vögel aus, die historisch in die Familie eingeordnet wurden. Einige der Spatzen gehören aber zur monotypischen Unterfamilie Amblyospizinae.P>


hauptsächlich>


Körper>
html>

6.

Der -Element enthält einen Teil der Seite ohne spezifisches semantisches Element. Abschnitte können eine Überschrift haben, um den Inhalt vorzustellen und andere HTML-Elemente einzuschließen. repräsentiert die Komponenten einer Webseite wie Kapitel in einem Buch oder Blog.

html>
<html>


<Körper>


<h1>Die Bibelh1>


<Abschnitt>


<h2>Einführungh2>


<P>Die Bibel ist eine Sammlung religiöser Schriften, die im Christentum, Judentum und Samaritertum heilig sind. Die Bibel ist eine Anthologie – eine Zusammenstellung von Texten in verschiedenen Formen – ursprünglich in Hebräisch, Aramäisch und Koine-Griechisch geschrieben.P>


Abschnitt>


<Abschnitt>


<h2>Kapitel eins: Entstehungh2>


<P>Das Buch Genesis ist das erste Buch der hebräischen Bibel und des christlichen Alten Testaments. Sein hebräischer Name ist derselbe wie sein erstes Wort, Bereshit. Genesis ist ein Bericht über die Erschaffung der Welt, die frühe Geschichte der Menschheit, die Vorfahren Israels und die Ursprünge des jüdischen VolkesP>
Abschnitt>


Körper>
html>

Es sieht so aus:

7.

Der elementen schließt in sich abgeschlossene Illustrationen wie Bilder oder Diagramme ein. Diese Illustrationen verweisen auf Inhalte auf der Hauptseite. Die Abbildungen sind mit Bildunterschriften versehen, die von der angegeben werden Element. Der erklärt, worum es bei dem Bild geht. Der

,
,
und der Inhalt eine Einheit darstellen.

html>
<html>


<Körper>


<hauptsächlich>


<Abschnitt>


<h1>Teile eines Computersh1>


<P> Es gibt mehrere Teile, die zusammenarbeiten, um einen Computer zu bildenP>


<Figur>


<BildQuelle="some-url.jpg"alt="Computermaus">


<Bildunterschrift>Das ist eine ComputermausBildunterschrift>


Figur>


Abschnitt>


hauptsächlich>


Körper>
html>
Es sieht so aus:

Sie können weiter gehen und lernen wie man responsive Bilder erstellt im HTML-Format.

Der Das HTML-Element enthält Informationen im unteren Teil der Webseite. Es ist das Gegenteil von Element. Der kann Informationen über den Eigentümer der Seite enthalten. Dazu gehören Urheberrechtsangaben oder Links zu weiterführenden Informationen der Seite.

html>
<html>


<Körper>


<hauptsächlich>


<Abschnitt>


<h1>Teile eines Computersh1>


<Figur>


<BildQuelle="some-url.jpg"alt="Computermaus">


<Bildunterschrift>Das ist eine ComputermausBildunterschrift>


Figur>


Abschnitt>


hauptsächlich>


<Fusszeile>


<P> Hergestellt von Computer Tech © 2023P>


Fusszeile>


Körper>
html>

Der obige Code fügt eine Fußzeile zu der hinzu Teile eines Computers Seite, wie im folgenden Bild gezeigt.

Warum semantische HTML-Elemente verwenden?

Die Verwendung von semantischen HTML-Elementen verleiht dem Code Kontext. Jeder, der sich den Code ansieht, kann ihn leicht verstehen. Die Tags erleichtern das Stylen von Elementen und die Zusammenarbeit an Projekten.

Sie können semantisches HTML mit Frontend-Bibliotheken und Frameworks verwenden. Die meisten modernen Webbrowser bevorzugen semantische HTML-Elemente gegenüber herkömmlichen Elementen. Beginnen Sie mit der Verwendung von semantischem HTML und beobachten Sie, wie Ihr Code modern, lesbar und präsentabel aussieht.