Überblick über neue HTML5-Elemente

Seit 1999, als HTML 4.01 zum Standard wurde, haben sich das Web und die Nutzung des Webs erheblich verändert. Das W3C hat beschlossen, die grundlegende HTML-Syntax von Standard Generalized Markup Language (SGML) auf XML und auch ganz andere Auszeichnungssprachen wie SVG (Scalable Vector Graphics), XForms und MathML zu ändern. Derzeit sind einige HTML 4.01-Komponenten veraltet, werden nie oder nicht wie erwartet verwendet. Jeder Teil der Komponenten in HTML5 wird verschoben oder neu zusammengesetzt. HTML5 enthält neue Elemente zur Veranschaulichung der Darstellung, zur Anzeige digitaler Inhalte, zum verbesserten Seitenlayout und zur allgemeinen Funktionalität sowie mehrere neue Schnittstellen, um den heutigen Internetanforderungen gerecht zu werden.

In HTML5 wurden mehrere neue Elemente eingeführt, die bestimmte zusätzliche Funktionen für die Entwicklung einer wünschenswerten und interaktiven Site bieten. Mit Hilfe solcher Komponenten können wir Ihren Code schnell und effizient erstellen. Aufgrund der fehlenden Struktur sind viele wohlgeformte HTML-Dokumente schwieriger zu handhaben, als sie sein müssen. Durch die Auswertung von Header-Skalen müssen wir herausfinden, wohin die Segmentumbrüche führen. Das div-Element kennzeichnet Seitenleisten, Fußzeilen, Kopfzeilen, Navigationsmenüs und wichtige Inhaltsteile.

Die 10 wichtigsten neuen HTML5-Elemente

HTML5 bietet neue Elemente, um das Layout des Dokuments zu verbessern.

1.

Das Element gibt einen Teil einer Seite an, der eine separate Struktur in einem Dokument, einem Abschnitt oder einer Website enthält. Es wird empfohlen, dass er weit verbreitet oder verwendbar ist. Dies kann eine Gruppe sein, die eine Zeitschrift oder einen Tageszeitungsbericht veröffentlicht, einen Online-Newsletter abonniert, eine Bemerkung eines Kunden oder ein anderes substanzfreies Objekt.

Beispiel:



Article Element

EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.



Article Element

EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.



Article Element

EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.



Article Element

EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.



Article Element

EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.

Ausgabe:

  • Speichern Sie den obigen Code in einer Datei mit der Erweiterung .html.
  • Führen Sie die HTML-Datei in einem Browser aus, und Sie erhalten die Ausgabe wie im folgenden Bild gezeigt.

2.

Das Element kennzeichnet in vielerlei Hinsicht einzelne Inhalte wie Kategorisierungen, Karten, Bilder, Codeartikel und vieles mehr.

Beispiel:



Figure Element

EDUCBA ist ein weltweit führender Anbieter von kompetenzbasierter Ausbildung, der die Bedürfnisse von mehr als 500.000 Mitgliedern in über 40 Ländern abdeckt.


Ausgabe:

Der obige Code erzeugt die Ausgabe wie im folgenden Bild gezeigt.

3.

Das Element wird verwendet, um eine Beschreibung für das Bild hinzuzufügen.

Beispiel:



Figure Caption Element

EDUCBA ist ein weltweit führender Anbieter von kompetenzbasierter Ausbildung, der die Bedürfnisse von mehr als 500.000 Mitgliedern in über 40 Ländern abdeckt.


EDUCBA (Corporate Bridge Consultancy Pvt Ltd)

Ausgabe:

Der obige Code zeigt das Ergebnis wie im folgenden Bild gezeigt,

4.

Das Element wird zum Angeben der Kopfzeile für ein Dokument oder einen Abschnitt auf der Seite verwendet. Sie können mehr als eine Kopfzeile in einem Dokument definieren.

Beispiel:



Header Element


Header One
Header Two
Header Three



Header Element


Header One
Header Two
Header Three



Header Element


Header One
Header Two
Header Three



Header Element


Header One
Header Two
Header Three



Header Element


Header One
Header Two
Header Three



Header Element


Header One
Header Two
Header Three



Header Element


Header One
Header Two
Header Three

Der Inhalt des Dokuments geht hier …

Ausgabe:

Der obige Code zeigt das Ergebnis wie im folgenden Bild gezeigt,

5.

Das Element wird zur Angabe von Informationen wie Autoreninformationen, Copyright-Informationen, Kontaktinformationen, Links zu verwandten Dokumenten, Sitemap und vielem mehr verwendet.

Beispiel:



Footer Element

Copyright © 2019 www.educba.com

Kontakt:

Ausgabe:

Der obige Code zeigt das Ergebnis wie im folgenden Bild gezeigt,

6.

Das Element dient zur Anzeige der wichtigsten dh wichtigen Informationen eines Dokuments.

Beispiel:



Main Element

Header-Informationen

Hauptinformation

EDUCBA


EDUCBA ist ein weltweit führender Anbieter von kompetenzbasierter Ausbildung …


Fußzeileninformationen

Ausgabe:

Der obige Code erzeugt die Ausgabe wie im folgenden Bild gezeigt.

7.

Das Element wird verwendet, um den Text mit der Hintergrundfarbe hervorzuheben oder zu markieren, die den Benutzer für einen bestimmten Text im Dokument anzieht.

Beispiel:



Mark Element

EDUCBA ist ein weltweit führender Anbieter von kompetenzbasierter Ausbildung, der die Bedürfnisse von mehr als 500.000 Mitgliedern in über 40 Ländern abdeckt.

Ausgabe:

Der obige Code zeigt das Ergebnis wie im folgenden Bild gezeigt,

8.

Das Element wird verwendet, um die Navigationslinks auf der Seite anzugeben. Diese Links stellen Verbindungen zu anderen Seiten in einem Dokument her.

Beispiel:



Nav Element


HTML |
CSS |
JAVA |
PHP |
PYTHON

Ausgabe:

Der obige Code erzeugt die Ausgabe wie im folgenden Bild gezeigt.

9.

Das Element wird verwendet, um den eigenständigen Abschnitt oder einen bestimmten Bereich im Dokument zu definieren.

Beispiel:



Section Element

Main Article



Section Element

Main Article



Section Element

Main Article

Der Inhalt der Hauptüberschrift wird hier angezeigt …

Erster Abschnitt


Der Inhalt des ersten Abschnitts wird angezeigt …


Zweiter Abschnitt


Der Inhalt des zweiten Abschnitts wird angezeigt …

Ausgabe:

Der obige Code zeigt das Ergebnis wie im folgenden Bild gezeigt,

10.

Das Tag ist ein Teil des Tags, der den Text enthält, der angezeigt oder ausgeblendet werden kann, wenn der Benutzer auf die Überschrift klickt.

Beispiel:



Summary Element


EDUCBA - Corporate Bridge Consultancy Pvt Ltd

Es ist ein führender globaler Anbieter von kompetenzbasierter Ausbildung, der die Bedürfnisse von mehr als 500.000 Mitgliedern in über 40 Ländern erfüllt.

Ausgabe:

Wenn Sie den obigen Code ausführen, wird das Ergebnis wie folgt angezeigt:

Wie in der Abbildung gezeigt, klicken Sie auf die Überschrift, um den versteckten Text anzuzeigen, wie in der folgenden Abbildung gezeigt.

Fazit

Bisher haben wir gesehen, wie nützlich neue HTML5-Elemente für verschiedene Aufgaben bei der Erstellung der Website sind. Diese neuen Elemente lesen das Dokument genauer und auf dem neuesten Stand und entwickeln komplexere und effizientere Web-Apps. Die neuen HTML5-Elemente bieten einige zusätzliche Funktionen zum Generieren interaktiver Websites.

Empfohlene Artikel

Dies ist eine Anleitung zu Html5 New Elements. Hier diskutieren wir die 10 wichtigsten neuen Elemente von Html5, um das Layout des Dokuments zu verbessern. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -

  1. Farbkorrektur in After Effects
  2. Top 6 Versionen von HTML
  3. HTML5 vs HTML4
  4. XHTML vs HTML5
  5. Was ist Bridge?
  6. HTML5-Tags | Top 4 Tags von HTML5

Kategorie:

Web-Entwicklungstools