Einführung in HTML5-Tags

Wir alle kennen die Standardabkürzung von HTML. Das ist HyperText Markup Language. HTML5 ist also die neueste und die neue Version von HTML. Sobald ein Produkt entwickelt ist, wird es natürlich viele HTML-Versionen geben, die viele neue Entwicklungen enthalten. HTML5 hat also neue Attribute und Verhaltensweisen. Dieses HTML5-Tag ist keine Programmiersprache mehr, sondern eine Auszeichnungssprache. Was ist nun eine Auszeichnungssprache? Das Definieren von Elementattributen mithilfe von Tags in einem Dokument ist eine Auszeichnungssprache. Kommen wir nun zu den Details, wie wir Tags definieren und eine Webseite erstellen können.

Tags von HTML5

Ein Tag ist eine Spezifikation zum Anzeigen von Inhalten. Im Allgemeinen würde es ein Start- und ein End-Tag geben. Es gibt auch einige Tags, für die kein End-Tag erforderlich ist. mögen
Dies bedeutet, dass die Zeile unterbrochen wird, wodurch die Daten neben diesem Tag aus der nächsten Zeile angezeigt werden. Hier sehen wir uns einige der neuen Elemente in HTML5 an.

In HTML5 können wir die Tags im Allgemeinen in zwei Kategorien unterteilen.

  • Semantische Elemente: Einige Beispiele für diese Elemente sind;, , etc.
  • Nicht-semantische Elemente: Beispiele hierfür sind;, etc.

Die im Folgenden erläuterten Tags sind diejenigen, die exklusiv in HTML5-Versionen neu eingeführt wurden. Es handelt sich um verschiedene Arten von Tags, die alle kategorisiert werden können.

1. Strukturelle Tags

Nachfolgend sind die Typen von strukturellen Tags mit Beispielen aufgeführt:

ein. Artikel: Dies ist ein Tag, der meistens ähnlich wie ein Head-Tag verwendet wird. Wird hauptsächlich in Formularen, Blogs, Nachrichten und als Beispiel verwendet.

Code:

Der erste


Willkommen zurück

Ausgabe:

b. Nebenbei: Ähnlich wie bei unseren normalen Tags, bei denen der Inhalt mit dem umgebenden Inhalt in Beziehung gesetzt wird, wie bei einer Seitenleiste im Artikel. Und dieses Tag macht nur Sinn, wenn Sie eine IE-Version über 8 verwenden.

c. Details: Dieses Tag wird verwendet, um dem Benutzer einige zusätzliche Daten bereitzustellen. Dies kann eine interaktive Plattform sein, die die Details ein- oder ausblenden kann. Die Verwendung dieses Registers können wir unter dem Tag "Summary" sehen.

d. Header: Dieses Tag bezieht sich auf den Header-Teil und enthält Titelinformationen. Es muss sowohl die Start- als auch die End-Tags enthalten.

Code:

Happy Hour


Morgen | Nachmittag | Abend

Ausgabe:

e. hgroup: Dieses Tag wird zur Beschreibung einer Gruppe von Headern verwendet. Schauen wir uns das Beispiel an.

Code:

Lassen Sie uns die Größe dieses h1 überprüfen


Lassen Sie uns die Größe dieses h2 überprüfen


Lassen Sie uns die Größe dieses h3 überprüfen


Lassen Sie uns die Größe dieses h4 überprüfen


Lassen Sie uns die Größe dieses h5 überprüfen

Ausgabe:

f. Fußzeile: Dieses Tag ist das, das am Ende der Seite platziert werden soll. Es handelt sich um etwas wie Urheberrecht, geschichtsbezogene Informationen oder Daten. Sehen wir uns unten ein kleines Beispiel an.

Code:

Kopierrechte | Komm bald wieder

Bitte abonnieren Sie für weitere Lerninhalte

Ausgabe:

G. nav: Mit diesem Tag wird ein Abschnitt aller Links zur Navigation bereitgestellt.

Code:

  • EDUCBA Home
  • Über EDUCBA
  • Kurse in EDUCBA

Ausgabe:

Überprüfen Sie dies, indem Sie auf die Links klicken, sobald Sie beim Üben Ihren Code eingegeben haben.

h. Abschnitt: Wie der Name bereits sagt, definiert dieses Tag den Teil des Codes wie den Text, die Kopfzeile, die Fußzeile usw. Hier sind sowohl das Start- als auch das End-Tag erforderlich. Sehen wir uns unten ein kleines Beispiel an:

Code:

Herzlich willkommen


Bis bald


Danke.

Ausgabe:

ich. Zusammenfassung: Dieses Tag wird parallel zur Registerkarte "Details" verwendet. Unter dem Tag details haben wir dieses Tag summary, um die Konzepte zusammenzufassen. Beispiel unten:

Code:



How is this Summary tag defined?

Durch Klicken auf den Pfeil neben der Frage Zusammenfassung wurde ich angezeigt

Die Daten nach dem Anzeige-Tag werden wie folgt angezeigt.

Ausgabe:

Wenn Sie nun die Zusammenfassungs-Tag-Daten erweitern, sehen Sie Folgendes.

2. Formular-Tags

Nachfolgend werden die verschiedenen Arten von Formular-Tags anhand von Beispielen erläutert:

ein. Datenliste: Dieses Tag wird wie ein Dropdown- Menü mit vordefinierten Werten verwendet, die ein Benutzer auswählen kann. Schauen wir uns das kleine Beispiel unten an:

Code:

Geben Sie Ihren bevorzugten Browsernamen ein:

Ausgabe:

Das Dropdown-Menü wird angezeigt, wenn Sie den Mauszeiger darüber bewegen.

b. Keygen: Dies ist für die Verschlüsselung. Es dient zum Generieren eines verschlüsselten Schlüssels zum Weitergeben der Daten in einem verschlüsselten Format. Für dieses Element ist nur das Start-Tag ausreichend / erforderlich und das End-Tag ist nicht obligatorisch.

c. Messgerät: Dieses Tag würde uns die Messung der Daten geben, die in einem bestimmten Bereich vorhanden sind.

Code:


25 out of 100

Dies ist 25 von 100

70%

Dies ist der Bereich für 70%

Ausgabe:

3. Tags formatieren

Nachfolgend sind die Arten von Formatierungs-Tags mit Beispielen aufgeführt:

ein. BDI: Dies ist eine bidirektionale Isolation. Wie der Name bereits andeutet, kann dieses Tag verwendet werden, um einen Teil des Textes zu isolieren und ihm andere Stile als dem anderen Text zu geben.

b. Markieren: Mit diesem Tag können wir einen bestimmten Text hervorheben.

Code:

So können Sie einen Text markieren oder hervorheben.

Ausgabe:

c. Ausgabe: Wie der Name schon sagt, gibt es das Ergebnis einer Berechnung.

Code:



+
=

Ausgabe:

Stellen Sie sicher, dass Sie das Formularattribut oninput beachten. Sobald Sie das Attribut 'x' eingegeben haben, wird die Ausgabe angezeigt.

d. Fortschritt: Dieses Tag zeigt den Fortschritt einer bestimmten Aufgabe an.

Code:

Dieser Fortschrittsbalken ist zu 80% ausgefüllt

Ausgabe:

e. Rp: Dies wird verwendet, wenn die Ruby-Tags nicht unterstützt werden.

f. RT: Es wird mit dem Tag Ruby verwendet. Meist wird dies in der Aussprache sowohl in der japanischen als auch in der chinesischen Sprache verwendet.

G. Ruby: Dieses Tag wird mit den Tags rt und rp verwendet, bei denen die Anmerkungen in Bezug auf die beiden Sprachen Chinesisch und Japanisch ausgesprochen werden.

h. Wbr: Dieser Tag ist für das Wort break. Es wird hauptsächlich verwendet, um zu überprüfen, wie ein Wort beim Ändern der Fenstergröße umbrochen wird.

4. Eingebettete Inhalts-Tags

Nachfolgend werden die Arten von Embedded Content-Tags anhand von Beispielen erläutert:

ein. Audio: Wie der Name bereits andeutet, hilft uns dieses Tag, Audiodateien in das HTML-Dokument einzubinden.

b. Canvas: Definiert eine Stelle auf der Webseite, an der Grafiken oder Formen oder Grafiken vorhanden sind oder definiert werden können. Hier ist ein Beispiel.

Code:



window.onload = function()(
var can = document.getElementById("run");
var context = can.getContext("2d");
context.moveTo(30, 60);
context.lineTo(150, 30);
context.stroke();
);

Ausgabe:

c. Dialogfeld: Dieses Tag gibt uns eine Standardbox, insbesondere wenn wir Daten in einer Box haben möchten.

Code:

Dialog hier versuchen Wie kommt der Dialog zustande?

Ausgabe:

d. Einbetten: Mit diesem Tag können Sie eine beliebige externe Datei in die HTML-Datei einbinden. Wir können nur das Start-Tag haben und das End-Tag ist hier nicht obligatorisch. Es gibt verschiedene Attribute, die mit diesem Tag verwendet werden können, nämlich: width, height, src und type.

e. Abbildung und Figcaption: Dies kann, wie bereits in seinem Namen, die Bilder aufnehmen und diesem Bild eine Beschriftung geben.

f. Quelle: Dieses Tag kann mehrere Audio- und Videodateien implementieren, indem der Speicherort der Dateien mithilfe dieses Quell-Tags angegeben wird.

G. Zeit: Dieses Tag, wie der Name bereits mitteilt, ist ein Tag zum Anzeigen der Zeit. Beachten Sie außerdem, dass dieses Tag in Internet Explorer ab Version 8 nicht funktioniert.

h. Video: Mit dem Namen des Tags können wir natürlich erfahren, wo dieses Tag verwendet wird. Für die Angabe der Videodateien haben wir diesen Tag. In diesen Audio / Video-Tags definieren wir die Quell-Tags, indem wir die Dateien und deren Speicherorte angeben.

Eingabeelemente von HTML5-Tags

Hier sind einige Eingabeelemente, die wir in HTML5-Tags verwenden:

1. Email: Dies ist eines der Eingabeelemente in HTML5. Dieses Element nimmt nur E-Mail-Adressen als Eingabe auf.

2. Nummer: Dieses Eingabeelement akzeptiert nur die Nummer.

3. Range: Wie der Name bereits erklärt, enthält dieses Tag eine Reihe von Zahlen.

4. URL: Dieses Eingabe-Tag akzeptiert das Eingabefeld für die URL-Adresse. Bei diesem Eingabetyp können wir nur die URL eingeben.

5. Platzhalter: Dies ist eines der Attribute für den Eingabetyp als Text oder Textbereich oder eine beliebige Zahl. Dieser Platzhalterwert zeigt den Wert an, der als Eingabe angegeben werden soll.

Code:


Enter Date of birth : placeholder = "dd/mm/yyyy"/>

Ausgabe:

6. Autofokus: Dieses Attribut fokussiert automatisch auf ein bestimmtes Feld, in dem dieses Element im Eingabe-Tag deklariert wurde. Dieses Attribut wird nur von den neuesten Versionen von Chrome, Safari und Mozilla unterstützt. Syntax ist wie folgt:


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner

Ausgabe:

7.: Dies ist eines der grundlegenden Tags, die dem Browser helfen, die Version des HTML-Codes zu verstehen, in dem das Programm geschrieben wird. Die Deklaration dieses Tags ist vor dem HTML-Tag zu schreiben.

8.: Dieses Meta-Tag beschreibt die Beschreibung des HTML-Dokuments. Es enthält den Namen, das Datum und die Änderungen des Autors usw.

In diesem HTML5 haben wir sogar die Möglichkeit, die GeoLocation eines Geräts abzurufen. Es gibt verschiedene Methoden, die hilfreich sein können, um die Ortung zu vereinfachen. In HTML5 sind auch verschiedene Schriftarten und Farben verfügbar. Im Folgenden sind die wenigen Tags aufgeführt, die aus der HTML-Verwendung dieser HTML5-Version entfernt wurden.

Akronym, Applet, Big, Dir, Schriftart, Frameset, Center, TT (TeleType-Text), Basisschrift, Center, Strike, Frame, U (unterstrichener Text), Isindex, Noframes usw. Einige Attribute, die entfernt wurden, sind unten aufgeführt:

Ausrichten, bgcolor, cellpadding, cellspacing, grenze, link, form, charset, archiv, codebase, umfang, alink, vlink, link, hintergrund, grenze, löschen, scrollen, größe, breite, etc.

9.: Mit diesem Tag wird der Inhalt angezeigt, bei dem die Verwendung von JavaScript deaktiviert ist. Jeder Inhalt, der in diesem Tag geschrieben ist, kann anstelle des Inhalts verwendet werden, wo immer Javascript verwendet wird. Als Übung können Sie versuchen, die verschiedenen Tags auszuführen, für die keine Beispiele bereitgestellt werden.

Fazit

Also, ja, es gibt die grundlegenden Tags und Referenzen für HTML5. Die erste Version von HTML5 wurde am 28. Oktober 2014 veröffentlicht. Wir haben verschiedene neue Tags gesehen, die in HTML5 eingeführt wurden und einige Attribute durchlaufen hatten. Am Ende hatten wir sogar darauf hingewiesen, dass nicht nur die Einführung neuer Elemente erfolgte, sondern dass einige Elemente und Attribute, die vorhanden waren, durch diese neue Version von HTML5 nicht mehr verwendet werden konnten.

Es gab viele Attribute, die mit Beispielen angegeben wurden, und einige nur mit den Daten und dem Zweck des Attributs oder der Elemente. Versuchen Sie, all diese verschiedenen Elemente und Attribute zu üben und lernen Sie weiter.

Empfohlene Artikel

Dies ist eine Anleitung zu HTML5-Tags. Hier werden die vier wichtigsten HTML5-Tags und ihre Eingabeelemente zusammen mit Beispielen und Codeimplementierung ausführlich erläutert. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren.

  1. HTML-Ereignisse
  2. HTML-Layout
  3. HTML-Frames
  4. HTML-Tabellen-Tags
  5. JavaScript-Ereignisse | Verschiedene JavaScript-Ereignisse implementieren
  6. Verschiedene Arten von Meta-Tags in HTML
  7. Wie funktioniert die Formatierung von Text in HTML?
  8. Verschiedene semantische Elemente in HTML5

Kategorie:

Web-Entwicklungstools