HTML-Attribute

HTML-Attribute können als spezielle Wörter ausgedrückt werden, die in Öffnungs-Tags verwendet werden und für die Steuerung des Verhaltens eines Elements verantwortlich sind. Sie sind ein Modifikator des HTML-Elementtyps. Dieser Modifikator kann zwei Aufgaben ausführen. Es kann entweder die Standardfunktionalität eines Elements ändern oder die Funktionalität für jedes Element bereitstellen, das ohne sie nicht ordnungsgemäß funktionieren kann. Syntaktisch wird dem HTML-Starttag ein Attribut hinzugefügt. Es wurden verschiedene Arten von Attributen identifiziert. Dazu gehören die erforderlichen Attribute, optionalen Attribute, Standardattribute und Ereignisattribute. Erforderliche Attribute sind diejenigen, die von einem bestimmten Elementtyp benötigt werden, damit die Funktion ordnungsgemäß funktioniert. Mit dem optionalen Attribut kann die Standardfunktionalität eines Elementtyps geändert werden. Die Standardattribute werden von einer großen Anzahl von Elementtypen unterstützt, und Ereignisattribute können verwendet werden, um Elementtypen zu erzeugen, mit denen die Skripts angegeben werden können, die unter bestimmten Umständen ausgeführt werden. Die Attribute erscheinen normalerweise als Name-Wert-Paare und werden durch '=' (Gleichheitszeichen) getrennt. Sie werden innerhalb des Start-Tags eines Elements nach dem Namen des Elements geschrieben.

Unterschiedliche HTML-Attribute

Lassen Sie uns einen Blick auf verschiedene HTML-Attribute werfen und wie sie im Detail funktionieren.

Kernattribute

Es gibt vier Kernattribute, die hauptsächlich verwendet werden. Um diese zu nennen, lauten sie wie folgt:

  • ID: Dieses HTML-Attribut kann leicht verwendet werden, um ein Element, das in einer HTML-Seite vorhanden ist, eindeutig zu identifizieren. Die Benutzer-ID kann entweder verwendet werden, wenn ein Element ein ID-Attribut als eindeutige Kennung enthält, mit der das Element und sein Inhalt identifiziert werden können, oder wenn zwei Elemente auf einer Webseite denselben Namen haben. Das ID-Attribut kann dabei helfen, den Unterschied zwischen den Elementen mit demselben Namen leicht zu identifizieren.
  • Das Title-Attribut: Mit diesem Attribut wird ein Titel für ein bestimmtes Element vorgeschlagen. Es hängt vom Träger ab, wie es sich verhält, und obwohl es normalerweise nicht als QuickInfo angezeigt wird, wenn der Cursor über das Element fährt oder wenn es beim Laden des Elements angezeigt werden muss. Es wird auch verwendet, um ein Element zu erläutern, wenn Sie den Mauszeiger darüber bewegen. Das Verhalten kann bei verschiedenen Elementen unterschiedlich sein und im Allgemeinen wird sein Wert beim Laden oder beim Bewegen des Mauszeigers darüber angezeigt.
  • Das Klassenattribut: Die Zuordnung dieses Attributs erfolgt zu einem Element des Stylesheets. Der Benutzer muss die Klasse des Elements angeben. Weitere Informationen zu diesem Attribut erhalten Sie, wenn Sie das Cascading Style Sheet lernen. Der Wert hier kann auch eine durch Leerzeichen getrennte Liste von Klassennamen sein. Zum Beispiel: class = "className1 className2 className3"
  • Das Stilattribut: Mit diesem Attribut können Sie die Regeln für Cascading Stylesheets in jedem Element angeben. Es kann verschiedene Cascading Style Sheet-Effekte für die HTML-Elemente bereitstellen, z. B. das Vergrößern der Schriftgröße. Es kann auch die Schriftfamilie und Färbung ändern.

Nach den Kernattributen haben wir einige Internationalisierungsattribute. Sie sind wie folgt:

Internationalisierungsattribut

  • Dir: Mit dem dir-Attribut können Sie dem Browser die Richtung angeben, in die ein Text folgen soll. Dieses Attribut kann normalerweise zwei Werte annehmen. Dies können LTR und RTL sein. LTR bedeutet von links nach rechts und dies ist der Standardwert, während RTL für von rechts nach links steht. Wenn dieses Attribut im Tag verwendet wird, wird festgelegt, wie ein Text im gesamten Dokument dargestellt werden soll. Es kann auch verwendet werden, um die Textrichtung nur über den Inhalt des Tags zu steuern.
  • Das Lang-Attribut: Dieses Attribut hilft bei der Darstellung der Hauptsprache, die in einem Dokument verwendet wird. Dieses Attribut kann in HTML beibehalten werden, sodass es mit früheren HTML-Versionen abwärtskompatibel ist. Es kann auch durch das XML: lang-Attribut in neuen XHTML-Dokumenten ersetzt werden. Die Werte von lang-Attributen entsprechen dem ISO-639-Standard und haben einen zweistelligen Sprachcode. Die Angabe einer Sprache ist wichtig, um auf die Anwendung und verschiedene Suchmaschinen zugreifen zu können.
  • Das XML-Lang-Attribut: Dieses Attribut soll das lang-Attribut ersetzen. Der Wert des XML-lang-Attributs muss den zuvor genannten Ländercode aufweisen.

Darüber hinaus gibt es viele generische Attribute, die im Folgenden beschrieben werden.

Allgemeines Attribut

  • Ausrichtungsattribut: Dieses Attribut ist nützlich, wenn Sie einige Elemente Ihrer Seite zur Verfügung haben möchten. Sie können die Ausrichtung nach links, rechts oder in die Mitte der Seite ändern. Die Standardausrichtung für alle Elemente ist auf links eingestellt. Dies kann mithilfe dieses Ausrichtungsattributs geändert werden.
  • Quellattribut: Wenn ein Benutzer ein Bild in eine Webseite einfügen muss, müssen wir das verwenden Tag mit dem Attribut src. Wir können die Adresse des Bildes als den Wert des Attributs innerhalb des doppelten Anführungszeichens angeben. Sie können das src-Attribut wie folgt verwenden, um das Bild auf der Webseite einzufügen.


src Attribute


  • Alt-Attribut: Dieses Attribut wird als alternatives Tag verwendet, das verwendet werden kann, um etwas anzuzeigen, wenn das primäre Attribut das ist Tag, das den ihm zugewiesenen ursprünglichen Wert nicht anzeigt. Dies kann das Bild einem Entwickler beschreiben, der es am Ende der Codierung verwendet. Wenn das Hauptbild fehlschlägt, kann das alternative Bild zur Anzeige verwendet werden.
  • Das Attribut Breite und Höhe: Mit diesem Attribut können Sie die Höhe und Breite eines Bildes anpassen.

Example:

Width and Height


<

  • Das Href-Attribut: Dieses Attribut wird verwendet, wenn der Benutzer auf einen bestimmten Link zu einer beliebigen Adresse verweisen möchte. Dieses Attribut wird zusammen mit dem Tag verwendet. Wenn der Link in das href-Attribut eingefügt wird, an das er gerichtet werden soll, wird er mit dem im Tag angezeigten Text verknüpft. Wenn der Benutzer auf diesen Text klickt, wird er zur Adresse des Links weitergeleitet. Die Standardoption zum Öffnen dieser Seite auf derselben Registerkarte. Wenn Sie das target-Attribut verwenden, können Sie dessen Wert auf _blank setzen. Je nach Konfiguration Ihres Browsers wird dies auf eine andere Registerkarte oder ein anderes Fenster umgeleitet.

Datenattribut

HTML bietet auch benutzerdefinierte Datenattribute, mit denen Sie in HTML-Tags auf Sie bezogene Informationen hinzufügen können. Diese sind nicht HTML5-spezifisch und können für alle HTML-Elemente verwendet werden. Das data - * Attribut hilft uns beim Anpassen unserer eigenen benutzerdefinierten Datenattribute. Es kann die Daten privat auf der Seite oder in der Anwendung speichern.

Zum Anpassen werden die Daten in zwei Teile unterteilt:

  1. Attributname: Der Name muss mindestens ein Zeichen lang sein und darf keine Großbuchstaben enthalten. Diesem Namen kann auch 'data-' vorangestellt werden.
  2. Attributwert: Der Wert für ein Attribut kann eine beliebige Zeichenfolge sein.

Die Syntax für das Datenattribut lautet wie folgt:

  • Gitanjali

    • DOM-Attributeigenschaft

    Um die NamedNodeMap-Objekte abzurufen, sollten die Attributeigenschaften in HTML DOM verwendet werden. Es wird die Gruppe der Knotenattribute zurückgegeben. Die NamedNodeMap stellt auch die Auflistung von Attributobjekten dar und kann über die Indexnummer aufgerufen werden. Diese Indexnummer beginnt bei 0.

    Die Syntax hierfür lautet: node.attributes

    Der zurückgegebene Wert sind die NamedNodeMap-Objekte, die in der Knotensammlung vorhanden sind. Wenn der Benutzer Internet Explorer 8 oder eine der früheren Versionen verwendet, gibt die Eigenschaft attributes alle möglichen Attribute für ein Element zurück. Dies kann zu mehr Werten als erwartet führen.

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Globale Attribute

    HTML bietet auch globale Attribute, die mit jedem HTML-Element verwendet werden können. Die Attribute sind wie folgt.

    • Zugriffstaste: Gibt eine Tastenkombination an, mit der ein Element aktiviert oder fokussiert werden kann.
    • Übersetzen: Wenn dieses Attribut verwendet wird, gibt es an, ob der Inhalt des Elements übersetzt werden soll oder nicht.
    • Klasse: Gibt einen oder mehrere Klassennamen für ein Element an.
    • Titel: Dieses Attribut gibt zusätzliche Informationen zu einem Element an.
    • Contenteditable: Um festzulegen, ob der Inhalt bearbeitet werden kann oder nicht, kann dieses Attribut verwendet werden.
    • Tabindex: Gibt die Tabulatorreihenfolge eines Elements an.
    • Dir: Gibt die Textrichtung für jeden Inhalt eines Elements an.
    • Rechtschreibprüfung: Der Benutzer kann explizit festlegen, ob Rechtschreibung und Grammatik überprüft werden sollen oder nicht.
    • Ziehbar: Gibt an, ob ein Element ziehbar sein soll oder nicht.
    • Dropzone: Gibt an, ob die gezogenen Daten beim Ablegen kopiert, verschoben oder verknüpft werden.

    Ereignisattribute

    HTML kann bei bestimmten Ereignissen Aktionen auslösen. Die Ereignisattribute können wie folgt lauten.

    Onload: Wird ausgelöst, nachdem die Seite vollständig geladen wurde.

    Onmessage: Dies kann als Skript bezeichnet werden, das ausgeführt wird, wenn die Nachricht ausgelöst wird.

    Onstorage: Dies ist ein Skript, das ausgeführt wird, wenn ein Webspeicherbereich aktualisiert wird.

    Onerror: Dieses Skript wird ausgeführt, wenn ein Fehler auftritt.

    Onpagehide: Dieses Skript kann verwendet werden, wenn ein Benutzer von einer Seite weg navigieren kann.

    Formularereignisattribute

    Diese Ereignisse werden durch Aktionen in einem HTML-Formular ausgelöst.

    Unschärfe: Wird ausgelöst, sobald das Element den Fokus verliert.

    Onchange: Wird ausgelöst, sobald sich der Wert eines Elements ändert.

    Oncontextmenu: Wird ausgeführt, wenn ein Kontextmenü ausgelöst wird.

    Onfocus: Wird ausgelöst, sobald das Element den Fokus erhält.

    Oninput: Das Skript muss ausgeführt werden, wenn das Element eine Eingabe erhält.

    Onsearch: Dies wird ausgelöst, wenn der Benutzer etwas in das Suchfeld schreibt.

    Oninvalid: Dies wird ausgelöst, wenn ein eingegebenes Element ungültig ist.

    Wichtige Ereignisattribute

    Onkeydown: Wird ausgelöst, wenn eine Taste gedrückt wird.

    onkeypress: Dies wird ausgelöst, wenn eine Taste gedrückt wird.

    Onkeyup: Wird ausgelöst, wenn ein Benutzer eine Taste loslässt.

    Mausereignisattribute

    Onclick: Dies wird ausgelöst, wenn die Maus auf ein Element klickt.

    Onmousemove: Wird ausgelöst, wenn sich der Mauszeiger über einem Element befindet.

    Onmouseip: Wird ausgelöst, wenn eine Maustaste über einem Element losgelassen wird.

    Onwheel: Wird ausgelöst, wenn das Mausrad über einem Element nach oben oder unten rollt

    Ereignisattribute ziehen

    Ondrag: Dies wird ausgelöst, wenn ein Element gezogen wird.

    Ondragleave: Das Skript wird ausgeführt, wenn ein Element ein gültiges Ablageziel verlässt.

    Ondrop: Wird ausgelöst, wenn das gezogene Element abgelegt wird

    Onscroll: Das Skript wird ausgeführt, wenn die Bildlaufleiste eines Elements gescrollt wird.

    Schlussfolgerung - HTML-Attribute

    HTML ist die älteste Technologie, mit der verschiedene Webanwendungen erstellt werden. Mit der Zeit hat sich HTML allmählich weiterentwickelt und bietet eine Vielzahl von Funktionen für die vorhandenen Elemente. Es bietet eine Vielzahl von Attributen, die dazu beitragen, die Anwendung effektiver zu gestalten. Dazu gehören Kernattribute, die als Basisattribute am häufigsten verwendet werden. Es bietet auch Internationalisierungsattribute, mit denen Sprachänderungen möglich sind. Das Datenattribut hilft dabei, Daten zu speichern und so anzupassen, wie es der Benutzer möchte. Mit all diesen hat es auch globale Attribute, die mit jedem Element und überall verwendet werden können. Es hat auch Ereignisattribute, die ausgelöst werden, wenn irgendeine Art von Ereignis stattfindet. Dadurch wird die Webanwendung oder Webseite sehr interaktiv. HTML erweist sich daher aufgrund all dieser Merkmale immer noch als das Spiel der Entwicklung von Webanwendungen. Mit diesen macht das mit CSS verwendbare style-Attribut die Verwendung schöner und attraktiver. Nutzen Sie also alle vorhandenen Attribute und nutzen Sie ganz einfach eine tolle Webanwendung Ihrer Wahl.

    Empfohlene Artikel

    Dies war eine Anleitung zu HTML-Attributen. Hier haben wir die Konzepte und verschiedenen Attribute von HTML besprochen. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -

    1. Was ist HTML in einfachen Worten?
    2. Erfahren Sie, wie HTML funktioniert
    3. Was ist XML?
    4. Top HTML-Listenstile
    5. Vergleich von HTML und XML

    Kategorie:

    Web-Entwicklungstools