HTML-Attribute erklärt

HTML-Elemente können Attribute haben, die zusätzliche Informationen zum Element enthalten.

HTML-Attribute werden im Allgemeinen in Name-Wert-Paaren und immer im Eröffnungs-Tag eines Elements angezeigt. Der Attributname gibt an, welche Art von Informationen Sie über das Element bereitstellen, und der Attributwert ist die tatsächliche Information.

Beispielsweise erstellt ein anchor ( ) -Element in einem HTML-Dokument Links zu anderen Seiten oder anderen Teilen der Seite. Sie verwenden das hrefAttribut im Eröffnungs- Tag, um dem Browser mitzuteilen, wohin der Link einen Benutzer sendet.

Hier ist ein Beispiel für einen Link, der Benutzer zur Homepage von freeCodeCamp sendet:

Click here to go to freeCodeCamp!

Beachten Sie, dass der Attributname ( href) und der Wert („www.freeCodeCamp.org“) durch ein Gleichheitszeichen getrennt sind und Anführungszeichen den Wert umgeben.

Es gibt viele verschiedene HTML-Attribute, aber die meisten funktionieren nur mit bestimmten HTML-Elementen. Beispielsweise hreffunktioniert das Attribut nicht, wenn es in einer Öffnung platziert wird

Etikett.

Im obigen Beispiel kann der dem hrefAttribut angegebene Wert ein beliebiger gültiger Link sein. Einige Attribute verfügen jedoch nur über eine Reihe gültiger Optionen, die Sie verwenden können, oder Werte müssen in einem bestimmten Format vorliegen. Das langAttribut teilt dem Browser die Standardsprache des Inhalts in einem HTML-Element mit. Die Werte für das langAttribut sollten Standardsprache oder Ländercodes verwenden, z. B. enfür Englisch oder itItalienisch.

Boolesche Attribute

Einige HTML-Attribute benötigen keinen Wert, da sie nur eine Option haben. Diese werden als Boolesche Attribute bezeichnet. Das Vorhandensein des Attributs in einem Tag wendet es auf dieses HTML-Element an. Es ist jedoch in Ordnung, den Attributnamen zu schreiben und ihn auf die eine Option des Werts zu setzen. In diesem Fall entspricht der Wert normalerweise dem Attributnamen.

Beispielsweise kann das Element in einem Formular ein requiredAttribut haben. Dazu müssen Benutzer dieses Element ausfüllen, bevor sie das Formular senden können.

Hier sind Beispiele, die dasselbe tun:

Weitere Informationen zu den Attributen ,,, src und roll finden Sie hier:

Attribut

src Attribut

Rollattribut

Attribut

Lassen Sie uns nun mehr über einige andere HTML-Attribute erfahren:

P Attribut ausrichten

Wichtig

Dieses Attribut wird in HTML5 nicht unterstützt. Es wird empfohlen, die text-alignCSS-Eigenschaft zu verwenden.

So richten Sie den Text in a aus

Syntax

Lorem Ipsum...

Attributes

  • left - Text aligns to the left
  • right - Text aligns to the right
  • center - Text aligns to the center
  • justify - All lines of text have equal width

Example

Paragraph align attribute example

Img Src Attribute

The attribute refers to the source of the image you want to display. The img tag will not display an image without the src attribute. However, if you set the source to the location of the image, you can display any image.

There is an image of the freeCodeCamp Logo located at //avatars0.githubusercontent.com/u/9892522?v=4&s=400

You can set that as the image using the src attribute.

  Img Src Attribute Example   

The above code displays like this:

Original text


The freeCodeCamp Avatar

The src attribute is supported by all browsers.

You can also have a locally hosted file as your image.

For example, Change my color

function redify(){ let text = document.querySelector('#text'); text.style.color = "red"; }

Using raw JavaScript onclick attribute:

Hello World

Img Align Attribute

The align attribute of an image specifies where the image should be aligned according to the surrounding element.

Attribute Values:

right - Align image to the right left - Align image to the left

top - Align image to the top

bottom - Align image to the bottom

middle - Align image to the middle

For example:

   Img Align Attribute   

This is an example. More text right here

We can also align in right if we want:

This is another example

Please note the align attribute is not supported in HTML5, and you should use CSS instead. However, it is still supported by all the major browsers.

Input Type Attribute

The input type attribute specifies the type of the input the user should put in your form.

text

One line of a text.

  Login:  

password

One line of a text. Text is automatically displayed as a series of dots or asterisks (depends on the browser and OS).

  Password:  

email

The HTML checks if the input matches the e-mail address format ([email protected]).

  E-mail address:  

number

Allow only numeric input. You can also specify the min and max value allowed. The example below check that the input is number between 1 and 120.

  Age:  

radio

Only one option can be selected by the user. The group of radio buttons need to have the same name attribute. You can select automatically one option by using checked property (in example below the value Blue is selected).

  Red Green Blue 

checkbox

User can select zero or more options from the group of checkboxes. You can use checked property here too for one or more options.

  english spanish french 

button

The input is displayed as button, the text which should be displayed in the button is in value attribute.

submit

Displays the submit button. The text which should be displayed in the button is in value attribute. After clicking on the button, the HTML do the validation and if it passes, the form is submitted.

reset

Displays the reset button. The text which should be displayed in the button is in value attribute. After clicking on the button, all values from the form are deleted.

There are more types elements.

Other HTML Attributes:

src attribute

roll attribute

attribute

attribute