Einführung in HTML5 Semantic Elements

Der folgende Artikel bietet Ihnen verschiedene semantische Elemente in HTML5. Beginnen wir mit dem Verständnis der Semantik. Bei der Semantik handelt es sich um verschiedene Arten von Tags, deren Funktionalität dieselbe Funktion wie der Tag-Name darstellt und ausführt. Die Funktionalität des Tags wird durch den Namen leicht verständlich. Das ist in einem benutzerverständlichen Namen / Format. Die meisten Elemente in HTML sind im Allgemeinen semantische Elemente.

Vorteile semantischer Elemente in HTML5

Die semantischen Elemente haben folgende Vorteile:

  • Einfaches Code-Verständnis.
  • Die Wartung kann schnell und ordnungsgemäß durchgeführt werden.
  • Es ist nicht erforderlich, eine Beschreibung speziell für ein Tag hinzuzufügen.

Verschiedene semantische Elemente in HTML5

Kommen wir nun zu den semantischen Elementen von HTML5.

1.

Dieses Tag gibt uns eine Vorstellung davon, dass die Daten in diesem Tag speziell für ähnliche Inhalte bestimmt sind. Es hängt von den verschiedenen Arten von Artikeln ab, die wir im Allgemeinen auch haben. Dies können Blogs, Foren, Kolumnenartikel in Zeitungen usw. sein.

Code:



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA

Ausgabe:

2.

Mit diesem Tag wird ein abschnittsweiser Inhalt der Gesamtdaten bereitgestellt. Wenn Sie wissen, wie sowohl Artikel- als auch Abschnitts-Tags verwendet werden, können diese Tags in jedem Tag verwendet werden. Das heißt, das Abschnitts-Tag kann im Artikel-Tag verwendet werden und umgekehrt.

Code:


The section here is about:

Lernen und üben

Ausgabe:

3.

Dieses Tag enthält alle Header-Daten. Alle Daten, die wir im Header-Format platzieren möchten, werden unter diesem Header-Tag verwendet. Und dieses Tag kann mehrmals im gesamten HTML-Scripting verwendet werden. Lassen Sie uns ein kleines Beispiel dafür sehen.

Code:



This is header #1



This is header #1



This is header #1

Erster


nächste …

Dies ist Header # 2


Das Zweite

Ausgabe:

4.

Dies ist die Fußzeile in unserem HTML-Skript. Im Allgemeinen sehen wir alle Copyright-Daten und den kleinen Abschnitt, den wir unter "Bedingungen" für alle Angebote finden. Diese Dinge werden also unter dem Footer-Tag definiert.

Code:

Inside Body und über Footer Tag

Inside Footer-Tag.


Ein weiteres Footer-Tag

Bedingungen gelten

Ausgabe:

5.

Dieser Tag gibt uns die Navigationselemente. Die URL in jedem HTML-Dokumentskript, bei dem wir im Allgemeinen über dieses Tag von einer Seite zu einer anderen Seite navigieren möchten. Alle Daten, die unter diesem Tag angegeben sind, sind als Hyperlinks verfügbar. Diese Hyperlinks können beim Navigieren von einem Abschnitt zu einem anderen Abschnitt hilfreich sein. Ein kleines Beispiel ist definiert als:

Code:


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2

Ausgabe:

Klicken Sie beim Üben auf diese Links und überprüfen Sie, wie sich die Farbe des Hyperlinks beim Klicken ändert.

6.

Dies ist ein Tag, mit dem die Daten an den Seiten unseres HTML-Dokuments angezeigt werden. Auf vielen Websites können wir Inhalte finden, die in einer Seitenleiste vorhanden sind, die mit diesem beiseite-Tag angezeigt wird. Dieser Inhalt sollte mit den anderen im Dokument enthaltenen Daten übereinstimmen. Lassen Sie uns ein kleines Beispiel dafür sehen.

Code:

So wird das beiseite Tag verwendet

Innerhalb beiseite tag


Inhalt innerhalb des Tags beiseite

Ausgabe:

Der genaue Inhalt kann nicht vollständig auf die gleiche Weise angegeben werden, sondern nur unter Verwendung der gesamten HTML-Seite dokumentiert und verständlich gemacht werden.

7.

Dieses Tag gibt an, dass ein Bild angehängt werden soll. Mit diesem Tag können Sie eine Bildquelle angeben und ein GIF oder Bild anzeigen.

Code:





Wie oben erwähnt, können wir auf diese Weise das Figure-Tag definieren. Innerhalb des Figure-Tags können wir unseren Image-Befehl mit einem Source-Tag angeben. In diesem Abbildungstag können wir wiederum den Abbildungstitel-Tag verwenden.

8.

Mit diesem Tag wird eine Beschriftung unter dem bereitgestellten Bild erstellt. Es kann innerhalb des Figure-Tags verwendet werden. Die Verwendung davon ist im folgenden Beispiel zu sehen.




This is description of the image attached.

Sie können versuchen, dasselbe auszuführen, indem Sie eine Bildquelle angeben und überprüfen, wie die Ausgabe angezeigt wird.

9.

Dieses Tag gibt alle Attribute und den gesamten Inhalt der HTML-Site an. Es enthält alle eindeutigen Inhalte. Wichtig für dieses spezielle Tag ist, dass dieses Tag nur einmal für die gesamte Seitenerstellung verwendet werden kann. Wir stellen fest, dass andere Tags beim Erstellen einer Webseite mehrmals verwendet werden können, aber dieses Haupt-Tag ist ein Tag für die einmalige Verwendung.

Code:



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying

Lesen würde helfen, verschiedene Themen zu verstehen


Üben


Üben ist beim Lernen ein Muss

Ausgabe:

10.

Dieses Tag dient zum Hervorheben bestimmter Inhalte oder Daten. Mit anderen Worten, dieses Tag ist hilfreich beim Markieren von Daten. Sehen wir uns dazu unten ein kleines Beispiel an:

Code:

In diesem ganzen Text, den ich gerade schreibe, möchte ich diesen Text markieren

Ausgabe:

11.

Dieser Tag enthält die zusätzlichen Details, die Benutzer nach Belieben ausblenden können. Über dieses Tag können Benutzer alle Inhalte öffnen / schließen, die sie benötigen. Wenn wir möchten, dass dieses Tag seine Details am Anfang selbst preisgibt, kann das Attribut "open" verwendet werden.

Unten ist ein kleines Beispiel davon:

Code:

Wird das angezeigt?

Ausgabe:

Was wäre nun die Ausgabe, wenn wir das open-Attribut nicht verwenden würden?

Wird das angezeigt?

Ausgang 1:

Ausgang 2:

12.

Dieses Tag wird im Detail-Tag verwendet. Unter dem Tag details kann ein Tag summary angegeben werden, das die gesamte Zusammenfassung der Webseite oder des HTML-Dokuments angibt. Hierbei ist zu beachten, dass das Summary-Tag das erste untergeordnete Tag ist, das unter das Detail-Tag fallen muss. Lassen Sie uns unten ein kleines Beispiel finden:

Code:



Have written this inside summary tag which is inside details tag

Dieser Text fällt nur unter das Detail-Tag

Diese Textdaten werden nach Fertigstellung des Detail-Tags geschrieben

Ausgang 1:

In der obigen Ausgabe hatten wir den Pfeil markiert, da wir unsere Ausgabe 2 erhalten, sobald wir sie erweitern.

Ausgang 2:

Dieses Tag gibt möglicherweise keinen Unterschied aus

13.

Dieses Tag definiert Datum und Uhrzeit in einem Format, das Benutzer leicht verstehen können. Es ist jedoch zu beachten, dass dieses Tag in vielen Browsern möglicherweise keine geänderte Ausgabe liefert.

Code:

Derzeit ist 23.00 Uhr in der Nacht.

Ausgabe:

14.

Wie der Name bereits andeutet, dient dieses Tag zum Schreiben von Inhalten in eine Box. Dieses Tag sollte ein offenes Attribut haben, um das Dialogfeld anzuzeigen, sobald der Quellcode ausgeführt wird. Hier finden Sie ein Beispiel:

Die hier geschriebenen Daten werden in einem Dialogfeld angezeigt

Ausgabe:

15.

Dieses Tag gibt den Fortschritt einer bestimmten Aufgabe in einer grafischen Darstellung an. Wir brauchen hier die maximale Anzahl, für die der Fortschritt dargestellt werden muss. Dieses Tag besteht hauptsächlich aus zwei Attributen. Max und Wert sind die beiden Attribute. Max stellt die Gesamtanzahl dar, die abgeschlossen werden muss, und Value gibt die Anzahl in Prozent an, die in Bezug auf den maximalen Zählwert abgeschlossen ist. Ein Beispiel dafür ist unten:

Code:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Ausgabe:

16.

Dieser Tag dient zur Messung. Dies kann auch für den Speicherplatz verwendet werden, der durch eine Abfrage oder die Verwendung von Speicherplatz belegt wird. Es gibt einige Attribute, die mit diesem Tag verwendet werden sollen. Die Attribute sind max, min und value. Anhand ihrer Verwendung können wir definitiv ihren Zweck und ihre Verwendung herausfinden.

Code:


EDCUBA


EDCUBA


EDCUBA

Verwendung des Metertags

In einer 6-stöckigen Wohnung wohne ich im 2. Stock:
2 von 6

Ausgabe:

17.

Dies ist ein Tag, der eingeführt wurde, um unserer HTML-Seite Videodateien hinzuzufügen. Bis zur Einführung dieses Tags verwendeten Entwickler Plugins, um Videodateien in den Inhalt von HTL-Seiten einzufügen. Es gibt einige Attribute, die zusammen mit dem Tag verwendet werden können. Autoplay, Preload, Muted sind einige davon.

Code:


Wir benötigen lediglich ein Quell-Tag, um die Quelle anzugeben, von der wir den Videocontent auf unsere Seite hochladen möchten.

18.

Dieses Tag dient zum Hinzufügen von Audiodateien zu unserer HTML-Seite. Die Verwendung und das Quell-Tag stimmen mit denen des Video-Tags überein. Versuchen Sie als Übung, alle semantischen Elemente zu verwenden und eine e HTML 5-Webseite zu erstellen, um besser und schneller zu lernen.

Fazit

In diesem Artikel müssen wir viele semantische Elemente und ihre Verwendung in HTML5 sehen. Eine wichtige Sache, die Sie hier beachten sollten, ist, dass viele dieser Tags von Internet Explorer-Versionen größer als 9 und Chrome-Versionen größer als 3 unterstützt werden. Lernen Sie also weiter und üben Sie, um die Verwendung von Tags in HTML 5 besser zu verstehen.

Empfohlene Artikel

Dies ist eine Anleitung zu den semantischen HTML5-Elementen. Hier diskutieren wir die Einführung und verschiedene semantische Elemente in HTML5 zusammen mit seiner Code-Implementierung. Sie können auch den folgenden Artikel lesen, um mehr zu erfahren -

  1. Die 10 wichtigsten neuen HTML5-Elemente
  2. HTML5-Tags
  3. HTML5-Web-Worker
  4. Andere Art von HTML-Ereignissen

Kategorie:

Software-Entwicklung